863 lines
21 KiB
Vue
863 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<view class="order-detail-page">
|
|||
|
|
<!-- 橙色头部 -->
|
|||
|
|
<view class="header-section">
|
|||
|
|
<view class="header-content">
|
|||
|
|
<text class="header-icon" @click="goBack">‹</text>
|
|||
|
|
<text class="header-title">订单详情</text>
|
|||
|
|
<view class="header-placeholder"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view class="content" scroll-y>
|
|||
|
|
<!-- 状态和进度卡片 -->
|
|||
|
|
<view class="card-section status-card">
|
|||
|
|
<!-- 状态头部 -->
|
|||
|
|
<view class="status-header">
|
|||
|
|
<text class="status-text">{{ orderInfo.status_text }}</text>
|
|||
|
|
<text class="order-no-text">订单号: {{ orderInfo.order_no }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 进度条 -->
|
|||
|
|
<view class="progress-bar">
|
|||
|
|
<view
|
|||
|
|
v-for="(step, index) in progressSteps"
|
|||
|
|
:key="index"
|
|||
|
|
class="progress-step"
|
|||
|
|
:class="{ 'active': index <= currentProgressIndex, 'current': index === currentProgressIndex }"
|
|||
|
|
>
|
|||
|
|
<view class="step-icon-wrap">
|
|||
|
|
<view class="step-icon">
|
|||
|
|
<text class="icon-text">{{ getStepIcon(index) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="index < progressSteps.length - 1" class="step-line"></view>
|
|||
|
|
</view>
|
|||
|
|
<text class="step-text">{{ step.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 收货信息 -->
|
|||
|
|
<view class="card-section address-card">
|
|||
|
|
<view class="address-icon">
|
|||
|
|
<text class="icon-location">📍</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="address-content">
|
|||
|
|
<view class="address-row">
|
|||
|
|
<text class="receiver-name">{{ orderInfo.receiver_name }}</text>
|
|||
|
|
<text class="receiver-phone">{{ orderInfo.receiver_phone }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="address-text">{{ orderInfo.receiver_address }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品信息 -->
|
|||
|
|
<view class="card-section goods-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">商品信息</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品列表 -->
|
|||
|
|
<view class="goods-list">
|
|||
|
|
<view
|
|||
|
|
v-for="(goods, index) in orderInfo.orderInfoList"
|
|||
|
|
:key="index"
|
|||
|
|
class="goods-item"
|
|||
|
|
>
|
|||
|
|
<text class="goods-name">{{ goods.storeName || goods.productName }}</text>
|
|||
|
|
<view class="goods-price-row">
|
|||
|
|
<text class="goods-price">{{ formatPoints(goods.integral || goods.vipPrice || goods.price) }}积分</text>
|
|||
|
|
<text class="goods-qty">x{{ goods.cartNum }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 无商品时显示默认 -->
|
|||
|
|
<view v-if="!orderInfo.orderInfoList || orderInfo.orderInfoList.length === 0" class="goods-item">
|
|||
|
|
<text class="goods-name">{{ orderInfo.goods_name }}</text>
|
|||
|
|
<view class="goods-price-row">
|
|||
|
|
<text class="goods-price">{{ formatPoints(orderInfo.points) }}积分</text>
|
|||
|
|
<text class="goods-qty">x{{ orderInfo.quantity }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 汇总信息 -->
|
|||
|
|
<view class="goods-summary">
|
|||
|
|
<view class="summary-row">
|
|||
|
|
<text class="summary-label">商品数量</text>
|
|||
|
|
<text class="summary-value">{{ orderInfo.quantity }}件</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="summary-row">
|
|||
|
|
<text class="summary-label">总计</text>
|
|||
|
|
<text class="summary-total">{{ formatPoints(orderInfo.points) }}积分</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 订单信息 -->
|
|||
|
|
<view class="card-section order-info-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">订单信息</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-content">
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">订单编号</text>
|
|||
|
|
<text class="info-value" @click="copyText(orderInfo.order_no)">{{ orderInfo.order_no }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">下单时间</text>
|
|||
|
|
<text class="info-value">{{ orderInfo.created_at }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">订单状态</text>
|
|||
|
|
<text class="info-value status-value">{{ orderInfo.status_text }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 底部操作栏 -->
|
|||
|
|
<view v-if="showActions" class="bottom-actions">
|
|||
|
|
<!-- 待兑换(未付款): 取消订单、立即支付 -->
|
|||
|
|
<template v-if="!orderInfo.paid">
|
|||
|
|
<button class="action-btn cancel-btn" @click="cancelOrder">取消订单</button>
|
|||
|
|
<button class="action-btn primary-btn" @click="goPay">立即兑换</button>
|
|||
|
|
</template>
|
|||
|
|
<!-- 待收货: 确认收货 -->
|
|||
|
|
<template v-else-if="orderInfo.paid && orderInfo.status === 1">
|
|||
|
|
<button class="action-btn primary-btn" @click="confirmReceipt">确认收货</button>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getOrderDetail, orderCancel, orderTake } from '@/api/order.js';
|
|||
|
|
import { mapGetters } from 'vuex';
|
|||
|
|
import { toLogin } from '@/libs/login.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
orderId: '',
|
|||
|
|
orderInfo: {
|
|||
|
|
id: '',
|
|||
|
|
order_no: '',
|
|||
|
|
goods_id: '',
|
|||
|
|
goods_name: '',
|
|||
|
|
goods_image: '',
|
|||
|
|
quantity: 1,
|
|||
|
|
points: 0,
|
|||
|
|
status: 1,
|
|||
|
|
paid: true,
|
|||
|
|
status_text: '',
|
|||
|
|
express_company: '',
|
|||
|
|
express_no: '',
|
|||
|
|
receiver_name: '',
|
|||
|
|
receiver_phone: '',
|
|||
|
|
receiver_address: '',
|
|||
|
|
created_at: '',
|
|||
|
|
pay_at: '',
|
|||
|
|
ship_at: '',
|
|||
|
|
finish_at: '',
|
|||
|
|
orderInfoList: []
|
|||
|
|
},
|
|||
|
|
progressSteps: [
|
|||
|
|
{ name: '待兑换', status: 0 },
|
|||
|
|
{ name: '待发货', status: 1 },
|
|||
|
|
{ name: '待收货', status: 2 },
|
|||
|
|
{ name: '已完成', status: 3 }
|
|||
|
|
],
|
|||
|
|
loading: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(['isLogin']),
|
|||
|
|
|
|||
|
|
showActions() {
|
|||
|
|
// 待兑换(未付款)显示取消按钮，待收货显示确认收货按钮
|
|||
|
|
return (!this.orderInfo.paid) || (this.orderInfo.paid && this.orderInfo.status === 1)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 计算总积分
|
|||
|
|
totalPoints() {
|
|||
|
|
return this.orderInfo.points || 0;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 当前进度索引
|
|||
|
|
currentProgressIndex() {
|
|||
|
|
if (!this.orderInfo.paid) return 0; // 待兑换
|
|||
|
|
// status: 0-待发货 1-待收货 2-待评价 3-已完成
|
|||
|
|
if (this.orderInfo.status === 0) return 1; // 待发货
|
|||
|
|
if (this.orderInfo.status === 1) return 2; // 待收货
|
|||
|
|
if (this.orderInfo.status >= 2) return 3; // 已完成
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(options) {
|
|||
|
|
if (options.id) {
|
|||
|
|
this.orderId = options.id
|
|||
|
|
this.loadOrderDetail()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 返回上一页
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化积分数字（添加千分位逗号）
|
|||
|
|
formatPoints(points) {
|
|||
|
|
if (!points && points !== 0) return '0'
|
|||
|
|
return points.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取步骤图标
|
|||
|
|
getStepIcon(index) {
|
|||
|
|
const icons = ['⏱', '📦', '🚚', '✓'];
|
|||
|
|
return icons[index] || '○';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载订单详情
|
|||
|
|
async loadOrderDetail() {
|
|||
|
|
if (this.loading) return
|
|||
|
|
|
|||
|
|
// 检查登录状态
|
|||
|
|
if (!this.isLogin) {
|
|||
|
|
toLogin();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.loading = true
|
|||
|
|
uni.showLoading({ title: '加载中...' })
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await getOrderDetail(this.orderId);
|
|||
|
|
|
|||
|
|
if (res.data) {
|
|||
|
|
const order = res.data;
|
|||
|
|
const orderInfoList = order.orderInfoList || [];
|
|||
|
|
|
|||
|
|
// 获取第一个商品信息
|
|||
|
|
let goodsName = '商品名称';
|
|||
|
|
let goodsImage = '/static/images/default-goods.png';
|
|||
|
|
let totalNum = order.totalNum || 1;
|
|||
|
|
|
|||
|
|
// 计算总积分：优先使用payIntegral/useIntegral，否则从商品列表计算
|
|||
|
|
let totalPoints = 0;
|
|||
|
|
|
|||
|
|
// 优先使用订单级别的积分字段
|
|||
|
|
if (order.payIntegral !== undefined && order.payIntegral !== null) {
|
|||
|
|
totalPoints = parseFloat(order.payIntegral) || 0;
|
|||
|
|
} else if (order.useIntegral !== undefined && order.useIntegral !== null) {
|
|||
|
|
totalPoints = parseFloat(order.useIntegral) || 0;
|
|||
|
|
} else if (order.integral !== undefined && order.integral !== null) {
|
|||
|
|
totalPoints = parseFloat(order.integral) || 0;
|
|||
|
|
} else {
|
|||
|
|
// 从商品列表计算总积分
|
|||
|
|
totalPoints = orderInfoList.reduce((sum, item) => {
|
|||
|
|
// 优先使用integral字段，否则使用vipPrice或price
|
|||
|
|
const itemPoints = parseFloat(item.integral) || parseFloat(item.vipPrice) || parseFloat(item.price) || 0;
|
|||
|
|
const quantity = parseInt(item.cartNum) || 1;
|
|||
|
|
return sum + (itemPoints * quantity);
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
// 如果计算结果为0，尝试使用payPrice或totalPrice
|
|||
|
|
if (totalPoints === 0) {
|
|||
|
|
totalPoints = parseFloat(order.payPrice) || parseFloat(order.totalPrice) || 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('订单详情积分计算:', {
|
|||
|
|
orderId: order.orderId,
|
|||
|
|
payIntegral: order.payIntegral,
|
|||
|
|
useIntegral: order.useIntegral,
|
|||
|
|
integral: order.integral,
|
|||
|
|
payPrice: order.payPrice,
|
|||
|
|
totalPrice: order.totalPrice,
|
|||
|
|
calculatedPoints: totalPoints,
|
|||
|
|
orderInfoList: orderInfoList.map(item => ({
|
|||
|
|
name: item.storeName,
|
|||
|
|
integral: item.integral,
|
|||
|
|
vipPrice: item.vipPrice,
|
|||
|
|
price: item.price,
|
|||
|
|
cartNum: item.cartNum
|
|||
|
|
}))
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (orderInfoList.length > 0) {
|
|||
|
|
const firstGoods = orderInfoList[0];
|
|||
|
|
goodsName = firstGoods.storeName || firstGoods.productName || goodsName;
|
|||
|
|
goodsImage = firstGoods.image || goodsImage;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化订单数据
|
|||
|
|
this.orderInfo = {
|
|||
|
|
id: order.id,
|
|||
|
|
order_no: order.orderId || order.orderNo || '',
|
|||
|
|
goods_id: orderInfoList.length > 0 ? orderInfoList[0].productId : '',
|
|||
|
|
goods_name: goodsName,
|
|||
|
|
goods_image: goodsImage,
|
|||
|
|
quantity: totalNum,
|
|||
|
|
points: totalPoints,
|
|||
|
|
status: order.status,
|
|||
|
|
paid: order.paid,
|
|||
|
|
status_text: order.orderStatus || this.getStatusText(order.status, order.paid),
|
|||
|
|
express_company: order.deliveryName || '',
|
|||
|
|
express_no: order.deliveryId || '',
|
|||
|
|
receiver_name: order.realName || '',
|
|||
|
|
receiver_phone: order.userPhone || '',
|
|||
|
|
receiver_address: order.userAddress || '',
|
|||
|
|
created_at: order.createTime || '',
|
|||
|
|
pay_at: order.payTime || '',
|
|||
|
|
ship_at: order.deliveryTime || '',
|
|||
|
|
finish_at: order.finishTime || '',
|
|||
|
|
orderInfoList: orderInfoList
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
throw new Error(res.msg || '加载失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载订单详情失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || error.message || '加载失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取状态文本
|
|||
|
|
getStatusText(status, paid) {
|
|||
|
|
if (!paid) return '待兑换';
|
|||
|
|
|
|||
|
|
const statusMap = {
|
|||
|
|
0: '待发货',
|
|||
|
|
1: '待收货',
|
|||
|
|
2: '待评价',
|
|||
|
|
3: '已完成'
|
|||
|
|
};
|
|||
|
|
return statusMap[status] || '未知状态';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 取消订单
|
|||
|
|
cancelOrder() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要取消这个订单吗？积分将退回到您的账户',
|
|||
|
|
confirmColor: '#F54900',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.showLoading({ title: '取消中...' })
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await orderCancel(this.orderInfo.id);
|
|||
|
|
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '订单已取消',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || '取消失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认收货
|
|||
|
|
confirmReceipt() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认收货',
|
|||
|
|
content: '确认已收到商品？',
|
|||
|
|
confirmColor: '#F54900',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.showLoading({ title: '确认中...' })
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const result = await orderTake(this.orderInfo.id);
|
|||
|
|
console.log('确认收货接口返回:', result)
|
|||
|
|
|
|||
|
|
uni.hideLoading()
|
|||
|
|
|
|||
|
|
// 接口返回 code: 200 表示成功
|
|||
|
|
if (result.code === 200 || result.code === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '确认收货成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 重新加载订单详情
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.loadOrderDetail()
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: result.msg || '操作失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('确认收货失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || error.message || '操作失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 复制文本
|
|||
|
|
copyText(text) {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: text,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '已复制',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取状态图标
|
|||
|
|
getStatusIcon(status) {
|
|||
|
|
const icons = {
|
|||
|
|
1: '⏳', // 待发货
|
|||
|
|
2: '🚚', // 待收货
|
|||
|
|
3: '✅', // 已完成
|
|||
|
|
4: '❌' // 已取消
|
|||
|
|
}
|
|||
|
|
return icons[status] || '📦'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取状态提示
|
|||
|
|
getStatusTip(status) {
|
|||
|
|
if (!this.orderInfo.paid) {
|
|||
|
|
return '请尽快完成支付，积分商品数量有限';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const tips = {
|
|||
|
|
0: '商家正在准备发货，请耐心等待',
|
|||
|
|
1: '商品已发货，请注意查收',
|
|||
|
|
2: '请对本次交易进行评价',
|
|||
|
|
3: '交易已完成，感谢您的支持'
|
|||
|
|
}
|
|||
|
|
return tips[status] || ''
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 去支付
|
|||
|
|
goPay() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/order/order_payment/index?orderNo=${this.orderInfo.order_no}&payPrice=${this.orderInfo.points}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order-detail-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 橙色头部
|
|||
|
|
.header-section {
|
|||
|
|
background-color: #F54900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-content {
|
|||
|
|
height: 88rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-icon {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 300;
|
|||
|
|
width: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-placeholder {
|
|||
|
|
width: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
padding-bottom: 140rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
height: calc(100vh - 88rpx - 120rpx);
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 卡片通用样式
|
|||
|
|
.card-section {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 状态卡片
|
|||
|
|
.status-card {
|
|||
|
|
padding: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #F54900;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-no-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 进度条
|
|||
|
|
.progress-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
.step-icon {
|
|||
|
|
background-color: #F54900;
|
|||
|
|
border-color: #F54900;
|
|||
|
|
|
|||
|
|
.icon-text {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-text {
|
|||
|
|
color: #F54900;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.current {
|
|||
|
|
.step-icon {
|
|||
|
|
background-color: #F54900;
|
|||
|
|
border-color: #F54900;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-icon-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-icon {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border: 4rpx solid #E5E7EB;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 2;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #E5E7EB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-line {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: calc(50% + 36rpx);
|
|||
|
|
width: calc(100% - 72rpx);
|
|||
|
|
height: 4rpx;
|
|||
|
|
background-color: #E5E7EB;
|
|||
|
|
z-index: 1;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step.active .step-line {
|
|||
|
|
background-color: #F54900;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step:last-child .step-line {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-text {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 收货信息卡片
|
|||
|
|
.address-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-icon {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-location {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-content {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.receiver-name {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.receiver-phone {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 商品信息卡片
|
|||
|
|
.goods-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
padding: 32rpx;
|
|||
|
|
border-bottom: 1rpx solid #F5F5F5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-list {
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-item {
|
|||
|
|
padding: 32rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #F5F5F5;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-name {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-price-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-price {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #F54900;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-qty {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 商品汇总
|
|||
|
|
.goods-summary {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
border-top: 1rpx solid #F5F5F5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-total {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #F54900;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 订单信息卡片
|
|||
|
|
.order-info-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-content {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-value {
|
|||
|
|
color: #F54900 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部操作栏 - 固定在页面底部 */
|
|||
|
|
.bottom-actions {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 999;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
|||
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|||
|
|
border-top: 1rpx solid #EEEEEE;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 0 50rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-btn {
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.primary-btn {
|
|||
|
|
background-color: #F54900;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|