From dd22c24f9aa96ac0b938acddedb1a35ec6c3ad2e Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Tue, 3 Feb 2026 02:15:49 +0800
Subject: [PATCH] 2112

---
 honey_box/common/env.js         |    4 +-
 honey_box/pages/hegui/hegui.vue | 2623 +++++++++++--------------------
 honey_box/pages/mall/index.vue  |  557 +++----
 3 files changed, 1159 insertions(+), 2025 deletions(-)

diff --git a/honey_box/common/env.js b/honey_box/common/env.js
index 6ee2ac79..927fcad7 100644
--- a/honey_box/common/env.js
+++ b/honey_box/common/env.js
@@ -11,9 +11,9 @@
 
 // 测试环境配置 - .NET 10 后端
 const testing = {
-	baseUrl: 'https://app.zpc-xy.com/honey/api',
+	// baseUrl: 'https://app.zpc-xy.com/honey/api',
 	// baseUrl: 'http://192.168.1.24:5238',
-	// baseUrl: 'http://192.168.195.15:2822',
+	baseUrl: 'http://192.168.195.15:2822',
 	imageUrl: 'https://youdas-1308826010.cos.ap-shanghai.myqcloud.com',
 	loginPage: '',
 	wxAppId: ''
diff --git a/honey_box/pages/hegui/hegui.vue b/honey_box/pages/hegui/hegui.vue
index 69451074..7943fee8 100644
--- a/honey_box/pages/hegui/hegui.vue
+++ b/honey_box/pages/hegui/hegui.vue
@@ -7,88 +7,66 @@
 			</view>
 		</uni-nav-bar>
 
+
+		<!-- 顶部Tab -->
 		<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)">
+			<view class="tab-item" v-for="(item, i) in tabList" :key="i"
+				:class="tabCur == i ? 'act' : ''" @click="tabChange(i)">
 				<text>{{ item.title }}</text>
+				<view v-if="tabCur == i" class="tab-line"></view>
 			</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 class="search-box">
+					<view class="search-input">
+						<uni-icons type="search" color="#999" size="18"></uni-icons>
+						<input v-model="keyword" placeholder="请输入关键字" placeholder-style="color:#999;" @confirm="tabChange(tabCur)" />
 					</view>
-					<view class="rule column align-center" @click="$refs.rulePop.getRule(10, '发货规则')">
-						<image class="img100" :src="$img1('shangdai/shuoming.png')"></image>
+					<view class="search-tip" @click="$refs.rulePop.getRule(10, '说明')">
+						<uni-icons type="info" color="#999" size="18"></uni-icons>
+						<text>说明</text>
 					</view>
 				</view>
+
+				<!-- 子Tab -->
 				<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 class="sub-tab-item" v-for="(item, i) in subTab" :key="i"
+						:class="subTabCur == i ? 'act' : ''" @click="subTabChange(i)">
+						{{ item.title }}
 					</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 class="stats-row">
+					<view class="stats-left">
+						<text>共<text class="num">{{ nowNum }}</text>个赏品</text>
+						<text class="ml20">已选<text class="num">{{ nowChooseNum }}</text>个</text>
 					</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 class="stats-right">
+						<view class="stats-btn" @click="tabChange(tabCur)">刷新</view>
+						<view class="stats-btn" :class="{ act: isAll }" @click="chooseAll">全选</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 class="goods-grid">
+					<view class="goods-item" v-for="(a, b) in GetOrderList" :key="a.prize_code">
+						<view class="goods-img">
+							<image :src="a.goodslist_imgurl" mode="aspectFill"></image>
+							<view class="goods-badge" 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 class="goods-title">{{ a.goodslist_title }}</view>
+						<view class="goods-qty">
+							<view class="qty-btn minus" @click="jian(a)">
+								<text>−</text>
 							</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>
+							<text class="qty-num">{{ a.chooseNum }}</text>
+							<view class="qty-btn plus" @click="jia(a)">
+								<text>+</text>
 							</view>
 						</view>
 					</view>
@@ -99,216 +77,121 @@
 			<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>
+						<text class="time">申请时间：{{ item.addtime }}</text>
+						<text class="status">{{ item.status_name }}</text>
 					</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 }}
+								<image :src="a.goodslist_imgurl" mode="aspectFill"></image>
+								<view class="num">{{ a.prize_num }}</view>
+								<view class="shipped" v-if="a.fh_status == 1">已发货</view>
 							</view>
+							<view class="title">{{ 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 class="order-btns" v-if="item.status == 2" @click.stop>
+						<view class="btn-outline" @click="toExpress(item)">查看物流</view>
+						<view class="btn-primary" @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 != 2 && 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>
+		<!-- 底部操作按钮 -->
+		<view v-if="tabList[tabCur].id == 1" class="bottom-action">
+			<view v-if="subTab[subTabCur].id == 4" class="action-btn" @click="open('model')">解锁</view>
+			<template v-else>
+				<view v-if="show_dadajuan && subTab[subTabCur].id != 2" class="action-btn secondary" @click="open('changePop')">
+					{{ $config.getAppSetting('currency2_name') }}
+				</view>
+				<view v-if="subTab[subTabCur].id != 2" class="action-btn" @click="open('sendPop')">发货</view>
+				<view v-if="subTab[subTabCur].id != 6" class="action-btn secondary" @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 class="popup-container">
+				<view class="popup-header">
+					<text class="popup-title">兑换确认</text>
+					<view class="popup-close" @click="close('changePop')">×</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 class="popup-body">
+					<view class="selected-info">已选<text>{{ nowChooseNum }}</text>件赏品</view>
+					<scroll-view class="goods-scroll" scroll-x>
+						<view class="scroll-item" v-for="(item, i) in handelList" :key="i">
+							<view class="item-img">
+								<image :src="item.goodslist_imgurl" mode="aspectFill"></image>
+								<view class="item-num">{{ item.chooseNum }}</view>
 							</view>
-							<view class="title hang1">
-								{{ item.goodslist_title }}
-							</view>
-
+							<view class="item-title">{{ 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 class="popup-summary">
+					共<text>{{ nowChooseNum }}</text>件物品，合计兑换<text class="highlight">{{ totalChangeMoney }}</text>{{ $config.getAppSetting('currency2_name') }}
 				</view>
+				<view class="popup-btn" @click="$c.noDouble(submitChange)">确认兑换</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 class="popup-container">
+				<view class="popup-header">
+					<text class="popup-title">发货确认单</text>
+					<view class="popup-close" @click="close('sendPop')">×</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 class="popup-body">
+					<view class="selected-info">已选<text>{{ nowChooseNum }}</text>件赏品</view>
+					<scroll-view class="goods-scroll" scroll-x>
+						<view class="scroll-item" v-for="(item, i) in handelList" :key="i">
+							<view class="item-img">
+								<image :src="item.goodslist_imgurl" mode="aspectFill"></image>
+								<view class="item-num">{{ item.chooseNum }}</view>
 							</view>
+							<view class="item-title">{{ 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 class="address-card" @click="chooseAdd">
+					<view v-if="!addData" class="address-empty">请选择收货地址</view>
+					<view v-else class="address-info">
+						<view class="address-name">{{ addData.userName }} {{ addData.telNumber }}</view>
+						<view class="address-detail">{{ addData.detailed_address }}</view>
 					</view>
+					<text class="address-arrow">›</text>
 				</view>
-
-
-				<view class="send-pop-ft mt30" @click="$c.noDouble(submitSend)">
-					<text>确认发货</text>
+				<view class="freight-row">
+					<text>快递(满{{ freightData.free_post }}件包邮)</text>
+					<text>{{ nowChooseNum >= freightData.free_post ? '包邮' : `¥${freightData.post_money}` }}</text>
 				</view>
-
-				<view class="agree center" @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 class="popup-btn" @click="$c.noDouble(submitSend)">确认发货</view>
+				<view class="agree-row" @click="isAgree = !isAgree">
+					<view class="check-icon" :class="{ active: isAgree }"></view>
+					<text>我已满18岁,阅读并同意《用户协议》《隐私政策》</text>
 				</view>
-
 			</view>
 		</uni-popup>
 
-		<!-- 上锁弹窗 -->
+		<!-- 上锁/解锁弹窗 -->
 		<uni-popup ref="model" type="center">
-			<view class="model column flex center">
-				<view class="model-bd">{{ lockMsg }}</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 class="confirm-modal">
+				<view class="modal-content">{{ lockMsg }}</view>
+				<view class="modal-btns">
+					<view class="modal-btn" @click="close('model')">取消</view>
+					<view class="modal-btn primary" @click="$c.noDouble(submitLock)">确定</view>
 				</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 class="res-pop-ft center justify-center" @click="$refs.resPop.close()">
-							<text>确定</text>
-						</view>
-					</view>
-
-				</view>
-
+			<view class="result-modal">
+				<image class="result-icon" :src="$img1('shangdai/qianbao.png')"></image>
+				<view class="result-text">恭喜您成功兑换，获得{{ zhanshiMoney }} {{ $config.getAppSetting('currency2_name') }}</view>
+				<view class="result-btn" @click="$refs.resPop.close()">确定</view>
 			</view>
 		</uni-popup>
 
@@ -317,1569 +200,885 @@
 </template>
 
 <script>
-	import {
-		getUserInfo
-	} from '@/common/server/user.js';
-	import {
-		getWarehouseIndex,
-		confirmSend,
-		moveInSafe,
-		moveOutSafe,
-		recoveryPrizeWithType,
-		sendPrizeWithAddress,
-		getSendRecordWithStatus
-	} from '@/common/server/warehouse.js';
+import { getUserInfo } from '@/common/server/user.js';
+import {
+	getWarehouseIndex,
+	confirmSend,
+	moveInSafe,
+	moveOutSafe,
+	recoveryPrizeWithType,
+	sendPrizeWithAddress,
+	getSendRecordWithStatus
+} from '@/common/server/warehouse.js';
 
-	export default {
-		data() {
-			return {
-				keyword: '',
-				remark: '',
-
-				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
-				downOption: {
-					auto: false
-				},
-				// 上拉加载的配置(可选, 绝大部分情况无需配置)
-				upOption: {
-					auto: true,
-					page: {
-						size: 10 // 每页数据的数量,默认10
+export default {
+	data() {
+		return {
+			keyword: '',
+			remark: '',
+			downOption: { auto: false },
+			upOption: { auto: true, page: { size: 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: 4, title: '保险柜' },
+				{ id: 2, title: '预售' }
+			],
+			subTabCur: 0,
+			listData: [],
+			total: 0,
+			handelList: [],
+			addData: '',
+			lockMsg: '',
+			freightData: '',
+			canReload: false,
+			zhanshiMoney: 0,
+			isAgree: false,
+			is_exchange: '0',
+			show_dadajuan: true
+		}
+	},
+	onShow() {
+		if (uni.getStorageSync('token')) {
+			this.loadUserInfo()
+		}
+		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)
+			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))
 					}
-				},
-				tabList: [{
-						id: 1,
-						title: '全部'
-					},
-					{
-						id: 2,
-						status: 1,
-						title: '申请提货'
-					},
-					{
-						id: 3,
-						status: 2,
-						title: '已发货'
-					},
-					{
-						id: 4,
-						status: 3,
-						title: '完成提货'
+				})
+			}
+			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))
 					}
-				],
-				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: true
+				})
+				return t
+			}
+			return []
+		}
+	},
+	methods: {
+		async loadUserInfo() {
+			const res = await getUserInfo();
+			if (res && res.userinfo) {
+				uni.setStorageSync('userinfo', res.userinfo)
+				this.is_exchange = res.userinfo.is_exchange
 			}
 		},
-		onShow() {
-			if (uni.getStorageSync('token')) {
-				this.loadUserInfo()
+		async submitGet(item) {
+			const res = await confirmSend({ id: item.id });
+			if (res.status == 1) {
+				this.$c.toast({ title: res.msg, duration: 500, success: () => this.tabChange(this.tabCur) })
 			}
-			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("支付成功~")
-				}
+		},
+		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;
+			this.$platform.chooseAddress().then(res => {
+				this.addData = res
+				this.canReload = true;
 			});
 		},
-		onLoad() {
-			this.$nextTick(() => {
-				this.$refs.mescrollRef.mescroll.optUp.empty.tip = '~ 快来抽赏吧 ~'
-			})
-
+		async submitLock() {
+			let data = this.handelList.map(item => ({ prize_code: item.prize_code, number: item.chooseNum }))
+			let res;
+			if (this.subTab[this.subTabCur].id == 4) {
+				res = await moveOutSafe({ recovery_info: JSON.stringify(data) });
+			} else {
+				res = await moveInSafe({ recovery_info: JSON.stringify(data) });
+			}
+			if (res.status == 1) {
+				this.close('model')
+				this.$c.toast({ title: res.msg, duration: 500, success: () => this.tabChange(this.tabCur) })
+			}
 		},
-		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
+		async submitSend() {
+			if (!this.isAgree) {
+				this.$c.toast({ title: '请阅读并同意《用户协议》《隐私政策》' })
+				return
+			}
+			if (!this.addData) {
+				this.$c.toast({ title: '请选择地址' })
+				return
+			}
+			let data = this.handelList.map(item => ({ prize_code: item.prize_code, number: item.chooseNum }))
+			const res = await sendPrizeWithAddress({
+				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
+			});
+			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 {
-					return []
+					this.$c.toast({ title: res.msg, duration: 500, success: () => this.tabChange(this.tabCur) })
 				}
 			}
 		},
-
-		onReady() {
-			// this.open('changePop')
-			// this.open('sendPop')
-			// this.open('model')
+		async submitChange() {
+			let data = this.handelList.map(item => ({ prize_code: item.prize_code, number: item.chooseNum }))
+			const res = await recoveryPrizeWithType({ recovery_info: JSON.stringify(data), type: this.subTab[this.subTabCur].id });
+			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 })
+			}
 		},
-
-		methods: {
-			async loadUserInfo() {
-				// API: user
-				const res = await getUserInfo();
-				if (res && res.userinfo) {
-					uni.setStorageSync('userinfo', res.userinfo)
-					console.log(res.userinfo.js_is_open)
-					this.is_exchange = res.userinfo.is_exchange
-				}
-			},
-			async submitGet(item) {
-				// API: warehouse_send_confirm
-				const res = await confirmSend({
-					id: item.id
-				});
-				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
-					}
+		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)
 				})
-			},
-
-			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;
-				});
-			},
-
-			async submitLock() {
-				let data = this.handelList.map(item => {
-					return {
-						prize_code: item.prize_code,
-						number: item.chooseNum
-					}
-				})
-
+			})
+			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
+			}
+		},
+		async getList({ num, size }) {
+			let data = { page: num }
+			try {
 				let res;
-				if (this.subTab[this.subTabCur].id == 4) {
-					// API: warehouse_remove
-					res = await moveOutSafe({
-						recovery_info: JSON.stringify(data)
-					});
+				if (this.tabList[this.tabCur].id == 1) {
+					data.type = this.subTab[this.subTabCur].id
+					data.keyword = this.keyword
+					res = await getWarehouseIndex(data);
 				} else {
-					// API: warehouse_movein
-					res = await moveInSafe({
-						recovery_info: JSON.stringify(data)
-					});
+					data.status = this.tabList[this.tabCur].status
+					res = await getSendRecordWithStatus(data);
 				}
-
 				if (res.status == 1) {
-					this.close('model')
-
-					this.$c.toast({
-						title: res.msg,
-						duration: 500,
-						success: () => {
-							this.tabChange(this.tabCur)
-						}
-					})
-				}
-			},
-
-			async 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
-					}
-				})
-
-				// API: warehouse_send
-				const res = await sendPrizeWithAddress({
-					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
-				});
-
-				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)
-							}
-						})
-					}
-				}
-			},
-
-			async submitChange() {
-				let data = this.handelList.map(item => {
-					return {
-						prize_code: item.prize_code,
-						number: item.chooseNum
-					}
-				})
-
-				// API: warehouse_recovery
-				const res = await recoveryPrizeWithType({
-					recovery_info: JSON.stringify(data),
-					type: this.subTab[this.subTabCur].id
-				});
-
-				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
-				}
-			},
-
-			async getList({
-				num,
-				size
-			}) {
-				let data = {
-					page: num
-				}
-
-				try {
-					let res;
+					if (num == 1) this.listData = [];
 					if (this.tabList[this.tabCur].id == 1) {
-						data.type = this.subTab[this.subTabCur].id
-						data.keyword = this.keyword
-						// API: warehouse_index
-						res = await getWarehouseIndex(data);
-					} else {
-						data.status = this.tabList[this.tabCur].status
-						// API: warehouse_send_record
-						res = await getSendRecordWithStatus(data);
+						res.data.data.map(item => item.orderlist.map(a => a.chooseNum = 0))
+						this.freightData = res.data.yufei
 					}
-
-					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
-						}
-
-						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 (error) {
-					console.log('aaa');
+					if (res.data.show_dadajuan != null) this.show_dadajuan = res.data.show_dadajuan
+					this.listData = this.listData.concat(res.data.data)
+					this.mescroll.endByPage(res.data.data.length, res.data.last_page)
+				} else {
 					this.listData = [];
 					this.mescroll.endByPage(0, 0)
 				}
-			},
-
-			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;
-				}
+			} catch (error) {
+				this.listData = [];
+				this.mescroll.endByPage(0, 0)
 			}
-
+		},
+		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') {
+				this.lockMsg = this.subTab[this.subTabCur].id != 4 ? '请问您是否要将所选择赏品放入保险柜?' : '请问您是否要将所选择赏品移出保险柜?'
+			}
+			this.$refs[e].open()
 		}
 	}
+}
 </script>
 
-<style lang="scss">
-	.content {
-		box-sizing: border-box;
-		padding-bottom: calc(var(--window-bottom) + 240rpx);
+<style lang="scss" scoped>
+.content {
+	min-height: 100vh;
+	padding-bottom: calc(var(--window-bottom) + 200rpx);
+	background: linear-gradient(180deg, #5FCDFF 0%, #F5F5F5 100%);
+}
 
-		&::before {
-			content: "";
-			position: fixed;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			z-index: -1;
-			background-image: url('/static/main_bg.jpg');
-			background-size: cover;
-			background-position: center;
-			background-repeat: no-repeat;
+// 顶部Tab
+.tab {
+	display: flex;
+	padding: 20rpx 30rpx;
+	
+	.tab-item {
+		position: relative;
+		margin-right: 48rpx;
+		font-size: 28rpx;
+		color: #666;
+		
+		&.act {
+			color: #333;
+			font-weight: 500;
 		}
-
-		image {
-			width: 100%;
-			height: 100%;
-			border-radius: inherit;
+		
+		.tab-line {
+			position: absolute;
+			bottom: -10rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 40rpx;
+			height: 4rpx;
+			background: #333;
+			border-radius: 2rpx;
 		}
+	}
+}
 
-		.icon {
-			display: flex;
-			justify-content: center;
-			align-items: center;
+// 搜索框
+.search-box {
+	display: flex;
+	align-items: center;
+	padding: 0 30rpx;
+	margin-bottom: 20rpx;
+	
+	.search-input {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		height: 72rpx;
+		padding: 0 24rpx;
+		background: #FFF;
+		border-radius: 36rpx;
+		
+		input {
+			flex: 1;
+			margin-left: 16rpx;
+			font-size: 28rpx;
 		}
+	}
+	
+	.search-tip {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-left: 20rpx;
+		
+		text {
+			font-size: 20rpx;
+			color: #999;
+		}
+	}
+}
 
-		.tab {
-			display: flex;
-			align-items: center;
-			padding: 10rpx 30rpx;
+// 子Tab
+.sub-tab {
+	display: flex;
+	padding: 0 30rpx 20rpx;
+	
+	.sub-tab-item {
+		padding: 8rpx 20rpx;
+		margin-right: 16rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 500;
+		font-size: 22rpx;
+		color: rgba(64,64,64,0.85);
+		background: #F3F3F3;
+		border-radius: 9rpx;
+		
+		&.act {
+			color: #424242;
+			background: #03D8F4;
+		}
+	}
+}
 
-			.tab-item {
-				width: 155rpx;
-				height: 68rpx;
-				position: relative;
-				margin-right: 25rpx;
-
-				&.act {
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #000000;
-
-					&::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: rgba(0, 0, 0, 0.55);
-				}
+// 统计行
+.stats-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 30rpx 20rpx;
+	
+	.stats-left {
+		font-size: 26rpx;
+		color: #666;
+		
+		.num { color: #333; font-weight: 500; }
+		.ml20 { margin-left: 20rpx; }
+	}
+	
+	.stats-right {
+		display: flex;
+		
+		.stats-btn {
+			padding: 8rpx 24rpx;
+			margin-left: 20rpx;
+			font-size: 24rpx;
+			color: #666;
+			background: #FFF;
+			border-radius: 8rpx;
+			
+			&.act {
+				color: #03D8F4;
+				background: rgba(3, 216, 244, 0.1);
 			}
 		}
+	}
+}
 
-		.search {
-			margin-top: 20rpx;
-			padding: 0 30rpx;
+// 商品网格 - 两列
+.goods-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 20rpx;
+	padding: 0 30rpx;
+	
+	.goods-item {
+		background: #FFF;
+		border-radius: 16rpx;
+		overflow: hidden;
+		
+		.goods-img {
+			position: relative;
+			width: 100%;
+			height: 330rpx;
+			
+			image {
+				width: 100%;
+				height: 100%;
+			}
+			
+			.goods-badge {
+				position: absolute;
+				top: 16rpx;
+				left: 16rpx;
+				padding: 4rpx 16rpx;
+				font-size: 22rpx;
+				color: #FFF;
+				background: #FF6B6B;
+				border-radius: 4rpx;
+			}
+		}
+		
+		.goods-title {
+			padding: 16rpx;
+			font-size: 26rpx;
+			color: #333;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		
+		.goods-qty {
 			display: flex;
-			justify-content: space-between;
 			align-items: center;
-
-			.input-box {
-				width: 615rpx;
-				height: 70rpx;
-				background: #F3F3F3;
-				box-sizing: border-box;
-				padding: 0 30rpx;
+			justify-content: space-between;
+			padding: 0 16rpx 20rpx;
+			
+			.qty-btn {
+				width: 56rpx;
+				height: 56rpx;
 				display: flex;
 				align-items: center;
-				border-radius: 32rpx;
-
-				input {
-					flex: 1;
-					font-size: 26rpx;
-					font-weight: 400;
-					color: #000;
+				justify-content: center;
+				border-radius: 50%;
+				font-size: 36rpx;
+				
+				&.minus {
+					background: #03D8F4;
+					color: #FFF;
+				}
+				
+				&.plus {
+					background: #03D8F4;
+					color: #FFF;
 				}
 			}
-
-			.icon {
-				width: 32rpx;
-				height: 32rpx;
-				margin-left: 30rpx;
-			}
-
-			.rule {
-				width: 40rpx;
-				height: 68rpx;
+			
+			.qty-num {
+				font-size: 32rpx;
+				color: #333;
+				font-weight: 500;
 			}
 		}
+	}
+}
 
-		.sub-tab {
-			display: flex;
-			padding: 30rpx 30rpx 0;
-
-			.sub-tab-item {
-				width: 155rpx;
-				height: 57rpx;
-				font-size: 28rpx;
-				font-weight: 400;
-
-				&.act {
-					color: #FFED94;
-					background: #383838;
-					border-radius: 9rpx;
-				}
-
-				&.unact {
-					color: #404040;
-					background: #F3F3F3;
-					border-radius: 9rpx;
-				}
-			}
-
-			.sub-tab-item+.sub-tab-item {
-				margin-left: 30rpx;
-			}
-		}
-
-		.num-all {
-			padding: 30rpx 30rpx 0;
+// 订单列表
+.order-list {
+	padding: 0 30rpx;
+	
+	.order-item {
+		margin-bottom: 20rpx;
+		padding: 24rpx;
+		background: #FFF;
+		border-radius: 16rpx;
+		
+		.order-hd {
 			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;
-			}
+			margin-bottom: 20rpx;
+			
+			.time { font-size: 24rpx; color: #999; }
+			.status { font-size: 24rpx; color: #333; }
 		}
-
-		.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%;
-
+		
+		.order-bd {
+			white-space: nowrap;
+			
+			.order-goods {
+				display: inline-block;
+				width: 160rpx;
+				margin-right: 16rpx;
+				
 				.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;
-					}
-
+					width: 160rpx;
+					height: 160rpx;
+					border-radius: 12rpx;
+					overflow: hidden;
+					
+					image { width: 100%; height: 100%; }
+					
 					.num {
 						position: absolute;
-						z-index: 1;
+						bottom: 8rpx;
 						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;
+						padding: 4rpx 16rpx;
+						font-size: 22rpx;
+						color: #FFF;
+						background: rgba(0,0,0,0.5);
+						border-radius: 20rpx;
 					}
-
-
-					.yu-tag {
+					
+					.shipped {
 						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;
+						top: 8rpx;
+						right: 8rpx;
+						padding: 4rpx 12rpx;
+						font-size: 20rpx;
+						color: #03D8F4;
+						background: rgba(0,0,0,0.5);
+						border-radius: 4rpx;
 					}
 				}
-
-				.name {
-					padding: 20rpx 10rpx 0;
-					font-size: 20rpx;
-					font-weight: 400;
-					color: #333333;
-				}
-
-				.price {
-					padding: 10rpx 10rpx 0;
-					text-align: center;
-
+				
+				.title {
+					margin-top: 12rpx;
 					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 {
+					color: #333;
+					overflow: hidden;
+					text-overflow: ellipsis;
 					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;
+		
+		.order-btns {
 			display: flex;
-			justify-content: space-around;
-			align-items: center;
-
-			.btn {
-				width: 201rpx;
-				height: 66rpx;
-				// font-family: YouSheBiaoTiHei;
-				font-weight: 400;
-				font-size: 30rpx;
-				color: #FFED94;
-				background: #383838;
-				border-radius: 10rpx;
-			}
-
-			.btn2 {
-				width: 201rpx;
-				height: 66rpx;
-				// font-family: YouSheBiaoTiHei;
-				font-weight: 400;
-				font-size: 30rpx;
-				color: #FFED94;
-				background: #383838;
-				border-radius: 10rpx;
-			}
-
-			.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: 26rpx;
-				font-weight: 500;
-				color: #FFED94;
-			}
-		}
-
-		.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;
+			justify-content: flex-end;
+			margin-top: 20rpx;
+			
+			.btn-outline {
+				padding: 12rpx 32rpx;
 				font-size: 24rpx;
-				font-weight: 400;
-				color: #999999;
-				line-height: 32rpx;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-					margin-right: 10rpx;
-				}
+				color: #666;
+				background: #F5F5F5;
+				border-radius: 8rpx;
 			}
-
-			.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: #FFED94;
-
-				>text:nth-child(1) {
-					font-size: 26rpx;
-				}
-			}
-		}
-
-		.model {
-			width: 568rpx;
-			background: #FFFFFF;
-			border-radius: 30rpx;
-			box-sizing: border-box;
-
-			.model-bd {
-				text-align: center;
-				padding: 68rpx 0 0;
+			
+			.btn-primary {
+				margin-left: 20rpx;
+				padding: 12rpx 32rpx;
 				font-size: 24rpx;
-				font-weight: 400;
-				color: #333333;
-			}
-		}
-
-		.model-ft {
-			width: 80%;
-			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: #424242;
-					color: #FFED94;
-				}
+				color: #FFF;
+				background: #03D8F4;
+				border-radius: 8rpx;
 			}
 		}
 	}
+}
 
-	.res-pop {
-		width: 100%;
-		height: 100vh;
+// 底部操作按钮
+.bottom-action {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: calc(var(--window-bottom) + 120rpx);
+	display: flex;
+	justify-content: center;
+	padding: 16rpx 30rpx;
+	
+	.action-btn {
+		min-width: 140rpx;
+		height: 60rpx;
+		margin: 0 12rpx;
+		padding: 0 28rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 24rpx;
+		color: #404040;
+		background: #03D8F4;
+		border-radius: 30rpx;
+		
+		&.secondary {
+			background: #FFF;
+			border: 2rpx solid #DDD;
+			color: #666;
+		}
+	}
+}
+
+// 弹窗通用样式
+.popup-container {
+	background: #FFF;
+	border-radius: 24rpx 24rpx 0 0;
+	padding: 0 30rpx 60rpx;
+	
+	.popup-header {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30rpx 0;
 		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%;
+		
+		.popup-title {
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #333;
 		}
-
-		.res-list {
-			width: 480rpx;
-			padding: 0 30rpx 30rpx;
-			background: #FFFFFF;
-			border-radius: 16rpx;
-
-			.res-item {
-				width: 100%;
-
-				.pic {
-					width: 120rpx;
-					height: 120rpx;
+		
+		.popup-close {
+			position: absolute;
+			right: 0;
+			font-size: 48rpx;
+			color: #999;
+		}
+	}
+	
+	.popup-body {
+		background: #F7F7F7;
+		border-radius: 16rpx;
+		padding: 20rpx;
+		
+		.selected-info {
+			text-align: center;
+			font-size: 26rpx;
+			color: #666;
+			margin-bottom: 20rpx;
+			
+			text { color: #333; font-weight: 500; }
+		}
+		
+		.goods-scroll {
+			white-space: nowrap;
+			
+			.scroll-item {
+				display: inline-block;
+				width: 160rpx;
+				margin-right: 16rpx;
+				
+				.item-img {
 					position: relative;
-					padding-top: 48rpx;
-				}
-
-				.item-info {
-					padding: 30rpx 10rpx 10rpx;
-					position: relative;
-					z-index: 1;
-
-					.title {
-						margin-top: 10rpx;
-						font-weight: 400;
-						font-size: 32rpx;
-						color: #333333;
+					width: 160rpx;
+					height: 160rpx;
+					border-radius: 12rpx;
+					overflow: hidden;
+					
+					image { width: 100%; height: 100%; }
+					
+					.item-num {
+						position: absolute;
+						bottom: 8rpx;
+						left: 50%;
+						transform: translateX(-50%);
+						padding: 4rpx 16rpx;
+						font-size: 22rpx;
+						color: #333;
+						background: rgba(255,255,255,0.8);
+						border-radius: 20rpx;
 					}
 				}
-			}
-		}
-
-		.res-pop-ft {
-			width: 220rpx;
-			height: 72rpx;
-			margin: 62rpx auto 0;
-			box-sizing: border-box;
-			background: #424242;
-			border-radius: 15rpx;
-
-			>text {
-				color: #FFED94;
+				
+				.item-title {
+					margin-top: 12rpx;
+					font-size: 22rpx;
+					color: #333;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
 			}
 		}
 	}
-</style>
\ No newline at end of file
+	
+	.popup-summary {
+		margin: 20rpx 0;
+		padding: 20rpx;
+		background: #F7F7F7;
+		border-radius: 12rpx;
+		font-size: 26rpx;
+		color: #666;
+		text-align: center;
+		
+		text { color: #333; }
+		.highlight { color: #03D8F4; font-weight: 500; }
+	}
+	
+	.address-card {
+		display: flex;
+		align-items: center;
+		padding: 24rpx;
+		margin-top: 20rpx;
+		background: #F7F7F7;
+		border-radius: 12rpx;
+		
+		.address-empty {
+			flex: 1;
+			font-size: 28rpx;
+			color: #999;
+		}
+		
+		.address-info {
+			flex: 1;
+			
+			.address-name {
+				font-size: 28rpx;
+				color: #333;
+				font-weight: 500;
+			}
+			
+			.address-detail {
+				margin-top: 8rpx;
+				font-size: 24rpx;
+				color: #666;
+			}
+		}
+		
+		.address-arrow {
+			font-size: 32rpx;
+			color: #CCC;
+		}
+	}
+	
+	.freight-row {
+		display: flex;
+		justify-content: space-between;
+		padding: 20rpx 0;
+		font-size: 26rpx;
+		color: #666;
+		border-top: 1rpx solid #EEE;
+		margin-top: 20rpx;
+	}
+	
+	.popup-btn {
+		margin-top: 30rpx;
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 30rpx;
+		color: #404040;
+		background: #03D8F4;
+		border-radius: 14rpx;
+	}
+	
+	.agree-row {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 20rpx;
+		font-size: 24rpx;
+		color: #999;
+		
+		.check-icon {
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 12rpx;
+			border: 2rpx solid #DDD;
+			border-radius: 50%;
+			
+			&.active {
+				background: #03D8F4;
+				border-color: #03D8F4;
+				position: relative;
+				
+				&::after {
+					content: '✓';
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					font-size: 20rpx;
+					color: #FFF;
+				}
+			}
+		}
+	}
+}
+
+// 确认弹窗
+.confirm-modal {
+	width: 600rpx;
+	background: #FFF;
+	border-radius: 24rpx;
+	overflow: hidden;
+	
+	.modal-content {
+		text-align: center;
+		font-size: 30rpx;
+		color: #333;
+		padding: 60rpx 40rpx 50rpx;
+		line-height: 1.5;
+	}
+	
+	.modal-btns {
+		display: flex;
+		border-top: 1rpx solid #EEEEEE;
+		
+		.modal-btn {
+			flex: 1;
+			height: 100rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 32rpx;
+			color: #666;
+			background: #FFF;
+			
+			&:first-child {
+				border-right: 1rpx solid #EEEEEE;
+			}
+			
+			&.primary {
+				color: #03D8F4;
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+// 结果弹窗
+.result-modal {
+	width: 480rpx;
+	background: #FFF;
+	border-radius: 24rpx;
+	padding: 40rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	
+	.result-icon {
+		width: 120rpx;
+		height: 120rpx;
+	}
+	
+	.result-text {
+		margin: 30rpx 0;
+		font-size: 28rpx;
+		color: #333;
+		text-align: center;
+	}
+	
+	.result-btn {
+		width: 200rpx;
+		height: 72rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 28rpx;
+		color: #404040;
+		background: #03D8F4;
+		border-radius: 12rpx;
+	}
+}
+</style>
diff --git a/honey_box/pages/mall/index.vue b/honey_box/pages/mall/index.vue
index b27dd443..19bbc202 100644
--- a/honey_box/pages/mall/index.vue
+++ b/honey_box/pages/mall/index.vue
@@ -36,101 +36,65 @@
 
 			</view>
 			<uni-popup ref="pop" type="bottom">
-				<view v-if="orderData" class="buy-pop relative">
-					<view class="buy-pop-hd">
-						<view style="width: 24rpx;">
-						</view>
-						<text class="">确认订单</text>
-						<view class="close icon" @click="close('pop')">
-							<image :src="$img('/static/img/close2.png')" lazy-load></image>
-						</view>
-					</view>
-					<view class="buy-card">
-						<view class="buy-info">
-							<view class="pic">
-								<image :src="orderData.goods.imgurl_detail" style="width: 190rpx; height: 190rpx;"
-									lazy-load>
-								</image>
-							</view>
-							<view class="info-r">
-								<view class="hang1" style="width: 100%;	color: #333333; font-size: 24rpx;">
-									{{ orderData.goods.title }}
-								</view>
-								<view class="type">类型:明信片</view>
-
-								<view class="price-num">
-									<view class="price" style="font-size: 16rpx;">
-										¥<text style="font-size: 28rpx;">{{ orderData.goods.price }}</text>
-									</view>
-									<view class="num">×{{ orderData.goods.prize_num }}</view>
-								</view>
-							</view>
-						</view>
-
-					</view>
-					<view class="br20 mt20" style="background: #FFFFFF;">
-						<view class="pay-type" @click="changePay(0)"
-							v-if="orderData != null && orderData.goods_extend && orderData.goods_extend.pay_wechat == 1">
-							<view class="" style="width: 100%;	color: #333333;">
-								微信支付
-							</view>
-							<view class="icon">
-								<image v-if="zhifu == 0" :src="$img1('common/check_act.png')" lazy-load></image>
-
-								<image v-else :src="$img1('common/check.png')" lazy-load></image>
-							</view>
-						</view>
-						<view class="pay-type" @click="changePay(1)"
-							v-if="orderData != null && orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
-
-							<view class="" style="width: 100%;	color: #333333;">
-								{{ $config.getAppSetting('currency2_name') }}
-								{{ orderData.goods.price * 100 }} (剩余:{{ orderData.use_integral }})
-							</view>
-
-							<view class="icon">
-								<image v-if="zhifu == 1" :src="$img1('common/check_act.png')" lazy-load></image>
-								<image v-else :src="$img1('common/check.png')" lazy-load></image>
-							</view>
-						</view>
-
+				<view v-if="orderData" class="order-popup">
+					<!-- 头部 -->
+					<view class="popup-header">
+						<text class="popup-title">确认订单</text>
+						<view class="close-btn" @click="close('pop')">×</view>
 					</view>
 
-					<view class="rule">
-						<scroll-view class="rule-inner" scroll-y>
-							<view v-html="sendRuleData"></view>
-						</scroll-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 class="goods-card">
+						<view class="goods-img">
+							<image :src="orderData.goods.imgurl_detail" mode="aspectFill"></image>
+						</view>
+						<view class="goods-info">
+							<view class="goods-title">{{ orderData.goods.title }}</view>
+							<view class="goods-meta">
+								<text>类型：明信片</text>
+								<text class="qty">×{{ orderData.goods.prize_num }}</text>
+							</view>
+							<view class="goods-price">¥{{ orderData.goods.price }}</view>
 						</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="option-row" @click="changePay(0)"
+						v-if="orderData != null && orderData.goods_extend && orderData.goods_extend.pay_wechat == 1">
+						<view class="label-with-tip">
+							<text class="label">微信支付</text>
+						</view>
+						<view class="radio" :class="{ active: zhifu == 0 }"></view>
+					</view>
 
+					<view class="option-row" @click="changePay(1)"
+						v-if="orderData != null && orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
+						<view class="label-with-tip">
+							<text class="label">{{ $config.getAppSetting('currency2_name') }} {{ orderData.goods.price * 100 }}</text>
+							<text class="tip">（剩余{{ orderData.score }}）</text>
+						</view>
+						<view class="radio" :class="{ active: zhifu == 1 }"></view>
+					</view>
 
+					<!-- 售前售后须知 -->
+					<view class="notice-row" @click="$c.to({ url: '/pages/guize/guize?type=10' })">
+						<text class="notice-text">售前·售后须知</text>
+						<text class="arrow">›</text>
+					</view>
+
+					<!-- 支付按钮 -->
 					<view class="pay-btn" v-if="zhifu == 0" @click="$c.noDouble(() => confirmSubmit(1))">
-						<text>
-							{{
-								` ¥${orderData.price}`
-							}}
-						</text>
+						<text>确认支付 ¥{{ orderData.price }}</text>
 					</view>
 					<view class="pay-btn" v-if="zhifu == 1" @click="$c.noDouble(() => pay(1))">
 						<text>{{ orderData.price * 100 }}{{ $config.getAppSetting('currency2_name') }}</text>
 					</view>
+
+					<!-- 协议 -->
+					<view class="agree-row" @click="isAgree = !isAgree">
+						<view class="check-icon" :class="{ active: isAgree }"></view>
+						<text class="agree-text">我已满18岁，阅读即同意《用户协议》和《隐私政策》</text>
+					</view>
 				</view>
 			</uni-popup>
 			<PayDialog ref="payDialog" />
@@ -396,8 +360,8 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.title {
+<style lang="scss" scoped>
+.page-title {
 	width: 100%;
 	top: 108rpx;
 	position: absolute;
@@ -466,238 +430,209 @@ export default {
 		height: 18rpx;
 		margin-left: 6rpx;
 	}
-
-	.icon {}
 }
 
-.buy-pop {
-	padding: 0 30rpx;
-	box-sizing: border-box;
-	background: #F7F7F7;
-	padding-bottom: 200rpx;
-	z-index: 999;
-	border-radius: 16rpx 16rpx 0rpx 0rpx;
-
-	&::after {
-		content: '';
-		position: absolute;
-		top: -62rpx;
-		left: 0;
-		width: 750rpx;
-		height: 62rpx;
-	}
-
-	.buy-pop-hd {
-		padding: 40rpx 0;
-		padding-left: 10rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		>text {
-			font-size: 32rpx;
-			font-weight: 500;
-			color: #333333;
-		}
-
-		.close {
-			width: 24rpx;
-			height: 24rpx;
-		}
-	}
-
-	.buy-card {
-		border-radius: 20rpx;
-		padding: 30rpx 30rpx 30rpx 30rpx;
-		background: #FFFFFF;
-
-		.buy-info {
-			display: flex;
-
-			.pic {
-				width: 190rpx;
-				height: 190rpx;
-				border-radius: 10rpx;
-			}
-
-			.info-r {
-				width: calc(100% - 190rpx);
-				box-sizing: border-box;
-				display: flex;
-				flex-flow: column nowrap;
-				justify-content: space-between;
-				padding: 10rpx 10rpx 10rpx 30rpx;
-
-				.title {
-					font-size: 32rpx;
-					font-weight: 400;
-					color: #333333;
-				}
-
-
-				.type {
-					font-size: 20rpx;
-					font-weight: 400;
-					color: #999999;
-				}
-
-				.price-num {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					font-size: 16rpx;
-
-					.price {
-						ffont-weight: 500;
-						font-size: 35rpx;
-						color: #333333;
-						font-size: 28rpx;
-					}
-
-					.num {
-						font-size: 20rpx;
-						font-family: Source Han Sans CN;
-						font-weight: 400;
-						color: #999999;
-					}
-				}
-			}
-		}
-
-		.line {
-			height: 1px;
-			background: #222222;
-			margin: 30rpx 0 10rpx;
-		}
-
-		.yhfs {
-			font-weight: 400;
-			font-size: 28rpx;
-			color: #FFFFFF;
-		}
-
-		.card-row {
-			padding: 16rpx 0;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.title {
-				>image {
-					width: 32rpx;
-					height: 32rpx;
-				}
-
-				>text {
-					font-weight: 400;
-					font-size: 24rpx;
-					color: #FFFFFF;
-				}
-			}
-
-			.row-r {
-				display: flex;
-				align-items: center;
-
-				font-size: 24rpx;
-				font-family: Source Han Sans CN;
-				font-weight: 400;
-				color: #FFFFFF;
-
-				.icon {
-					width: 32rpx;
-					height: 32rpx;
-				}
-			}
-		}
-
-		.card-row {
-			.title {}
-
-			.row-r {
-				.icon {}
-			}
-		}
-	}
-
-	.pay-title {
-		margin-top: 30rpx;
-		font-size: 38rpx;
-		font-weight: 400;
-		color: #ffffff;
-	}
-
-	.pay-type {
-		padding: 30rpx;
-		border-radius: 20rpx;
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-
-		.icon {
-			width: 32rpx;
-			height: 32rpx;
-		}
-
-		.title {
-			flex: 1;
-			padding: 0 20rpx;
-			font-size: 28rpx;
-			font-family: Source Han Sans CN;
-			font-weight: 400;
-			color: #ffffff;
-		}
-	}
-
-	.agree {
-		display: flex;
-		margin-top: 30rpx;
-
-		font-size: 20rpx;
-		font-family: Source Han Sans CN;
-		font-weight: 400;
-		color: #999999;
-		line-height: 32rpx;
-
-		.icon {
-			width: 32rpx;
-			height: 32rpx;
-			margin-right: 10rpx;
-		}
-	}
-
-	.rule {
-		padding: 20rpx;
-		background: #F9F8E1;
-		border-radius: 20rpx;
-		box-sizing: border-box;
-		margin: 20rpx 0 0;
-
-		.rule-inner {
-			max-height: 160rpx;
-			font-size: 20rpx;
-			font-weight: 400;
-			color: #999999;
-		}
-	}
-
-	.pay-btn {
-		margin: 30rpx auto 0;
-		width: 686rpx;
-		height: 84rpx;
-		background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
+.order-popup {
+	background: #FFFFFF;
+	border-radius: 24rpx 24rpx 0 0;
+	padding: 0 32rpx 60rpx;
+	
+	.popup-header {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-weight: 500;
-		color: #CDEF27;
-
-		>text:nth-child(1) {
-			font-size: 28rpx;
+		padding: 32rpx 0;
+		position: relative;
+		
+		.popup-title {
+			position: static;
+			width: auto;
+			top: auto;
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #333;
+			z-index: auto;
 		}
-
-		>text:nth-child(2) {
-			font-size: 36rpx;
+		
+		.close-btn {
+			position: absolute;
+			right: 0;
+			font-size: 48rpx;
+			color: #999;
+			line-height: 1;
+		}
+	}
+	
+	.goods-card {
+		display: flex;
+		padding: 24rpx;
+		background: #F7F7F7;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+		
+		.goods-img {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 12rpx;
+			overflow: hidden;
+			background: #EEE;
+			flex-shrink: 0;
+			
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		
+		.goods-info {
+			flex: 1;
+			margin-left: 24rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			
+			.goods-title {
+				font-size: 28rpx;
+				color: #333;
+				font-weight: 500;
+			}
+			
+			.goods-meta {
+				font-size: 24rpx;
+				color: #999;
+				display: flex;
+				justify-content: space-between;
+				
+				.qty {
+					color: #666;
+				}
+			}
+			
+			.goods-price {
+				font-size: 32rpx;
+				color: #333;
+				font-weight: 600;
+			}
+		}
+	}
+	
+	.option-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 0;
+		border-bottom: 1rpx solid #F0F0F0;
+		
+		.label-with-tip {
+			display: flex;
+			align-items: center;
+			
+			.label {
+				font-size: 28rpx;
+				color: #333;
+			}
+			
+			.tip {
+				font-size: 24rpx;
+				color: #999;
+				margin-left: 8rpx;
+			}
+		}
+		
+		.radio {
+			width: 40rpx;
+			height: 40rpx;
+			border: 2rpx solid #DDD;
+			border-radius: 50%;
+			flex-shrink: 0;
+			
+			&.active {
+				border-color: #03D8F4;
+				background: #03D8F4;
+				position: relative;
+				
+				&::after {
+					content: '';
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					width: 16rpx;
+					height: 16rpx;
+					background: #FFF;
+					border-radius: 50%;
+				}
+			}
+		}
+	}
+	
+	.notice-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 24rpx;
+		background: #E8F9E9;
+		border-radius: 12rpx;
+		margin: 24rpx 0;
+		
+		.notice-text {
+			font-size: 28rpx;
+			color: #2DB84D;
+		}
+		
+		.arrow {
+			font-size: 32rpx;
+			color: #2DB84D;
+		}
+	}
+	
+	.pay-btn {
+		width: 100%;
+		height: 96rpx;
+		background: #03D8F4;
+		border-radius: 14rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #404040;
+		margin-bottom: 24rpx;
+	}
+	
+	.agree-row {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		.check-icon {
+			width: 32rpx;
+			height: 32rpx;
+			border: 2rpx solid #DDD;
+			border-radius: 50%;
+			margin-right: 12rpx;
+			flex-shrink: 0;
+			
+			&.active {
+				border-color: #03D8F4;
+				background: #03D8F4;
+				position: relative;
+				
+				&::after {
+					content: '✓';
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					font-size: 20rpx;
+					color: #FFF;
+				}
+			}
+		}
+		
+		.agree-text {
+			font-size: 24rpx;
+			color: #999;
 		}
 	}
 }