web-checkList-miniProgram/pages/checkList/checkList.vue

<template>
	<view>
		<uni-list-item :title="user.name" :note="user.note" 
			:thumb="user.avatar" @click="showDetail(user)"
			thumb-size="lg" rightText="详情" showArrow  clickable/>		
		<uni-card v-show="detailModel" padding="0">
			<target-list-doctor v-if="targetType===3" :target="target" />
			<target-list-grid   v-if="targetType===1" :target="target" />
			<target-list-riskPiont   v-if="targetType===2" :target="target" />
		</uni-card>	
		<uni-card padding="0" v-if="checkList&&checkList.length>0" isFull :isShadow="false">
			<target-list-checklist v-model="checklistId"  :data="checkList" @change="changeChecklist" v-if="checkList.length>1" />
			<template v-if="checkList.length===1&&status===0">
				<uni-card isFull padding="10px 0">
					<p>请对本次服务进行整体评价打分</p>
				  <view class="uni-rate-container">
					<uni-rate v-model="formData.score" />
				  </view>
				</uni-card>		
				<uni-card isFull padding="10px 0">
					<check-list-item :data="pointList" @change="changePoint" />
				</uni-card>
				<uni-card isFull padding="10px 0" v-show="appraiseAble">
					<appraise-form @submit="appraiseSubmit" ref="appraise-form"  />
				</uni-card>	
			</template>
			<template v-if="checkList.length===1&&status===1">已评价</template>
		</uni-card>	
		<uni-drawer ref="drawePoint" mode="left" :width="290">
			<uni-card isFull padding="10px 0">
				<p>请对本次服务进行整体评价打分</p>
			  <view class="uni-rate-container">
			  	<uni-rate v-model="formData.score" />
			  </view>
			</uni-card>		
			<uni-card isFull padding="10px 0">
				<check-list-item :data="pointList" @change="changePoint" />
			</uni-card>
			<uni-card isFull padding="10px 0" v-show="appraiseAble">
				<appraise-form @submit="appraiseSubmit" ref="appraise-form"  />
			</uni-card>		
		</uni-drawer>		
		<uni-popup ref="popup-phone" type="center" :animation="false" :maskClick="false" :is-mask-click="false" class="popup-phone">
			<uni-card isFull padding="10px 0">
				<div class="popup-phone-container">
					<view class="title">温馨提示！</view>
					<view class="tip">请授权电话号码，再使用</view>
					<view class="popup-phone-footer">
						<button @click="close">取消</button>
						<button class="confirm"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认</button>					
					</view>				
				</div>
			</uni-card>
		</uni-popup>
	</view>
</template>
<script>
	import targetListDoctor from '@/components/targetListDoctor/targetListDoctor.vue'
	import targetListGrid from '@/components/targetListGrid.vue'
	import targetListRiskPiont from '@/components/riskPiont.vue'
	import targetListChecklist from '@/components/targetListChecklist.vue'
	import checkListItem from '@/components/ChecklistItem.vue'
	import appraiseForm from '@/components/appraise.vue'
	import { getByQr ,wxLogin,wxDecryptUserInfo,createChecklistRecord,getChecklistByQr} from '@/api/openApi.js'
	export default {
		data() {
			return {
				appraiseAble:false,
				isAuthorize:false,
				code:undefined,
				ocId:undefined,
				sessionKey:undefined,
				phoneNumber:undefined,				
				target:"",
				itemList:[],
				checkList:[],
				pointList:[],
				detailModel:false,
				checklistId:undefined,
				pointId:undefined,
				targetType:undefined,
				targetId:undefined,
				piontInfo:{},
				status:0,
				user:{
					name:"",
					avatar:require('@/static/logo.png'),
					note:""
				},
				formData:{
					score:0
				}
			}
		},
		components:{
			targetListDoctor,
			targetListGrid,
			targetListRiskPiont,
			targetListChecklist,
			checkListItem,
			appraiseForm
		},
		onLoad(query) {
			this.init(query)	
		},
		methods: {
			init(query){
				const code = decodeURIComponent(query.code) // 获取到二维码原始链接内容
				const ocId = decodeURIComponent(query.ocId)	
				this.code=code
				this.ocId=ocId
				uni.clearStorageSync()
				uni.setStorageSync("qrcode",{
					code,ocId
				})
				this.showModel(ocId, code)
				this.login()
			},
			showModel(ocId, qrCode) {
			  getByQr(ocId, qrCode).then((resp) => {
				const { code, data, msg } = resp
				if (code === 0) {
					if(!data){
						uni.showToast({
							icon:'none',
							title:"未获取清单信息"
						})
						return						
					}
					//1-网格 3-医生
				  let targetType=data.targetType;
				  this.targetType=targetType
				  this.targetId=data.targetId
				  this.target=data.target
				  if(targetType===3){
					  if(data.target&&data.target.doctorAvatar){
						  this.user.avatar=data.target.doctorAvatar;
					  }	
					  this.user.name=data.target.doctorName;
					  this.user.note=data.target.doctorDesc;
				  }else if(targetType===1){
					  this.user.name=data.target.gridTitle;
					  this.user.note=data.target.gridDesc;
				  }
				  this.itemList=data.itemList
				  this.checkList=data.checklist
				  if(data.checklist&&data.checklist.length===1){
					  this.changeChecklist(data.checklist[0])
				  }
				}
			  })
			},
			showDetail(user){
				this.detailModel=!this.detailModel
			},
			login(){
				let self=this;
				uni.getProvider({
					service:"oauth",
					success(res){
						let provider=res.provider
						uni.login({
							provider,
							success: function (loginRes) {
								let code=loginRes.code;
								wxLogin(code).then((resp)=>{
									const { code, data, msg } = resp
									if(data){
										if(data&&data.unionid){
											uni.setStorageSync('unionid',data.unionid)
										}
										self.sessionKey=data.session_key	
										self.getUserInfo()
									}
								})
							}						
						})					
					}
				})
			},
			getUserInfo(){
				const self=this;
				const sessionKey=this.sessionKey;
				 uni.showModal({
					title:"温馨提示！",
					content:"请授权使用",
					success(res) {
						if(res.confirm){
							self.isAuthorize=true;
							uni.getUserProfile({
								desc:"用于用户核实信息！",
								success(res) {
									const { encryptedData, iv, rawData, signature, userInfo } = res;
									self.userInfo=userInfo
								},
								fail(res) {
									self.isAuthorize=false;
									uni.showToast({
										title:"你拒绝了授权，无法使用评价功能",
										icon:'none',
										duration:2000
									})
								}
							})						
						}else if(res.cancel){
							self.isAuthorize=false;
							uni.showToast({
								title:"你拒绝了授权，无法使用评价功能",
								icon:'none',
								duration:2000
							})
						}
					}
				 })				
			},
			close() {
				this.$refs['popup-phone'].close();
				this.isAuthorize=false;
			},	
			getPhoneNumber(e){
				this.isAuthorize=true;
				this.$refs['popup-phone'].close();
				const sessionKey=this.sessionKey;
				const { encryptedData, iv, code} = e.detail;
				wxDecryptUserInfo({
					encryptedData, iv,sessionKey
				}).then((resp)=>{
					this.phoneNumber=resp.data&&resp.data.phoneNumber||"";
				})
			},
			changeChecklist(item){
				  let qrcode=uni.getStorageSync('qrcode')
				  if(this.checkList.length>1){
						if(!this.isAuthorize){
							uni.showToast({
								icon:'none',
								title:"未授权，不可以评价",
								duration:1500,
							})
							setTimeout(()=>{
								this.getUserInfo();
							},2000)
							return
						}
				  }	
				if(this.targetType===2){
					uni.setStorageSync('checklistData',{
						ocId:qrcode.ocId,
						targetId:this.targetId, 
						checklistId:item.checklistId
					})
					uni.navigateTo({
						url:'/pages/riskPiont/riskPiont'
					})
					return
				}
				this.appraiseAble=true;
				this.checklistId=item.checklistId
				getChecklistByQr(qrcode.ocId,this.targetId, item.checklistId).then((resp) => {
					const { code, data, msg } = resp
					if(code===0){
						if(!data){
							uni.showToast({
								icon:'none',
								title:"未获取到清单数据"
							})
							return
						}
						if(this.checkList&&this.checkList.length>1){
							this.$refs.drawePoint.open()
						}						
						const itemList=data.itemList;
						this.pointList=itemList;
					}
				})				
			},
			changePoint(item){
				console.log({
					items:JSON.parse(JSON.stringify(item))
				})			
				this.piontInfo=item
			},
			appraiseSubmit(data){	
				if(!this.isAuthorize){
					uni.showToast({
						icon:'none',
						title:"未授权，不可以评价",
						duration:1500,
					})
					setTimeout(()=>{
						this.getUserInfo();
					},2000)
					return
				}			
				const qrcode=uni.getStorageSync('qrcode');
				const unionid=uni.getStorageSync('unionid');
				const params={
					ocId:qrcode.ocId,
					wxId:unionid,
					wxName:this.userInfo.nickName,
					targetType:this.targetType,
					checklistId:this.checklistId,
					score:this.formData.score,
					targetId:this.targetId,
					...data,
					pointRecordList:this.piontInfo
				}
				createChecklistRecord(params).then((resp)=>{
					this.$refs.drawePoint.close();
					this.status=1
					uni.showToast({
						icon:"success",
						title:"评价完成"
					})
					this.formData.score=0	
					this.pointList=[]
					this.$refs['appraise-form'].reset()		
				})
			}			
		}
	}
</script>

<style lang="less" scoped>
	.popup-phone-container{
		width: 420upx;
		.title{
			font-weight: 900;
			font-size: 40upx;
			padding: 10px 0;
			text-align: center;
		}
		.tip{
			font-size: 32upx;
			text-align: center;
		}
		::v-deep .popup-phone-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 10px;
			button{
				font-size: 16px;
				line-height: 2.2;
			}
			.confirm{
				color: #fff;
				background-color: #007aff !important;
				margin-left: 20px;
			}
		}		
	}
	.popup-phone ::v-deep .uni-popup{
		z-index: 9999 !important;
	}
</style>