461 lines
10 KiB
Vue
461 lines
10 KiB
Vue
<template>
|
||
<view class="page" v-if="order">
|
||
<!-- 订单信息 -->
|
||
<view class="order-header">
|
||
<view class="header-row">
|
||
<text class="label">订单编号</text>
|
||
<text class="value">{{ order.orderNo }}</text>
|
||
</view>
|
||
<view class="header-row">
|
||
<text class="label">订单状态</text>
|
||
<text class="status" :class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</text>
|
||
</view>
|
||
<view class="header-row">
|
||
<text class="label">下单时间</text>
|
||
<text class="value">{{ formatTime(order.createdAt) }}</text>
|
||
</view>
|
||
</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>
|
||
</view>
|
||
|
||
<!-- 商品明细 -->
|
||
<view class="section">
|
||
<view class="section-title">商品明细</view>
|
||
<view class="items-list">
|
||
<view class="item-row header">
|
||
<text class="item-info">商品信息</text>
|
||
<text class="item-area">总面积(m²)</text>
|
||
<text class="item-qty">数量</text>
|
||
<text class="item-price">单价</text>
|
||
<text class="item-subtotal">小计</text>
|
||
</view>
|
||
<view
|
||
v-for="(item, index) in orderItems"
|
||
:key="index"
|
||
class="item-row"
|
||
>
|
||
<text class="item-info"><text class="item-name-text">{{ item.productName }}</text><text class="item-spec-text">{{ item.productSpec ? ' ' + item.productSpec : '' }}</text><text class="item-dims-text">{{ item.length || '-' }}x{{ item.width || '-' }}</text></text>
|
||
<text class="item-area">{{ calcArea(item) }}</text>
|
||
<text class="item-qty">{{ item.quantity }}</text>
|
||
<text class="item-price">¥{{ item.price }}</text>
|
||
<text class="item-subtotal">¥{{ (item.price * item.quantity).toFixed(0) }}</text>
|
||
</view>
|
||
</view>
|
||
</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.totalAmount }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">优惠金额</text>
|
||
<text class="value discount">-¥{{ order.discountAmount }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="label">实付金额</text>
|
||
<text class="value actual">¥{{ order.actualAmount }}</text>
|
||
</view>
|
||
<view class="info-row" v-if="order.paymentMethod">
|
||
<text class="label">支付方式</text>
|
||
<text class="value">{{ getPaymentMethod(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>
|
||
|
||
<!-- 操作信息 -->
|
||
<view class="section" v-if="order.operatorName">
|
||
<view class="section-title">操作信息</view>
|
||
<view class="section-content">
|
||
<view class="info-row">
|
||
<text class="label">操作员</text>
|
||
<text class="value">{{ order.operatorName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="bottom-bar">
|
||
<button class="share-btn" v-if="order.status !== 2" @click="shareOrder">
|
||
分享订单
|
||
</button>
|
||
<button class="print-btn" v-if="order.status !== 2" @click="printOrder">
|
||
打印订单
|
||
</button>
|
||
<button
|
||
class="action-btn"
|
||
v-if="order.status === 0"
|
||
@click="confirmOrder"
|
||
>
|
||
确认完成
|
||
</button>
|
||
<button
|
||
class="action-btn cancel"
|
||
v-if="order.status === 0"
|
||
@click="cancelOrder"
|
||
>
|
||
取消订单
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import orderApi from '@/api/order'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderId: '',
|
||
order: null,
|
||
orderItems: []
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.orderId) {
|
||
this.orderId = options.orderId
|
||
this.loadOrderDetail()
|
||
}
|
||
},
|
||
methods: {
|
||
async loadOrderDetail() {
|
||
try {
|
||
const res = await orderApi.getOrderDetail(this.orderId)
|
||
this.order = res.order
|
||
this.orderItems = res.items || []
|
||
} catch (e) {
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
}
|
||
},
|
||
getStatusClass(status) {
|
||
const map = {
|
||
1: 'status-success',
|
||
2: 'status-cancel',
|
||
3: 'status-refunding',
|
||
4: 'status-refunded',
|
||
9: 'status-returning'
|
||
}
|
||
return map[status] || ''
|
||
},
|
||
getStatusText(status) {
|
||
const map = {
|
||
0: '未完成',
|
||
1: '已完成',
|
||
2: '已取消',
|
||
3: '退款中',
|
||
4: '已退款',
|
||
9: '退货中'
|
||
}
|
||
return map[status] || '未知'
|
||
},
|
||
formatTime(time) {
|
||
if (!time) return ''
|
||
return time.substring(0, 16).replace('T', ' ')
|
||
},
|
||
calcArea(item) {
|
||
if (item.length && item.width && item.quantity) {
|
||
return (item.length * item.width * item.quantity / 1000000).toFixed(4)
|
||
}
|
||
return '-'
|
||
},
|
||
getPaymentMethod(method) {
|
||
const map = {
|
||
'cash': '现金',
|
||
'wechat': '微信',
|
||
'alipay': '支付宝'
|
||
}
|
||
return map[method] || method
|
||
},
|
||
async confirmOrder() {
|
||
uni.showModal({
|
||
title: '确认订单',
|
||
content: '确认完成后订单将变为已完成状态',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await orderApi.updateOrderStatus(this.orderId, 1)
|
||
uni.showToast({ title: '已确认', icon: 'success' })
|
||
this.loadOrderDetail()
|
||
} catch (e) {
|
||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
async cancelOrder() {
|
||
uni.showModal({
|
||
title: '取消订单',
|
||
content: '确定要取消此订单吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await orderApi.updateOrderStatus(this.orderId, 2)
|
||
uni.showToast({ title: '已取消', icon: 'success' })
|
||
this.loadOrderDetail()
|
||
} catch (e) {
|
||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
printOrder() {
|
||
uni.showToast({ title: '打印功能开发中', icon: 'none' })
|
||
},
|
||
shareOrder() {
|
||
// 构建分享链接（包含订单号和客户ID）
|
||
const h5BaseUrl = import.meta.env.VITE_H5_BASE_URL
|
||
const customerId = this.order.customerId || ''
|
||
const shareUrl = `${h5BaseUrl}/#/pages/share/order?orderNo=${this.order.orderNo}&customerId=${customerId}`
|
||
|
||
// 复制链接到剪贴板
|
||
uni.setClipboardData({
|
||
data: shareUrl,
|
||
success: () => {
|
||
uni.showModal({
|
||
title: '分享链接已复制',
|
||
content: '订单分享链接已复制，可粘贴发送给客户',
|
||
showCancel: false,
|
||
confirmText: '知道了'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #f8f9fa;
|
||
padding-bottom: 180rpx;
|
||
}
|
||
|
||
.order-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 30rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.header-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.header-row .label {
|
||
font-size: 26rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.header-row .value {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.status {
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.status-success {
|
||
background: #52c41a;
|
||
color: #fff;
|
||
}
|
||
|
||
.status-cancel {
|
||
background: #ff4d4f;
|
||
color: #fff;
|
||
}
|
||
|
||
.status-returning {
|
||
background: #fa8c16;
|
||
color: #fff;
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
margin: 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: 10rpx 30rpx;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 16rpx 0;
|
||
border-bottom: 1rpx solid #f8f8f8;
|
||
}
|
||
|
||
.info-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-row .label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.info-row .value {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.info-row .value.discount {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.info-row .value.actual {
|
||
color: #ff4d4f;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.items-list {
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.item-row {
|
||
display: flex;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f8f8f8;
|
||
font-size: 24rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.item-row.header {
|
||
font-weight: bold;
|
||
color: #666;
|
||
background: #f8f9fa;
|
||
padding: 16rpx 0;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 3;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.item-name-text {
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.item-spec-text {
|
||
color: #999;
|
||
}
|
||
|
||
.item-dims-text {
|
||
color: #666;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.item-area {
|
||
flex: 1.5;
|
||
text-align: center;
|
||
color: #667eea;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.item-qty {
|
||
flex: 0.8;
|
||
text-align: center;
|
||
}
|
||
|
||
.item-price {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
|
||
.item-subtotal {
|
||
flex: 1;
|
||
text-align: right;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
padding: 20rpx 30rpx;
|
||
background: #fff;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.print-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: #fff;
|
||
color: #667eea;
|
||
border: 2rpx solid #667eea;
|
||
border-radius: 44rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.share-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 44rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 44rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.action-btn.cancel {
|
||
background: #fff;
|
||
color: #ff4d4f;
|
||
border: 2rpx solid #ff4d4f;
|
||
}
|
||
</style> |