hptwxMiniProgram/pages/app_views/satisfaction_evaluation/satisfaction_evaluation.vue

<template>
	<view class="page">
		<view class="satisfaction_evaluation">
			<template v-if="itemList.length>0">
				<view class="checklist" v-for="(checklist,idx) in itemList" :key="idx">
					<view class="title more">{{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 more">{{checklistItem.itemTitle}}</view>
							<template v-if="type==='app'">
								<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>
							</template>
							<template  v-if="type==='history'">
								<view  class="point-cont" v-if="checklistItem.recordList&&checklistItem.recordList.length>0">
									<view class="point" v-for="(point,pointIdx) in checklistItem.recordList" :key="pointIdx">
										<view class="pointContent">{{point.pointContent}}</view>
										<uni-rate v-model="point.score"  />
									</view>
								</view>
							</template>
						</view>				
					</view>
					<view class="pagemask" v-if="type==='history'"></view>
				</view>
				<view class="form-wrap">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="300" label-position="top">									
						<uni-forms-item label="备注" name="remark">
						  <uni-easyinput v-model="formData.remark" type="textarea" :maxlength="-1" autoHeight placeholder="备注" />
						</uni-forms-item>	
					</uni-forms>	
					<button v-if="type==='app'" type="primary" @click="onSubmit" class="submit-BT">提交</button>				
				</view>
			</template>
			<template v-else>没有可处理的清单^-_-^</template>
		</view>		
	</view>
</template>

<script>
	import {getScoreView,getScoreRecordView,batchSatisfactionChecklist} from '@/api/aqpt/checklistScore.js'
	export default {
		data() {
			return {
				type:'app',
				itemList:[],
				pointList:[],				
				formData:{
					phoneNumber:"",
					cardNo:"",
					remark:""
				},
				rules:{
					cardNo:{
						rules:[{
							required: true,
							errorMessage: '请填写卡号',
						},]
					}
				},
				qrcode:{},
				unionid:undefined,
				checklistId:undefined,
				checklistTitle:undefined
			}
		},
		onReady() {
			this.$nextTick(()=>{
				this.$refs.form?.setRules(this.rules)				
			})
		},
		onLoad({id,recordId,type}) {
			this.unionid=uni.getStorageSync('unionid')
			let qrcode=uni.getStorageSync('qrcode')
			this.checklistId=id;
			this.qrcode=qrcode;
			this.recordId=recordId
			this.type=type;
			this.getView(type)
		},
		methods: {
			getView(type){
				if(type==='app'){
					getScoreView(this.checklistId).then((res)=>{
						this.itemList=res.data.itemList
						this.checklistTitle=res.data.checklistTitle
					})
					
				}else{
					getScoreRecordView(this.recordId,this.checklistId).then((res)=>{
						this.itemList=res.data.itemList
						this.checklistTitle=res.data.checklistTitle
						this.formData.remark=res.data.remark
					})
				}

			},
			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>
.page{
	background-color: #F5F6F8;
	padding: 20rpx;
}
.satisfaction_evaluation{
	padding: 20rpx;
	margin-bottom: 60rpx;
	background-color: #fff;
	min-height: 100vh;
	box-sizing: border-box;
	.checklist{
		.title{
			color: #222222;
			font-size: 32rpx;
			height: 98rpx;
			line-height: 98rpx;
			border-bottom: 1px dashed #E8E8E8;				
		}
		.more{
			background-image: url('/static/tree_more.png');
			background-size: 30rpx 30rpx;
			padding-left: 40rpx;
			background-position: center left;
			background-repeat: no-repeat;
		}		
		.item-cont{
			padding-left: 20rpx;
			border-bottom: 1px dashed #E8E8E8;				
			.checklistItem{
				.itemTitle{
					color: #222222;
					font-size: 32rpx;	
					height: 98rpx;
					line-height: 98rpx;
				}
			}
			.point-cont{
				padding-left: 30rpx;
				.point{
					display: flex;						
					color: #222222;
					font-size: 28rpx;	
					height: 98rpx;
					line-height: 98rpx;
					align-items: center;
					.pointContent{
						flex: 1;
					}
				}
			}
		}
	}
	.form-wrap{
		margin-top: 100rpx;
	}
	.pagemask{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255,255,255,0.1);
		z-index: 99;
	}
	.submit-BT {
		width: 750rpx;
		color: #4D73FF;
		text-align: center;
		font-size: 32rpx;
		padding-bottom: 68rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		box-shadow: 0px 0px 12px 0px #0000000A;
		border-radius: 8px 8px 0px 0px
	}
}
</style>