310 lines
6.7 KiB
Vue
310 lines
6.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 加载中 -->
|
|
<view class="loading" v-if="loading">
|
|
<text>加载中...</text>
|
|
</view>
|
|
|
|
<!-- 错误 -->
|
|
<view class="error" v-else-if="error">
|
|
<text class="error-icon">❌</text>
|
|
<text class="error-text">{{ error }}</text>
|
|
</view>
|
|
|
|
<!-- 订单详情 -->
|
|
<view class="order-content" v-else-if="order">
|
|
<!-- 头部状态 -->
|
|
<view class="order-header">
|
|
<view class="status-badge" :class="getStatusClass(order.status)">
|
|
{{ order.statusText }}
|
|
</view>
|
|
<text class="order-no">订单号: {{ order.orderNo }}</text>
|
|
</view>
|
|
|
|
<!-- 客户信息 -->
|
|
<view class="section">
|
|
<view class="section-title">客户信息</view>
|
|
<view class="section-content">
|
|
<view class="info-row">
|
|
<text class="label">客户姓名</text>
|
|
<text class="value">{{ order.customerName }}</text>
|
|
</view>
|
|
<view class="info-row" v-if="order.customerPhone">
|
|
<text class="label">联系电话</text>
|
|
<text class="value">{{ order.customerPhone }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="label">下单时间</text>
|
|
<text class="value">{{ formatTime(order.createdAt) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品明细 -->
|
|
<view class="section">
|
|
<view class="section-title">商品明细</view>
|
|
<view class="items-list">
|
|
<view class="item-row header">
|
|
<text class="item-name">商品</text>
|
|
<text class="item-qty">数量</text>
|
|
<text class="item-price">单价</text>
|
|
<text class="item-subtotal">小计</text>
|
|
</view>
|
|
<view
|
|
v-for="(item, index) in order.items"
|
|
:key="index"
|
|
class="item-row"
|
|
>
|
|
<text class="item-name">{{ item.productName }}</text>
|
|
<text class="item-qty">{{ item.quantity }}</text>
|
|
<text class="item-price">¥{{ item.price }}</text>
|
|
<text class="item-subtotal">¥{{ (item.price * item.quantity).toFixed(2) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 金额信息 -->
|
|
<view class="section amount-section">
|
|
<view class="info-row">
|
|
<text class="label">原价合计</text>
|
|
<text class="value">¥{{ order.totalAmount }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="label">优惠金额</text>
|
|
<text class="value discount">-¥{{ order.discountAmount }}</text>
|
|
</view>
|
|
<view class="info-row actual">
|
|
<text class="label">实付金额</text>
|
|
<text class="value">¥{{ order.actualAmount }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="label">支付方式</text>
|
|
<text class="value">{{ order.paymentMethod }}</text>
|
|
</view>
|
|
<view class="info-row" v-if="order.remark">
|
|
<text class="label">备注</text>
|
|
<text class="value">{{ order.remark }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 店铺信息 -->
|
|
<view class="footer">
|
|
<text class="shop-name">建材销售管家</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
error: '',
|
|
order: null,
|
|
orderNo: ''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.orderNo) {
|
|
this.orderNo = options.orderNo
|
|
this.loadOrder()
|
|
} else {
|
|
this.error = '订单号不能为空'
|
|
this.loading = false
|
|
}
|
|
},
|
|
methods: {
|
|
async loadOrder() {
|
|
try {
|
|
const res = await uni.request({
|
|
url: `${getApp().globalData.apiBaseUrl}/public/orders/${this.orderNo}`,
|
|
method: 'GET'
|
|
})
|
|
this.loading = false
|
|
if (res.data.code === 0) {
|
|
this.order = res.data.data
|
|
} else {
|
|
this.error = res.data.message || '订单不存在'
|
|
}
|
|
} catch (e) {
|
|
this.loading = false
|
|
this.error = '加载失败，请检查网络'
|
|
}
|
|
},
|
|
getStatusClass(status) {
|
|
const map = {
|
|
0: 'status-progress',
|
|
1: 'status-success',
|
|
2: 'status-cancel',
|
|
3: 'status-refunding',
|
|
4: 'status-refunded',
|
|
9: 'status-returning'
|
|
}
|
|
return map[status] || ''
|
|
},
|
|
formatTime(time) {
|
|
if (!time) return ''
|
|
return time.substring(0, 16).replace('T', ' ')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.loading, .error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.error-icon {
|
|
font-size: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.error-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.order-content {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.order-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 40rpx 30rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.status-progress { background: #1890ff; }
|
|
.status-success { background: #52c41a; }
|
|
.status-cancel { background: #999; }
|
|
.status-refunding { background: #fa8c16; }
|
|
.status-refunded { background: #ff4d4f; }
|
|
.status-returning { background: #722ed1; }
|
|
|
|
.order-no {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.section {
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section-title {
|
|
padding: 24rpx 30rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.section-content {
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f8f8f8;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.value.discount {
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.info-row.actual .value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.items-list {
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.item-row {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f8f8f8;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.item-row.header {
|
|
background: #f8f9fa;
|
|
font-weight: bold;
|
|
color: #666;
|
|
}
|
|
|
|
.item-name {
|
|
flex: 2;
|
|
}
|
|
|
|
.item-qty {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-price {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.item-subtotal {
|
|
flex: 1;
|
|
text-align: right;
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.amount-section {
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.shop-name {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
</style> |