<template>
	<view class="content">
		<uni-nav-bar color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true" :border="false"
			@clickLeft="$c.back">
			<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
				我的盒柜
			</view>
		</uni-nav-bar>

		<view class="tab">
			<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
				:class="tabCur == i ? 'act' : 'unact'" @click="tabChange(i)">
				<text>{{ item.title }}</text>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption"
			:up="upOption">
			<template v-if="tabList[tabCur].id == 1">
				<view class="search">
					<view class="input-box">
						<input v-model="keyword" placeholder-style="color:#8A8A8A;" placeholder="请输入关键字" />
						<view class="icon" @click="tabChange(tabCur)">
							<uni-icons type="search" color="#8A8A8A"></uni-icons>
						</view>
					</view>
					<view class="rule column align-center" @click="$refs.rulePop.getRule(10, '发货规则')">
						<image class="img100" :src="$img1('shangdai/shuoming.png')"></image>
					</view>
				</view>
				<view class="sub-tab">
					<view class="sub-tab-item common_bg center" v-for="(item, i) in subTab" :key="i"
						:class="subTabCur == i ? 'act' : 'unact'" @click="subTabChange(i)">
						<text>{{ item.title }}</text>
					</view>
				</view>
				<view class="num-all">
					<view class="flex row">
						<view class="num">
							共
							<text>{{ nowNum }}</text>
							个赏品
						</view>
						<view class="all" style="margin-left: 30rpx;">
							已选
							<text>{{ nowChooseNum }}</text>
							个
						</view>
					</view>

					<view class="flex row" v-if="tabList[tabCur].id == 1">

						<view class="flex center" @click="tabChange(tabCur)"
							style="width: 88rpx; height: 40rpx; background-color: #F5F5F5; border-radius: 8rpx;">
							<text style="color: #333333; font-size: 20rpx;">刷新</text>
						</view>

						<view class="" @click="chooseAll">
							<view v-if="isAll" class="flex center"
								style="width: 88rpx; height: 40rpx; background-color: #E6F791; border-radius: 8rpx; margin-left: 32rpx;">
								<text style="color: #333333; font-size: 20rpx;">全选</text>
							</view>
							<view v-else class="flex center"
								style="width: 88rpx; height: 40rpx; background-color: #F5F5F5; border-radius: 8rpx; margin-left: 32rpx;">
								<text style="color: #333333; font-size: 20rpx;">全选</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="list-item" v-for="(a, b) in GetOrderList" :key="a.prize_code">
						<view class="pic">
							<image :src="a.goodslist_imgurl" lazy-load></image>

							<view class="num">{{ a.prize_num }}</view>
							<view class="yu-tag ziti" v-if="subTab[subTabCur].id == 2">预售</view>
						</view>
						<view class="name hang1">{{ a.goodslist_title }}</view>
						<view class="price" v-if="false">
							{{
								a.goodslist_money * 1 > 0
									? `可分解:${a.goodslist_money}`
									: `不可分解`
							}}
						</view>
						<view class="num-box">
							<view class="icon flex" @click="jian(a)">
								<image class="img100" :src="$img1('shangdai/jian.png')"></image>
							</view>
							<input v-model="a.chooseNum" disabled="true" @blur="verifyNum(a)" />
							<view class="icon flex" @click="jia(a)">
								<image class="img100" :src="$img1('shangdai/jia.png')"></image>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 申请提货/已发货/完成提货 -->
			<view v-else class="order-list">
				<view class="order-item" v-for="(item, i) in listData" :key="i" @click="toOrder(item)">
					<view class="order-hd">
						<view class="time">申请时间：{{ item.addtime }}</view>

						<view class="status">{{ item.status_name }}</view>
					</view>

					<scroll-view class="order-bd" scroll-x>
						<view class="order-goods" v-for="(a, b) in item.order_list" :key="b">
							<view class="pic">
								<image :src="a.goodslist_imgurl" lazy-load></image>
								<view class="num center">{{ a.prize_num }}</view>
								<view class="num2 center" v-if="a.fh_status == 1">已发货</view>
							</view>

							<view class="title hang1">
								{{ a.goodslist_title }}
							</view>
						</view>
					</scroll-view>
					<view class="order-btns mt20" v-if="item.status == 2" @click.stop>
						<view class="btn center" @click="toExpress(item)">查看物流</view>
						<view class="btn2 center ml30" @click="submitGet(item)">确认收货</view>
					</view>
				</view>
			</view>
		</mescroll-body>


		<view v-if="tabList[tabCur].id == 1" class="bt-fixed">
			<template v-if="subTab[subTabCur].id != 4">
				<view v-if="subTab[subTabCur].id != 6 && is_exchange == '1' && show_dadajuan" class="btn center"
					@click="open('changePop')">达达券</view>
				<view v-if="subTab[subTabCur].id != 2" class="btn2 center" @click="open('sendPop')">发货</view>
				<view v-if="subTab[subTabCur].id != 6" class="btn center" @click="open('model')">上锁</view>
			</template>
			<view v-else class="btn center" @click="open('model')">解锁</view>
		</view>

		<!-- 兑换弹窗 -->
		<uni-popup ref="changePop" type="bottom">
			<view class="change-pop relative">
				<view class="change-pop-hd">
					<text class="">兑换确认</text>
					<view class="close icon" @click="close('changePop')">
						<image :src="$img('/static/img/close2.png')" lazy-load></image>
					</view>
				</view>
				<view class="change-pop-bd">
					<view class="bd-top">
						<view>已选
							<text style="color: #333333;">{{ nowChooseNum }}</text>
							件赏品
						</view>
					</view>

					<scroll-view class="bd-goods" scroll-x>
						<view class="goods-item" v-for="(item, i) in handelList" :key="i">
							<view class="pic">
								<image :src="item.goodslist_imgurl" lazy-load></image>

								<view class="num center">{{ item.chooseNum }}</view>
							</view>
							<view class="title hang1">
								{{ item.goodslist_title }}
							</view>

						</view>
					</scroll-view>

				</view>
				<view class="align-center justify-center mt30"
					style="background-color: #FFFFFF; height: 82rpx; border-radius: 16rpx;">
					<view class="" style="color: #333333;">
						共<text style="color: #333333;">{{ nowChooseNum }}</text>
						件物品，合计兑换<text style="color: #333333;"></text>
						<text style="color: #333333; font-size: 30rpx;">{{ totalChangeMoney }}</text>
						<text style="">{{ this.$config.getAppSetting('currency2_name') }}</text>
					</view>
				</view>
				<view class="change-pop-ft" @click="$c.noDouble(submitChange)">
					<text>确认兑换</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="sendPop" type="bottom">
			<view class="send-pop relative">
				<view class="send-pop-hd">
					发货确认单
					<view class="close icon" @click="close('sendPop')">
						<image :src="$img('/static/img/close2.png')" lazy-load></image>
					</view>
				</view>

				<view class="send-pop-card">
					<view class="card-top">
						<view>已选
							<text style="color: #333333;">{{ nowChooseNum }}</text>
							件赏品
						</view>
					</view>

					<scroll-view class="card-goods" scroll-x>
						<view class="goods-item" v-for="(item, i) in handelList" :key="i">
							<view class="pic">
								<image :src="item.goodslist_imgurl" lazy-load></image>
								<!-- <view class="type">{{ item.shang_title }}</view> -->
								<view class="num center">{{ item.chooseNum }}</view>
							</view>

							<view class="title hang1">
								{{ item.goodslist_title }}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="br20 mt20" style="background: #FFFFFF;padding: 0 20rpx;">
					<view class="address" @click="chooseAdd">
						<view v-if="!addData" class="add-choose">请选择收货地址</view>

						<view v-else class="add-info">
							<view class="name-phone">
								<view>{{ addData.userName }}</view>
								<view class="phone">{{ addData.telNumber }}</view>
							</view>

							<view class="add-text">
								{{ addData.detailed_address }}
							</view>
						</view>
						<view class="icon">
							<image :src="$img1('common/right1.png')" lazy-load></image>
						</view>
					</view>
					<view class="freight border">
						<view>快递(满{{ freightData.free_post }}件包邮)</view>
						<view>
							<text>
								{{
									nowChooseNum >= freightData.free_post
										? '包邮'
										: `¥${freightData.post_money}`
								}}
							</text>
						</view>
					</view>
				</view>

				<view class="agree" @click="isAgree = !isAgree">
					<view class="icon">
						<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>

						<image v-else :src="$img1('common/check.png')" lazy-load></image>
					</view>

					我已满18岁,阅读并同意

					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
						《用户协议》
					</text>

					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
						《隐私政策》
					</text>
				</view>

				<view class="send-pop-ft mt30" @click="$c.noDouble(submitSend)">
					<text>确认发货</text>
				</view>
			</view>
		</uni-popup>

		<!-- 上锁弹窗 -->
		<uni-popup ref="model" type="center">
			<view class="model flex center">
				<view class="model-bd">{{ lockMsg }}</view>
			</view>
			<view class="model-ft row">
				<view class="model-btn" @click="close('model')">取消</view>

				<view class="model-btn act" @click="$c.noDouble(submitLock)">
					确定
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="res-pop column center">
				<!-- <view class="res-pop-hd"></view> -->
				<view class="res-list center">
					<view class="res-item center column">
						<view class="pic center">
							<image class="img100" :src="$img1('shangdai/qianbao.png')" lazy-load></image>
						</view>
						<view class="item-info">
							<view class="title center hang1">
								恭喜您成功兑换，获得{{ zhanshiMoney }} {{ this.$config.getAppSetting('currency2_name') }}
							</view>
						</view>
					</view>
				</view>
				<view class="res-pop-ft center justify-center" @click="$refs.resPop.close()">
					<text>确定</text>
				</view>
			</view>
		</uni-popup>

		<rule-pop ref="rulePop"></rule-pop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			remark: '',

			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {
				auto: false
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				auto: true,
				page: {
					size: 10 // 每页数据的数量,默认10
				}
			},
			tabList: [{
				id: 1,
				title: '全部'
			},
			{
				id: 2,
				status: 1,
				title: '申请提货'
			},
			{
				id: 3,
				status: 2,
				title: '已发货'
			},
			{
				id: 4,
				status: 3,
				title: '完成提货'
			}
			],
			tabCur: 0,
			subTab: [{
				id: 1,
				title: '赏品'
			},
			// {
			//   id: 5,
			//   title: '无限赏'
			// },
			//  {
			// id:3,
			//   title: '宝箱'
			// },
			{
				id: 4,
				title: '保险柜'
			},
			{
				id: 2,
				title: '预售'
			}
				// {
				//   id: 6,
				//   title: '明信片'
				// }
			],
			subTabCur: 0,
			listData: [],
			total: 0,
			handelList: [],
			addData: '',
			lockMsg: '',
			freightData: '',
			canReload: false,
			zhanshiMoney: 0,
			isAgree: false,
			is_exchange: '0',
			show_dadajuan: false
		}
	},
	onShow() {
		if (uni.getStorageSync('token')) {
			this.getUserInfo()
		}
		this.canReload && this.tabChange(this.tabCur)
		this.canReload = true
		const curPages = getCurrentPages()[0]; // 获取当前页面实例
		if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
			this.$mp.page.getTabBar().setData({
				selected: 3
			});
		}
		this.$platform.getOrderNo(this).then(order_num => {
			if (order_num != null && order_num != "") {
				this.$c.msg("支付成功~")
			}
		});
	},
	onLoad() {
		this.$nextTick(() => {
			this.$refs.mescrollRef.mescroll.optUp.empty.tip = '~ 快来抽赏吧 ~'
		})

	},
	computed: {
		/* 当前选中可兑换金额 */
		totalChangeMoney() {
			if (this.tabList[this.tabCur].id != 1) return
			if (this.handelList.length <= 0) {
				return 0
			}
			var total = this.handelList.reduce(
				(pre, item) => pre + item.chooseNum * item.goodslist_money,
				0
			)
			// console.log("8888888", total);

			return this.$c.removeTrailingZeros(total.toFixed(2));

		},
		/* 是否全选 */
		isAll() {
			if (this.tabList[this.tabCur].id != 1) return

			if (this.listData.length <= 0) {
				return false
			}

			return this.nowNum == this.nowChooseNum
		},

		/* 当前选中数量 */
		nowChooseNum() {
			if (this.tabList[this.tabCur].id != 1) return

			const arr = this.getChooseGoods()

			return arr.reduce((pre, item) => pre + Number(item.chooseNum), 0)
		},

		/* 当前赏品总数 */
		nowNum() {
			if (this.tabList[this.tabCur].id != 1) return

			const arr = []
			if (this.listData != null && this.listData.length > 0) {
				this.listData.forEach(item => {
					if (item != null && item.orderlist != null && item.orderlist.length > 0) {
						item.orderlist.forEach(a => {
							arr.push(a)
						})
					}
				})
			}

			return arr
				.filter(item => item.prize_num > 0)
				.reduce((pre, item) => pre + Number(item.prize_num), 0)
		},
		GetOrderList() {
			if (this.listData != null && this.listData.length > 0) {
				let t = []
				this.listData.forEach(it => {
					if (it != null && it.orderlist != null && it.orderlist.length > 0) {
						it.orderlist.forEach(a => {
							t.push(a)
						})
					}
				})
				return t
			} else {
				return []
			}
		}
	},

	onReady() {
		// this.open('changePop')
		// this.open('sendPop')
		// this.open('model')
	},

	methods: {
		getUserInfo() {
			let that = this
			that.req({
				url: 'user',
				success(res) {
					if (res.status == 1) {
						uni.setStorageSync('userinfo', res.data.userinfo)
						console.log(res.data.userinfo.js_is_open)
						that.is_exchange = res.data.userinfo.is_exchange
					}
				}
			})
		},
		submitGet(item) {
			this.req({
				url: 'warehouse_send_confirm',
				data: {
					id: item.id
				},
				success: res => {
					if (res.status == 1) {
						this.$c.toast({
							title: res.msg,
							duration: 500,
							success: () => {
								this.tabChange(this.tabCur)
							}
						})
					}
				}
			})
		},

		toExpress(item) {
			this.$c.to({
				url: '/pages/user/wuliu_detail',
				query: {
					id: item.id
				}
			})
		},

		toOrder(item) {
			this.$c.to({
				url: '/pages/user/order',
				query: {
					id: item.id
				}
			})
		},

		chooseAdd() {
			this.canReload = false;
			console.log('aaaaaaaaaaaaaaaaaaaa');

			this.$platform.chooseAddress().then(res => {
				console.log(res);

				this.addData = res
				this.canReload = true;
			});
		},

		submitLock() {
			let url = 'warehouse_movein'
			let data = this.handelList.map(item => {
				return {
					prize_code: item.prize_code,
					number: item.chooseNum
				}
			})
			// console.log(data)
			// return

			if (this.subTab[this.subTabCur].id == 4) {
				url = 'warehouse_remove'
			}

			this.req({
				url,
				data: {
					recovery_info: JSON.stringify(data)
				},
				success: res => {
					if (res.status == 1) {
						this.close('model')

						this.$c.toast({
							title: res.msg,
							duration: 500,
							success: () => {
								this.tabChange(this.tabCur)
							}
						})
					}
				}
			})
		},

		submitSend() {
			if (!this.isAgree) {
				this.$c.toast({
					title: '请阅读并同意《用户协议》《隐私政策》'
				})
				return
			}
			if (!this.addData) {
				this.$c.toast({
					title: '请选择地址'
				})
				return
			}

			let data = this.handelList.map(item => {
				return {
					prize_code: item.prize_code,
					number: item.chooseNum
				}
			})

			this.req({
				url: 'warehouse_send',
				data: {
					recovery_info: JSON.stringify(data),
					type: this.subTab[this.subTabCur].id,
					name: this.addData.userName,
					mobile: this.addData.telNumber,
					address: this.addData.detailed_address,
					message: this.remark
					// ad_id: uni.getStorageSync('_ad_id')
				},
				success: async res => {
					if (res.status == 1) {
						this.close('sendPop')
						this.remark = ''

						if (res.data.status == 1) {
							const status = await this.$platform.pay({
								data: res.data.res
							}, this)

							if (status == 'success') {
								this.tabChange(this.tabCur)
							}
						} else {
							this.$c.toast({
								title: res.msg,
								duration: 500,
								success: () => {
									this.tabChange(this.tabCur)
								}
							})
						}
					}
				}
			})
		},

		submitChange() {
			let data = this.handelList.map(item => {
				return {
					prize_code: item.prize_code,
					number: item.chooseNum
				}
			})
			// console.log(data)
			// return

			this.req({
				url: 'warehouse_recovery',
				data: {
					recovery_info: JSON.stringify(data),
					type: this.subTab[this.subTabCur].id
				},
				success: res => {
					if (res.status == 1) {
						this.close('changePop')
						this.zhanshiMoney = this.$c.removeTrailingZeros(this.totalChangeMoney);
						setTimeout(() => {
							this.$refs.resPop.open()
							this.tabChange(this.tabCur)
						}, 500)
					} else {
						this.$c.toast({
							title: res.msg
						})
					}
				}
			})
		},

		getChooseGoods() {
			const arr = []

			this.listData.forEach(item => {
				item.orderlist.forEach(a => {
					const child = a
					if (a.order_list_ids) {
						child.order_list_ids1 = a.order_list_ids.slice(0, a.chooseNum)
					}
					arr.push(child)
				})
			})

			return arr.filter(item => item.chooseNum > 0)
		},

		chooseAll() {
			if (this.isAll) {
				this.listData.map(item => {
					item.orderlist.map(a => {
						a.chooseNum = 0
					})
				})
			} else {
				this.listData.map(item => {
					item.orderlist.map(a => {
						a.chooseNum = a.prize_num
					})
				})
			}
		},

		verifyNum(item) {
			if (item.chooseNum <= 0) {
				item.chooseNum = 0
				return
			}

			if (item.chooseNum >= item.prize_num) {
				item.chooseNum = item.prize_num
				return
			}
		},

		jian(item) {
			if (item.chooseNum <= 0) {
				item.chooseNum = 0
				return
			}

			item.chooseNum -= 1
		},

		jia(item) {
			if (item.chooseNum >= item.prize_num) {
				item.chooseNum = item.prize_num
				return
			}

			item.chooseNum += 1
		},

		subTabChange(i) {
			this.subTabCur = i
			this.listData = []

			this.mescroll.resetUpScroll()
			this.mescroll.scrollTo(0, 0)
		},

		tabChange(i) {
			this.tabCur = i

			switch (i) {
				case 0:
					this.subTabChange(this.subTabCur)
					break
				default:
					this.listData = []

					this.mescroll.resetUpScroll()
					this.mescroll.scrollTo(0, 0)
					break
			}
		},

		getList({
			num,
			size
		}) {
			let url = 'warehouse_index'
			let data = {
				page: num
			}

			if (this.tabList[this.tabCur].id == 1) {
				data.type = this.subTab[this.subTabCur].id
				data.keyword = this.keyword
			} else {
				url = 'warehouse_send_record'
				data.status = this.tabList[this.tabCur].status
			}
			try {
				// let l = { "goods_title": "一生爱干净的你Y", "goods_id": 1037, "orderlist": [{ "shang_title": "普通", "id": 49368, "goodslist_title": "哪吒贴纸", "goodslist_imgurl": "https://image.zfunbox.cn/topic/20250424/6294f30d70b3a90a744c0b8d11237501.png", "goodslist_money": 25, "goods_id": 1037, "shang_id": 38, "prize_code": "qMjx4Jnb10_1744275374", "prize_num": 2, "order_list_ids": [49368, 49370], "chooseNum": 0 }], "orderlist_total": 2, "orderlist_length": 1 };
				// this.listData.push(l);
				// this.mescroll.endByPage(1,1)
				// return;
				this.req({
					url,
					data,
					Loading: true,
					success: res => {
						if (res.status == 1) {
							if (num == 1) {
								this.listData = [];
							}

							if (this.tabList[this.tabCur].id == 1) {
								res.data.data.map(item => {
									item.orderlist.map(a => {
										a.chooseNum = 0
									})
								})
								this.freightData = res.data.yufei
							}
							if (res.data.show_dadajuan != null) {
								this.show_dadajuan = res.data.show_dadajuan
							}
							// console.log(res.data.data, res.data.data.length);

							// this.listData.push(res.data.data[0]);
							// console.log(JSON.stringify(res.data.data[0]));

							this.listData = this.listData.concat(res.data.data)
							console.log(this.GetOrderList);

							this.mescroll.endByPage(res.data.data.length, res.data.last_page)
						} else {
							console.log('aaa');
							this.listData = [];
							this.mescroll.endByPage(0, 0)

						}
					},


				}).catch(() => {
					console.log('aaa');
					this.listData = [];
					this.mescroll.endByPage(0, 0)
				})
			} catch (error) {
				console.log('aaa');

			}
		},

		close(e) {
			this.$refs[e].close()
		},

		open(e) {

			this.handelList = []
			const choose = this.getChooseGoods()

			if (choose.length <= 0) {
				this.$c.toast({
					title: '请选择赏品'
				})
				return
			}

			this.handelList = choose

			if (e == 'model') {
				if (this.subTab[this.subTabCur].id != 4) {
					this.lockMsg = '请问您是否要将所选择赏品放入保险柜?'
				} else {
					this.lockMsg = '请问您是否要将所选择赏品移出保险柜?'
				}
			}

			this.$refs[e].open()
		},

		// 设置背景颜色
		getBgColor(text) {
			switch (text) {
				case "普通":
					return "#DAFF27";
					break;
				case "黄金":
					return "#9A8EF6";
					break;
				case "欧皇":
					return "#FFEB8E";
					break;
				case "超神":
					return "#FF8E8E";
					break;
				default:
					return "#9A8EF6";
					break;
			}
		},

		// 设置文字颜色
		getTextColor(text) {
			switch (text) {
				case "普通":
					return "#86AD46";
					break;
				case "黄金":
					return "#FFFFFF";
					break;
				case "欧皇":
					return "#DA8A50";
					break;
				case "超神":
					return "#FFEFB4";
					break;
				default:
					return "#FFFFFF";
					break;
			}
		}

	}
}
</script>

<style lang="scss">
.content {
	box-sizing: border-box;
	background-color: #FFFFFF;
	padding-bottom: calc(var(--window-bottom) + 240rpx);

	image {
		width: 100%;
		height: 100%;
		border-radius: inherit;
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;

		.tab-item {
			width: 155rpx;
			height: 68rpx;
			position: relative;
			margin-right: 25rpx;

			&.act {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 48rpx;
					height: 4rpx;
					background: #333333;
				}
			}

			&.unact {
				font-weight: 400;
				font-size: 28rpx;
				color: #CCCCCC;
			}
		}
	}

	.search {
		margin-top: 20rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.input-box {
			width: 615rpx;
			height: 70rpx;
			background: #F3F3F3;
			box-sizing: border-box;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			border-radius: 32rpx;

			input {
				flex: 1;
				font-size: 26rpx;
				font-weight: 400;
				color: #000;
			}
		}

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-left: 30rpx;
		}

		.rule {
			width: 40rpx;
			height: 68rpx;
		}
	}

	.sub-tab {
		display: flex;
		padding: 30rpx 30rpx 0;

		.sub-tab-item {
			width: 155rpx;
			height: 57rpx;
			font-size: 28rpx;
			font-weight: 400;

			&.act {
				color: #333333;
				background: url($imgurl+'index/checkTab.png') no-repeat 0 0 / 100% 100%;
			}

			&.unact {
				color: #333333;
				background: url($imgurl+'index/uncheckTab.png') no-repeat 0 0 / 100% 100%;
			}
		}

		.sub-tab-item+.sub-tab-item {
			margin-left: 30rpx;
		}
	}

	.num-all {
		padding: 30rpx 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #8A8A8A;

		text {
			color: #333333;
		}
	}

	.list {
		margin-top: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 210rpx);
		padding: 0 30rpx;
		gap: 30rpx 30rpx;

		.list-item {
			width: 100%;
			box-sizing: border-box;
			background: #F8F8F8;
			padding-bottom: 20rpx;
			border-radius: 16rpx;
			// background: url($imgurl+'shangdai/kuang.png') no-repeat 0 0 / 100% 100%;

			.pic {
				width: 202rpx;
				height: 202rpx;
				margin: 0 auto;
				position: relative;
				// background-color: #D8D8D8;
				border-radius: 16rpx 16rpx 0rpx 0rpx;

				>image {
					width: 202rpx;
					height: 202rpx;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
				}

				.type {
					position: absolute;
					z-index: 1;
					left: 10rpx;
					top: 12rpx;
					min-width: 68rpx;
					height: 32rpx;
					padding: 0 10rpx;
					font-weight: 400;
					font-size: 22rpx;
					border-radius: 18rpx;
				}

				.num {
					position: absolute;
					z-index: 1;
					left: 50%;
					bottom: 12rpx;
					transform: translateX(-50%);
					min-width: 50rpx;
					height: 38rpx;
					padding: 0 10rpx;
					border-radius: 18rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgba(0, 0, 0, 0.5);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
				}


				.yu-tag {
					position: absolute;
					right: 10rpx;
					bottom: 30rpx;
					z-index: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 32rpx;
					color: #894DD3;
					text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
				}
			}

			.name {
				padding: 20rpx 10rpx 0;
				font-size: 20rpx;
				font-weight: 400;
				color: #333333;
			}

			.price {
				padding: 10rpx 10rpx 0;
				text-align: center;

				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 300;
				color: #CCCCCC;
			}

			.num-box {
				margin: 24rpx 20rpx 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #DFDFDF;
				border-radius: 20rpx;

				.icon {
					width: 50rpx;
					height: 45rpx;
				}

				>input {
					margin: 0 10rpx;
					width: 70rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #8A8A8A;
				}
			}
		}
	}

	.order-list {
		padding: 1rpx 30rpx 0;

		.order-item {
			padding: 0 30rpx 30rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.order-hd {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;

				.time {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #8A8A8A;
				}

				.status {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}

			.order-bd {
				white-space: nowrap;

				.order-goods {
					display: inline-block;
					width: 170rpx;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0;
					}

					.pic {
						width: 100%;
						height: 170rpx;
						box-sizing: border-box;
						background: #000000;
						border-radius: 20rpx;
						position: relative;

						.num {
							position: absolute;
							z-index: 1;
							left: 50%;
							bottom: 10rpx;
							width: 50rpx;
							transform: translateX(-50%);
							box-sizing: border-box;
							padding: 0 10rpx;
							background: rgba(0, 0, 0, 0.5);
							font-size: 24rpx;
							font-weight: 400;
							color: #ffffff;
							border-radius: 20rpx;
						}

						.num2 {
							position: absolute;
							z-index: 1;
							right: 10rpx;
							top: 10rpx;
							width: 80rpx;
							// transform: translateX(-50%);
							box-sizing: border-box;
							padding: 0 10rpx;
							background: rgba(0, 0, 0, 0.5);
							font-size: 16rpx;
							font-weight: 400;
							color: #E6F791;
							border-radius: 20rpx;
						}
					}

					.title {
						padding: 16rpx 10rpx 0;

						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.line {
				margin: 20rpx 0;
				width: 100%;
				height: 1px;
				background: #666666;
			}

			.order-btns {
				display: flex;
				justify-content: flex-end;

				.btn {
					width: 160rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}

				.btn2 {
					width: 160rpx;
					height: 60rpx;
					background: #E6F791;
					border-radius: 16rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	.right-fixed {
		position: fixed;
		z-index: 10;
		right: 20rpx;
		top: 60vh;

		.fbtn {
			width: 110rpx;
			height: 98rpx;
			margin-top: 40rpx;
		}
	}

	.bt-fixed {
		position: fixed;
		z-index: 10;
		left: 0;
		// bottom: var(--window-bottom);
		// #ifdef H5
		bottom: var(--window-bottom);
		// #endif
		// #ifdef MP
		bottom: calc(var(--window-bottom) + 160rpx);

		// #endif
		// #ifdef APP
		bottom: 10px;
		// #endif

		width: 750rpx;
		box-sizing: border-box;
		padding: 0 30rpx 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btn {
			width: 201rpx;
			height: 66rpx;
			// font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			// text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
			background: url($imgurl+'shangdai/btn1.png') no-repeat 0 0 / 100% 100%;
		}

		.btn2 {
			width: 201rpx;
			height: 66rpx;
			// font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			// text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
			background: url($imgurl+'shangdai/btn2.png') no-repeat 0 0 / 100% 100%;
		}

		.btn1 {
			width: 378rpx;
			height: 80rpx;
		}
	}

	.change-pop {
		padding: 0 30rpx 80rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		position: relative;
		border-radius: 16rpx 16rpx 0rpx 0rpx;


		.change-pop-hd {
			padding: 30rpx 0;
			position: relative;
			text-align: center;

			font-size: 28rpx;
			// font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;

			.close {
				position: absolute;
				right: 0;
				top: 50%;
				padding: 20rpx;
				transform: translateY(-50%);
				width: 24rpx;
				height: 24rpx;
			}
		}

		.change-pop-bd {
			padding: 0 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.bd-top {
				display: flex;
				justify-content: center;
				padding: 30rpx 0;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #8A8A8A;

				text {
					color: #ffffff;
					margin: 0 4rpx;
				}
			}

			.bd-goods {
				white-space: nowrap;

				.goods-item {
					display: inline-block;
					width: 170rpx;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0;
					}

					.pic {
						width: 100%;
						height: 170rpx;
						box-sizing: border-box;
						background: #D8D8D8;
						border-radius: 20rpx;
						position: relative;
						overflow: hidden;

						.type {
							position: absolute;
							z-index: 1;
							left: 0;
							top: 0;
							height: 32rpx;
							display: flex;
							align-items: center;
							padding: 0 14rpx;
							background: linear-gradient(90deg,
									#6adeff 0%,
									#7ab5ff 50%,
									#ff7feb 100%);

							font-size: 20rpx;
							font-weight: 400;
							color: #222222;
						}

						.num {
							position: absolute;
							z-index: 1;
							left: 50%;
							transform: translateX(-50%);
							bottom: 10rpx;
							height: 32rpx;
							width: 50rpx;
							box-sizing: border-box;
							border-radius: 18rpx;
							padding: 10rpx 10rpx;
							background: rgba(255, 255, 255, 0.50);

							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}

					.title {
						padding: 10rpx 10rpx 0;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.price {
						padding: 4rpx 10rpx 0;

						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 300;
						color: #d0d1ff;
					}
				}
			}

			.bd-bt {
				padding: 30rpx 0 0;
				text-align: right;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;

				text {
					font-size: 36rpx;
					color: #D3AFFF;
				}
			}
		}

		.change-pop-ft {
			height: 84rpx;
			background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			justify-content: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #CDEF27;
		}
	}

	.send-pop {
		padding: 0 30rpx 80rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		position: relative;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		&::after {
			content: '';
			position: absolute;
			top: -62rpx;
			left: 0;
			width: 750rpx;
			height: 62rpx;
			// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
		}

		.send-pop-hd {
			padding: 40rpx 0;
			position: relative;
			text-align: center;
			font-size: 28rpx;
			// font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;

			.close {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 24rpx;
				height: 24rpx;
			}
		}

		.send-pop-card {
			padding: 0 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.card-top {
				display: flex;
				justify-content: center;
				padding: 30rpx 0;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #8A8A8A;

				>text {
					margin: 0 4rpx;
				}
			}

			.card-goods {
				white-space: nowrap;

				.goods-item {
					display: inline-block;
					width: 170rpx;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0;
					}

					.pic {
						width: 100%;
						height: 170rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						background: #1C1B20;
						position: relative;
						overflow: hidden;

						.type {
							position: absolute;
							z-index: 1;
							left: 0;
							top: 0;
							height: 32rpx;
							display: flex;
							align-items: center;
							padding: 0 14rpx;
							background: linear-gradient(90deg,
									#6adeff 0%,
									#7ab5ff 50%,
									#ff7feb 100%);

							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #222222;
						}

						.num {
							position: absolute;
							z-index: 1;
							left: 50%;
							bottom: 12rpx;
							transform: translateX(-50%);
							height: 32rpx;
							min-width: 60rpx;
							box-sizing: border-box;
							padding: 0 10rpx;
							background: rgba(255, 255, 255, 0.50);
							font-size: 24rpx;
							font-weight: 400;
							border-radius: 20rpx;
							color: #000;
						}
					}

					.title {
						padding: 16rpx 10rpx 0;
						font-size: 20rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.bd-bt {
				padding: 30rpx 0 0;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;

				text {
					font-size: 36rpx;
					color: #D3AFFF;
				}
			}
		}

		.address {
			padding: 30rpx 0;
			position: relative;


			.add-choose {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}

			.add-info {
				padding-right: 60rpx;

				.name-phone {
					display: flex;

					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;

					.phone {
						padding-left: 10rpx;
					}
				}

				.add-text {
					margin-top: 10rpx;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #cccccc;
				}
			}

			.icon {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);

				width: 10rpx;
				height: 17rpx;
			}
		}

		.freight {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;

			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #676767;

			text {
				color: #676767;
			}
		}

		.remark {
			padding: 30rpx 0;

			.remark-title {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.textarea {
				background: #4e5264;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 20rpx;

				textarea {
					width: 100%;
					height: 120rpx;

					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.agree {
			display: flex;
			margin-top: 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.border {
			border-top: 1px solid #333333;
		}

		.send-pop-ft {
			margin: 30rpx auto 0;
			width: 686rpx;
			height: 84rpx;
			background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			color: #CDEF27;

			>text:nth-child(1) {
				font-size: 24rpx;
			}
		}
	}

	.model {
		width: 480rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		box-sizing: border-box;

		.model-bd {
			text-align: center;
			padding: 10rpx 0;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.model-ft {
		width: 100%;
		padding: 50rpx 0;
		display: flex;
		justify-content: space-between;

		.model-btn {
			width: 220rpx;
			height: 72rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F5F5F5;

			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A5A5A5;

			&.act {
				background: #D8FD24;
				color: #333333;
			}
		}
	}
}

.res-pop {
	width: 100%;
	height: 100vh;
	position: relative;
	// background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;

	.res-pop-hd {
		width: 380rpx;
		height: 104rpx;
		background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
	}

	.res-list {
		width: 480rpx;
		height: 240rpx;
		padding: 0 30rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.res-item {
			width: 100%;

			.pic {
				width: 120rpx;
				height: 120rpx;
				position: relative;
			}

			.item-info {
				padding: 30rpx 10rpx 10rpx;
				position: relative;
				z-index: 1;

				.title {
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.res-pop-ft {
		width: 220rpx;
		height: 72rpx;
		margin: 112rpx auto 0;
		box-sizing: border-box;
		background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;

		>text {
			color: #333333;
			margin-top: #333333;
		}
	}
}
</style>