<template>
	<!-- 代买饭页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
			</view>
		</view>
		<view style="position: absolute;top: 200rpx;width: 100%;">
			<view class="tab1" v-if="isPaotui">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6b3a4d4c61ee42feb29e69d6fcfd2c1e.png" alt=""
					style="position: absolute;" />
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1cbed0734a154a70b75cb84a811bd0b7.png" alt="" />
				<view style="width: 100%;height: 160rpx;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 160rpx;"></view>
					<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
				</view>
			</view>
			<view class="tab1" v-else>
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3b98dfb370eb4ddcb942b7942dedced2.png" alt=""
					style="position: absolute;" />
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/82627e6cedcf409a932d6afaafa19a4b.png" alt=""
					style="position: absolute;" />
				<view style="width: 100%;height: 160rpx;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
					<view style="width: 50%;height: 160rpx;"></view>
				</view>
			</view>
		</view>
		<view class="ziqu-box" v-if="isPaotui==false">
			<view class="ziqu-xuanfu">
				取餐信息
			</view>
			<view class="ziqu-address">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e13c675ffd4547d0b271900902ffea66.png" alt="" />
				<view class="ziqu-text">
					地址：{{shopItem.shopAddress || ''}} 
				</view>
			</view>
		</view>
		<view class="address-box" v-if="isPaotui">
			<view v-if="!formData.address" @tap="openAddressBook">
				请选择收货地址 <uni-icons type="right" size="16"></uni-icons>
			</view>
			<view v-else style="display: flex; justify-content: space-between; align-items: center;">
				<view @tap="openAddressBook"
					style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
					{{formData.address.areaName || ''}}{{formData.address.floor ? formData.address.floor + '层' : ''}}{{formData.address.roomNum || ''}}
					{{formData.address.receiverName || ''}}
				</view>
				<view @tap.stop="openAddressBook"
					style="color: #0b9b73; font-size: 26rpx; font-weight: normal; margin-left: 20rpx; display: flex; align-items: center;">
					更换地址 <uni-icons type="right" size="13" color="#0b9b73"></uni-icons>
				</view>
			</view>
		</view>
		<view class="time-box" v-if="isPaotui">
			<view class="time1" @tap="checkTime(true)"
				:style="{'background':formData.isImmediately?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#f5f5f5'}">
				<view style="font-weight: 700;">
					立即送出
				</view>
				<view style="font-size: 20rpx;color: #777;">
					预计{{immediateTimeStr}}送达
				</view>
			</view>
			<view class="time1" @tap="checkTime(false)"
				:style="{'background':formData.isImmediately==false?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#f5f5f5'}">
				<view style="font-weight: 700;">
					预约配送
				</view>
				<view class="">
					<view style="font-size: 20rpx;color: #777;"
						v-if="formData.isImmediately!=true&&formData.deliveryTime!=''">
						{{formData.deliveryTime}}
					</view>
					<view v-else style="font-size: 20rpx;color: #777;">
						选择时间 >
					</view>
				</view>
			</view>
		</view>
		<view v-if="isPaotui" style='background: #fff;border-bottom: 1px solid #eee;'>
			<view
				style="height: 140rpx;line-height: 40rpx;padding: 0 40rpx;font-size: 28rpx;font-weight: 700;padding-top: 20rpx;">
				<view class="">
					配送员
				</view>
				<view style="font-size: 24rpx;color: #777;">
					指定配送员，如配送员拒绝接单或者下线，订单进入抢单大厅
				</view>
				<view style="font-size: 24rpx;color: #777;">
					不指定配送员超过10分钟没有人接单，会发送短信通知
				</view>
			</view>
			<view style="padding: 40rpx;">
				<view
					style="display: flex;font-size: 28rpx;font-weight: bold;line-height: 50rpx;margin-bottom: 30rpx;align-items: center;">
					<view style="width:50%;display: flex;align-items: center;">
						<view class="radio-check" v-if="selected === 'buzhiding'">
							<uni-icons type="checkmarkempty" size="12"></uni-icons>
						</view>
						<view class="radio-no-check" @tap="checkVoucher('buzhiding')" v-else></view>
						不指定
					</view>
					<view style="width: 50%;display: flex;justify-content: flex-end;align-items: center;"
						v-if="selected === 'buzhiding'">
						<text style="color: #777; font-weight: normal; margin-right: 10rpx; font-size: 24rpx;">佣金 ￥</text>
						<input type="digit" v-model="customCommission"
							style="width: 140rpx; border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
							placeholder="金额" />
					</view>
				</view>
				<view class="" style="display: flex;font-size: 28rpx;font-weight: bold;line-height: 50rpx;">
					<view style="width:50%;display: flex;">
						<view class="radio-check" v-if="selected === 'zhiding'">
							<uni-icons type="checkmarkempty" size="12"></uni-icons>
						</view>
						<view class="radio-no-check" @tap="checkVoucher('zhiding')" v-else></view>
						指定配送员
					</view>
					<view style="width: 50%;color: #777;text-align: right;" @tap="goDetail">
						{{ assignedWorker ? assignedWorker.workerName + ' ' + assignedWorker.mobile : '配送员' }}
						<uni-icons type="right" size="12"></uni-icons>
					</view>
				</view>
				
				<view v-if="highFloorFeeCalc > 0" style="margin-top: 20rpx; color: #ff5722; font-size: 24rpx; background: #fff5f5; padding: 10rpx 20rpx; border-radius: 10rpx;">
					<uni-icons type="info" size="14" color="#ff5722"></uni-icons>
					因您的收货楼层在3楼以上，将额外收取配送费 ¥{{highFloorFeeCalc}}
				</view>
			</view>
		</view>
		<view class="box1">
			<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;">
				{{shopItem.shopName || '未知道商家'}}
			</view>

			<block v-if="!isGroupBuy">
				<view style="display: flex;padding: 20rpx;background: #f5f5f5;border-radius: 20rpx; margin-bottom:20rpx;"
					v-for="(cartItem, index) in cartItems" :key="index">
					<view class="goods-img">
						<img :src="cartItem.item.productPicture" alt="">
					</view>
					<view class="goods-content">
						<view class="goods-name">
							{{cartItem.item.productName}}
						</view>
						<view class="goods-content-center" v-if="cartItem.specs">
							<view class="goods-deal1">
								{{getSpecDisplayString(cartItem.specs)}}
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="width: 45%;flex:1;">
								X{{cartItem.quantity}}
							</view>
							<view class="pintuan-left-price">
								￥{{cartItem.price}}
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view style="display: flex;padding: 20rpx;background: #f5f5f5;border-radius: 20rpx; margin-bottom:20rpx;"
					v-if="groupItem">
					<view class="goods-img">
						<img :src="groupItem.item.productPicture" alt="">
					</view>
					<view class="goods-content">
						<view class="goods-name">
							{{groupItem.item.productName}}
						</view>
						<view class="goods-content-center" v-if="groupItem.specs">
							<view class="goods-deal1">
								{{getSpecDisplayString(groupItem.specs)}}
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="width: 45%;flex:1;">
								X1
							</view>
							<view class="pintuan-left-price">
								<view
									style="background: rgba(255, 57, 57, 0.2);padding: 0px 12rpx;border-radius: 20rpx;margin-left: 20rpx;">
									<text>拼团</text>
									<text style="color: red;">￥{{groupItem.groupRule.groupPrice}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="groupItem.item.moreBuyData"  style="display: flex;padding: 20rpx;background: #f5f5f5;border-radius: 20rpx; margin-bottom:20rpx;"
					v-for="(cartItem, index) in groupItem.item.moreBuyData" :key="index">
					<view class="goods-img">
						<img :src="cartItem.productPicture" alt="">
					</view>
					<view class="goods-content">
						<view class="goods-name">
							{{cartItem.productName}}
						</view>
						<view class="goods-content-center" v-if="cartItem.specs">
							<view class="goods-deal1">
								{{getSpecDisplayString(cartItem.specs)}}
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="width: 45%;flex:1;">
								X{{cartItem.quantity}}
							</view>
							<view class="pintuan-left-price">
								￥{{cartItem.attributeListPrice | sliceMsg}}
							</view>
						</view>
					</view>
				</view>
			</block>

			<view>
				<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="isPaotui">
					<view style="flex: 1;color: #777;font-weight: 700;">
						打包费
					</view>
					<view style="color: #000;font-weight:700;">
						￥{{packageFee.toFixed(2)}}
					</view>
				</view>
				<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="isPaotui">
					<view style="flex: 1;color: #777;font-weight: 700;">
						配送费 <text v-if="isFaceToFace" style="font-size: 20rpx;color: #999;">(均摊 | 超过2人，每多一人配送费总额增加0.5)</text>
					</view>
					<view style="color: #000;font-weight:700;">
						￥{{deliveryFeeCalc.toFixed(2)}}
					</view>
				</view>
				<view style="height: 80rpx;line-height: 80rpx;display: flex;">
					<view style="flex: 1;color: #777;font-weight: 700;">
						备注
					</view>
					<view style="color: #000;font-weight:700;flex: 1;">
						<input type="digit" v-model="remark"
							style="border-bottom: 1px solid #ccc; text-align: center; font-size: 28rpx; font-weight: normal; height: 50rpx; min-height: 50rpx;"
							 />
					</view>
				</view>
			</view>
			<view
				style="display: flex;height: 80rpx;line-height: 80rpx;border-top: 1px solid #eee;font-size: 28rpx;font-weight: 700; align-items:center;" @tap="openCouponPopup">
				<view style="flex: 1; color: #777; font-size:32rpx;">
					优惠券
				</view>
				<view style="color: #ff5722;" v-if="selectedCoupon">
					-￥{{selectedCoupon.discountAmount.toFixed(2)}}
				</view>
				<view style="color: #0b9b73;" v-else-if="availableCoupons.length > 0">
					有 {{availableCoupons.length}} 张可用
				</view>
				<view style="color: #999;" v-else>
					无可用券
				</view>
				<uni-icons type="right" size="14" color="#999" style="margin-left:10rpx;"></uni-icons>
			</view>
			<view
				style="display: flex;height: 80rpx;line-height: 100rpx;border-top: 1px solid #eee;font-size: 32rpx;font-weight: 700;">
				<view style="flex: 1;">
					合计
				</view>
				<view class="">
					￥{{totalAmountCalc.toFixed(2)}}
				</view>
			</view>
			<view style="height:160rpx;"></view>
			<view class="buy-bottom">
				<view class="bottom-btn" @tap="submitPay">
					立即支付
				</view>
			</view>
		</view>
		<!-- 地址簿弹出层 -->
		<uni-popup ref="bookPopup" background-color="#fff">
			<view class="book-popup-content">
				<address-list @selectAddress="handleSelectAddress" @syncAddress="handleSyncAddress"
					@close="closeAddressBook"></address-list>
			</view>
		</uni-popup>
		<!-- 警告弹出层 -->
		<uni-popup ref="warnPopup" background-color="#fff">
			<view class="warnImg">
				<img v-if="warnPopup == 'shdz'" @tap="$refs.warnPopup.close()"
					src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4996043b3987401794b974d359429b8e.png"
					alt="填写收货地址" style="width:600rpx;height:740rpx;" />
				<img v-if="warnPopup == 'psyj'" @tap="$refs.warnPopup.close()"
					src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/001cf760048b4718bdccd55085bef601.png"
					alt="填写配送佣金" style="width:600rpx;height:740rpx;" />
				<img v-if="warnPopup == 'psy'" @tap="$refs.warnPopup.close()"
					src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e10ad77ca478413a9c53918750ecb932.png"
					alt="指定配送员" style="width:600rpx;height:740rpx;" />
			</view>
		</uni-popup>
		<!-- 支付弹出层 -->
		<uni-popup ref="payPopup" background-color="#fff">
			<view class="pay-popup">
				<view class="content">
					<view class="box1">
						<view style="height: 70rpx;line-height: 70rpx;text-align: center;">
							支付剩余时间 59:09
						</view>
						<view
							style="height: 90rpx;line-height: 90rpx;text-align: center;font-weight: 700;font-size: 30rpx;">
							￥<text
								style="font-size: 60rpx;">{{backendTotalAmount ? backendTotalAmount.toFixed(2) : totalAmountCalc.toFixed(2)}}</text>
						</view>
						<view style="height: 40rpx;text-align: center;color: red;">
							若拼团失败，将会为您自动退款
						</view>
					</view>
					<view class="box1" style="display: flex;padding: 40rpx;">
						<view style="flex: 1;">
							<view style="height: 42rpx;line-height: 42rpx;display: flex;">
								<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png"
									alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
								<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
							</view>
							<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
								使用微信支付
							</view>
						</view>
						<view style="width: 36rpx;padding-top: 20rpx;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png"
								alt="" style="width: 36rpx;height: 36rpx;" />
						</view>
					</view>
					<view class="btn" @tap="wxPayment">
						确认付款
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 拼团分享弹出层 -->
		<uni-popup ref="pintuanPopup" background-color="#fff" @change="onPintuanPopupChange">
			<view class="pintuan-popup">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png" alt=""
					style="position: absolute;top: 0;right: 0;width: 240rpx;height: 180rpx;" @tap="$refs.pintuanPopup.close()">
				<view style="position: absolute;bottom: 0;width: 100%;height: 760rpx;">
					<view class="kaituan1">
						<view class="kaituan1-title">
							差{{groupItem.groupRule.groupCount - 1}}人即可成团
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/21b403bd13414ce79ad73cf1c8e3de98.png"
								alt="" style="width: 120rpx;height: 22rpx;position: absolute;bottom: 0;right: 30rpx;" />
						</view>
						<view class="kaituan1-title1">
							快呼唤小伙伴参加吧！
						</view>
					</view>
					<view class="kaituan2">
						<view class="kaituan22">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png"
								alt=""
								style="width: 90rpx;height: 90rpx;border-radius: 90rpx;margin: 0 auto;display: block;" />
						</view>
						<view class="kaituan22" v-for="n in groupItem.groupRule.groupCount - 1">
							<view class="weipincheng">
								+
							</view>
						</view>
					</view>
					<view class="kaituan3" style="display: flex;margin-left: auto;margin-right: auto;width: 50%;">
						剩余
						<uni-countdown :show-day="false" :hour="23" :minute="59" :second="59" :font-size="16" color="red" />
						结束
					</view>
					<view class="kaituan4">
						<button open-type="share" style="background:transparent;border:none;color:inherit;font-size:inherit;display:inline-flex;align-items:center;">
							分享至微信 <uni-icons type="weixin" size="15"></uni-icons>
						</button>
					</view>
					<view class="kaituan5">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1f1b45c98fa4db1a1e5f98b3a0573c2.png"
							alt="" style="width: 520rpx;height: 150rpx;margin: 0 auto;display: block;" />
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="couponPopup" type="bottom" background-color="#F5F8F5">
			<view style="width: 100%; height: 800rpx; display: flex; flex-direction: column;">
				<view style="height: 100rpx; line-height: 100rpx; text-align: center; font-size: 32rpx; font-weight: bold; border-bottom: 1px solid #eee; position: relative; background: #fff;">
					选择优惠券
					<uni-icons type="closeempty" size="24" @tap="$refs.couponPopup.close()" style="position: absolute; right: 30rpx; top: 0;"></uni-icons>
				</view>
				<scroll-view scroll-y style="flex: 1; padding: 20rpx; box-sizing: border-box;">
					<view v-for="(item, index) in availableCoupons" :key="index" @tap="selectCoupon(item)"
						style="background: #fff; border-radius: 12rpx; padding: 30rpx 20rpx; margin-bottom: 20rpx; display: flex; align-items: center; justify-content: space-between;">
						<view style="display: flex; align-items: center; flex: 1;">
							<view style="color: #ff5722; font-size: 40rpx; font-weight: bold; width: 140rpx;">
								<text style="font-size: 24rpx;">￥</text>{{item.discountAmount}}
							</view>
							<view style="flex: 1; display: flex; flex-direction: column; justify-content: center; margin-left: 20rpx;">
								<view style="font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 6rpx;">{{item.couponName}}</view>
								<view style="font-size: 22rpx; color: #999;" v-if="item.minAmount > 0">满{{item.minAmount}}可用</view>
								<view style="font-size: 22rpx; color: #999;" v-else>无门槛使用</view>
							</view>
						</view>
						<uni-icons v-if="selectedCoupon && selectedCoupon.id === item.id" type="checkmarkempty" size="20" color="#0b9b73"></uni-icons>
						<view v-else style="width: 40rpx; height: 40rpx; border-radius: 50%; border: 1px solid #ddd;"></view>
					</view>
					<view v-if="availableCoupons.length===0" style="text-align:center; padding-top: 100rpx; color: #999;">
						暂无可用优惠券
					</view>
					<view style="height:40rpx;"></view>
				</scroll-view>
				<view style="padding: 20rpx 40rpx; background: #fff;" v-if="availableCoupons.length>0">
					<view @tap="selectCoupon(null)" style="width: 100%; height: 80rpx; background: linear-gradient(90deg, #e3ff96, #a6ffea); font-size: 30rpx; font-weight: 700; line-height: 80rpx; text-align: center; border-radius: 100rpx;">
						不使用优惠券
					</view>
				</view>
			</view>
		</uni-popup>
		<delivery-time-op @timeCallback="timeCallback" :dodge="true" ref='model' :content="content" :barHidth='600'
			title="选择送达时间">
			> </delivery-time-op>
	</view>
</template>

<script>
	import deliveryTimeOp from '@/components/delivery-time-op/delivery-time-op.vue'
	import addressList from '@/package1/address/addressList.vue'
	export default {
		data() {
			return {
				warnPopup: 'shdz',
				isPaotui: true,
				menuButtonInfo: {},
				formData: {
					address: null,
					isImmediately: true,
					deliveryTime: '',
					peisongyuan: ''
				},
				content: [],
				remark:'',
				selected: 'buzhiding',
				customCommission: '0',
				shopItem: {},
				cartItems: [],
				groupItem: null,
				isGroupBuy: false,
				isFaceToFace: false,
				assignedWorker: null,
				immediateTimeStr: '',
				totalPackageFee: 0,
				backendTotalAmount: 0,
				currentOrderId: '',
				createdOrderInfo: null,
				isPaymentSuccessGroupInitiate: false,
				availableCoupons: [],
				selectedCoupon: null
			}
		},
		components: {
			deliveryTimeOp,
			addressList
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name = newObj[as].specPrice
					}
				}
				return name;
			}
		},
		onLoad(option) {
			if (option.shopItem) {
				this.shopItem = JSON.parse(decodeURIComponent(option.shopItem));
			}
			if (option.cart) {
				this.cartItems = JSON.parse(decodeURIComponent(option.cart));
				this.isGroupBuy = false;
			}
			if (option.item) {
				this.groupItem = JSON.parse(decodeURIComponent(option.item));
				console.log("1111111",this.groupItem)
				this.isGroupBuy = this.groupItem.orderType === 2;
				this.isFaceToFace = this.groupItem.isFaceToFace || false;
			}
			if (option.packageFee) {
				this.totalPackageFee = parseFloat(option.packageFee) || 0;
			}
		},
		computed: {
			goodsAmountCalc() {
				if (this.isGroupBuy && this.groupItem) {
					if(this.groupItem.item.moreBuyData){
						let allPrice = parseFloat(this.groupItem.groupRule.groupPrice)
						for(let a = 0;a<this.groupItem.item.moreBuyData.length;a++){
							allPrice += parseFloat(Number(this.sliceMsg1(this.groupItem.item.moreBuyData[a].attributeListPrice)) * this.groupItem.item.moreBuyData[a].quantity);
						}
						return parseFloat(allPrice);
					}else{
						return parseFloat(this.groupItem.groupRule.groupPrice);
					}
				} else {
					return this.cartItems.reduce((acc, curr) => acc + (curr.quantity * parseFloat(curr.price)), 0);
				}
			},
			highFloorFeeCalc() {
				if (this.selected === 'zhiding' && this.assignedWorker) {
					let hFee = parseFloat(this.assignedWorker.highFloorFee || 0);
					if (hFee > 0 && this.formData.address && parseInt(this.formData.address.floor) > 3) {
						return hFee;
					}
				}
				return 0;
			},
			packageFee() {
				if (this.totalPackageFee > 0) return this.totalPackageFee;
				let fee = 0;
				if (this.isGroupBuy && this.groupItem && this.groupItem.item) {
					fee = parseFloat(this.groupItem.item.lunchBox || 0);
				} else if (this.cartItems && this.cartItems.length > 0) {
					for (let cart of this.cartItems) {
						if (cart.item) {
							fee += parseFloat(cart.item.lunchBox || 0) * cart.quantity;
						}
					}
				}
				return fee;
			},
			deliveryFeeCalc() {
				if (!this.isPaotui) return 0;
				let isJoiningFaceToFace = this.isGroupBuy && this.groupItem && this.groupItem.groupId && this.groupItem
					.isFaceToFace;
				if (isJoiningFaceToFace)
			return 0; // Front-end doesn't know exact fee, relies on backend after order creation
				let commission = 0;
				if (this.selected === 'zhiding') {
					if (!this.assignedWorker) return 0;
					commission = parseFloat(this.assignedWorker.orderBkge || 3);
				} else {
					if (this.customCommission !== '' && this.customCommission !== null && !isNaN(parseFloat(this
							.customCommission))) {
						commission = parseFloat(this.customCommission);
					}
				}
				if (this.isGroupBuy && this.groupItem && this.groupItem.isFaceToFace && !this.groupItem.groupId) {
					let members = parseInt(this.groupItem.groupRule.groupCount) || 1;
					if (this.selected === 'zhiding') {
						let extra = members > 2 ? (members - 2) * 0.5 : 0;
						return Math.ceil(((commission + this.highFloorFeeCalc + extra) / members) * 100) / 100;
					} else {
						return Math.ceil(((commission + this.highFloorFeeCalc) / members) * 100) / 100;
					}
				}
				return commission + this.highFloorFeeCalc;
			},
			totalAmountCalc() {
				let total = this.preDiscountTotal;
				if (this.selectedCoupon) {
					total -= parseFloat(this.selectedCoupon.discountAmount);
				}
				return total > 0 ? total : 0.01;
			},
			preDiscountTotal() {
				if(this.isPaotui==true){
					return this.goodsAmountCalc + this.packageFee + this.deliveryFeeCalc;
				}else{
					return this.goodsAmountCalc;
				}
			}
		},
		watch: {
			preDiscountTotal(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.fetchCoupons();
				}
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.initAddress()
			//this.fetchCoupons();
			const now = new Date();
			const startTime = new Date(now);
			const endTime = new Date(now);
			startTime.setMinutes(startTime.getMinutes() + 20);
			endTime.setMinutes(endTime.getMinutes() + 35);
			const startStr =
				`${startTime.getHours().toString().padStart(2, '0')}:${startTime.getMinutes().toString().padStart(2, '0')}`;
			const endStr =
				`${endTime.getHours().toString().padStart(2, '0')}:${endTime.getMinutes().toString().padStart(2, '0')}`;
			this.immediateTimeStr = `${startStr}-${endStr}`;

			uni.$on('updateDeliveryWorker', (worker) => {
				this.assignedWorker = worker;
				this.selected = 'zhiding';
			});
		},
		onShareAppMessage(res) {
			if (this.isPaymentSuccessGroupInitiate) {
				let groupId = this.createdOrderInfo.groupInfo.id;
				let targetMembers = this.groupItem?.groupRule?.groupCount || 2;
				let shopItemStr = encodeURIComponent(JSON.stringify(this.shopItem));
				let isFTF = this.isFaceToFace ? 1 : 0;
				console.log(shopItemStr)
				let path = `/package1/group/groupBuySingle?type=shop&item=${shopItemStr}&groupId=${groupId}&targetMembers=${targetMembers}&isFaceToFace=${isFTF}`;
				
				return {
					title: '我发起了一个拼团，快来一起拼单吧！',
					path: path,
					imageUrl:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png'
				}
			}
			return {
				title: '买饭',
				path: '/pages/index/index'
			}
		},
		onUnload() {
			uni.$off('updateDeliveryWorker');
			uni.removeStorageSync('pendingAssignWorker');
		},
		methods: {
			initAddress() {
				let cachedAddress = uni.getStorageSync('selectedAddress');
				if (cachedAddress) {
					this.formData.address = cachedAddress;
				} else {
					let that = this;
					that.tui.request("/app/userAddress/list", "GET", {
						userId: uni.getStorageSync('id')
					}, false, true).then((res) => {
						if (res.code == 200 && res.result && res.result.length > 0) {
							// Find default address or use the first one
							let target = res.result.find(item => item.isDefault == 1) || res.result[0];
							that.formData.address = target;
							uni.setStorageSync('selectedAddress', target);
						}
					}).catch(() => {});
				}
			},
			handleSelectAddress(address) {
				this.formData.address = address;
				uni.setStorageSync('selectedAddress', address);
				this.$refs.bookPopup.close();
			},
			handleSyncAddress(address) {
				this.formData.address = address;
			},
			closeAddressBook() {
				this.$refs.bookPopup.close();
			},
			getSpecDisplayString(specs) {
				if (!specs) return '';
				let arr = [];
				for (let k in specs) {
					arr.push(specs[k]);
				}
				return arr.join(',');
			},
			submitPay() {
				let isJoiningFaceToFace = this.isGroupBuy && this.groupItem && this.groupItem.groupId && this.groupItem
					.isFaceToFace;
				if (this.isPaotui && !this.formData.address && !isJoiningFaceToFace) {
					this.warnPopup = 'shdz';
					this.$refs.warnPopup.open();
					return;
				}

				if (this.isPaotui && this.selected === 'buzhiding' && !isJoiningFaceToFace) {
					let comm = parseFloat(this.customCommission);
					if (isNaN(comm) || comm <= 0) {
						this.warnPopup = 'psyj';
						this.$refs.warnPopup.open();
						return;
					}
				}

				if (this.isPaotui && this.selected === 'zhiding' && !this.assignedWorker && !isJoiningFaceToFace) {
					this.warnPopup = 'psy';
					this.$refs.warnPopup.open();
					return;
				}
				this.submitOrderToBackend();
			},
			goDetail() {
				let shopArea = this.shopItem.shopArea || '';
				let putArea = this.formData.address ? this.formData.address.areaId : '';
				uni.navigateTo({
					url: `/package1/index/deliveryPersonList?orderType=0&shopAreaId=${shopArea}&putAreaId=${putArea}`
				})
			},
			openCouponPopup() {
				this.fetchCoupons();
				this.$refs.couponPopup.open('bottom');
			},
			fetchCoupons() {
				let userId = uni.getStorageSync('id');
				if (!userId) return;
				let amount = this.preDiscountTotal;
				this.tui.request('/mall/coupon/available', 'GET', {
					userId: userId,
					regionId:JSON.parse(uni.getStorageSync('area')).id,
					applyScene: 1,
					amount: amount,
					merchantId: this.shopItem.shopId || '0'
				}, false, true).then((res) => {
					if (res.code == 200 && res.result) {
						this.availableCoupons = res.result;
						if (this.selectedCoupon) {
							let stillValid = this.availableCoupons.find(c => c.id === this.selectedCoupon.id);
							if (!stillValid) this.selectedCoupon = null;
						}
					}
				});
			},
			selectCoupon(item) {
				this.selectedCoupon = item;
				this.$refs.couponPopup.close();
			},
			openAddressBook() {
				this.$refs.bookPopup.open('bottom')
			},
			checkTime(type) {
				if (type === this.formData.isImmediately) {
					if (type === false) {
						this.$refs.model.open()
						this.generateDeliveryTimes()
					}
					return;
				}
				this.formData.isImmediately = type;
				if (this.formData.isImmediately === false) {
					this.$refs.model.open()
					this.generateDeliveryTimes()
				}
			},
			checkVoucher(type) {
				if (type == this.selected) return;
				this.selected = type;
				if (this.selected == 'buzhiding') {
					this.formData.peisongyuan = "";
					this.assignedWorker = null;
				}
			},
			wxPayment() {
				let that = this;
				if (!this.currentOrderId || !this.backendTotalAmount) {
					that.tui.toast(this.currentOrderId + this.backendTotalAmount);
					return;
				}

				let amountInCents = Math.round(this.backendTotalAmount * 100);
				let payDesc = '商城订单';

				this.tui.request("/api/wechat/pay/unified-order", "POST", {
					openid: uni.getStorageSync('miniProgramOpenid') || 'test-openid',
					amount: amountInCents, // 支付金额（分）
					description: payDesc,
					outTradeNo: this.currentOrderId
				}, false, false).then((res) => {
					if (res.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timeStamp,
							nonceStr: res.nonceStr,
							package: res.package,
							signType: res.signType,
							paySign: res.paySign,
							success: function(res2) {
							uni.showToast({ title: '支付成功', icon: 'success' });
								that.tui.request("/api/wechat/pay/paySuccess", "POST", {
									outTradeNo: that.currentOrderId
								}, false, false).then((res3) => {
									if(res3.code == 200){
										that.handlePaymentSuccess();
									}else{
										that.tui.toast("订单创建失败，请联系客服处理");
									}
								})
								
							},
							fail: function(err) {
								uni.redirectTo({
									url: '/package1/order/orderConfirm?id=' + that.currentOrderId + '&amount=' + this.backendTotalAmount
								});
							}
						});
					} else {
						// 模拟支付成功(用于测试环境)
						if (res.code == 404 || res.code == 500 || res.code == 400 || !res.code) {
							that.tui.request(
								`/hiver/order/payMallOrderSuccess?orderId=${that.currentOrderId}&workerId=${that.assignedWorker ? that.assignedWorker.workerId : ''}`,
								"POST", {}, false, false).then(res2 => {
								that.$refs.payPopup.close();
								uni.showToast({
									title: '支付成功(模拟)',
									icon: 'none'
								});
								setTimeout(() => {
									that.handlePaymentSuccess();
								}, 1500);
							}).catch(e => {
								that.tui.toast("请求失败");
							});
						} else {
							that.tui.toast(res.message);
						}
					}
				})
			},
			handlePaymentSuccess() {
				if (!this.isGroupBuy) {
					uni.redirectTo({
						url: '/package1/order/orderConfirm?id=' + that.currentOrderId + '&amount=' + this.backendTotalAmount
					});
				} else {
					let isInitiating = !this.groupItem.groupId;
					let isJoining = !!this.groupItem.groupId;
					if (isInitiating) {
						this.isPaymentSuccessGroupInitiate = true;
						this.$refs.pintuanPopup.open('center');
						return;
					} else if (isJoining) {
						uni.redirectTo({
							url: '/package1/order/orderConfirm?id=' + that.currentOrderId + '&amount=' + this.backendTotalAmount
						});
					}
				}
			},
			onPintuanPopupChange(e) {
				if(!e.show){
					uni.redirectTo({
						url: '/package1/order/orderConfirm?id=' + that.currentOrderId + '&amount=' + this.backendTotalAmount
					});
				}
			},
			getMustFinishTime() {
				if (!this.formData.deliveryTime || this.formData.deliveryTime === '自动送达' || this.formData.deliveryTime ===
					'尽快送达'){
						  const now = new Date();
						  now.setMinutes(now.getMinutes() + 35);
						  const year = now.getFullYear();
						  const month = String(now.getMonth() + 1).padStart(2, '0');
						  const day = String(now.getDate()).padStart(2, '0');
						  const hours = String(now.getHours()).padStart(2, '0');
						  const minutes = String(now.getMinutes()).padStart(2, '0');
						  const seconds = String(now.getSeconds()).padStart(2, '0');
						  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
					}else{
						let timeStr = this.formData.deliveryTime;
						if (timeStr.length === 5) {
							let [h, m] = timeStr.split(':');
							let targetHour = parseInt(h);
							let d = new Date();
							if (targetHour < d.getHours()) d.setDate(d.getDate() + 1);
							let yyyy = d.getFullYear();
							let MM = String(d.getMonth() + 1).padStart(2, '0');
							let DD = String(d.getDate()).padStart(2, '0');
							return `${yyyy}-${MM}-${DD}T${timeStr}:00`;
						}
					}
				return null;
			},
			sliceMsg1(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name = newObj[as].specPrice
					}
				}
				return name;
			},
			submitOrderToBackend() {
				let isJoiningFaceToFace = this.isGroupBuy && this.groupItem && this.groupItem.groupId && this.groupItem
					.isFaceToFace;

				let items = [];
				if (this.isGroupBuy && this.groupItem) {
					if(this.groupItem.item.moreBuyData){
						for(let a = 0;a<this.groupItem.item.moreBuyData.length;a++){
							items.push({
								productId: this.groupItem.item.moreBuyData[a].id,
								specs: '',
								price: parseFloat(this.sliceMsg1(this.groupItem.item.moreBuyData[a].attributeListPrice)),
								quantity: this.groupItem.item.moreBuyData[a].quantity
							});
						}
					}
					items.push({
						productId: this.groupItem.item.id,
						productName: this.groupItem.item.productName,
						productPicture: this.groupItem.item.productPicture,
						specs: JSON.stringify(this.groupItem.specs || {}),
						price: parseFloat(this.groupItem.groupRule.groupPrice),
						isMain:0,
						quantity: 1
					});
				} else {
					for (let cart of this.cartItems) {
						items.push({
							productId: cart.item.id,
							specs: JSON.stringify(cart.specs || {}),
							price: parseFloat(cart.price),
							quantity: cart.quantity
						});
					}
				}

				let deliveryType = this.isPaotui ? 1 : 2;
				let payload = {
					userId: uni.getStorageSync('id') || 'test-user123',
					shopId: this.shopItem.id,
					deliveryType: deliveryType,
					packageFee: this.isPaotui ? this.packageFee : 0,
					remark: this.remark,
					items: items,
					receiverName: this.formData.address ? this.formData.address.receiverName : '',
					receiverPhone: this.formData.address ? this.formData.address.phone : '',
					receiverAddress: this.formData.address ? ((this.formData.address.areaName || '') + (this.formData
						.address.floor ? this.formData.address.floor + '层' : '') + (this.formData.address
						.roomNum || '')) : '',
					shopName: this.shopItem.shopName,
					shopPhone: this.shopItem.contactPhone || '',
					shopAddress: this.shopItem.shopAddress || ''
				};

				let mft = this.getMustFinishTime();
				if (mft) payload.mustFinishTime = mft;

				if (deliveryType === 1 && !isJoiningFaceToFace) {
					payload.addressId = this.formData.address ? this.formData.address.id : null;
					payload.getAreaId = this.shopItem.shopArea || null;
					payload.putAreaId = this.formData.address ? this.formData.address.areaId : null;
				}
				
				payload.userCouponId = this.selectedCoupon ? this.selectedCoupon.id : null;

				if (this.isGroupBuy && this.groupItem) {
					if (this.groupItem.groupId) {
						payload.groupId = this.groupItem.groupId;
					} else {
						payload.groupParam = {
							targetMembers: parseInt(this.groupItem.groupRule.groupCount),
							isFaceToFace: this.groupItem.isFaceToFace ? 1 : 0,
							selfCommission: this.selected === 'buzhiding' ? parseFloat(this.customCommission || 0) :
								null
						};
					}
				}

				if (this.isPaotui && !isJoiningFaceToFace) {
					if (this.selected === 'zhiding' && this.assignedWorker) {
						payload.workerParam = {
							workerId: this.assignedWorker.workerId,
							workerName: this.assignedWorker.workerName,
							orderBkge: parseFloat(this.assignedWorker.orderBkge || 0) + this.highFloorFeeCalc
						};
					} else if (this.selected === 'buzhiding') {
						payload.workerParam = {
							orderBkge: parseFloat(this.customCommission || 0)
						};
					}
				}

				uni.showLoading({
					title: '创建订单中...'
				});
				payload.regionId = JSON.parse(uni.getStorageSync('area')).id
				this.tui.request("/mall/order/create", "POST", payload, false, false).then(res => {
					uni.hideLoading();
					if (res.success && res.result) {
						let orderId = res.result.id;
						let totalAmount = res.result.totalAmount;
						this.backendTotalAmount = totalAmount;
						this.currentOrderId = orderId;
						this.createdOrderInfo = res.result;
						this.$refs.payPopup.open('bottom');
					} else {
						uni.showToast({
							title: res.message || '下单失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
				});
			},
			//时间选择器获取时间数据
			generateDeliveryTimes() {
				const now = new Date();
				const today = new Date(now);
				const tomorrow = new Date(now);
				tomorrow.setDate(tomorrow.getDate() + 1);

				// 星期几
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const todayWeekday = weekdays[today.getDay()];
				const todayStr = `今天 (${todayWeekday})`;

				// 明天的日期格式：月-日（不补零）
				const month = tomorrow.getMonth() + 1;
				const day = tomorrow.getDate();
				const tomorrowStr = `${month}-${day}`;

				// ----- 生成今天的时间列表 -----
				const todayTimelist = [{
					timestr: '自动送达'
				}];

				const currentHour = now.getHours();
				const currentMinute = now.getMinutes();

				// 计算下一个半小时点
				let nextHour = currentHour;
				let nextMinute = 30;
				if (currentMinute >= 30) {
					nextHour = currentHour + 1;
					nextMinute = 0;
				}

				// 从下一个半小时点开始，直到 23:30
				for (let h = nextHour; h <= 23; h++) {
					const startMin = (h === nextHour) ? nextMinute : 0;
					for (let m = startMin; m < 60; m += 30) {
						if (h === 23 && m > 30) continue; // 不超过 23:30
						const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
						todayTimelist.push({
							timestr: timeStr
						});
					}
				}

				// ----- 生成明天的时间列表（全天 00:00 ~ 23:30）-----
				const tomorrowTimelist = [];
				for (let h = 0; h <= 23; h++) {
					for (let m = 0; m < 60; m += 30) {
						if (h === 23 && m > 30) continue;
						const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
						tomorrowTimelist.push({
							timestr: timeStr
						});
					}
				}

				this.content = [{
						timezh: todayStr,
						timelist: todayTimelist
					},
					{
						timezh: tomorrowStr,
						timelist: tomorrowTimelist
					}
				];
			},
			//时间选择器点击后
			timeCallback(val) {
				this.formData.deliveryTime = val.timestr
				this.$refs.model.close()
			},
			back() {
				uni.navigateBack()
			}
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
		background: #fff;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.tab1 {
		width: 100%;
		height: 160rpx;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.box1 {
		width: 95%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		

		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}

	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
		color: #777;
	}

	.pintuan-left-price {
		// width: 55%;
		text-align: right;
		font-weight: 700;
		color: #000;
		display: flex;
	}

	.goods-content-bottom {
		display: flex;
		line-height: 56rpx;
		color: #777;
	}

	.address-box {
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		padding: 0 40rpx;
		margin-top: 20rpx;
	}

	.time-box {
		background: #fff;
		display: flex;
		height: 140rpx;
		padding: 20rpx;
	}

	.time1 {
		height: 100rpx;
		flex: 1;
		border-radius: 20rpx;
		text-align: center;
		margin: 0 10rpx 0 20rpx;
		line-height: 40rpx;
		padding-top: 10rpx;
	}

	.radio-check {
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		width: 48rpx;
		height: 48rpx;
		border-radius: 48rpx;
		text-align: center;
		line-height: 48rpx;
		margin: 0 20rpx 0 0;
	}

	.radio-no-check {
		width: 48rpx;
		height: 48rpx;
		border-radius: 48rpx;
		border: 1px solid #eee;
		margin: 0 20rpx 0 0;
	}

	.buy-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		display: flex;
		background: #fff;
		z-index: 99;
		box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.3);
	}

	.bottom-btn {
		width: 90%;
		height: 100rpx;
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		font-size: 26rpx;
		font-weight: 700;
		line-height: 100rpx;
		text-align: center;
		border-radius: 100rpx;
		margin: 20rpx auto;
	}
	.ziqu-text{
		align-items: center;
		display: flex;
	}
	.btn {
		width: 95%;
		height: 100rpx;
		font-size: 32rpx;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 40rpx auto 0;
	}

	.ziqu-box {
		background: #f5f5f5;
		width: 90%;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.ziqu-xuanfu {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10rpx 20rpx;
		background: rgba(166, 255, 234, 1);
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		font-weight: 700;
		font-size: 20rpx;
	}

	.ziqu-address {
		display: flex;
		height: 110rpx;
		background: #fff;
		width: 90%;
		border-radius: 20rpx;
		font-size: 26rpx;
		margin: 60rpx auto 20rpx;
		font-weight: bold;
		line-height: 40rpx;

		img {
			width: 40rpx;
			height: 40rpx;
			margin: 36rpx 20rpx 0 30rpx;
		}
	}

	.ziqu-time-box {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		font-weight: 700;
	}

	.ziqu-call-box {
		width: 90%;
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0 auto 20rpx;
	}

	.ziqu-call {
		flex: 1;
	}

	.book-popup-content {
		position: relative;
		height: 1200rpx;
		width: 100%;
		padding: 20rpx;
		overflow: scroll;
	}

	.vue-ref {
		border-radius: 20rpx !important;
	}

	.pintuan-popup {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/780a024aefb7431ba21cf16efc8a482e.png') no-repeat;
		background-size: 100%;
		width: 600rpx;
		height: 960rpx;
		position: relative;
	}

	.kaituan1 {
		height: 120rpx;
		font-size: 44rpx;
		font-weight: 700;
		margin-top: 20rpx;
	}

	.kaituan1-title {
		position: relative;
		text-align: center;

		img {
			width: 120rpx;
			height: 22rpx;
			position: absolute;
			bottom: 0;
			right: 250rpx;
		}
	}

	.kaituan1-title1 {
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.kaituan2 {
		display: flex;
		width: 90%;
		margin: 40rpx auto;
	}

	.kaituan22 {
		flex: 1;
	}

	.kaituan3 {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #777;
	}

	.kaituan4 {
		width: 85%;
		height: 100rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: 700;
		margin: 20rpx auto;
	}

	.kaituan5 {
		margin: 40rpx 0 40rpx;
	}
	
	.weipincheng {
		width: 90rpx;
		height: 90rpx;
		background: rgba(166, 255, 234, 0.24);
		border-radius: 90rpx;
		text-align: center;
		font-size: 60rpx;
		font-weight: 700;
		margin-left: -6rpx;
		z-index: 97;
		color: #02fbdd;
		border: 1px solid #a6ffea;
		line-height: 80rpx;
		margin: 0 auto;
	}
	button::after{
		border: 0;
	}
</style>