支持开关门状态显示/订单数据渲染

2026-07-11 16:14:36 +08:00
parent 9ecd6d963b
commit a9ec1092d5
10 changed files with 2078 additions and 157 deletions
@@ -0,0 +1,189 @@
+<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>