639 lines
15 KiB
Vue
639 lines
15 KiB
Vue
<template>
|
||
<view class="order-detail-page">
|
||
<view class="detail-content" v-if="orderInfo">
|
||
<view class="card">
|
||
<view class="section-title">
|
||
<text>订单概览</text>
|
||
<text class="status-tag" :class="statusClass">{{ statusText }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">订单编号</text>
|
||
<text class="value">{{ orderInfo.orderNo }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">创建时间</text>
|
||
<text class="value">{{ orderInfo.createdAt }}</text>
|
||
</view>
|
||
<view class="row amount-row">
|
||
<text class="label">应付金额</text>
|
||
<text class="amount">¥{{ orderInfo.payableAmount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card warning-card" v-if="showPaymentWarning">
|
||
<view class="warning-title">
|
||
<text>付款提醒</text>
|
||
<text class="countdown" v-if="countdownText">{{ countdownText }}</text>
|
||
</view>
|
||
<text class="warning-text">
|
||
订单生成后需在15分钟内完成支付，逾期将自动取消。
|
||
</text>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="section-title">
|
||
<text>商品信息</text>
|
||
<text class="sub-info">共{{ totalQuantity }}件</text>
|
||
</view>
|
||
<view v-if="orderInfo.products.length" class="product-list">
|
||
<view class="product-item" v-for="item in orderInfo.products" :key="item.id">
|
||
<image class="product-img" :src="item.image" mode="aspectFill" />
|
||
<view class="product-info">
|
||
<view class="product-name-row">
|
||
<text class="product-name">{{ item.name }}</text>
|
||
<text class="product-tag" v-if="item.isHot">热销</text>
|
||
<text class="product-tag limited" v-if="item.isLimited">限量</text>
|
||
</view>
|
||
<text class="product-sku" v-if="item.skuName">{{ item.skuName }}</text>
|
||
<text class="product-desc" v-if="item.desc">{{ item.desc }}</text>
|
||
<view class="product-meta">
|
||
<text class="product-price">¥{{ item.price }}</text>
|
||
<text class="product-qty">x{{ item.quantity }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-tip" v-else>暂无商品信息</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="section-title">
|
||
<text>配送信息</text>
|
||
<text class="sub-info">{{ shippingStatusText }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">收件人</text>
|
||
<text class="value">{{ orderInfo.delivery.receiverName }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">联系电话</text>
|
||
<text class="value">{{ orderInfo.delivery.phone }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">收货地址</text>
|
||
<text class="value address">{{ orderInfo.delivery.fullAddress }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">物流公司</text>
|
||
<text class="value">{{ orderInfo.delivery.logisticsCompany }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">运单号</text>
|
||
<text class="value">{{ orderInfo.delivery.trackingNumber }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">预计送达</text>
|
||
<text class="value">{{ orderInfo.delivery.estimatedDelivery }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<view class="section-title">
|
||
<text>金额明细</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">商品总额</text>
|
||
<text class="value">¥{{ orderInfo.originalAmount }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">优惠券抵扣</text>
|
||
<text class="value">-¥{{ orderInfo.couponAmount }}</text>
|
||
</view>
|
||
<view class="row" v-if="orderInfo.pointsUsed">
|
||
<text class="label">积分抵扣({{ orderInfo.pointsUsed }}积分)</text>
|
||
<text class="value">-¥{{ orderInfo.pointsAmount }}</text>
|
||
</view>
|
||
<view class="row total-row">
|
||
<text class="label">实付金额</text>
|
||
<text class="amount">¥{{ orderInfo.payableAmount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="action-bar" v-if="showPaymentWarning">
|
||
<button class="pay-btn" :disabled="isPaying" @tap="handleRepay">
|
||
{{ isPaying ? '正在唤起支付...' : '重新发起支付' }}
|
||
</button>
|
||
</view>
|
||
|
||
<view class="empty-block" v-else>
|
||
<text class="placeholder-text">正在加载订单详情...</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/api/request.js';
|
||
|
||
const STATUS_META = {
|
||
1: { text: '待支付', class: 'status-pending' },
|
||
2: { text: '支付失败', class: 'status-failed' },
|
||
3: { text: '待发货', class: 'status-delivering' },
|
||
4: { text: '待收货', class: 'status-receiving' },
|
||
5: { text: '已完成', class: 'status-success' },
|
||
6: { text: '已取消', class: 'status-cancel' },
|
||
7: { text: '已退款', class: 'status-refund' },
|
||
default: { text: '未知状态', class: 'status-default' }
|
||
};
|
||
|
||
const SHIPPING_STATUS_META = {
|
||
0: '待发货',
|
||
1: '已发货',
|
||
2: '运输中',
|
||
3: '派送中',
|
||
4: '已签收'
|
||
};
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderId: '',
|
||
orderInfo: null,
|
||
payCountdown: 0,
|
||
countdownTimer: null,
|
||
isPaying: false
|
||
};
|
||
},
|
||
computed: {
|
||
countdownText() {
|
||
if (this.payCountdown <= 0) return '';
|
||
const minutes = Math.floor(this.payCountdown / 60);
|
||
const seconds = this.payCountdown % 60;
|
||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||
},
|
||
statusClass() {
|
||
return this.orderStatusMeta.class;
|
||
},
|
||
statusText() {
|
||
return this.orderStatusMeta.text;
|
||
},
|
||
orderStatusMeta() {
|
||
if (!this.orderInfo) return STATUS_META.default;
|
||
return STATUS_META[this.orderInfo.status] || STATUS_META.default;
|
||
},
|
||
showPaymentWarning() {
|
||
return !!this.orderInfo && this.orderInfo.status === 1;
|
||
},
|
||
totalQuantity() {
|
||
if (!this.orderInfo) return 0;
|
||
return this.orderInfo.products.reduce((acc, item) => acc + Number(item.quantity || 0), 0);
|
||
},
|
||
shippingStatusText() {
|
||
if (!this.orderInfo) return '--';
|
||
const code = this.orderInfo.delivery.shippingStatus;
|
||
return SHIPPING_STATUS_META[code] || '物流信息更新中';
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.orderId = options.id || '';
|
||
this.loadOrderDetail(this.orderId);
|
||
},
|
||
onUnload() {
|
||
this.clearCountdown();
|
||
},
|
||
methods: {
|
||
async loadOrderDetail(orderId) {
|
||
try {
|
||
const res = await request(`xcx/order/${orderId}`, 'get');
|
||
const parsed = this.formatOrderInfo(res || {});
|
||
this.orderInfo = parsed;
|
||
this.initCountdown(parsed.createdAt, parsed.status);
|
||
} catch (error) {
|
||
console.error('获取订单详情失败', error);
|
||
const mockData = this.formatOrderInfo({
|
||
order_id: orderId || 'PO202411230001',
|
||
status: 1,
|
||
created_at: '2024-11-23 10:00',
|
||
total_amount: 688,
|
||
coupon_amount: 50,
|
||
payable_amount: 638,
|
||
points_amount: 0,
|
||
points_used: 0,
|
||
product_list: [
|
||
{
|
||
product_id: 'P001',
|
||
product_name: '至臻香水 50ml',
|
||
sku_name: '清新花香调',
|
||
price: 488,
|
||
quantity: 1,
|
||
product_main_image_url: 'https://dummyimage.com/120x120',
|
||
product_description: '灵感源于花园的香氛体验'
|
||
}
|
||
],
|
||
delivery_info: {
|
||
receiver_name: '张三',
|
||
phone: '138****6666',
|
||
province: '上海市',
|
||
city: '上海市',
|
||
district: '浦东新区',
|
||
detail_address: '世纪大道100号',
|
||
logistics_company: '顺丰速运',
|
||
tracking_number: 'SF123456789',
|
||
estimated_delivery: '2024-11-24 18:00',
|
||
shipping_status: 0
|
||
}
|
||
});
|
||
this.orderInfo = mockData;
|
||
this.initCountdown(mockData.createdAt, mockData.status);
|
||
}
|
||
},
|
||
async handleRepay() {
|
||
if (!this.orderInfo || this.isPaying) return;
|
||
this.isPaying = true;
|
||
try {
|
||
const payload = {
|
||
order_id: this.orderInfo.orderNo,
|
||
pay_amount: this.orderInfo.payableAmount
|
||
};
|
||
// TODO: 根据实际支付接口调整请求方式/参数
|
||
const result = await request('xcx/order/repay/' + this.orderId, 'post');
|
||
// 发起微信支付
|
||
wx.requestPayment({
|
||
timeStamp: result.time_stamp,
|
||
nonceStr: result.nonce_str,
|
||
package: result.package,
|
||
signType: result.sign_type,
|
||
paySign: result.pay_sign,
|
||
success: () => {
|
||
// console.log('支付成功');
|
||
// // 跳转到订单详情或订单列表页面
|
||
// setTimeout(() => {
|
||
// // 根据实际路由调整
|
||
// uni.redirectTo({
|
||
// url: `/pages/order/detail?id=${result.order_id || result.id}`
|
||
// });
|
||
// }, 2000);
|
||
},
|
||
complete: () => {
|
||
console.log('支付xxx');
|
||
this.loadOrderDetail(this.orderId);
|
||
|
||
}
|
||
|
||
});
|
||
} catch (error) {
|
||
console.error('重新发起支付失败', error);
|
||
uni.showToast({ title: error.message || '发起支付失败', icon: 'none' });
|
||
} finally {
|
||
this.isPaying = false;
|
||
}
|
||
},
|
||
initCountdown(createdAt, statusCode = 1) {
|
||
if (statusCode !== 1) {
|
||
this.clearCountdown();
|
||
this.payCountdown = 0;
|
||
return;
|
||
}
|
||
const createdTime = new Date((createdAt || '').replace(/-/g, '/')).getTime();
|
||
if (Number.isNaN(createdTime)) {
|
||
this.payCountdown = 0;
|
||
return;
|
||
}
|
||
const deadline = createdTime + 15 * 60 * 1000;
|
||
const diff = Math.max(0, Math.floor((deadline - Date.now()) / 1000));
|
||
this.payCountdown = diff;
|
||
this.clearCountdown();
|
||
if (diff > 0) {
|
||
this.countdownTimer = setInterval(() => {
|
||
if (this.payCountdown <= 1) {
|
||
this.payCountdown = 0;
|
||
this.clearCountdown();
|
||
this.orderInfo.status = 6;
|
||
return;
|
||
}
|
||
this.payCountdown -= 1;
|
||
}, 1000);
|
||
}
|
||
},
|
||
formatOrderInfo(raw = {}) {
|
||
const statusCode = this.normalizeStatus(raw.status);
|
||
const products = this.formatProducts(raw.product_list);
|
||
const delivery = this.formatDeliveryInfo(raw.delivery_info);
|
||
return {
|
||
orderNo: raw.order_id || raw.orderNo || '--',
|
||
status: statusCode,
|
||
createdAt: raw.created_at || raw.createdAt || raw.createTime || '--',
|
||
originalAmount: this.formatAmount(raw.total_amount ?? raw.amount),
|
||
couponAmount: this.formatAmount(raw.coupon_amount),
|
||
payableAmount: this.formatAmount(raw.payable_amount ?? raw.payableAmount ?? raw.amount),
|
||
pointsAmount: this.formatAmount(raw.points_amount),
|
||
pointsUsed: Number(raw.points_used) || 0,
|
||
products,
|
||
delivery
|
||
};
|
||
},
|
||
formatProducts(list = []) {
|
||
if (!Array.isArray(list)) return [];
|
||
return list.map((item) => ({
|
||
id: item.product_id || item.sku_id || item.product_name,
|
||
name: item.product_name || '--',
|
||
skuName: item.sku_name || '',
|
||
desc: item.product_description || '',
|
||
price: this.formatAmount(item.price ?? item.original_price),
|
||
quantity: item.quantity || 0,
|
||
image: item.product_main_image_url || item.category_image_url || '',
|
||
isHot: Number(item.is_hot_selling) === 1,
|
||
isLimited: Number(item.is_limited) === 1
|
||
}));
|
||
},
|
||
formatDeliveryInfo(info = {}) {
|
||
const province = info.province || '';
|
||
const city = info.city || '';
|
||
const district = info.district || '';
|
||
const detail = info.detail_address || '';
|
||
const fullAddress = [province, city, district, detail].filter(Boolean).join('');
|
||
const status = Number(info.shipping_status);
|
||
return {
|
||
receiverName: info.receiver_name || '--',
|
||
phone: info.phone || '--',
|
||
fullAddress: fullAddress || '--',
|
||
logisticsCompany: info.logistics_company || '--',
|
||
trackingNumber: info.tracking_number || '--',
|
||
estimatedDelivery: info.estimated_delivery || '--',
|
||
shippingStatus: Number.isNaN(status) ? 0 : status,
|
||
shippedAt: info.shipped_at || '',
|
||
deliveredAt: info.delivered_at || ''
|
||
};
|
||
},
|
||
formatAmount(value) {
|
||
const num = Number(value);
|
||
return Number.isFinite(num) ? num.toFixed(2) : '0.00';
|
||
},
|
||
normalizeStatus(status) {
|
||
const code = Number(status);
|
||
if (Number.isNaN(code) || code <= 0) return 1;
|
||
return code;
|
||
},
|
||
clearCountdown() {
|
||
if (this.countdownTimer) {
|
||
clearInterval(this.countdownTimer);
|
||
this.countdownTimer = null;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.order-detail-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
padding: 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.detail-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.card {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 32rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.sub-info {
|
||
font-size: 24rpx;
|
||
color: #888;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.status-pending {
|
||
background-color: #fff5e5;
|
||
color: #f57c00;
|
||
}
|
||
|
||
.status-failed {
|
||
background-color: #ffe5e5;
|
||
color: #d32f2f;
|
||
}
|
||
|
||
.status-delivering,
|
||
.status-receiving {
|
||
background-color: #e8f4ff;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.status-success {
|
||
background-color: #e5f9f0;
|
||
color: #22a46d;
|
||
}
|
||
|
||
.status-cancel {
|
||
background-color: #f0f0f0;
|
||
color: #777;
|
||
}
|
||
|
||
.status-refund {
|
||
background-color: #f0e8ff;
|
||
color: #7b1fa2;
|
||
}
|
||
|
||
.status-default {
|
||
background-color: #ececec;
|
||
color: #666;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.label {
|
||
width: 160rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #111;
|
||
text-align: right;
|
||
}
|
||
|
||
.amount-row {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #d81e06;
|
||
}
|
||
|
||
.total-row .amount {
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.warning-card {
|
||
background: linear-gradient(135deg, #fff6e6, #ffe8d1);
|
||
}
|
||
|
||
.warning-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 16rpx;
|
||
color: #b34700;
|
||
}
|
||
|
||
.countdown {
|
||
font-size: 26rpx;
|
||
color: #d81e06;
|
||
}
|
||
|
||
.warning-text {
|
||
font-size: 26rpx;
|
||
color: #8c4a00;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.address {
|
||
text-align: right;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.product-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.product-img {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #f6f6f6;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.product-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 30rpx;
|
||
color: #111;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.product-tag {
|
||
font-size: 20rpx;
|
||
color: #f57c00;
|
||
background-color: #fff4e0;
|
||
padding: 2rpx 12rpx;
|
||
border-radius: 999rpx;
|
||
}
|
||
|
||
.product-tag.limited {
|
||
color: #c2185b;
|
||
background-color: #ffe1ec;
|
||
}
|
||
|
||
.product-sku {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.product-desc {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.product-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 30rpx;
|
||
color: #d81e06;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.product-qty {
|
||
font-size: 26rpx;
|
||
color: #555;
|
||
}
|
||
|
||
.empty-tip {
|
||
padding: 40rpx 0;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.empty-block {
|
||
min-height: 400rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.action-bar {
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 24rpx 32rpx 48rpx;
|
||
background: linear-gradient(180deg, rgba(245, 245, 245, 0), #f5f5f5 40%, #f5f5f5);
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pay-btn {
|
||
width: 100%;
|
||
border: none;
|
||
border-radius: 999rpx;
|
||
background-image: linear-gradient(120deg, #ff8a00, #ff4d4f);
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 12rpx 20rpx rgba(255, 77, 79, 0.25);
|
||
}
|
||
|
||
.pay-btn:disabled {
|
||
opacity: 0.6;
|
||
}
|
||
</style>
|