jzhw_uni/pages/extra/newRevisit/newRevisit.vue

<template>
	<view>
		<!-- 头部背景 -->
		<view class="title"
			style="background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj5.png') no-repeat center center; height: 196rpx;">
			<view class="title-wenzi">
				花王保洁客户回访
			</view>
		</view>
		<view class="top-block">
			<view class="title">尊敬的客户,您的反馈是我们提供更好的服务的基石:</view>
			<view class="slogan">您的满意是我们服务第一优先级</view>
		</view>

		<!-- 服务信息 -->
		<view class="service-block">
			<view class="title">
				<view>服务信息</view>
			</view>
			<view class="content">
				<view class="service-times">
					{{ tradeOrder.serviceNumber }}
				</view>
				<view class="item">
					<text>服务内容：</text>
					{{ tradeOrder.itemName }}
				</view>
				<view class="item">
					<text>服务时间：</text>
					{{ tradeOrder.beginDate }} {{ tradeOrder.serviceTime }}
				</view>
				<!-- <view class="item">
					<text>服务人员：</text>
					{{ tradeOrder.workerName }}
				</view> -->
			</view>
		</view>
		<view class="duoren" v-if="bookServantList.length>1">
			<text>本次服务为多人服务，请为每位服务者评价</text>
		</view>
		<view v-for="(bk, bkindex) in bookServantList" :key="bkindex">
				<!-- 是否满意 -->
				<view class="service-satisfy">
					<view class="satisfy-title">
						<view class="dot"></view>
						<!-- <view class="text">您对本次的服务是否满意？</view> -->
						<view class="name">服务者[{{bk.workerName}}]</view>
						<view class="skill">服务项目:{{bk.skillName}}</view>
						<view class="msg">已对服务者匿名</view>
					</view>
					<view class="satisfy-select">
						<view data-satisfy="1" :class="bk.satisfy == '1' ? 'yes' : ''" @tap="selectSatisfy(1,bk)">满意</view>
						<view data-satisfy="2" :class="bk.satisfy == '2' ? 'no' : ''" @tap="selectSatisfy(2,bk)">不满意</view>
						<view data-satisfy="3" :class="bk.satisfy == '3' ? 'common' : ''" @tap="selectSatisfy(3,bk)">一般</view>
					</view>
					<!-- 满意 -->
					<view class="satisfy-result" v-if="bk.satisfy == 1">
						<view>感谢您的认可，您的认可是我们前行的动力！ 如果有需求，您可以长期购买周期单，可以指定阿姨，价格更优惠！</view>
					</view>
					<!-- 一般 -->
					<view class="satisfy-common" v-if="bk.satisfy == 3">诚邀您对我们提出宝贵意见，我们会积极改进，为您提供更好的服务。</view>
					<!-- 不满意 -->
					<view class="satisfy-common" v-if="bk.satisfy == 2">抱歉给您带来不好的服务体验，我们的工作人员会在第一时间联系您提供后续服务！</view>
				</view>
				<!-- 一般备注 -->
				<view class="remark-wrapper" v-if="bk.satisfy == 3">
					<view class="tips">1. 请输入您想和我们说的话：</view>
					<textarea @input="remarkInput" :data-idx="bkindex"  placeholder="感谢您的耐心与支持" class="textarea" :value="bk.remark"
						placeholder-style="color: #E8E8E8;font-size:30rpx;" />
				</view>

				<!-- 题目 -->
				<view class="topic-block" v-if="bk.satisfy == 2">
					<!-- 题目选择 -->
					<view class="topic-item">
						<view class="issue">1. 请选择您发现的问题？</view>
						<view class="answer">
							<view :class="(item.checked ? 'selected-answer' : 'common-answer') + ' answer-item'"
								:data-checked="item.checked" :data-index="index" @tap="questionClick(bk,index,item.checked,bkindex)"
								v-for="(item, index) in bk.consultList" :key="index">
								{{ item.name }}
							</view>
						</view>
					</view>

					<view class="topic-item" v-for="(item1, index1) in  bk.questionList" :key="index1">
						<view class="issue">
							<view class="dot"></view>
							<view>
								<text>{{ item1.name }}</text>
								<text class="refer">具体问题</text>
							</view>
						</view>

						<view class="answer">
							<view :class="(item1.consultId == item2.id ? 'selected-answer' : 'common-answer') + ' answer-item'"
								:data-id="item2.id" :data-answer="item2.name" :data-index1="index1" @tap="answerClick(bk,item2.id,item2.name,index1,bkindex)"
								v-for="(item2, index2) in item1.children" :key="index2">
								{{ item2.name }}
							</view>
						</view>
					</view>
				</view>

				<view class="remark-wrapper" v-if="bk.satisfy == 2">
			<view class="tips">2. 请输入具体问题描述：</view>
			<textarea  @input="detailInput" :data-idx="bkindex" placeholder="感谢您的耐心与支持" class="textarea" :value="bk.detail"
				placeholder-style="color: #E8E8E8;font-size:30rpx;" />
			<!-- 图片上传 -->
			<view class="upload-wrapper">
				<view class="img-item" v-for="(item, index) in bk.imgList" :key="index">
					<image mode="aspectFill" :src="item" class="user-upload" @tap="previewImg(bk.imgList,item)" :data-img="item"></image>

					<image class="close-img" mode="aspectFill" src="/static/images/icon-close.png" @tap="delImg(bk,index)"
						:data-index="index"></image>
				</view>
				<view class="upload" @tap="uploadImg(bk.imgList)">
					<image mode="aspectFill" src="/static/images/icon-add.png"></image>
					<view>上传照片</view>
				</view>
			</view>
		</view>
		</view>
		<view class="submit-btn" @tap="sumitRevisit" v-if="!isFinished && isCanSumit">提交</view>
		<view class="submit-btn disable-btn" v-else>提交</view>

		<!-- 展示弹框 -->
		<van-overlay :show="showOverLay" @click="onClickHide" z-index=999 root-portal='true'>
			<view class="overLay-block">
				<view class="title-icon">
					<image src="https://mall.zhaijieshi.cc/file/wx-huawang/g.png" style="height:91rpx;width: 129rpx;">
					</image>
				</view>
				<text class="tips-content">
					满意度提交成功
				</text>
				<text class="tips-content1">您的反馈，是我们提升的最大动力～</text>
			</view>
		</van-overlay>

		<!-- 加企微 -->
		<view v-if="qrImg"
			style="display: flex; align-items: center; height: 100%; justify-content: center; flex-direction: column">
			<view class="qr-title">
				<div class="sub-title2">鲸致生活管家</div>
				<div style="padding: 20rpx; height: 400rpx">
					<image class="qrcode" :show-menu-by-longpress="true" :src="qrImg" />
				</div>
				<text class="qr-title1" v-if="qrImg">长按识别二维码</text>
				<text class="qr-title2" v-if="qrImg">添加我的企业微信</text>
			</view>
		</view>

		<!-- 手机号一键授权 -->
		<view v-if="loginShow" @tap="onOverlayHide">
			<view class="wrapper">
				<view class="block">
					<button class="submit-btn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">手机号一键登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../../utils/util.js');
	const api = require('../../../config/api.js');

	//获取应用实例
	const app = getApp();
	export default {
		data() {
			return {
				consultList: [],
				questionList: [],
				imgList: [],
				remark: '',
				detail: '',
				satisfy: '',
				bookTradeNo: '',
				type: '',
				isFinished: false,

				tradeOrder: {
					itemName: '',
					serviceNumber: '',
					beginDate: '',
					serviceTime: '',
					workerName: ''
				},
				bookServantList:[],
				code: '',
				loginShow: false,
				isCanSumit: false,

				//加企微二维码
				qrImg: '',

				obj1: '',
				obj2: '',
				isUnMask: '',
				showOverLay: false,
				orderId: ''
			};
		},
		onLoad: function(options) {
			console.log('options', options);
			if (options) {
				this.setData({
					bookTradeNo: options.id ? options.id : ''
					// type:options.type
				});
			}

			if (options.scene != undefined && options.scene != '') {
				let scene = decodeURIComponent(options.scene);
				this.setData({
					bookTradeNo: scene.split(',')[1]
					// type:options.type
				});
			}
			this.getOrderDetail();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function(options) {
			// this.getOrderDetail();
		},
		methods: {
			getOrderDetail() {
				util.request(
						api.getTradeOrderList, {
							bookDetailId: this.bookTradeNo
						},
						'GET'
					)
					.then((res) => {
						if (res.errno === 0) {
							console.log(res);
							let svlist=res.data.bookServantList;
							svlist.forEach(s=>{
								s.consultList= [];
								s.questionList= [];
								s.imgList= []; 
								s.satisfy= '';
								s.detail='';
								s.remark='';
							})
							this.setData({
								tradeOrder: res.data,
								isCanSumit: true,
								qrImg: res.data.qrUrl,
								orderId: res.data.orderId,
								bookServantList:svlist
							});
							// 获取题目
							this.getConsoultType();
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			getConsoultType() {
				util.request(
						api.getConsoultType, {
							type: this.tradeOrder.goodsType
						},
						'GET'
					)
					.then((res) => {
						if (res.errno === 0) {
							console.log(res);
							let list = res.data[0].children;
							list.forEach((item) => {
							    item.checked = false;
							});
							this.setData({
							    consultList: list
							});
							this.bookServantList.forEach(s=>{ 
								s.consultList=JSON.parse(JSON.stringify(list));;
							})
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			questionClick(row,index,checked,bkindex) {
				console.log(row,index,checked);
				let dd=this.bookServantList;
				dd[bkindex].consultList[index].checked= !checked;
				let current = row.consultList.filter((item) => {
				    return item.checked;
				});
				dd[bkindex].questionList=current;
				this.setData({
				    bookServantList: dd
				});
				
				console.log(current);
				// let checked = e.currentTarget.dataset.checked;
				// let index = e.currentTarget.dataset.index;
				// let item = `consultList[${index}].checked`;
				// this.setData({
				// 	[item]: !checked
				// });
				// let current = this.consultList.filter((item) => {
				// 	return item.checked;
				// });
				// this.setData({
				// 	questionList: current
				// });
			},

			selectSatisfy(type,row) {
				console.log(row)
				row.satisfy=type;
				// let result = e.currentTarget.dataset.satisfy;
				// this.setData({
				// 	satisfy: result
				// });
			},

			remarkInput(e) {
				console.log(e);
				let dd=this.bookServantList; 
				 dd[e.currentTarget.dataset.idx].remark=e.detail.value; 
				 this.setData({
				    bookServantList:dd
				 });
				// this.setData({
				// 	remark: e.detail.value
				// });
			},

			detailInput(e) {
				console.log(e);
				let dd=this.bookServantList; 
				 dd[e.currentTarget.dataset.idx].detail=e.detail.value; 
				 this.setData({
				    bookServantList:dd
				 });
				 console.log(dd[e.currentTarget.dataset.idx].detail);
				// this.setData({
				// 	detail: e.detail.value
				// });
			},

			previewImg(imgList,item) {
				uni.previewImage({
				    current: item,
				    // 当前显示图片的http链接
				    urls: imgList // 需要预览的图片http链接列表
				});
				// let img = e.currentTarget.dataset.img;
				// let imgs = this.imgList;
				// uni.previewImage({
				// 	current: img,
				// 	// 当前显示图片的http链接
				// 	urls: imgs // 需要预览的图片http链接列表
				// });
			},

			delImg(e) {
				let imgs = row.imgList;
				// let index = e.currentTarget.dataset.index;
				imgs.splice(index, 1);
				// this.setData({
				//     imgList: imgs
				// });
			},

			uploadImg(listimg) {
				if (listimg.length >= 9) {
				    uni.showToast({
				        title: '最多上传9张图片',
				        icon: 'none',
				        duration: 2000
				    });
				    return false;
				}
				let that = this;
				let count = 9 - listimg.length;
				uni.chooseImage({
				    count: count,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album', 'camera'],
				    success: function (res) {
				        console.log(res);
				        let tempFilePaths = res.tempFilePaths;
				
				        // for(let i=0;i<tempFilePaths.length;i++){
				        //   if(imgs.length>=9){
				        //     that.setData({
				        //       imgList:imgs
				        //     });
				        //     return false;
				        //   }else{
				        //     imgs.push(tempFilePaths[i]);
				        //   }
				        // }
				        // that.setData({
				        //   imgList:imgs
				        // });
				
				        // console.log(that.data.imgList);
				
				        uni.showLoading({
				            title: '上传中...'
				        });
				        for (let i = 0; i < tempFilePaths.length; i++) {
				            let imgs = listimg;
				            if (imgs.length >= 9) {
				                // that.setData({
				                //     imgList: imgs
				                // });
				                return false;
				            } else {
				                uni.uploadFile({
				                    url: api.StorageUpload,
				                    filePath: tempFilePaths[i],
				                    name: 'file',
				                    success(res) {
				                        console.log(res);
				                        let data = JSON.parse(res.data);
				                        if (data.errno == 0) {
				                            imgs.push(data.data.url);
				                            // that.setData({
				                            //     imgList: imgs
				                            // });
				                        } else {
				                            console.log('上传失败');
				                        }
				                    }
				                });
				            }
				        }
				        uni.hideLoading();
				    }
				});
			},

			answerClick(row,id,answer,index1,index) {
				let dd=this.bookServantList;
				 dd[index].questionList[index1].consultId=id;
				 dd[index].questionList[index1].consultName=answer;
				 this.setData({
				    bookServantList:dd
				 });
				 
				console.log(row.questionList);
				// let index1 = e.currentTarget.dataset.index1;
				// let answer = e.currentTarget.dataset.answer;
				// let id = e.currentTarget.dataset.id;
				// let obj1 = `questionList[${index1}].consultId`;
				// let obj2 = `questionList[${index1}].consultName`;
				// this.setData({
				// 	[obj1]: id,
				// 	[obj2]: answer
				// });
				// console.log(this.questionList);
			},

			maskClick(e) {
				let answer = e.currentTarget.dataset.answer;
				this.setData({
					isUnMask: answer
				});
			},

			getPhoneNumber(e) {
				console.log(e.detail);
				let params = {
					// type:'保洁',
					code: this.code,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					bookTradeNo: this.bookTradeNo
				};

				util.request(api.loginCusTel, params, 'POST').then((res) => {
					if (res.errno === 0) {
						console.log(res);
						this.setData({
							loginShow: false
						});
						if (res.data.tradeOrder == null || res.data.tradeOrder == '') {
							uni.showToast({
								title: '您还没有购买过任何商品，如有疑问，欢迎咨询4009218787',
								icon: 'none',
								duration: 2000
							});
						} else {
							this.setData({
								tradeOrder: res.data.tradeOrder
							});
							this.getConsoultType();
						}
					} else {
						this.setData({
							loginShow: true
						});
						uni.showToast({
							title: res.errmsg,
							icon: 'none',
							duration: 2000
						});
						let that = this;
						uni.login({
							success(res) {
								console.log(res);
								if (res.code) {
									that.setData({
										code: res.code
									});
								}
							}
						});
					}
				});
			},

			sumitRevisit() {
				let req=[];
				let that =this;
				// this.bookServantList.forEach(sv=>{ 
					for(let k=0;k<this.bookServantList.length;k++){
						let sv=this.bookServantList[k];
						let params = {
							detailServantId:sv.detailServantId,
							bookTime: sv.bookTime,
							bookTradeNo: that.tradeOrder.bookTradeNo,
							cusTel: that.tradeOrder.cusPhone,
							degree: sv.satisfy,
							type: that.tradeOrder.goodsType,
							worderNo: sv.workerNo,
							workerName: sv.workerName
						};
						if(sv.satisfy==''){
							uni.showToast({
								title: '辛苦您为每位服务者进行评价~',
								icon: 'none',
								duration: 2000
							}); 
							return false;
						}
						if (sv.satisfy == 2) {
							let isEmpty = sv.questionList.some((item) => {
								return item.consultId == undefined || item.consultId == '';
							});
							if (isEmpty) {
								uni.showToast({
									title: '请选择具体问题',
									icon: 'none',
									duration: 2000
								}); 
								return false;
							} else if (sv.detail == '') {
								uni.showToast({
									title: '请输入具体问题描述',
									icon: 'none',
									duration: 2000
								}); 
								return false;
							} else {
								let title = [];
								let titleId = [];
								let consultId = [];
								let consultName = [];
								sv.questionList.forEach((item) => {
									title.push(item.name);
									titleId.push(item.id);
									consultId.push(item.consultId);
									consultName.push(item.consultName);
								});
								params.title = title.join(',');
								params.titleId = titleId.join(',');
								params.consultId = consultId.join(',');
								params.consultName = consultName.join(',');
								params.question = sv.detail;
								params.imgSrc = sv.imgList.join(',');
							}
						} else if (sv.satisfy == 3) {
							if (sv.remark == '') {
								uni.showToast({
									title: '请填写建议',
									icon: 'none',
									duration: 2000
								}); 
								return false;
							} else {
								params.question = sv.remark;
							}
						}
					req.push(params);
				}
				uni.showLoading({
				    title: '加载中...'
				});
				console.log(req);
				 
				 
				util.request(api.saveVisitBatch, req, 'POST')
				    .then((res) => {
				        uni.hideLoading();
				        if (res.errno === 0) {
				            console.log(res);
				            uni.showToast({
				                title: '提交成功',
				                icon: 'success',
				                duration: 2000
				            });
				            this.setData({
				                isFinished: true
				            });
				        } else {
				            uni.showToast({
				                title: res.errmsg,
				                icon: 'none',
				                duration: 2000
				            });
				        }
				    })
				    .catch((err) => {
				        uni.hideLoading();
				    });
			},

			goDetail() {
				uni.navigateTo({
					url: '/pages/qwOrderDetail/qwOrderDetail?payId=' + this.tradeOrder.payId
				});
			},
			onClickHide() {
				this.setData({
					showOverLay: false
				})
			},
			onOverlayHide() {}
		}
	};
</script>
<style>
	page {
		background: #f3f3f3;
		padding-bottom: 80rpx;
		color: #333;
	}

	view,
	text {
		font-size: 30rpx;
	}

	.top-img {
		width: 750rpx;
		height: 178rpx;
		display: block;
	}

	.top-block {
		margin: 12rpx 0 12rpx;
		background: #ffffff;
		padding: 24rpx 24rpx 14rpx;
	}

	.top-block .title {
		line-height: 42rpx;
		height: 42rpx;
		white-space: nowrap;
	}

	.top-block .slogan {
		height: 42rpx;
		line-height: 42rpx;
		color: #999;
		margin-top: 12rpx;
	}

	.bottom-img {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
	}

	.service-satisfy {
		padding: 24rpx 24rpx 34rpx;
		background: #fff;
		margin: 0 0 24rpx;
	}

	.satisfy-title {
		height: 48rpx;
		display: flex;
		align-items: center;
	}

	.satisfy-title .dot {
		width: 12rpx;
		height: 12rpx;
		background: #d77958;
		border-radius: 12rpx;
		margin-right: 16rpx;
	}

	.satisfy-title .text {
		font-size: 34rpx;
		line-height: 48rpx;
	}
	.satisfy-title .name {
	    font-size: 36rpx;
	    line-height: 48rpx;
		font-weight: bold;
	}
	.satisfy-title .skill {
	    font-size: 26rpx;
	/*    line-height: 48rpx; */
		margin-left: 20rpx;
		width:300rpx;
		overflow: hidden;
		color:#A9A9A9;
	}
	.satisfy-title .msg {
	    font-size: 26rpx;
	    /* line-height: 48rpx; */
		width:200rpx;
		position: absolute;
		right:0;
		color:#A9A9A9;
	}

	.satisfy-select {
		margin: 24rpx 0;
		display: flex;
		height: 72rpx;
		justify-content: space-between;
	}

	.satisfy-select view {
		width: 218rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		text-align: center;
	}

	.satisfy-select view.yes {
		background-size: 40rpx 32rpx;
		background-color: #feebd7;
		color: #333;
	}

	.satisfy-select view.no {
		background-size: 40rpx 32rpx;
		background-color: #fff1f0;
		color: #f5222d;
	}

	.satisfy-select view.common {
		background-size: 40rpx 32rpx;
		background-color: #f0f5ff;
		color: rgba(0, 0, 0, 0.45);
	}

	.satisfy-result view {
		line-height: 46rpx;
		color: #999;
	}

	.satisfy-result image {
		margin: 6rpx 0 -34rpx;
		width: 702rpx;
		height: 142rpx;
	}

	.satisfy-common {
		color: #999;
		line-height: 46rpx;
	}

	.remark-wrapper {
		padding: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;
	}

	.remark-wrapper .tips {
		font-size: 34rpx;
		line-height: 48tpx;
		margin-bottom: 18rpx;
	}

	.remark-wrapper .textarea {
		width: 702rpx;
		height: 174rpx;
		border-radius: 12rpx;
		border: 1rpx solid #dadada;
		padding: 12rpx 12rpx 12rpx 24rpx;
		line-height: 42rpx;
		box-sizing: border-box;
		color: #666;
	}

	.upload-wrapper {
		margin: 18rpx -20rpx 56rpx 0;
		display: flex;
		flex-wrap: wrap;
	}

	.upload {
		width: 160rpx;
		height: 160rpx;
		background: #fafafa;
		border-radius: 2rpx;
		border: 1rpx solid #d9d9d9;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-right: 16rpx;
		box-sizing: border-box;
	}

	.upload image {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 22rpx;
	}

	.upload view {
		font-weight: 400;
		color: #c5c3c3;
		line-height: 48rpx;
		font-size: 26rpx;
	}

	.img-item {
		width: 160rpx;
		height: 160rpx;
		background: #fff;
		border-radius: 2rpx;
		border: 1rpx solid #d9d9d9;
		margin: 0 20rpx 24rpx 0;
		padding: 8rpx;
		position: relative;
		box-sizing: border-box;
	}

	.img-item .user-upload {
		width: 144rpx;
		height: 144rpx;
	}

	.img-item .close-img {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.service-block {
		margin-bottom: 10rpx;
		background: #fff;
		font-size: 30rpx;
	}

	.service-block .title {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx solid #eeeeee;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	view.view-detail {
		color: #d77958;
		font-size: 28rpx;
	}

	.service-block .content {
		padding: 20rpx 24rpx;
		position: relative;
	}

	.service-block .item {
		line-height: 56rpx;
		color: #666;
	}

	.service-block .item text {
		color: #999;
	}

	.service-times {
		position: absolute;
		top: 22rpx;
		right: 48rpx;
		color: #666;
	}

	.topic-block {}

	.topic-item {
		padding: 24rpx 24rpx 32rpx;
		background: #fff;
		margin-bottom: 12rpx;
		font-size: 34rpx;
	}

	.topic-item .issue {
		/* height: 48rpx; */
		line-height: 48rpx;
		margin-bottom: 22rpx;
		display: flex;
	}

	.issue .dot {
		width: 12rpx;
		height: 12rpx;
		background: #d77958;
		border-radius: 12rpx;
		margin-right: 12rpx;
		margin-top: 18rpx;
	}

	.issue text {
		font-size: 34rpx;
	}

	.issue .refer {
		color: #c5c5c5;
		margin-left: 12rpx;
		font-size: 30rpx;
		font-weight: 400;
	}

	.topic-item .answer {
		flex-wrap: wrap;
		display: flex;
	}

	.answer .answer-item {
		min-width: 160rpx;
		padding: 0 20rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 8rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
		margin: 0 20rpx 24rpx 0;
		box-sizing: border-box;
	}

	.answer .common-answer {
		background: #f5f5f5;
		color: #333;
	}

	.topic-item .answer .selected-answer {
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/gou.png') no-repeat right bottom;
		background-size: 40rpx 32rpx;
		background-color: #feebd7;
		color: #d77958;
	}

	.submit-btn {
		width: 702rpx;
		height: 88rpx;
		background: #d77958;
		border-radius: 88rpx;
		margin: 0 24rpx 60rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		margin-top: 100rpx;
	}

	.submit-btn.disable-btn {
		background: #ccc;
		box-shadow: 4rpx 4rpx 10rpx 0rpx rgba(201, 205, 207, 0.25);
	}

	.topic-item .answer.unmask {
		justify-content: flex-start;
	}

	.topic-item .answer.unmask view {
		margin-right: 24rpx;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.block {
		width: 700rpx;
		height: 300rpx;
		padding-top: 200rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.block .submit-btn {
		width: 600rpx;
		margin: 0 50rpx 0;
	}

	.qr-title {
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* background-image: url("https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/wx/img/bk.png");     */
		background-size: 100% 100%;
		width: 575rpx;
		margin-top: -50px;
	}

	.qr-title1 {
		height: 22px;
		line-height: 22px;
		font-size: 15px;
		font-weight: 400;
		/* color: #8E9499; */
		margin: 10rpx 0;
		letter-spacing: 8rpx;
	}

	.qr-title2 {
		height: 24px;
		font-size: 15px;
		line-height: 25px;
		font-weight: 400;
		/* color: #8E9499; */
	}

	.sub-title2 {
		height: 34px;
		line-height: 34px;
		font-size: 20px;
		color: #000000;
		margin: 10rpx 0;
		font-weight: 600;
		margin-top: 20px;
	}

	.qrcode {
		width: 393rpx;
		height: 393rpx;
	}

	.title-wenzi {
		font-size: 54rpx;
		color: #FFFFFF;
		text-shadow: 0px 4px 7px #AE6B2B;
		padding: 83rpx 0 0 38rpx;
		font-style: normal;
	}


	.overLay-block {
		width: 652rpx;
		height: 538rpx;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 16rpx;
	}

	.title-icon {
		padding: 60rpx 272rpx;
		height: 255rpx;
		background: #d77958;
		border-radius: 16rpx 16rpx 0 0;
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj3.png') no-repeat center center;
		background-size: 100% 102%;
	}

	.tips-content {
		font-weight: bold;
		font-size: 36rpx;
		display: block;
		width: 574rpx;
		text-align: center;
		margin: 32rpx 40rpx;
	}

	.tips-content1 {
		color: #999;
		display: block;
		margin-left: 112rpx;
		font-size: 29rpx;
	}
	.duoren{
		    background-color: #feebd7;
		    color: #d77958;
		    padding-left: 20rpx;
		    margin-top: 8rpx;
		    margin-bottom: 20rpx;
	}
</style>