问卷

packages/surveyFill/index.vue

@@ -45,8 +45,8 @@
 			</view> -->
 
 			<!-- 问卷表单 -->
-			<view class="survey-form">
-				<view v-for="(q, index) in questionList" :key="q.id" class="question-item">
+			<view class="survey-form" :class="{ 'survey-form--last-input-focused': lastInputFocused }">
+				<view v-for="(q, index) in questionList" :key="q.id" :id="'question-'+q.id" class="question-item">
 					<view class="question-header">
 						<view class="question-number">{{ index + 1 }}</view>
 						<view class="question-title">
@@ -69,7 +69,8 @@
 									:name="opt.value">{{ opt.value }}</u-radio>
 							</u-radio-group>
 							<u-input v-if="q.allow_input" v-model="q.allow_input_text" type="text"
-								:placeholder="'请输入'" />
+								:placeholder="'请输入'" :adjust-position="false" :cursor-spacing="80"
+								@focus="onInputFocus(q)" @blur="onInputBlur" />
 						</view>
 
 						<!-- 多选题 -->
@@ -87,7 +88,8 @@
 								</label>
 							</checkbox-group>
 							<u-input v-if="q.allow_input" v-model="q.allow_input_text" type="text"
-								:placeholder="'请输入'" />
+								:placeholder="'请输入'" :adjust-position="false" :cursor-spacing="80"
+								@focus="onInputFocus(q)" @blur="onInputBlur" />
 						</view>
 
 						<!-- 多维度题目 -->
@@ -107,10 +109,12 @@
 
 						<!-- 文本题 -->
 						<u-input v-if="q.edit_input === 'text'" v-model="q.value" type="text"
-							:placeholder="q.help||'请输入'" @input="onValueChange" />
+							:placeholder="q.help||'请输入'" :adjust-position="false" :cursor-spacing="80"
+							@input="onValueChange" @focus="onInputFocus(q)" @blur="onInputBlur" />
 						<!-- 文本域 -->
 						<u-input v-if="q.edit_input === 'textarea'" v-model="q.value" type="textarea"
-							:placeholder="q.help||'请输入'" :maxlength="9999" @input="onValueChange" />
+							:placeholder="q.help||'请输入'" :maxlength="9999" :adjust-position="false" :cursor-spacing="80"
+							@input="onValueChange" @focus="onInputFocus(q)" @blur="onInputBlur" />
 						<!-- 评分题 -->
 						<!-- <u-rate v-if="q.edit_input === 'rating'" v-model="answers[index]" :count="q.select_item.maxRating"
 							@change="onValueChange"></u-rate> -->
@@ -162,6 +166,7 @@
 				currentDateIndex: -1,
 				answeredCount: 0,
 				course_id:false,
+				lastInputFocused: false,
 				params: {
 					year: true,
 					month: true,
@@ -189,6 +194,38 @@
 			this.getDetail(this.id)
 			this.updateProgress();
 		},
+		onShow() {
+			// 真机上 blur 可能不触发，改用键盘高度变化：键盘收起时去掉底部留白
+			this._keyboardListener = (res) => {
+				if (res && res.height === 0) {
+					this.lastInputFocused = false
+				}
+			}
+			uni.onKeyboardHeightChange(this._keyboardListener)
+		},
+		onUnload() {
+			if (this._keyboardListener) {
+				uni.offKeyboardHeightChange(this._keyboardListener)
+			}
+		},
+		onShareAppMessage() {
+			let path = '/packages/surveyFill/index?id=' + this.id
+			if (this.course_id) path += '&course_id=' + this.course_id
+			return {
+				path,
+				title: this.survey.title || '课程问卷',
+				imageUrl: '/static/share.jpg'
+			}
+		},
+		onShareTimeline() {
+			let path = '/packages/surveyFill/index?id=' + this.id
+			if (this.course_id) path += '&course_id=' + this.course_id
+			return {
+				path,
+				title: this.survey.title || '课程问卷',
+				imageUrl: '/static/share.jpg'
+			}
+		},
 		methods: {
 			// 获取
 			async getDetail(id) {
@@ -334,6 +371,39 @@
 				}
 				this.answeredCount = count;
 			},
+			onInputFocus(q) {
+				// 输入框获得焦点时，将题目滚动到可见区域，避免键盘弹起时输入框错位
+				if (!q || !q.id) return
+				const isLastInputQuestion = this.isLastInputQuestion(q)
+				if (isLastInputQuestion) {
+					this.lastInputFocused = true
+				}
+				const query = uni.createSelectorQuery().in(this)
+				query.select('#question-' + q.id).boundingClientRect((rect) => {
+					if (rect) {
+						uni.createSelectorQuery().in(this).selectViewport().scrollOffset((scroll) => {
+							if (scroll) {
+								// 最后一题输入框时，多滚动使输入框出现在键盘上方（键盘约300px高）
+								const offsetFromTop = isLastInputQuestion ? 80 : 120
+								const targetScrollTop = scroll.scrollTop + rect.top - offsetFromTop
+								uni.pageScrollTo({
+									scrollTop: Math.max(0, targetScrollTop),
+									duration: 200
+								})
+							}
+						}).exec()
+					}
+				}).exec()
+			},
+			onInputBlur() {
+				this.lastInputFocused = false
+			},
+			isLastInputQuestion(q) {
+				// 判断是否为最后一个包含输入框的题目
+				const hasInput = (item) => item.edit_input === 'text' || item.edit_input === 'textarea' || item.allow_input
+				const inputQuestions = this.questionList.filter(hasInput)
+				return inputQuestions.length > 0 && inputQuestions[inputQuestions.length - 1].id === q.id
+			},
 			onValueChange(e, item) {
 				console.log("value", e,item)
 				if(item){
@@ -630,6 +700,7 @@
 	}
 
 	.survey-form {}
+	.survey-form--last-input-focused { padding-bottom: 450rpx; }
 
 	.question-item {
 		// padding: 30rpx 0;

uview-ui/components/u-input/u-input.vue

@@ -24,6 +24,7 @@
 			:fixed="fixed"
 			:focus="focus"
 			:autoHeight="autoHeight"
+			:adjust-position="adjustPosition"
 			:selection-end="uSelectionEnd"
 			:selection-start="uSelectionStart"
 			:cursor-spacing="getCursorSpacing"
@@ -46,6 +47,7 @@
 			:maxlength="inputMaxlength"
 			:focus="focus"
 			:confirmType="confirmType"
+			:adjust-position="adjustPosition"
 			:cursor-spacing="getCursorSpacing"
 			:selection-end="uSelectionEnd"
 			:selection-start="uSelectionStart"
@@ -213,6 +215,11 @@ export default {
 		showConfirmbar:{
 			type:Boolean,
 			default:true
+		},
+		// 键盘弹起时是否自动上推页面，设为false可避免输入框错位
+		adjustPosition: {
+			type: Boolean,
+			default: true
 		}
 	},
 	data() {