You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
944 lines
22 KiB
944 lines
22 KiB
<template>
|
|
<view class="order-detail-container">
|
|
<!-- 订单状态头部 -->
|
|
<view class="status-header">
|
|
<view class="status-badge" :class="[getStatusClass(orderDetail.status)]">
|
|
{{ getStatusText(orderDetail.status) }}
|
|
</view>
|
|
<view class="order-title">订单详情</view>
|
|
</view>
|
|
|
|
<!-- 收货地址信息 -->
|
|
<view class="address-section" v-if="hasPhysicalGoods">
|
|
<view class="section-label">收货地址：</view>
|
|
<view class="address-card" v-if="orderDetail.address">
|
|
<view class="address-info">
|
|
<text class="address-text">{{
|
|
orderDetail.address.fullAddress
|
|
}}</text>
|
|
<view class="contact-info">
|
|
<text class="contact-name">{{ orderDetail.address.name }}</text>
|
|
<text class="contact-phone">{{ orderDetail.address.phone }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="no-address" v-else>
|
|
<text>该订单无需收货地址</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预约发货时间 -->
|
|
<view class="delivery-section">
|
|
<view class="info-row">
|
|
<text class="info-label">预约发货时间</text>
|
|
<text class="info-value">{{ orderDetail.deliveryDate || "--" }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">快递单号</text>
|
|
<text class="info-value">{{ orderDetail.trackingNo || "--" }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品标题 -->
|
|
<view class="product-title">
|
|
{{ orderDetail.packageName }}
|
|
</view>
|
|
|
|
<!-- 商品列表 -->
|
|
<view class="goods-section">
|
|
<view
|
|
class="goods-item"
|
|
v-for="goods in orderDetail.goodsList"
|
|
:key="goods.id"
|
|
>
|
|
<view class="goods-checkbox">
|
|
<view class="checkbox-icon">
|
|
<image mode="aspectFill" src="https://picsum.photos/200/300"></image>
|
|
</view>
|
|
</view>
|
|
<view class="goods-content">
|
|
<view class="goods-info">
|
|
<view class="goods-name">{{ goods.name }}</view>
|
|
<view class="goods-desc">{{
|
|
goods.description || goods.spec
|
|
}}</view>
|
|
</view>
|
|
<view class="goods-actions">
|
|
<button class="action-btn" :class="[getGoodsActionClass(goods.type)]">
|
|
{{ getGoodsActionText(goods.type) }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息 -->
|
|
<view class="order-info-section">
|
|
<view class="section-title">订单信息</view>
|
|
<view class="info-row">
|
|
<text class="info-label">订单编号：</text>
|
|
<text class="info-value">{{ orderDetail.orderNo }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">商品合计</text>
|
|
<text class="info-value">{{ orderDetail.goodsAmount }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">物流运费</text>
|
|
<text class="info-value">{{ orderDetail.shippingFee || "5.00" }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">优惠券</text>
|
|
<text class="info-value">{{
|
|
orderDetail.discountAmount > 0 ? "无" : "无"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-row total">
|
|
<text class="info-label">合计实付</text>
|
|
<text class="info-value total-amount">{{
|
|
orderDetail.totalAmount
|
|
}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">积分</text>
|
|
<text class="info-value">{{ orderDetail.points || "已获得1分" }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">支付方式</text>
|
|
<text class="info-value">{{
|
|
orderDetail.payMethod || "线上支付"
|
|
}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">支付时间</text>
|
|
<text class="info-value">{{
|
|
formatTime(orderDetail.payTime) || formatTime(orderDetail.createTime)
|
|
}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">预约发货时间</text>
|
|
<text class="info-value">{{
|
|
orderDetail.deliveryDate || formatTime(orderDetail.createTime)
|
|
}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">实际发货时间</text>
|
|
<text class="info-value">{{
|
|
formatTime(orderDetail.shippingTime) ||
|
|
formatTime(orderDetail.createTime)
|
|
}}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">备注</text>
|
|
<text class="info-value">{{ orderDetail.remark || "XXXX" }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮占位div -->
|
|
<view class="bottom-placeholder"></view>
|
|
|
|
<!-- 底部操作 -->
|
|
<!-- <view class="bottom-actions">
|
|
<button class="action-btn secondary" @click="goBack">
|
|
{{ orderDetail.status === 0 ? "申请售后" : "返回" }}
|
|
</button>
|
|
<button class="action-btn primary" @click="handleMainAction">
|
|
{{ getMainActionText() }}
|
|
</button>
|
|
</view> -->
|
|
|
|
<!-- 权益码弹窗 -->
|
|
<view
|
|
class="equity-popup-mask"
|
|
v-if="showEquityPopup"
|
|
@click="closeEquityPopup"
|
|
>
|
|
<view class="equity-popup" @click.stop>
|
|
<view class="popup-header">
|
|
<text class="popup-title">权益码</text>
|
|
<text class="popup-close" @click="closeEquityPopup">×</text>
|
|
</view>
|
|
<view class="popup-content">
|
|
<!-- 二维码 -->
|
|
<view class="qrcode-container">
|
|
<image
|
|
class="qrcode-image"
|
|
:src="orderDetail.qrcode"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
<!-- 编号串码 -->
|
|
<view class="code-container">
|
|
<text class="code-label">权益码：</text>
|
|
<text class="code-value" @longpress="copyEquityCode">{{
|
|
orderDetail.equityCode
|
|
}}</text>
|
|
</view>
|
|
<text class="code-tip">长按编号可复制</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId: "",
|
|
showEquityPopup: false,
|
|
orderDetail: {
|
|
id: "",
|
|
orderNo: "",
|
|
status: 0,
|
|
packageName: "",
|
|
goodsList: [],
|
|
totalAmount: "0.00",
|
|
goodsAmount: "0.00",
|
|
discountAmount: "0.00",
|
|
shippingFee: "5.00",
|
|
points: "",
|
|
remark: "",
|
|
deliveryDate: "",
|
|
trackingNo: "",
|
|
shippingTime: "",
|
|
createTime: "",
|
|
payTime: "",
|
|
payMethod: "",
|
|
equityCode: "",
|
|
qrcode: "",
|
|
address: null,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
// 是否有实体商品需要收货
|
|
hasPhysicalGoods() {
|
|
return this.orderDetail.goodsList.some((goods) => goods.type === 2);
|
|
},
|
|
// 是否显示底部操作按钮
|
|
showBottomActions() {
|
|
return [0, 3].includes(this.orderDetail.status);
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
this.loadOrderDetail();
|
|
} else {
|
|
// 如果没有传入订单ID，使用假数据进行渲染
|
|
this.loadMockData();
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载订单详情
|
|
async loadOrderDetail() {
|
|
try {
|
|
uni.showLoading({ title: "加载中..." });
|
|
const res = await this.getOrderDetail(this.orderId);
|
|
this.orderDetail = res.data;
|
|
} catch (error) {
|
|
console.error("加载订单详情失败:", error);
|
|
uni.showToast({
|
|
title: "加载失败",
|
|
icon: "none",
|
|
});
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
|
|
// 加载假数据
|
|
loadMockData() {
|
|
this.orderDetail = {
|
|
id: "mock001",
|
|
orderNo: "238232342424234423",
|
|
status: 2, // 待收货状态
|
|
packageName: "食在扬州｜世界美食之都巡礼",
|
|
packageId: "pkg001",
|
|
totalAmount: "699.00",
|
|
goodsAmount: "699.00",
|
|
discountAmount: "0.00",
|
|
shippingFee: "0.00",
|
|
points: "已获得1分",
|
|
remark: "XXXX",
|
|
deliveryDate: "2025-08-10",
|
|
trackingNo: "SF120025020202",
|
|
shippingTime: "2025-07-15 01:46:25",
|
|
createTime: "2025-07-15 00:46:25",
|
|
payTime: "2025-07-15 00:46:25",
|
|
payMethod: "线上支付",
|
|
equityCode: "EPIC2024010112345",
|
|
qrcode: "/static/image/qrcode-sample.png",
|
|
goodsList: [
|
|
{
|
|
id: 1,
|
|
name: "IP数字资产",
|
|
type: 1,
|
|
description: "在数字资产相册中查看",
|
|
price: "99.00",
|
|
quantity: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "IP文创公仔",
|
|
type: 2,
|
|
description: "这里是XXX相仿介绍介绍",
|
|
price: "150.00",
|
|
quantity: 1,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "XXX园叮门票",
|
|
type: 3,
|
|
description: "这里是XXX园叮门票的介绍介绍介绍",
|
|
price: "50.00",
|
|
quantity: 1,
|
|
},
|
|
],
|
|
address: {
|
|
name: "XX先生",
|
|
phone: "183****1234",
|
|
fullAddress: "江苏省苏州市姑苏区XXXXXX",
|
|
province_text: "江苏省",
|
|
city_text: "苏州市",
|
|
district_text: "姑苏区",
|
|
detail_addr: "XXXXXX",
|
|
is_default: 1,
|
|
},
|
|
};
|
|
},
|
|
|
|
// 获取状态图标
|
|
getStatusIcon(status) {
|
|
const iconMap = {
|
|
0: "/static/icon/status-pending.png",
|
|
1: "/static/icon/status-waiting.png",
|
|
2: "/static/icon/status-shipping.png",
|
|
3: "/static/icon/status-completed.png",
|
|
4: "/static/icon/status-refund.png",
|
|
};
|
|
return iconMap[status] || "/static/icon/status-default.png";
|
|
},
|
|
|
|
// 获取状态文本
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
0: "待使用",
|
|
1: "待收货",
|
|
2: "待收货",
|
|
3: "已完成",
|
|
4: "用户已驳回",
|
|
};
|
|
return statusMap[status] || "未知状态";
|
|
},
|
|
|
|
// 获取状态样式类
|
|
getStatusClass(status) {
|
|
const classMap = {
|
|
0: "status-pending",
|
|
1: "status-waiting",
|
|
2: "status-shipping",
|
|
3: "status-completed",
|
|
4: "status-rejected",
|
|
};
|
|
return classMap[status] || "status-default";
|
|
},
|
|
|
|
// 获取商品操作按钮文本
|
|
getGoodsActionText(type) {
|
|
const textMap = {
|
|
1: "去查看",
|
|
2: "查看物流",
|
|
3: "已使用",
|
|
};
|
|
return textMap[type] || "去查看";
|
|
},
|
|
|
|
// 获取商品操作按钮样式
|
|
getGoodsActionClass(type) {
|
|
const classMap = {
|
|
1: "btn-view",
|
|
2: "btn-logistics",
|
|
3: "btn-used",
|
|
};
|
|
return classMap[type] || "btn-view";
|
|
},
|
|
|
|
// 获取主要操作按钮文本
|
|
getMainActionText() {
|
|
const textMap = {
|
|
0: "立即支付",
|
|
1: "返回",
|
|
2: "返回",
|
|
3: "返回",
|
|
4: "返回",
|
|
};
|
|
return textMap[this.orderDetail.status] || "返回";
|
|
},
|
|
|
|
// 获取商品类型名称
|
|
getGoodsTypeName(type) {
|
|
const typeMap = {
|
|
1: "IP数字资产",
|
|
2: "IP资源商品",
|
|
3: "君道苏州门票",
|
|
};
|
|
return typeMap[type] || "未知类型";
|
|
},
|
|
|
|
// 复制订单号
|
|
copyOrderNo() {
|
|
uni.setClipboardData({
|
|
data: this.orderDetail.orderNo,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "订单号已复制",
|
|
icon: "success",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
// 显示权益码
|
|
showEquityCode() {
|
|
this.showEquityPopup = true;
|
|
},
|
|
|
|
// 关闭权益码弹窗
|
|
closeEquityPopup() {
|
|
this.showEquityPopup = false;
|
|
},
|
|
|
|
// 复制权益码
|
|
copyEquityCode() {
|
|
uni.setClipboardData({
|
|
data: this.orderDetail.equityCode,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: "权益码已复制",
|
|
icon: "success",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
// 取消订单
|
|
async cancelOrder() {
|
|
const res = await uni.showModal({
|
|
title: "确认取消",
|
|
content: "确定要取消这个订单吗？",
|
|
});
|
|
|
|
if (res.confirm) {
|
|
try {
|
|
await this.cancelOrderApi(this.orderId);
|
|
uni.showToast({
|
|
title: "订单已取消",
|
|
icon: "success",
|
|
});
|
|
this.loadOrderDetail();
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: "取消失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// 支付订单
|
|
payOrder() {
|
|
// 跳转到支付页面或调用支付接口
|
|
uni.navigateTo({
|
|
url: `/pages/payment/index?orderId=${this.orderId}`,
|
|
});
|
|
},
|
|
|
|
// 再次购买
|
|
buyAgain() {
|
|
// 跳转到商品页面
|
|
uni.navigateTo({
|
|
url: `/subPackages/equityGoods/detail?id=${this.orderDetail.packageId}`,
|
|
});
|
|
},
|
|
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
|
|
// 处理主要操作
|
|
handleMainAction() {
|
|
if (this.orderDetail.status === 0) {
|
|
this.payOrder();
|
|
} else {
|
|
this.goBack();
|
|
}
|
|
},
|
|
|
|
// 格式化时间
|
|
formatTime(time) {
|
|
if (!time) return "";
|
|
const date = new Date(time);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
|
|
2,
|
|
"0"
|
|
)}-${String(date.getDate()).padStart(2, "0")} ${String(
|
|
date.getHours()
|
|
).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
|
|
},
|
|
|
|
// API接口 - 获取订单详情
|
|
async getOrderDetail(orderId) {
|
|
// 模拟API数据 - 根据订单ID返回不同状态的数据
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
// 根据订单ID模拟不同的订单状态
|
|
const statusMapping = {
|
|
1: 0, // 待使用
|
|
2: 1, // 待收货
|
|
3: 2, // 待收货
|
|
4: 3, // 已完成
|
|
5: 4, // 用户已驳回
|
|
};
|
|
|
|
const orderStatus = statusMapping[orderId] || 1;
|
|
|
|
const mockData = {
|
|
code: 200,
|
|
data: {
|
|
id: orderId,
|
|
orderNo: "238232342424234423",
|
|
status: orderStatus,
|
|
packageName: "食在扬州｜世界美食之都巡礼",
|
|
packageId: "pkg001",
|
|
totalAmount: "699.00",
|
|
goodsAmount: "699.00",
|
|
discountAmount: "0.00",
|
|
shippingFee: "0.00",
|
|
points: "已获得1分",
|
|
remark: "XXXX",
|
|
deliveryDate: "2025-08-10",
|
|
trackingNo: orderStatus >= 1 ? "SF120025020202" : "--",
|
|
shippingTime: orderStatus >= 2 ? "2025-07-15 01:46:25" : "",
|
|
createTime: "2025-07-15 00:46:25",
|
|
payTime: orderStatus >= 1 ? "2025-07-15 00:46:25" : "",
|
|
payMethod: "线上支付",
|
|
equityCode: "EPIC2024010112345",
|
|
qrcode: "/static/image/qrcode-sample.png",
|
|
goodsList: [
|
|
{
|
|
id: 1,
|
|
name: "IP数字资产",
|
|
type: 1,
|
|
description: "在数字资产相册中查看",
|
|
price: "99.00",
|
|
quantity: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "IP文创公仔",
|
|
type: 2,
|
|
description: "这里是XXX相仿介绍介绍",
|
|
price: "150.00",
|
|
quantity: 1,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "XXX园叮门票",
|
|
type: 3,
|
|
description: "这里是XXX园叮门票的介绍介绍介绍",
|
|
price: "50.00",
|
|
quantity: 1,
|
|
},
|
|
],
|
|
address: {
|
|
name: "XX先生",
|
|
phone: "183****1234",
|
|
fullAddress: "江苏省苏州市姑苏区XXXXXX",
|
|
province_text: "江苏省",
|
|
city_text: "苏州市",
|
|
district_text: "姑苏区",
|
|
detail_addr: "XXXXXX",
|
|
is_default: 1,
|
|
},
|
|
},
|
|
};
|
|
resolve(mockData);
|
|
}, 500);
|
|
});
|
|
},
|
|
|
|
// API接口 - 取消订单
|
|
async cancelOrderApi(orderId) {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve({ code: 200, message: "取消成功" });
|
|
}, 500);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-detail-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
// 状态头部
|
|
.status-header {
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
|
|
&.status-pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.status-waiting {
|
|
background-color: #007aff;
|
|
}
|
|
|
|
&.status-shipping {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.status-completed {
|
|
background-color: #666;
|
|
}
|
|
|
|
&.status-rejected {
|
|
background-color: #ff3b30;
|
|
}
|
|
}
|
|
|
|
.order-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
// 通用区域样式
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
// 收货地址区域
|
|
.address-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.address-card {
|
|
background-color: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.address-text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 1.5;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.contact-info {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.contact-name,
|
|
.contact-phone {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
// 预约发货区域
|
|
.delivery-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
// 商品标题
|
|
.product-title {
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
// 商品列表
|
|
.goods-section {
|
|
background-color: #fff;
|
|
padding: 0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.goods-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.goods-checkbox {
|
|
margin-right: 20rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.checkbox-icon {
|
|
width: 150rpx;
|
|
height:150rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.goods-content {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.goods-info {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.goods-desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.goods-actions {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
border: none;
|
|
|
|
&.btn-view {
|
|
background-color: #f0f0f0;
|
|
color: #666;
|
|
}
|
|
|
|
&.btn-logistics {
|
|
background-color: #007aff;
|
|
color: #fff;
|
|
}
|
|
|
|
&.btn-used {
|
|
background-color: #34c759;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// 订单信息
|
|
.order-info-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.total {
|
|
padding-top: 16rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
|
|
&.total-amount {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #ff3b30;
|
|
}
|
|
}
|
|
|
|
.no-address {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// 底部按钮占位
|
|
.bottom-placeholder {
|
|
height: 180rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
// 底部操作
|
|
.bottom-actions {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
border-top: 1rpx solid #eee;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
font-weight: 600;
|
|
|
|
&.secondary {
|
|
background-color: #f0f0f0;
|
|
color: #666;
|
|
}
|
|
|
|
&.primary {
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 权益码弹窗
|
|
.equity-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.equity-popup {
|
|
width: 600rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.popup-close {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 40rpx 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.qrcode-container {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.qrcode-image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
border: 1px solid #eee;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.code-container {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.code-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.code-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
background-color: #f8f9fa;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.code-tip {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
|