Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 kk
|
2e84a00f6e | ||
|
kk
|
8b5d68592b | ||
|
kk
|
42c2b8de07 |
@@ -110,9 +110,16 @@ jobs:
|
||||
- name: Upload dist to server
|
||||
run: |
|
||||
TARGET="${{ steps.detect.outputs.target }}"
|
||||
ENV_NAME="${{ steps.detect.outputs.env }}"
|
||||
# 请根据你的实际构建输出路径调整
|
||||
H5_SOURCE_DIR="dist/build/h5"
|
||||
WEB_ROOT="${{ vars.PROJECT_DIR }}"
|
||||
|
||||
# 根据发布类型选择项目路径
|
||||
if [ "$ENV_NAME" = "staging" ]; then
|
||||
WEB_ROOT="${{ vars.STG_PROJECT_DIR }}"
|
||||
else
|
||||
WEB_ROOT="${{ vars.PROJECT_DIR }}"
|
||||
fi
|
||||
|
||||
echo "部署到: $TARGET"
|
||||
echo "源目录: $H5_SOURCE_DIR"
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
<view class="icon-door-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="door-state-title">柜门已打开</text>
|
||||
<text class="door-state-desc">请取走商品后随手关门</text>
|
||||
<text class="door-state-title">门锁已打开</text>
|
||||
<text class="door-state-desc">请先拉开柜门，取走商品后随手关门</text>
|
||||
<view class="door-state-divider"></view>
|
||||
<view class="door-steps">
|
||||
<view class="step-item">
|
||||
@@ -193,6 +193,7 @@ export default {
|
||||
const maxRetries = 30;
|
||||
const interval = 2000;
|
||||
let remaining = maxRetries;
|
||||
let lastStep = '';
|
||||
|
||||
while (remaining > 0) {
|
||||
if (this.step === 'complete' || this.cancelled) return;
|
||||
@@ -206,18 +207,24 @@ export default {
|
||||
const ret = res.data || {};
|
||||
if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
|
||||
const latestStatus = ret.data[0].status;
|
||||
let newStep = '';
|
||||
|
||||
if (latestStatus === 101) {
|
||||
remaining = maxRetries;
|
||||
this.step = 'opened';
|
||||
newStep = 'opened';
|
||||
} else if (latestStatus === 103) {
|
||||
remaining = maxRetries;
|
||||
this.step = 'closed';
|
||||
newStep = 'closed';
|
||||
} else if (latestStatus === 201) {
|
||||
this.step = 'complete';
|
||||
this.fetchOrder(flowId);
|
||||
return;
|
||||
}
|
||||
|
||||
// 状态真正变化时才重置计数器
|
||||
if (newStep && newStep !== lastStep) {
|
||||
this.step = newStep;
|
||||
lastStep = newStep;
|
||||
remaining = maxRetries;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[door-panel] 轮询失败:', e);
|
||||
@@ -227,9 +234,11 @@ export default {
|
||||
await new Promise(resolve => setTimeout(resolve, interval));
|
||||
}
|
||||
|
||||
// 超时
|
||||
this.step = '';
|
||||
uni.showToast({ title: '开门超时，请重试', icon: 'none' });
|
||||
// 轮询结束
|
||||
if (this.step === 'opening') {
|
||||
this.step = '';
|
||||
uni.showToast({ title: '开门超时，请重试', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// 查询订单信息
|
||||
@@ -344,7 +353,7 @@ export default {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(160deg, #0a1628 0%, #132743 40%, #1a3a5c 100%);
|
||||
background: #fff;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -371,20 +380,22 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 48rpx;
|
||||
/* 动效环 scale(1.6) 会超出容器，预留空间避免被裁剪 */
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.door-state-ring {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(41, 121, 255, 0.4);
|
||||
border: 4rpx solid rgba(41, 121, 255, 0.3);
|
||||
animation: ring-pulse 2s ease-out infinite;
|
||||
}
|
||||
.warning-ring {
|
||||
border-color: rgba(250, 173, 20, 0.4);
|
||||
border-color: rgba(250, 173, 20, 0.3);
|
||||
}
|
||||
.success-ring {
|
||||
border-color: rgba(82, 196, 26, 0.4);
|
||||
border-color: rgba(82, 196, 26, 0.3);
|
||||
}
|
||||
@keyframes ring-pulse {
|
||||
0% { transform: scale(0.8); opacity: 1; }
|
||||
@@ -404,7 +415,7 @@ export default {
|
||||
.icon-door-left {
|
||||
width: 28rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(41, 121, 255, 0.9);
|
||||
background: #2979ff;
|
||||
border-radius: 6rpx;
|
||||
transform: perspective(200rpx) rotateY(25deg);
|
||||
animation: door-left-open 0.8s ease-out forwards;
|
||||
@@ -412,7 +423,7 @@ export default {
|
||||
.icon-door-right {
|
||||
width: 28rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(41, 121, 255, 0.9);
|
||||
background: #2979ff;
|
||||
border-radius: 6rpx;
|
||||
transform: perspective(200rpx) rotateY(-25deg);
|
||||
animation: door-right-open 0.8s ease-out forwards;
|
||||
@@ -435,7 +446,7 @@ export default {
|
||||
.lock-body {
|
||||
width: 48rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(250, 173, 20, 0.9);
|
||||
background: #faad14;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -443,7 +454,7 @@ export default {
|
||||
.lock-hole {
|
||||
width: 28rpx;
|
||||
height: 24rpx;
|
||||
border: 5rpx solid rgba(250, 173, 20, 0.9);
|
||||
border: 5rpx solid #faad14;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
@@ -456,8 +467,8 @@ export default {
|
||||
.icon-check {
|
||||
width: 40rpx;
|
||||
height: 24rpx;
|
||||
border-left: 5rpx solid #fff;
|
||||
border-bottom: 5rpx solid #fff;
|
||||
border-left: 5rpx solid #52c41a;
|
||||
border-bottom: 5rpx solid #52c41a;
|
||||
transform: rotate(-45deg);
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
@@ -466,13 +477,13 @@ export default {
|
||||
.door-state-title {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.door-state-desc {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: #999;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
@@ -480,7 +491,7 @@ export default {
|
||||
.door-state-divider {
|
||||
width: 80rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(90deg, transparent, rgba(41, 121, 255, 0.6), transparent);
|
||||
background: linear-gradient(90deg, transparent, #2979ff, transparent);
|
||||
border-radius: 2rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
@@ -500,46 +511,45 @@ export default {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.15);
|
||||
background: #f5f5f5;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
color: #999;
|
||||
}
|
||||
.step-dot.active {
|
||||
background: rgba(41, 121, 255, 0.2);
|
||||
background: rgba(41, 121, 255, 0.1);
|
||||
border-color: #2979ff;
|
||||
color: #2979ff;
|
||||
box-shadow: 0 0 16rpx rgba(41, 121, 255, 0.3);
|
||||
}
|
||||
.step-dot.done {
|
||||
background: rgba(41, 121, 255, 0.15);
|
||||
border-color: rgba(41, 121, 255, 0.5);
|
||||
color: rgba(41, 121, 255, 0.8);
|
||||
background: rgba(41, 121, 255, 0.1);
|
||||
border-color: #2979ff;
|
||||
color: #2979ff;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.step-text {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.step-line {
|
||||
width: 60rpx;
|
||||
height: 2rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: #e0e0e0;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.step-line.done {
|
||||
background: rgba(41, 121, 255, 0.4);
|
||||
background: #2979ff;
|
||||
}
|
||||
|
||||
/* ====== 订单卡片 ====== */
|
||||
.door-order-card {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.08);
|
||||
background: #f8f8f8;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
margin-top: 16rpx;
|
||||
@@ -555,13 +565,13 @@ export default {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
.door-product-item + .door-product-item {
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.06);
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.door-product-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.door-product-info {
|
||||
@@ -573,14 +583,14 @@ export default {
|
||||
}
|
||||
.door-product-name {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.door-product-price {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: #999;
|
||||
}
|
||||
.door-order-row {
|
||||
display: flex;
|
||||
@@ -589,29 +599,29 @@ export default {
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.door-order-row + .door-order-row {
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.06);
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.door-order-row.total {
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1rpx solid #e0e0e0;
|
||||
margin-top: 8rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.door-order-label {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: #999;
|
||||
}
|
||||
.door-order-value {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: #333;
|
||||
}
|
||||
.door-price {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #ff6b6b;
|
||||
color: #e4393c;
|
||||
}
|
||||
.door-order-loading {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: #999;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
@@ -633,16 +643,15 @@ export default {
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
border-radius: 48rpx;
|
||||
letter-spacing: 2rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.35);
|
||||
}
|
||||
|
||||
/* ====== 关闭按钮 ====== */
|
||||
.door-btn-close {
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: #2979ff;
|
||||
padding: 24rpx 100rpx;
|
||||
background: rgba(41, 121, 255, 0.15);
|
||||
border: 1rpx solid rgba(41, 121, 255, 0.4);
|
||||
background: #fff;
|
||||
border: 2rpx solid #2979ff;
|
||||
border-radius: 48rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
@@ -47,24 +47,6 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/door/opened",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/door/closed",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/door/complete",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<view class="door-page">
|
||||
<!-- 顶部状态区域 -->
|
||||
<view class="status-section">
|
||||
<view class="status-icon closed">
|
||||
<view class="icon-lock">
|
||||
<view class="lock-body"></view>
|
||||
<view class="lock-hole"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="status-title">柜门已关闭</text>
|
||||
<text class="status-desc">订单处理中，请稍候...</text>
|
||||
</view>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">设备编号</text>
|
||||
<text class="info-value">{{ deviceId }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="flowId">
|
||||
<text class="info-label">流水号</text>
|
||||
<text class="info-value">{{ flowId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tips-card">
|
||||
<view class="tips-title">温馨提示</view>
|
||||
<view class="tips-list">
|
||||
<text class="tips-item">• 系统正在处理您的订单</text>
|
||||
<text class="tips-item">• 请在"我的订单"中查看订单状态</text>
|
||||
<text class="tips-item">• 如有问题请联系客服</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="btn-outline" @click="handleViewOrder">查看订单</view>
|
||||
<view class="btn-primary" @click="handleBack">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceId: '',
|
||||
flowId: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.deviceId = options.device_id || '';
|
||||
this.flowId = options.flow_id || '';
|
||||
},
|
||||
methods: {
|
||||
handleViewOrder() {
|
||||
uni.navigateTo({ url: '/pages/order/order' });
|
||||
},
|
||||
handleBack() {
|
||||
uni.navigateBack({ delta: 10 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.door-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 状态区域 */
|
||||
.status-section {
|
||||
background: linear-gradient(135deg, #faad14, #d48806);
|
||||
padding: 80rpx 40rpx 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
position: relative;
|
||||
width: 48rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
.lock-body {
|
||||
width: 48rpx;
|
||||
height: 36rpx;
|
||||
background: #fff;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.lock-hole {
|
||||
width: 28rpx;
|
||||
height: 24rpx;
|
||||
border: 5rpx solid #fff;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background: #fff;
|
||||
margin: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 提示卡片 */
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
margin: 0 30rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-actions {
|
||||
margin-top: auto;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
color: #2979ff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 28rpx;
|
||||
border-radius: 48rpx;
|
||||
border: 2rpx solid #2979ff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 28rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,305 +0,0 @@
|
||||
<template>
|
||||
<view class="door-page">
|
||||
<!-- 顶部状态区域 -->
|
||||
<view class="status-section">
|
||||
<view class="status-icon success">
|
||||
<view class="icon-check"></view>
|
||||
</view>
|
||||
<text class="status-title">订单已完成</text>
|
||||
<text class="status-desc">感谢您的购买</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-card">
|
||||
<view class="card-title">订单信息</view>
|
||||
<view v-if="orderLoading" class="loading-tip">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="orderInfo">
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单编号</text>
|
||||
<text class="info-value">{{ orderInfo.order_no }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">下单时间</text>
|
||||
<text class="info-value">{{ orderInfo.created_at }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">商品数量</text>
|
||||
<text class="info-value">{{ orderInfo.product_count || '-' }} 件</text>
|
||||
</view>
|
||||
<view class="info-row total">
|
||||
<text class="info-label">订单金额</text>
|
||||
<text class="info-value price">¥{{ orderInfo.total_amount || '0.00' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-tip">
|
||||
<text>暂无订单信息</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品明细 -->
|
||||
<view v-if="orderInfo && orderInfo.items && orderInfo.items.length" class="products-card">
|
||||
<view class="card-title">商品明细</view>
|
||||
<view class="product-item" v-for="(item, idx) in orderInfo.items" :key="idx">
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ item.name }}</text>
|
||||
<text class="product-spec">{{ item.spec || '' }}</text>
|
||||
</view>
|
||||
<view class="product-right">
|
||||
<text class="product-price">¥{{ item.price }}</text>
|
||||
<text class="product-qty">x{{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="btn-outline" @click="handleViewOrder">查看全部订单</view>
|
||||
<view class="btn-primary" @click="handleBack">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get } from '@/utils/request.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceId: '',
|
||||
flowId: '',
|
||||
orderInfo: null,
|
||||
orderLoading: false
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.deviceId = options.device_id || '';
|
||||
this.flowId = options.flow_id || '';
|
||||
this.fetchOrderInfo();
|
||||
},
|
||||
methods: {
|
||||
async fetchOrderInfo() {
|
||||
if (!this.flowId) return;
|
||||
|
||||
this.orderLoading = true;
|
||||
try {
|
||||
// 通过 flow_id 查询订单信息
|
||||
const res = await get('/order/getByFlowId', {
|
||||
flow_id: this.flowId
|
||||
});
|
||||
|
||||
const ret = res.data || {};
|
||||
if (ret.code === 0 && ret.data) {
|
||||
this.orderInfo = ret.data;
|
||||
} else {
|
||||
console.warn('[complete] 获取订单信息失败:', ret.message);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[complete] 获取订单信息异常:', e);
|
||||
} finally {
|
||||
this.orderLoading = false;
|
||||
}
|
||||
},
|
||||
handleViewOrder() {
|
||||
uni.navigateTo({ url: '/pages/order/order' });
|
||||
},
|
||||
handleBack() {
|
||||
uni.navigateBack({ delta: 10 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.door-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 状态区域 */
|
||||
.status-section {
|
||||
background: linear-gradient(135deg, #52c41a, #389e0d);
|
||||
padding: 80rpx 40rpx 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.status-icon.success .icon-check {
|
||||
width: 50rpx;
|
||||
height: 28rpx;
|
||||
border-left: 6rpx solid #fff;
|
||||
border-bottom: 6rpx solid #fff;
|
||||
transform: rotate(-45deg);
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* 通用卡片 */
|
||||
.order-card,
|
||||
.products-card {
|
||||
background: #fff;
|
||||
margin: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 订单信息行 */
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-row.total {
|
||||
padding-top: 24rpx;
|
||||
margin-top: 12rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-value.price {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #e4393c;
|
||||
}
|
||||
|
||||
/* 商品明细 */
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.product-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-spec {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.product-qty {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 加载/空状态 */
|
||||
.loading-tip,
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-actions {
|
||||
margin-top: auto;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
color: #2979ff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 28rpx;
|
||||
border-radius: 48rpx;
|
||||
border: 2rpx solid #2979ff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 28rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,189 +0,0 @@
|
||||
<template>
|
||||
<view class="door-page">
|
||||
<!-- 顶部状态区域 -->
|
||||
<view class="status-section">
|
||||
<view class="status-icon success">
|
||||
<view class="icon-check"></view>
|
||||
</view>
|
||||
<text class="status-title">柜门已打开</text>
|
||||
<text class="status-desc">请取走商品后关闭柜门</text>
|
||||
</view>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">设备编号</text>
|
||||
<text class="info-value">{{ deviceId }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="flowId">
|
||||
<text class="info-label">流水号</text>
|
||||
<text class="info-value">{{ flowId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tips-card">
|
||||
<view class="tips-title">温馨提示</view>
|
||||
<view class="tips-list">
|
||||
<text class="tips-item">• 取走商品后请随手关门</text>
|
||||
<text class="tips-item">• 关门后系统将自动完成订单</text>
|
||||
<text class="tips-item">• 如有问题请联系客服</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="btn-primary" @click="handleBack">返回首页</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceId: '',
|
||||
flowId: ''
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.deviceId = options.device_id || '';
|
||||
this.flowId = options.flow_id || '';
|
||||
},
|
||||
methods: {
|
||||
handleBack() {
|
||||
uni.navigateBack({ delta: 10 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.door-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 状态区域 */
|
||||
.status-section {
|
||||
background: linear-gradient(135deg, #52c41a, #389e0d);
|
||||
padding: 80rpx 40rpx 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.status-icon.success .icon-check {
|
||||
width: 50rpx;
|
||||
height: 28rpx;
|
||||
border-left: 6rpx solid #fff;
|
||||
border-bottom: 6rpx solid #fff;
|
||||
transform: rotate(-45deg);
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background: #fff;
|
||||
margin: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 提示卡片 */
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
margin: 0 30rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-actions {
|
||||
margin-top: auto;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 28rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user