daoshiyuyue-teacher/pages/wenjuan/wenjuan.vue

<template>
	<view class="wenjuan">
		<view class="title_wrap">
			<view class="title">
				{{title}}
			</view>
			<view class="notice">
				<text>注意事项：</text>
				<view class="item" v-for="(item,index) in notice" :key="index">
					{{item}}
				</view>
			</view>
		</view>

		<view class="wrap">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_title">
					<text class="star" v-if="item.is_must == 1">*</text>
					<text>{{index+1}}、{{item.title}}</text>
				</view>
				<u-input :disabled="!status" border min="0" max="25" type="number" placeholder="请输入分值" value=""
					v-model="form[index]" @blur="change(item,index)" />
			</view>
		</view>
		<view class="btn" v-if="status" @click="confirm">
			提交
		</view>
		<view class="wraning" v-else>
			您已完成评价，不可再次评价！
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				form: {},
				title: '',
				warn: false,
				id: '',
				notice: '',
				status: true,
				mine_id: ''
			}
		},
		async onLoad(options) {
			this.mine_id = options.id
			await this.getList()
			// this.getStatus()
			console.log(this.$store.state.vuex_user, 'this.$store.state.vuex_user')
		},
		methods: {
			getList() {
				this.$u.get('/answer/question', {
					type: 1
				}).then(res => {
					this.list = res.data.list
					this.title = res.data.title
					this.id = res.data.id
					this.notice = res.data.announcements
					console.log(res, 'res')
					this.getStatus()
				})
			},
			getStatus() {
				this.$u.get('/answer/is-answer-status', {
					question_id: this.id,
					teacher_id: this.mine_id
				}).then(res => {
					if (res.data.msg) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}

					this.status = res.data.status
					console.log(res, 'res')
				})
			},
			//input框失去焦点
			change(item, index) {
				console.log(this.form[index],'fushu')
				if (item.is_must == 1) {
					if (Number(this.form[index])!=0 && !this.form[index]) {
						this.warn = true
						let message = '请完成第' + (index + 1) + '条的填写'
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}					
				}
				if (Number(this.form[index]) > item.max_point || Number(this.form[index]) < item.min_point) {
					console.log(this.form[index],'fushu')
					this.form[index] = ''
					uni.showToast({
						title: '输入分值超出范围，请重新输入',
						icon: 'none'
					})
					console.log(this.form[index])
				}
				this.form[index] = parseInt(this.form[index])
			},
			confirm() {
				let that = this
				console.log(this.form, 'form')
				try {
					this.list.forEach((item, index) => {
						if (item.is_must == 1 && (Number(this.form[index])!=0 && !this.form[index])) {
							let message = '请完成第' + (index + 1) + '条的填写'
							uni.showToast({
								title: message,
								icon: 'none'
							})
							throw new Error('ending')
						} else {


						}
					})
					uni.showModal({
						title: '提交确认',
						content: '确认提交问卷？',
						showCancel: true, //是否显示取消按钮
						cancelText: "否", //默认是“取消”
						// cancelColor: 'skyblue', //取消文字的颜色
						confirmText: "是", //默认是“确定”
						// confirmColor: 'skyblue', //确定文字的颜色
						success: function(res) {
							if (res.cancel) {
								//点击取消,默认隐藏弹框
							} else {
								//点击确定
								let params = {
									question_id: that.id,
									data: [],
									teacher_id: that.mine_id
								}
								for (let i in that.form) {
									params.data.push(that.form[i])
								}
								console.log(params, 'params')
								that.$u.post('/answer/answer', params).then(res => {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									// that.getStatus()
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								})
							}
						},
					})

				} catch (e) {
					if (e.message == "ending") {
						console.log("结束了");
					} else {
						console.log(e.message);
					}
				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.wenjuan {
		padding: 0 15px 20px;

		.title_wrap {
			border-bottom: 1px dashed #999999;

			// padding-bottom: 20px;
			.title {
				text-align: center;
				font-size: 18px;
				font-weight: 600;
				padding-bottom: 10px;
			}

			.notice {
				// color: #999999;
				background-color: #f0f0f0;
				padding: 5px;
				border-radius: 6px;
				margin-bottom: 10px;
				font-size: 12px;
				line-height: 22px;

				text {
					font-size: 14px;
					font-weight: 550;
				}
			}
		}

		.wrap {
			margin-top: 15px;
			margin-bottom: 30px;

			.item {
				margin-bottom: 30px;

				.item_title {
					.star {
						color: red;
						margin-right: 2px;
					}

					margin-bottom: 10px;
				}

				u-input {
					margin-top: 10px;
					border: 1px solid;
					// width: 100px;
					width: 50%;
					padding: 5px 8px;
					height: 30px;
					box-sizing: border-box;
				}
			}
		}

		.btn {
			height: 40px;
			background-color: #D12727;
			color: #fff;
			font-size: 16px;
			line-height: 40px;
			text-align: center;
			border-radius: 20px;
		}

		.wraning {
			color: #CE3C39;
			font-size: 14px;
			text-align: center;
		}
	}
</style>