bawangcan-shop/pages/index/addTask.vue

<template>
	<view class="container" style="padding-bottom: 60rpx;">
		<view class="main">
			<view class="order-des">
				<view class="title">店铺名称</view>
				<!-- <view class="textarea-wrap">
					<input v-model="title" class="input" placeholder="请选择店铺" />
				</view> -->
				<view class="textarea-wrap" @tap="onclick1(5)">
					<input type="text" disabled="disabled" v-model="title" class="input" placeholder="请选择店铺" />
				</view>
				<u-select-shop v-model="show5" mode="single-column" :list="dpList" title="请选择店铺" @confirm="confirm5">
				</u-select-shop>
			</view>
			<view class="order-des">
				<view class="title">活动平台</view>
				<view class="textarea-wrap" @tap="onclick">
					<input type="text" disabled="disabled" v-model="platform" class="input" placeholder="请选择活动平台" />
				</view>
				<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			</view>

			<!-- 无需评价，需要图文评价，需要评价默认为5星，3张图，30 -->
			<view class="order-des">
				<view class="title">评价要求</view>
				<view class="textarea-wrap" @tap="onclick4">
					<input type="text" disabled="disabled" v-model="pingjiaName" class="input" placeholder="请选择评价要求" />
				</view>
				<u-select v-model="show4" mode="single-column" :list="pingjialist" @confirm="confirm4"></u-select>
			</view>
			<view class="order-des" v-if="serviceMoney != 0">
				<view class="title">店铺服务费(每单)</view>
				<view class="textarea-wrap">
					<view>{{serviceMoney}}元</view>
					<!-- <input type="digit" v-model="money" class="input" maxlength="9" :placeholder="jineplaceName" /> -->
				</view>
			</view>
			<!-- <view class="order-des">
				<view class="title">返现金额(每单)</view>
				<view class="textarea-wrap">
					<input type="digit" v-model="merchantMoney" class="input" maxlength="9" :placeholder="jineplaceName" />
				</view>
			</view> -->
			<view class="order-des">
				<view class="title">满返金额</view>
				<view class="textarea-wrap special-box">
					<text>满：</text>
					<input type="digit" v-model="memberPrice" class="input" maxlength="9" placeholder="请输入金额要求" />
					<text>返：</text>
					<input type="digit" v-model="merchantMoney" class="input" maxlength="9" :placeholder="jineplaceName" />
				</view>
			</view>
			<!-- <view class="order-des">
				<view class="title">会员满返</view>
				<view class="textarea-wrap special-box">
					<text>满：</text>
					<input type="digit" v-model="memberPrice" class="input" maxlength="9" placeholder="请输入金额要求" />
					<text>返：</text>
					<input type="digit" v-model="memberMoney" class="input" maxlength="9" placeholder="请输入优惠金额" />
				</view>
			</view>
			<view class="order-des">
				<view class="title">普通用户满返</view>
				<view class="textarea-wrap special-box">
					<text>满：</text>
					<input type="digit" v-model="price" class="input" maxlength="9" placeholder="请输入金额要求" />
					<text>返：</text>
					<input type="digit" v-model="money" class="input" maxlength="9" placeholder="请输入优惠金额" />
				</view>
			</view> -->
			<view class="order-des">
				<view class="title">任务分类</view>
				<checkbox-group @change="fromTypeChange" v-model="fromType">
					<label v-for="item in fromTypeList" :key="item.id" style="font-size: 24rpx;">
						<checkbox :value="item.id" :checked="fromType.includes(item.id+'')" /><text>{{item.name}}</text>
					</label>
				</checkbox-group>
			</view>
			<view class="order-des">
				<view class="title">接单数量(每日)</view>
				<view class="textarea-wrap">
					<input type="number" v-model="ReceivingNum" class="input" maxlength="9"
						:placeholder="jiedanplaceName" />
				</view>
			</view>
			<!-- <view class="order-des">
				<view class="title">活动品类</view>
				<view class="textarea-wrap" @tap="onclick3">
					<input type="text" disabled="disabled" v-model="pinleiName" class="input" placeholder="请选择活动品类" />
				</view>
				<u-select v-model="show3" mode="single-column" :list="pinleilist" @confirm="confirm3"></u-select>
			</view> -->
			<view class="order-des">
				<view class="title">活动开始时间</view>
				<view class="textarea-wrap" @tap="onclick1(1)">
					<input type="text" disabled="disabled" v-model="startTime" class="input" placeholder="请选择活动开始时间" />
				</view>
				<u-picker mode="time" v-model="show1" title="活动开始时间" @confirm="times1()" :params="params"></u-picker>
			</view>
			<view class="order-des">
				<view class="title">活动结束时间</view>
				<view class="textarea-wrap" @tap="onclick1(2)">
					<input type="text" disabled="disabled" v-model="endTime" class="input" placeholder="请选择活动结束时间" />
				</view>
				<u-picker mode="time" v-model="show2" title="活动结束时间" @confirm="times2()" :params="params"></u-picker>
			</view>
			<!-- <view class="order-des">
				<view class="title">封面图(下方为示例图)</view>
				<shmily-drag-image class="dragImg" :select="false" :list.sync="imageList1" :number="1">
				</shmily-drag-image>
				<shmily-drag-image :list.sync="imageList" :number="1"></shmily-drag-image>
			</view>
			<view class="order-des">
				<view class="title">轮播图(下方为示例图，最多三张)</view>
				<shmily-drag-image class="dragImg" :select="false" :list.sync="imageList2" :number="1">
				</shmily-drag-image>
				<shmily-drag-image :list.sync="imageList0" :number="3"></shmily-drag-image>
			</view>
			<view class="order-des">
				<view class="title">详情图(下方为示例图，最多5张)</view>
				<shmily-drag-image class="dragImg" :select="false" :list.sync="imageList3" :number="1">
				</shmily-drag-image>
				<shmily-drag-image :list.sync="imageList00" :number="5"></shmily-drag-image>
			</view> -->

		</view>
		<view class="btns" v-if="goodsId === ''">
			<button class="tui-button-primar qr" @tap="addSave">提交</button>
		</view>
	</view>
</template>

<script>
	import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
	export default {
		components: {
			shmilyDragImage
		},
		data() {
			return {
				imageList1: ['https://h5.canmoujiang.com/img/20210722/bcc0d394f9ea4db59135272552a2851d.png'],
				imageList2: ['https://h5.canmoujiang.com/img/20210722/b1414793f7c14891984c1f880a893202.png'],
				imageList3: ['https://h5.canmoujiang.com/img/20210722/c29a67662adb428f8a1a058a9c38bfa0.png'],
				imageList: [],
				imageList0: [],
				imageList00: [],
				dpList: [],
				title: '',
				pinleiName: '',
				jineplaceName: '请输入每单返现金额',
				jiedanplaceName: '请输入每日接单数量',
				pinleiId: '',
				pinleilist: [],
				pingjiaName: '',
				pingjialist: [{
						value: '1',
						name: '无需评价'
					},
					{
						value: '2',
						name: '需要图文评价'
					}
				],
				serviceMoney: 0,
				WeeklyNum: 0,
				upImageNum: 0,
				commentNum: 0,
				DistributionNum: 4000,
				ReceivingNum: '',
				pinleiName: '',
				commentRequest: '',
				platform: '',
				platformId: '',
				startTime: '',
				endTime: '',
				goodsId: '',
				startingTime: '',
				closingTime: '',
				merchantId: 0,
				merchantMoney:'',
				money: '',
				price: '',
				memberMoney: '',
				memberPrice: '',
				orderId: '', //修改是用到的ID
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				sjcNumber: 0,
				startDate: 0,
				endDate: 0,
				zuidi: 0,
				zuidiNumber: 0,
				list: [{
						value: '1',
						name: '饿了么'
					},
					{
						value: '2',
						name: '美团'
					}
				],
				showPlatform: false,
				fromTypeList:[],
				fromType: [],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				arr: [],
				showModal: true
			}
		},
		onLoad(e) {
			console.log("this.merchantId_:" + this.merchantId)
			if (e.goodsId) {
				this.goodsId = e.goodsId;
				this.getDetailById(e.goodsId);
			} else {
				this.merchantId = e.merchantId;
				this.getnavlistClassify();
			}
			this.checkMerchant();

			let that = this;
			//获取任务分类
			that.$Request.getT('/helpClassify/selectClassifyList').then(res => {
				if (res.code == 0) {
					this.fromTypeList = res.data.filter(item=> {
						if(item.state == 1){
							item.name = item.classifyName
							item.value = item.id
							return item
						}
					})
				}
			});
			
			that.$Request.getT('/common/type/149').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.zuidi = res.data.value ? res.data.value : 0;
						this.jineplaceName = '请输入（最低' + this.zuidi + '元）';
					}
				}
			});

			that.$Request.getT('/common/type/213').then(res => { //订单审核提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/common/type/211').then(res => { //最新活动通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/common/type/212').then(res => { //积分变动提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						that.arr.push(res.data.value)
					}
				}
			})

			that.$Request.getT('/common/type/150').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.zuidiNumber = res.data.value ? res.data.value : 0;
						this.jiedanplaceName = '请输入（至少' + this.zuidiNumber + '单）';
					}
				}
			});
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				//订阅
				if (this.showModal) {
					this.openMsg()
				}
			}
		},
		methods: {
			// 开启订阅消息
			openMsg() {
				
			},
			fromTypeChange(e){
				this.fromType = e.detail.value
			},
			checkMerchant() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantList?userId=' + userId + '&status=2').then(res => {
					if (res.code == 0) {
						this.dpList = res.data;
					}
				});
			},
			getDetailById(goodsId) {
				this.$Request.getT('/goodsMerchant/selectGoodsDetails?goodsId=' + goodsId).then(res => {
					if (res.code == 0) {
						this.merchantId = res.data.merchantId;
						this.title = res.data.goodsTitle;
						this.merchantMoney = res.data.merchantMoney;
						this.money = res.data.money;
						this.price = res.data.price;
						this.memberPrice = res.data.memberPrice;
						this.memberMoney = res.data.memberMoney;
						this.serviceMoney = res.data.serviceMoney ? res.data.serviceMoney : 0;

						this.WeeklyNum = res.data.numStar;
						this.upImageNum = res.data.numImg;
						this.commentNum = res.data.numWord;
						if (this.WeeklyNum != 0) {
							this.pingjiaName = this.pingjialist[1].name;
						} else {
							this.pingjiaName = this.pingjialist[0].name;
						}

						this.DistributionNum = res.data.scope;
						this.ReceivingNum = res.data.sumNum;
						this.startTime = res.data.startTime;
						this.endTime = res.data.endTime;
						this.imageList.push(res.data.titleImg);
						this.platform = res.data.classify == 1 ? '饿了么' : '美团';
						this.platformId = res.data.classify;
						this.fromType = res.data.activityIds.split(','); //任务分类
						console.log(this.fromType)
						// let asd = res.data.startTime.substring(0,10).replace(/-/g,"")
						// console.log(res.data.startTime.substring(0,10).replace(/-/g,""))
						// console.log(res.data.endTime.substring(0,10).replace(/-/g,""))
						this.startDate = parseInt(res.data.startTime.substring(0, 10).replace(/-/g, ""));
						this.endDate = parseInt(res.data.endTime.substring(0, 10).replace(/-/g, ""));

						this.pinleiId = res.data.typeId;
						this.getnavlistClassify();
						if (res.data.img) {
							this.imageList0 = res.data.img.split(',');
						}
						if (res.data.remark) {
							this.imageList00 = res.data.remark.split(',');
						}
						// this.pinleiName
						// this.platform
					}
				})
			},
			getnavlistClassify() {
				this.$Request.getT('/banner/selectBannerList?state=-1&classify=2').then(res => {
					if (res.code === 0) {
						res.data.forEach(d => {
							let data = {
								name: '',
								value: ''
							}
							data.name = d.name;
							data.value = d.id;
							if (d.state == 1) {
								if (this.pinleiId == d.id) {
									this.pinleiName = d.name;
								}
								this.pinleilist.push(data);
							}
						});
					}
				});
			},
			// 发布
			addSave() {
				if (uni.getStorageSync('sendtaskMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// let shijiancha1 = (this.endDate - this.startDate) + 1;
				// console.log(shijiancha1)
				// let zongjine1 = this.money * this.ReceivingNum * shijiancha1;
				// console.log(zongjine1)
				let that = this;
				this.$queue.showLoading('提交中...');
				var images = '';
				var images1 = '';
				var images2 = '';
				if (this.title == '') {
					uni.hideLoading();
					this.$queue.showToast('请选择店铺!');
					return;
				}

				if (this.platform == '') {
					uni.hideLoading();
					this.$queue.showToast('请选择平台!');
					return;
				}

				if (this.pingjiaName == '') {
					uni.hideLoading();
					this.$queue.showToast('请选择评价要求!');
					return;
				}

				if (this.DistributionNum == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入配送范围!');
					return;
				}
				
				if (this.memberPrice == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入满足金额');
					return;
				}
				// if (this.memberMoney == '') {
				// 	uni.hideLoading();
				// 	this.$queue.showToast('请输入会员优惠金额');
				// 	return;
				// }
				// if (this.price == '') {
				// 	uni.hideLoading();
				// 	this.$queue.showToast('请输入普通用户满足金额');
				// 	return;
				// }

				// if (this.money == '') {
				// 	uni.hideLoading();
				// 	this.$queue.showToast('请输入普通用户优惠金额');
				// 	return;
				// }
				
				if (this.merchantMoney == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入返现金额');
					return;
				}

				if (this.merchantMoney < this.zuidi) {
					uni.hideLoading();
					this.$queue.showToast('每单最低返现金额为' + this.zuidi + '元');
					return;
				}
				
				if(this.fromType.length == 0){
					uni.hideLoading();
					this.$queue.showToast('请选择任务分类');
					return;
				}

				if (this.ReceivingNum == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入接单数量!');
					return;
				}

				if (parseInt(this.ReceivingNum) < parseInt(this.zuidiNumber)) {
					uni.hideLoading();
					this.$queue.showToast('每日最低接单数量为' + this.zuidiNumber);
					return;
				}
				if (this.startTime == '') {
					uni.hideLoading();
					this.$queue.showToast('请选择活动开始时间!');
					return;
				}
				if (this.endTime == '') {
					uni.hideLoading();
					this.$queue.showToast('请选择活动结束时间');
					return;
				}

				let userId = this.$queue.getData('userId');
				let data = {
					'goodsId': this.goodsId,
					'userId': userId,
					'merchantId': this.merchantId,
					'goodsTitle': this.title,
					money: this.money,
					price: this.memberPrice,
					memberMoney: this.memberMoney,
					memberPrice: this.memberPrice,
					activityIds: this.fromType.toString(),
					// 'titleImg': images,
					// 'img': images1,
					'sumNum': this.ReceivingNum,
					'startTime': this.startTime + ' ' + '09:00:00',
					'endTime': this.endTime + ' ' + '23:59:59',
					'classify': this.platformId,
					// 'typeId': this.pinleiId,
					"merchantMoney": this.merchantMoney,
					"numImg": this.upImageNum,
					"numStar": this.WeeklyNum,
					"numWord": this.commentNum,
					// "remark": images2,
					"scope": this.DistributionNum,

				}
				uni.hideLoading();
				// let shijiancha = this.DateDiff(this.startTime, this.endTime);
				let zongjine = this.merchantMoney * this.ReceivingNum * this.sjcNumber;
				let urlContent = '您发布活动的时间期限为' + this.sjcNumber + '天，发布总金额' + zongjine + '元，并且活动一经发布，不可取消！';
				if (this.serviceMoney != 0) {
					// zongjine = zongjine + fuwufei;
					let fuwufei = (this.serviceMoney * this.ReceivingNum * this.sjcNumber) + (this.merchantMoney * this.ReceivingNum *
						this.sjcNumber);
					urlContent = '您发布活动的时间期限为' + this.sjcNumber + '天，发布总金额' + fuwufei + '元，（含' + this.serviceMoney +
						'元每单服务费）并且活动一经发布，不可取消！';
				}
				uni.showModal({
					title: '温馨提示',
					content: '' + urlContent,
					showCancel: true,
					cancelText: '取消发布',
					confirmText: '确认发布',
					success: ress => {
						if (ress.confirm) {
							this.$queue.showLoading('提交中...');
							if (this.goodsId != '') {
								this.$Request.postJson('/goodsMerchant/updateGoods', data).then(res => {
									if (res.code == 0) {
										this.$queue.showToast("修改成功！");
										setTimeout(d => {
											uni.navigateBack();
											uni.hideLoading();
										}, 1000);
									} else {
										uni.hideLoading();
										if (res.msg === '可用金额不足，请充值！') {
											uni.showModal({
												title: '温馨提示',
												content: res.msg,
												showCancel: true,
												cancelText: '取消',
												confirmText: '确认',
												success: ress => {
													if (ress.confirm) {
														uni.navigateTo({
															url: '/pages/my/recharge'
														});
													}
												}
											});
										} else {
											this.$queue.showToast(res.msg);
										}
									}
								});
							} else {
								this.$Request.postJson('/goodsMerchant/insertGoods', data).then(res => {
									if (res.code == 0) {
										this.$queue.showToast("提交成功！");
										setTimeout(d => {
											uni.navigateBack();
											uni.hideLoading();
										}, 1000);
									} else {
										uni.hideLoading();
										if (res.msg === '可用金额不足，请充值！') {
											uni.showModal({
												title: '温馨提示',
												content: res.msg,
												showCancel: true,
												cancelText: '取消',
												confirmText: '确认',
												success: ress => {
													if (ress.confirm) {
														uni.navigateTo({
															url: '/pages/my/recharge'
														});
													}
												}
											});
										} else {
											this.$queue.showToast(res.msg);
										}
									}
								});
							}
						}
						if (ress.cancel) {
							uni.hideLoading();
						}
					}
				});
			},
			confirm(e) {
				console.log(e);
				this.platform = this.list[e].name;
				this.platformId = this.list[e].value;
			},
			confirm5(e) {
				console.log(e);
				this.title = this.dpList[e].merchantName;
				this.merchantId = this.dpList[e].merchantId;
				this.serviceMoney = this.dpList[e].serviceMoney ? this.dpList[e].serviceMoney : 0;
				// this.platform = this.list[e].name;
				// this.platformId = this.list[e].value;
			},
			confirm3(e) {
				console.log(e);
				this.pinleiId = this.pinleilist[e].value;
				this.pinleiName = this.pinleilist[e].name;
			},
			confirm4(e) {
				console.log(e);
				this.pingjiaName = this.pingjialist[e].name;
				if (e == 0) {
					this.WeeklyNum = 0;
					this.upImageNum = 0;
					this.commentNum = 0;
				} else if (e == 1) {
					this.WeeklyNum = 5;
					this.upImageNum = 3;
					this.commentNum = 30;
				}
			},
			onclick() {
				this.show = true
			},
			onclick3() {
				this.show3 = true
			},
			onclick4() {
				this.show4 = true;
			},
			btnaddress() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						// this.address = res.address + res.name
						this.address = res.name
						// this.latitude = res.latitude
						// this.longitude = res.longitude
					}
				})
			},
			onclick1(index) {
				if (index == 1) {
					this.show1 = true
				}
				if (index == 2) {
					this.show2 = true
				}
				if (index == 3) {
					this.show3 = true
				}
				if (index == 4) {
					this.show4 = true
				}
				if (index == 5) {
					this.show5 = true
				}

			},
			times1(e) {
				console.log("e::::::::" + e)
				this.startTime = e.year + '-' + e.month + '-' + e.day
				this.startDate = parseInt(e.year + e.month + e.day);
				console.log('shijian', e, this.startTime);
			},
			times2(e) {
				if (this.startDate == 0) {
					this.$queue.showToast('请先选择开始时间！')
					return;
				}

				this.endDate = parseInt(e.year + e.month + e.day);
				console.log(this.endDate - this.startDate)
				if ((this.endDate - this.startDate) < 0) {
					this.$queue.showToast('结束时间不能小于开始时间！')
					return;
				}
				this.endTime = e.year + '-' + e.month + '-' + e.day
				console.log("DateDiff______:" + this.DateDiff(this.startTime, this.endTime))
				console.log('shijian', e, this.endTime);
			},
			times3(e) {
				this.startingTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				console.log('shijian', e, this.startingTime);
			},
			times4(e) {
				this.closingTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				console.log('shijian', e, this.closingTime);
			},
			DateDiff(sDate1, sDate2) {
				// var aDate, oDate1, oDate2, iDays;
				// aDate = sDate1.split("-");
				// oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为yyyy-MM-dd格式
				// aDate = sDate2.split("-");
				// oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
				// iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数


				let date2 = new Date(Date.parse(sDate1.replace(/-/g, "/")));
				let date1 = new Date(Date.parse(sDate2.replace(/-/g, "/")));
				let iDays = parseInt(Math.abs(date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);

				this.sjcNumber = iDays + 1;
				console.log("this.sjcNumber______:" + this.sjcNumber)
				return iDays + 1; //返回相差天数
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}
	checkbox .wx-checkbox-input {
		transform: scale(0.7);
		// border-radius: 50% !important;
		/* color: #ffffff !important; */
	}
		
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #FF4701!important;
		border-color: #FF4701 !important;
	}

	.container {
		width: 100%;
		padding-bottom: calc(98upx + env(safe-area-inset-bottom));
		padding-bottom: calc(98upx + constant(safe-area-inset-bottom));

		.main {
			padding: 20upx 20upx 20upx;

			.order-des {
				padding: 30upx;
				// border-radius: 20upx;
				background-color: #fff;
				// margin-bottom: 20upx;
				position: relative;

				.title {
					font-size: 30upx;
					font-weight: bold;
					color: #333333;
					line-height: 32upx;
					padding-bottom: 20upx;

				}


				.textarea-wrap {
					padding-top: 20upx;
					width: 100%;
					border-bottom: 1upx solid #E6E6E6;

					.textarea {
						width: 100%;
						font-size: 28upx;
						line-height: 35upx;
						color: #333;
					}
				}

				.textarea-counter {
					text-align: right;
					font-size: 28upx;
					font-weight: 500;
					color: #999999;
					margin-top: 10upx;
				}
			}
			.special-box{
				display: flex;
				align-items: center;
				text{
					color: #FF4701;
				}
				input{
					width: 40%;
					margin-left: 6rpx;
				}
			}

			.order-list {
				margin-top: 20upx;
				padding: 0 30upx;
				border-radius: 20upx;
				background-color: #fff;

				.order-list-item {
					width: 100%;
					height: 110upx;
					border-bottom: 1upx solid #E6E6E6;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tit {
						font-size: 34upx;
						font-weight: 500;
						color: #333333;
					}

					.right {
						font-size: 34upx;
						font-weight: 500;
						color: #666;
						display: flex;
						align-items: center;

						.input {
							flex: 1;
							display: flex;
							align-items: center;
							text-align: right;
							padding-right: 10upx;
						}
					}
				}

				.order-list-item:last-child {
					border-bottom: 0;
				}
			}
		}

		.btns {
			button {
				// width: 80%;
				margin: 22upx;
				color: #fff;
				border: none;
				border-radius: 10upx;
			}

			.qr {
				background: #FF4701;
			}
		}

		.footer {
			width: 100%;
			height: calc(98upx + env(safe-area-inset-bottom));
			height: calc(98upx + constant(safe-area-inset-bottom));
			padding-bottom: env(safe-area-inset-bottom);
			/*兼容IOS>11.2*/
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容IOS<11.2*/
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 0 30upx;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payinfo {
				font-size: 32upx;
				font-weight: bold;
				color: #333333;

				text {
					color: #FF3737;
				}
			}

			.tui-button-primar {
				width: 300upx;
				height: 78upx;
				line-height: 78upx;
				background: #FF332F;
				border-radius: 10upx;
				margin: 0;
			}
		}

		.dragImg {
			// position: absolute;
			// top: 85rpx;
			// left: 300rpx;
			height: 90%;
			width: 60%;

			.area-con {
				width: 186rpx !important;
			}

			image {
				width: 186rpx !important;
				height: 186rpx !important;
			}
		}
	}
</style>