hptwxMiniProgram/pages/app_views/satisfaction_evaluation/satisfaction_evaluation.vue

<template>
	<view class="satisfaction_evaluation">
		<template v-if="itemList.length>0">
			<view class="checklist" v-for="(checklist,idx) in itemList" :key="idx">
				<view class="title">{{checklist.itemTitle}}</view>
				<view class="item-cont" v-if="checklist.children&&checklist.children.length>0">
					<view class="checklistItem" v-for="(checklistItem,itemIdx) in checklist.children" :key="itemIdx">
						<view class="itemTitle">{{checklistItem.itemTitle}}</view>
						<view  class="point-cont" v-if="checklistItem.pointList&&checklistItem.pointList.length>0">
							<view class="point" v-for="(point,pointIdx) in checklistItem.pointList" :key="pointIdx">
								<view class="pointContent">{{point.pointContent}}</view>
								<uni-rate v-model="point.score" @change="changePointRate(point)" />
							</view>
						</view>
					</view>				
				</view>
			</view>
			<uni-card margin="0">
				<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="80">
					<uni-forms-item label="卡号" name="cardNo" required>
					  <uni-easyinput v-model="formData.cardNo" placeholder="请填写卡号" />
					</uni-forms-item>	
					<uni-forms-item label="手机号码" name="phoneNumber">
					  <uni-easyinput v-model="formData.phoneNumber" placeholder="手机号码" />
					</uni-forms-item>											
					<uni-forms-item label="备注" name="remark">
					  <uni-easyinput v-model="formData.remark" type="textarea" :maxlength="-1" autoHeight placeholder="备注" />
					</uni-forms-item>	
				</uni-forms>	
		        <button type="primary" @click="onSubmit" class="submit-BT">提交</button>									
			</uni-card>
		</template>
		<template v-else>没有可处理的清单^-_-^</template>
	</view>
</template>

<script>
	import {getSatisfactionChecklist,batchSatisfactionChecklist} from '@/api/aqpt/checklist.js'
	export default {
		data() {
			return {
				itemList:[],
				pointList:[],				
				formData:{
					phoneNumber:"",
					cardNo:""
				},
				rules:{
					cardNo:{
						rules:[{
							required: true,
							errorMessage: '请填写卡号',
						},]
					}
				},
				qrcode:{},
				unionid:undefined,
				checklistId:undefined,
				checklistTitle:undefined
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad({id}) {
			this.unionid=uni.getStorageSync('unionid')
			let qrcode=uni.getStorageSync('qrcode')
			this.checklistId=id;
			this.qrcode=qrcode;
			this.getView()
		},
		methods: {
			getView(){
				getSatisfactionChecklist(this.checklistId).then((res)=>{
					this.itemList=res.data.itemList
					this.checklistTitle=res.data.checklistTitle
				})
			},
			changePointRate(point){
				let idx=-1;
				for(let i=0;i<this.pointList.length;i++){
					if(this.pointList[i].pointId===point.pointId){
						idx=i
					}					
				}
				if(idx===-1){
					this.pointList.push(point)
				}else{
					this.pointList[idx]=point
				}
			},
			onSubmit(){
				let recordList=JSON.parse(JSON.stringify(this.pointList))
					this.$refs.form.validate().then(res=>{
						batchSatisfactionChecklist({
							wxId:this.unionid,
							wxName:"微信用户",
							phoneNumber:this.formData.phoneNumber,
							checklistId:this.checklistId,
							checklistTitle:this.checklistTitle,
							targetId:this.qrcode.targetId,
							targetType:this.qrcode.targetType,
							targetTitle:this.qrcode.riskPointTitle,
							targetGroupId:this.qrcode.groupId,
							targetGroupName:this.qrcode.groupName,
							remark:this.formData.remark,
							recordList:recordList
						}).then((res)=>{
							uni.showToast({
								icon:"none",
								mask:true,
								title:'评价成功'
							})	
							uni.$emit('type',3)
							uni.switchTab({
								url:'/pages/history/history'
							})
						})
					}).catch(err =>{
						uni.showToast({
							icon:"none",
							title:'表单信息错误'
						})
					})

			}
		}
	}
</script>

<style lang="scss" scoped>
.satisfaction_evaluation{
	padding: 20rpx;
	margin-bottom: 100rpx;
	.checklist{
		.title{
			color: #333;
			font-size: 36rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
		.item-cont{
			padding-left: 20rpx;
			.checklistItem{
				.itemTitle{
					color: #424242;
					font-size: 32rpx;	
					line-height: 1;	
					padding: 10rpx 0;
				}
			}
			.point-cont{
				padding-left: 30rpx;
				.point{
					display: flex;						
					color: #666;
					font-size: 28rpx;	
					line-height: 1;	
					padding: 10rpx 0;	
					.pointContent{
						flex: 1;
					}
				}
			}
		}
	}
	.submit-BT {
		height: 72rpx;
		line-height: 72rpx;	
		text-align: center;							
		background:#3D90F4;
		border-radius: 42rpx;	
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin: 50rpx auto;
	}
}
</style>