464 lines
11 KiB
Vue
464 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="detail-page">
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<view class="nav-bar">
|
|||
|
|
<view class="nav-back" @click="goBack">
|
|||
|
|
<text class="back-arrow">‹</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="nav-title">订单详情</text>
|
|||
|
|
<view class="nav-placeholder"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<scroll-view class="detail-scroll" scroll-y>
|
|||
|
|
<view v-if="loading" class="loading-state">
|
|||
|
|
<text class="loading-text">加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-else-if="order" class="detail-body">
|
|||
|
|
<!-- 状态卡片 -->
|
|||
|
|
<view class="status-card">
|
|||
|
|
<view class="status-icon-row">
|
|||
|
|
<view class="status-dot" :class="statusDotClass"></view>
|
|||
|
|
<text class="status-main">{{ orderStatusText(order.order_status) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="status-sub">{{ payStatusText(order.payment_status) }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品信息 -->
|
|||
|
|
<view class="section-card">
|
|||
|
|
<view class="section-title">商品信息</view>
|
|||
|
|
<view
|
|||
|
|
class="product-item"
|
|||
|
|
v-for="(product, idx) in order.products"
|
|||
|
|
:key="idx"
|
|||
|
|
>
|
|||
|
|
<image class="product-img" :src="product.image" mode="aspectFill" />
|
|||
|
|
<view class="product-info">
|
|||
|
|
<text class="product-name">{{ product.name }}</text>
|
|||
|
|
<view class="product-bottom">
|
|||
|
|
<text class="product-price">￥{{ getDecimal(product.unit_price) }}</text>
|
|||
|
|
<text class="product-qty">x{{ product.qty }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 订单信息 -->
|
|||
|
|
<view class="section-card">
|
|||
|
|
<view class="section-title">订单信息</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">订单编号</text>
|
|||
|
|
<text class="info-value" @click="copyText(order.order_id)">{{ order.order_id }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">下单时间</text>
|
|||
|
|
<text class="info-value">{{ formatTime(order.createdAt) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">设备编号</text>
|
|||
|
|
<text class="info-value">{{ order.device_id }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">订单来源</text>
|
|||
|
|
<text class="info-value">{{ orderSourceText(order.order_source) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">商品数量</text>
|
|||
|
|
<text class="info-value">{{ order.total_qty }} 件</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 金额信息 -->
|
|||
|
|
<view class="section-card">
|
|||
|
|
<view class="section-title">金额信息</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">商品总额</text>
|
|||
|
|
<text class="info-value">￥{{ getDecimal(order.total_amount) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row" v-if="getDecimal(order.discount_amount) !== '0'">
|
|||
|
|
<text class="info-label">优惠金额</text>
|
|||
|
|
<text class="info-value discount">-￥{{ getDecimal(order.discount_amount) }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-row total">
|
|||
|
|
<text class="info-label">实付金额</text>
|
|||
|
|
<text class="info-value price">￥{{ getDecimal(order.paid_amount) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 退款信息 -->
|
|||
|
|
<view class="section-card" v-if="order.has_refund && order.refund_info">
|
|||
|
|
<view class="section-title">退款信息</view>
|
|||
|
|
<view class="info-row">
|
|||
|
|
<text class="info-label">退款状态</text>
|
|||
|
|
<text class="info-value refunded">已退款</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-else class="empty-state">
|
|||
|
|
<text class="empty-text">订单不存在</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="bottom-spacer"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 底部操作栏 -->
|
|||
|
|
<view class="bottom-bar" v-if="order">
|
|||
|
|
<view
|
|||
|
|
v-if="order.payment_status === 'PENDING'"
|
|||
|
|
class="btn-action btn-pay"
|
|||
|
|
@click="handlePay"
|
|||
|
|
>
|
|||
|
|
立即支付
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-else-if="order.payment_status === 'PAID' && !order.has_refund"
|
|||
|
|
class="btn-action btn-refund"
|
|||
|
|
@click="handleRefund"
|
|||
|
|
>
|
|||
|
|
申请退款
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { get } from '@/utils/request.js';
|
|||
|
|
import { checkLoginWithPrompt } from '@/utils/auth-guard.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
orderId: '',
|
|||
|
|
order: null,
|
|||
|
|
loading: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
statusDotClass() {
|
|||
|
|
if (!this.order) return '';
|
|||
|
|
const s = this.order.order_status;
|
|||
|
|
if (s === 'COMPLETED') return 'dot-success';
|
|||
|
|
if (s === 'CANCELLED') return 'dot-grey';
|
|||
|
|
return 'dot-blue';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.orderId = options.order_id || '';
|
|||
|
|
if (this.orderId) {
|
|||
|
|
this.fetchOrder();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async fetchOrder() {
|
|||
|
|
this.loading = true;
|
|||
|
|
try {
|
|||
|
|
const res = await get('/user/orders', {
|
|||
|
|
page: 1,
|
|||
|
|
limit: 1,
|
|||
|
|
filter: JSON.stringify({ order_id: this.orderId })
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const ret = res.data || {};
|
|||
|
|
if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
|
|||
|
|
this.order = ret.data[0];
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
uni.showToast({ title: '获取订单失败', icon: 'none' });
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getDecimal(val) {
|
|||
|
|
if (!val) return '0.00';
|
|||
|
|
if (val.$numberDecimal) return val.$numberDecimal;
|
|||
|
|
return String(val);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatTime(iso) {
|
|||
|
|
if (!iso) return '';
|
|||
|
|
const d = new Date(iso);
|
|||
|
|
const pad = n => String(n).padStart(2, '0');
|
|||
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
orderStatusText(status) {
|
|||
|
|
const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
|
|||
|
|
return map[status] || status;
|
|||
|
|
},
|
|||
|
|
payStatusText(status) {
|
|||
|
|
const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
|
|||
|
|
return map[status] || status;
|
|||
|
|
},
|
|||
|
|
orderSourceText(source) {
|
|||
|
|
const map = { SCAN: '扫码开门', APP: 'APP下单' };
|
|||
|
|
return map[source] || source;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
copyText(text) {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: text,
|
|||
|
|
success: () => uni.showToast({ title: '已复制', icon: 'success' })
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handlePay() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '立即支付',
|
|||
|
|
content: `确认支付￥${this.getDecimal(this.order.total_amount)}？`,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.showToast({ title: '支付功能开发中', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleRefund() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '申请退款',
|
|||
|
|
content: '确认申请退款？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.showToast({ title: '退款功能开发中', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
page {
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-page {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航栏 */
|
|||
|
|
.nav-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
padding-top: constant(safe-area-inset-top);
|
|||
|
|
padding-top: env(safe-area-inset-top);
|
|||
|
|
}
|
|||
|
|
.nav-back {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.back-arrow {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.nav-title {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.nav-placeholder {
|
|||
|
|
width: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 内容区域 */
|
|||
|
|
.detail-scroll {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 状态卡片 */
|
|||
|
|
.status-card {
|
|||
|
|
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
|||
|
|
padding: 40rpx 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
}
|
|||
|
|
.status-icon-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
}
|
|||
|
|
.status-dot {
|
|||
|
|
width: 16rpx;
|
|||
|
|
height: 16rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
.dot-blue { background: #fff; }
|
|||
|
|
.dot-success { background: #52c41a; }
|
|||
|
|
.dot-grey { background: #999; }
|
|||
|
|
.status-main {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.status-sub {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.75);
|
|||
|
|
padding-left: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通用卡片 */
|
|||
|
|
.section-card {
|
|||
|
|
background: #fff;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 24rpx 28rpx;
|
|||
|
|
}
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding-bottom: 16rpx;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 商品项 */
|
|||
|
|
.product-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
}
|
|||
|
|
.product-item + .product-item {
|
|||
|
|
border-top: 1rpx solid #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.product-img {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.product-info {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
min-height: 120rpx;
|
|||
|
|
}
|
|||
|
|
.product-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.product-bottom {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.product-price {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.product-qty {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 信息行 */
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16rpx 0;
|
|||
|
|
}
|
|||
|
|
.info-row + .info-row {
|
|||
|
|
border-top: 1rpx solid #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.info-row.total {
|
|||
|
|
border-top: 1rpx solid #f0f0f0;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.info-label {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
.info-value {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.info-value.discount {
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
}
|
|||
|
|
.info-value.price {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #e4393c;
|
|||
|
|
}
|
|||
|
|
.info-value.refunded {
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载/空状态 */
|
|||
|
|
.loading-state, .empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 120rpx 0;
|
|||
|
|
}
|
|||
|
|
.loading-text, .empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部操作栏 */
|
|||
|
|
.bottom-bar {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 16rpx 30rpx;
|
|||
|
|
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
|
|||
|
|
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|||
|
|
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
|
|||
|
|
}
|
|||
|
|
.btn-action {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.btn-pay {
|
|||
|
|
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.btn-refund {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 2rpx solid #2979ff;
|
|||
|
|
color: #2979ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部占位 */
|
|||
|
|
.bottom-spacer {
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|