sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 订单分享链接，公开页面查看订单
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-03-29 07:10:17 +00:00
parent eb2b16f84f
commit 7c25420c30
3 changed files with 324 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
src/pages/share/order.vue Normal file
View File

@@ -0,0 +1,310 @@
<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>