From a9ec1092d5adb9b25f1cd15860b0b4512c1ef001 Mon Sep 17 00:00:00 2001
From: kk <875203880@qq.com>
Date: Sat, 11 Jul 2026 16:14:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=BC=80=E5=85=B3=E9=97=A8?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA/=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/door-panel/door-panel.vue | 548 +++++++++++++++++++++++
 src/config/dev.js                        |   2 +-
 src/pages.json                           |  24 +
 src/pages/auth/loading.vue               |  38 +-
 src/pages/door/closed.vue                | 229 ++++++++++
 src/pages/door/complete.vue              | 305 +++++++++++++
 src/pages/door/opened.vue                | 189 ++++++++
 src/pages/index/index.vue                |  58 ++-
 src/pages/order/detail.vue               | 463 +++++++++++++++++++
 src/pages/order/order.vue                | 379 ++++++++++------
 10 files changed, 2078 insertions(+), 157 deletions(-)
 create mode 100644 src/components/door-panel/door-panel.vue
 create mode 100644 src/pages/door/closed.vue
 create mode 100644 src/pages/door/complete.vue
 create mode 100644 src/pages/door/opened.vue
 create mode 100644 src/pages/order/detail.vue

diff --git a/src/components/door-panel/door-panel.vue b/src/components/door-panel/door-panel.vue
new file mode 100644
index 0000000..43a7078
--- /dev/null
+++ b/src/components/door-panel/door-panel.vue
@@ -0,0 +1,548 @@
+<template>
+  <view v-if="step" class="door-overlay">
+
+    <!-- 开门中 -->
+    <view v-if="step === 'opening'" class="door-overlay-content">
+      <view class="door-spinner">
+        <view class="spinner-dot" v-for="i in 3" :key="i"></view>
+      </view>
+      <text class="door-overlay-text">开门中...</text>
+      <text class="door-overlay-tip">请稍候，正在为您打开柜门</text>
+    </view>
+
+    <!-- 已开门 -->
+    <view v-if="step === 'opened'" class="door-state-bg">
+      <view class="door-state-content">
+        <view class="door-state-icon-wrap">
+          <view class="door-state-ring"></view>
+          <view class="door-state-icon">
+            <view class="icon-door-left"></view>
+            <view class="icon-door-right"></view>
+          </view>
+        </view>
+        <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">
+            <view class="step-dot active">1</view>
+            <text class="step-text">取走商品</text>
+          </view>
+          <view class="step-line"></view>
+          <view class="step-item">
+            <view class="step-dot">2</view>
+            <text class="step-text">关闭柜门</text>
+          </view>
+          <view class="step-line"></view>
+          <view class="step-item">
+            <view class="step-dot">3</view>
+            <text class="step-text">完成订单</text>
+          </view>
+        </view>
+        <view class="door-btn-close" @click="handleClose">返回首页</view>
+      </view>
+    </view>
+
+    <!-- 已关门 -->
+    <view v-if="step === 'closed'" class="door-state-bg">
+      <view class="door-state-content">
+        <view class="door-state-icon-wrap">
+          <view class="door-state-ring warning-ring"></view>
+          <view class="door-state-icon">
+            <view class="icon-lock">
+              <view class="lock-body"></view>
+              <view class="lock-hole"></view>
+            </view>
+          </view>
+        </view>
+        <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">
+            <view class="step-dot done">✓</view>
+            <text class="step-text">取走商品</text>
+          </view>
+          <view class="step-line done"></view>
+          <view class="step-item">
+            <view class="step-dot active">2</view>
+            <text class="step-text">已关柜门</text>
+          </view>
+          <view class="step-line"></view>
+          <view class="step-item">
+            <view class="step-dot">3</view>
+            <text class="step-text">完成订单</text>
+          </view>
+        </view>
+        <view class="door-btn-close" @click="handleClose">返回首页</view>
+      </view>
+    </view>
+
+    <!-- 订单完成 -->
+    <view v-if="step === 'complete'" class="door-state-bg">
+      <view class="door-state-content door-complete-content">
+        <view class="door-state-icon-wrap">
+          <view class="door-state-ring success-ring"></view>
+          <view class="door-state-icon">
+            <view class="icon-check"></view>
+          </view>
+        </view>
+        <text class="door-state-title">订单已完成</text>
+        <text class="door-state-desc">感谢您的购买</text>
+
+        <!-- 订单信息 -->
+        <view class="door-order-card" v-if="orderInfo">
+          <view class="door-order-row">
+            <text class="door-order-label">订单编号</text>
+            <text class="door-order-value">{{ orderInfo.order_no }}</text>
+          </view>
+          <view class="door-order-row">
+            <text class="door-order-label">商品数量</text>
+            <text class="door-order-value">{{ orderInfo.product_count || '-' }} 件</text>
+          </view>
+          <view class="door-order-row total">
+            <text class="door-order-label">订单金额</text>
+            <text class="door-order-value door-price">¥{{ orderInfo.total_amount || '0.00' }}</text>
+          </view>
+        </view>
+        <view class="door-order-card" v-else-if="orderLoading">
+          <text class="door-order-loading">加载订单信息...</text>
+        </view>
+
+        <view class="door-btn-close" @click="handleClose">返回首页</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { get, post } from '@/utils/request.js';
+
+export default {
+  props: {
+    deviceId: { type: String, default: '' },
+    userId: { type: String, default: '' }
+  },
+  data() {
+    return {
+      step: '', // '' | 'opening' | 'opened' | 'closed' | 'complete'
+      flowId: '',
+      orderInfo: null,
+      orderLoading: false,
+      cancelled: false
+    };
+  },
+  beforeDestroy() {
+    this.cancelled = true;
+  },
+  methods: {
+    // 外部调用：启动开门流程
+    async open() {
+      if (this.step) return;
+
+      this.cancelled = false;
+      this.step = 'opening';
+
+      try {
+        const res = await post('/device-scan/open', {
+          device_id: this.deviceId,
+          door_index: 0,
+          user_id: this.userId
+        });
+
+        const ret = res.data || {};
+        if (ret.code !== 0) {
+          this.step = '';
+          uni.showToast({ title: ret.message || '开门失败', icon: 'none' });
+          return;
+        }
+
+        const flowId = ret.data && ret.data.flow_id;
+        if (!flowId) {
+          this.step = '';
+          uni.showToast({ title: '未获取到开门流水号', icon: 'none' });
+          return;
+        }
+
+        this.flowId = flowId;
+        this.pollStatus(flowId);
+      } catch (e) {
+        this.step = '';
+        uni.showToast({ title: '网络请求失败', icon: 'none' });
+      }
+    },
+
+    // 轮询状态
+    async pollStatus(flowId) {
+      const maxRetries = 30;
+      const interval = 2000;
+      let remaining = maxRetries;
+
+      while (remaining > 0) {
+        if (this.step === 'complete' || this.cancelled) return;
+
+        try {
+          const res = await get('/flow/getStatusLog', {
+            flow_id: flowId,
+            status: '101,103,201'
+          });
+
+          const ret = res.data || {};
+          if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
+            const latestStatus = ret.data[0].status;
+
+            if (latestStatus === 101) {
+              remaining = maxRetries;
+              this.step = 'opened';
+            } else if (latestStatus === 103) {
+              remaining = maxRetries;
+              this.step = 'closed';
+            } else if (latestStatus === 201) {
+              this.step = 'complete';
+              this.fetchOrder(flowId);
+              return;
+            }
+          }
+        } catch (e) {
+          console.error('[door-panel] 轮询失败:', e);
+        }
+
+        remaining--;
+        await new Promise(resolve => setTimeout(resolve, interval));
+      }
+
+      // 超时
+      this.step = '';
+      uni.showToast({ title: '开门超时，请重试', icon: 'none' });
+    },
+
+    // 查询订单信息
+    async fetchOrder(flowId) {
+      this.orderLoading = true;
+      try {
+        const res = await get('/order/getByFlowId', { flow_id: flowId });
+        const ret = res.data || {};
+        if (ret.code === 0 && ret.data) {
+          this.orderInfo = ret.data;
+        }
+      } catch (e) {
+        console.error('[door-panel] 获取订单信息失败:', e);
+      } finally {
+        this.orderLoading = false;
+      }
+    },
+
+    // 关闭遮罩
+    handleClose() {
+      this.step = '';
+      this.flowId = '';
+      this.orderInfo = null;
+      this.orderLoading = false;
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* ====== 开门中遮罩 ====== */
+.door-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.door-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60rpx;
+}
+.door-spinner {
+  display: flex;
+  gap: 16rpx;
+  margin-bottom: 40rpx;
+}
+.spinner-dot {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background: #fff;
+  animation: spinner-bounce 1.2s ease-in-out infinite;
+}
+.spinner-dot:nth-child(2) { animation-delay: 0.2s; }
+.spinner-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes spinner-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30% { transform: translateY(-20rpx); opacity: 1; }
+}
+.door-overlay-text {
+  font-size: 36rpx;
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+}
+.door-overlay-tip {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* ====== 通用状态页背景 ====== */
+.door-state-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(160deg, #0a1628 0%, #132743 40%, #1a3a5c 100%);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.door-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 60rpx;
+  width: 100%;
+}
+.door-complete-content {
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+/* ====== 图标区域 ====== */
+.door-state-icon-wrap {
+  position: relative;
+  width: 180rpx;
+  height: 180rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 48rpx;
+}
+.door-state-ring {
+  position: absolute;
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+  border: 4rpx solid rgba(41, 121, 255, 0.4);
+  animation: ring-pulse 2s ease-out infinite;
+}
+.warning-ring {
+  border-color: rgba(250, 173, 20, 0.4);
+}
+.success-ring {
+  border-color: rgba(82, 196, 26, 0.4);
+}
+@keyframes ring-pulse {
+  0% { transform: scale(0.8); opacity: 1; }
+  100% { transform: scale(1.6); opacity: 0; }
+}
+
+.door-state-icon {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+/* 柜门图标（已开门） */
+.icon-door-left {
+  width: 28rpx;
+  height: 56rpx;
+  background: rgba(41, 121, 255, 0.9);
+  border-radius: 6rpx;
+  transform: perspective(200rpx) rotateY(25deg);
+  animation: door-left-open 0.8s ease-out forwards;
+}
+.icon-door-right {
+  width: 28rpx;
+  height: 56rpx;
+  background: rgba(41, 121, 255, 0.9);
+  border-radius: 6rpx;
+  transform: perspective(200rpx) rotateY(-25deg);
+  animation: door-right-open 0.8s ease-out forwards;
+}
+@keyframes door-left-open {
+  0% { transform: perspective(200rpx) rotateY(0deg); }
+  100% { transform: perspective(200rpx) rotateY(35deg); }
+}
+@keyframes door-right-open {
+  0% { transform: perspective(200rpx) rotateY(0deg); }
+  100% { transform: perspective(200rpx) rotateY(-35deg); }
+}
+
+/* 锁图标（已关门） */
+.icon-lock {
+  position: relative;
+  width: 48rpx;
+  height: 56rpx;
+}
+.lock-body {
+  width: 48rpx;
+  height: 36rpx;
+  background: rgba(250, 173, 20, 0.9);
+  border-radius: 6rpx;
+  position: absolute;
+  bottom: 0;
+}
+.lock-hole {
+  width: 28rpx;
+  height: 24rpx;
+  border: 5rpx solid rgba(250, 173, 20, 0.9);
+  border-radius: 14rpx 14rpx 0 0;
+  border-bottom: none;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* 勾图标（订单完成） */
+.icon-check {
+  width: 40rpx;
+  height: 24rpx;
+  border-left: 5rpx solid #fff;
+  border-bottom: 5rpx solid #fff;
+  transform: rotate(-45deg);
+  margin-top: -8rpx;
+}
+
+/* ====== 标题 ====== */
+.door-state-title {
+  font-size: 44rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 16rpx;
+  letter-spacing: 4rpx;
+}
+.door-state-desc {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 48rpx;
+}
+
+/* ====== 分割线 ====== */
+.door-state-divider {
+  width: 80rpx;
+  height: 4rpx;
+  background: linear-gradient(90deg, transparent, rgba(41, 121, 255, 0.6), transparent);
+  border-radius: 2rpx;
+  margin-bottom: 48rpx;
+}
+
+/* ====== 步骤条 ====== */
+.door-steps {
+  display: flex;
+  align-items: center;
+}
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+}
+.step-dot {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  border: 2rpx solid rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.35);
+}
+.step-dot.active {
+  background: rgba(41, 121, 255, 0.2);
+  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);
+  font-size: 20rpx;
+}
+.step-text {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.45);
+  white-space: nowrap;
+}
+.step-line {
+  width: 60rpx;
+  height: 2rpx;
+  background: rgba(255, 255, 255, 0.1);
+  margin-bottom: 36rpx;
+}
+.step-line.done {
+  background: rgba(41, 121, 255, 0.4);
+}
+
+/* ====== 订单卡片 ====== */
+.door-order-card {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1rpx solid rgba(255, 255, 255, 0.08);
+  border-radius: 20rpx;
+  padding: 24rpx 30rpx;
+  margin-top: 16rpx;
+}
+.door-order-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+}
+.door-order-row + .door-order-row {
+  border-top: 1rpx solid rgba(255, 255, 255, 0.06);
+}
+.door-order-row.total {
+  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+  margin-top: 8rpx;
+  padding-top: 20rpx;
+}
+.door-order-label {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.5);
+}
+.door-order-value {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.9);
+}
+.door-price {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #ff6b6b;
+}
+.door-order-loading {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: center;
+  padding: 16rpx 0;
+}
+
+/* ====== 关闭按钮 ====== */
+.door-btn-close {
+  margin-top: 48rpx;
+  font-size: 30rpx;
+  color: rgba(255, 255, 255, 0.85);
+  padding: 24rpx 100rpx;
+  background: rgba(41, 121, 255, 0.15);
+  border: 1rpx solid rgba(41, 121, 255, 0.4);
+  border-radius: 48rpx;
+  letter-spacing: 2rpx;
+}
+</style>
diff --git a/src/config/dev.js b/src/config/dev.js
index 14ff15b..d403172 100644
--- a/src/config/dev.js
+++ b/src/config/dev.js
@@ -27,7 +27,7 @@ const dev = {
   mockUser: {
     token: 'mock_token_dev_2024',
     user_info: {
-      user_id: 'mock_user_001',
+      user_id: 'abc123456',
       phone: '13264706088',
       open_id: 'mock_openid_002',
       union_id: 'test_union_id',
diff --git a/src/pages.json b/src/pages.json
index 5f6c315..1c6e40d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -41,6 +41,30 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/order/detail",
+      "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": {
diff --git a/src/pages/auth/loading.vue b/src/pages/auth/loading.vue
index ba3d7b5..966b5da 100644
--- a/src/pages/auth/loading.vue
+++ b/src/pages/auth/loading.vue
@@ -190,6 +190,14 @@ export default {
           if (result.register) {
             // 已注册 → 存 token → 进入开门页
             uni.setStorageSync('token', result.token);
+            // 存储 user_info（接口返回的字段，后续 snsapi_userinfo 授权可补充）
+            const existing = uni.getStorageSync('user_info') || {};
+            uni.setStorageSync('user_info', {
+              user_id: result.user_id || existing.user_id || '',
+              phone: result.phone || existing.phone || '',
+              nickname: result.nickname || existing.nickname || '',
+              avatar: result.avatar || existing.avatar || '',
+            });
             this.goToHome();
           } else {
             // 未注册 → 存 temp_token → 跳注册页
@@ -303,11 +311,14 @@ export default {
 
         if (data.code === 0 && data.data) {
           const userInfo = data.data;
-          // 存入缓存
+          // 合并已有缓存（保留 user_id 等字段），覆盖头像昵称手机
+          const existing = uni.getStorageSync('user_info') || {};
           uni.setStorageSync('user_info', {
-            nickname: userInfo.nickname || '',
-            avatar: userInfo.avatar || '',
-            phone: userInfo.phone || '',
+            ...existing,
+            user_id: userInfo.user_id || existing.user_id || '',
+            nickname: userInfo.nickname || existing.nickname || '',
+            avatar: userInfo.avatar || existing.avatar || '',
+            phone: userInfo.phone || existing.phone || '',
           });
         } else {
           console.warn('[loading] 获取用户信息失败:', data.message);
@@ -369,13 +380,21 @@ export default {
     async mockLogin() {
       const mode = config.mockWechatLogin;
       const mock = config.mockUser;
-      const mockOpenid = mock.user_info.open_id;
+      const mockUserInfo = mock.user_info;
+      const mockOpenid = mockUserInfo.open_id;
 
       // 'skip' 模式直接登录，不调接口
       if (mode === 'skip') {
         this.statusText = '模拟登录中...';
         uni.setStorageSync('token', mock.token);
         uni.setStorageSync('openid', mockOpenid);
+        // 按生产结构存储 user_info
+        uni.setStorageSync('user_info', {
+          user_id: mockUserInfo.user_id,
+          phone: mockUserInfo.phone,
+          nickname: mockUserInfo.nickname,
+          avatar: mockUserInfo.avatar,
+        });
         console.log('[Auth] Mock skip → home');
         setTimeout(() => this.goToHome(), 500);
         return;
@@ -401,8 +420,15 @@ export default {
           uni.setStorageSync('openid', result.openid || mockOpenid);
 
           if (result.register) {
-            // 已注册 → 存 token → 跳首页
+            // 已注册 → 存 token + user_info → 跳首页
             uni.setStorageSync('token', result.token);
+            // 按生产结构存储 user_info（接口返回优先，mock 补充）
+            uni.setStorageSync('user_info', {
+              user_id: result.user_id || mockUserInfo.user_id,
+              phone: result.phone || mockUserInfo.phone,
+              nickname: result.nickname || mockUserInfo.nickname,
+              avatar: result.avatar || mockUserInfo.avatar,
+            });
             console.log('[Auth] Mock: existing user → home');
             this.goToHome();
           } else {
diff --git a/src/pages/door/closed.vue b/src/pages/door/closed.vue
new file mode 100644
index 0000000..579fbb9
--- /dev/null
+++ b/src/pages/door/closed.vue
@@ -0,0 +1,229 @@
+<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>
diff --git a/src/pages/door/complete.vue b/src/pages/door/complete.vue
new file mode 100644
index 0000000..a6ab630
--- /dev/null
+++ b/src/pages/door/complete.vue
@@ -0,0 +1,305 @@
+<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>
diff --git a/src/pages/door/opened.vue b/src/pages/door/opened.vue
new file mode 100644
index 0000000..b7b4792
--- /dev/null
+++ b/src/pages/door/opened.vue
@@ -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>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index bbdeb40..8352464 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -157,18 +157,22 @@
         </view>
       </view>
     </view>
+
+    <!-- 开门流程组件 -->
+    <door-panel ref="doorPanel" :device-id="deviceId" :user-id="userId" />
   </view>
 </template>
 
 <script>
 import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
+import DoorPanel from '@/components/door-panel/door-panel.vue';
 import config from '@/config/env.js';
 import { get, gatewayGet } from '@/utils/request.js';
 import { checkLoginWithPrompt, getCachedUserInfo, isLoggedIn } from '@/utils/auth-guard.js';
 import { isVConsoleEnabled, showVConsole, hideVConsole } from '@/utils/vconsole';
 
 export default {
-  components: { PageNavBar },
+  components: { PageNavBar, DoorPanel },
   data() {
     return {
       deviceId: '',
@@ -194,6 +198,10 @@ export default {
     };
   },
   computed: {
+    userId() {
+      const info = getCachedUserInfo();
+      return (info && info.user_id) || '';
+    },
     canGoBack() {
       // 有上一页，或者从 tab 切换过来的，都可以返回
       return getCurrentPages().length > 1 || this.fromPage === 'tab';
@@ -391,12 +399,47 @@ export default {
         this.loading = false;
       }
     },
-    handleOpenDoor() {
-      uni.showModal({
-        title: '开门',
-        content: '确认打开柜门？',
-        success: r => r.confirm && uni.showToast({ title: '柜门已打开', icon: 'success' })
-      });
+    async handleOpenDoor() {
+      // 检查登录状态
+      if (!isLoggedIn()) {
+        checkLoginWithPrompt('door');
+        return;
+      }
+
+      // 检查设备ID
+      if (!this.deviceId) {
+        uni.showToast({ title: '请先扫描设备二维码', icon: 'none' });
+        return;
+      }
+
+      // 检查用户信息，若缓存中没有则调接口获取
+      if (!this.userId) {
+        try {
+          const infoRes = await gatewayGet('/api/v1/user/info', {});
+          const infoData = (infoRes.data || {}).data || {};
+          if (infoData.user_id) {
+            const existing = getCachedUserInfo() || {};
+            uni.setStorageSync('user_info', {
+              ...existing,
+              user_id: infoData.user_id,
+              nickname: infoData.nickname || existing.nickname || '',
+              avatar: infoData.avatar || existing.avatar || '',
+              phone: infoData.phone || existing.phone || '',
+            });
+            this.loadUserInfo();
+          }
+        } catch (e) {
+          console.error('[handleOpenDoor] 获取用户信息失败:', e);
+        }
+      }
+
+      if (!this.userId) {
+        uni.showToast({ title: '无法获取用户信息，请重新登录', icon: 'none' });
+        return;
+      }
+
+      // 调用组件方法启动开门流程
+      this.$refs.doorPanel.open();
     },
     handleMenuClick(item) {
       switch (item.action) {
@@ -666,4 +709,5 @@ page { height: 100%; background-color: #fff; }
   border: 2rpx solid #2979ff;
   border-radius: 40rpx;
 }
+
 </style>
\ No newline at end of file
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
new file mode 100644
index 0000000..5f4c897
--- /dev/null
+++ b/src/pages/order/detail.vue
@@ -0,0 +1,463 @@
+<template>
+  <view class="detail-page">
+    <!-- 顶部导航 -->
+    <view class="nav-bar">
+      <view class="nav-back" @click="goBack">
+        <text class="back-arrow">‹</text>
+      </view>
+      <text class="nav-title">订单详情</text>
+      <view class="nav-placeholder"></view>
+    </view>
+
+    <!-- 内容区域 -->
+    <scroll-view class="detail-scroll" scroll-y>
+      <view v-if="loading" class="loading-state">
+        <text class="loading-text">加载中...</text>
+      </view>
+
+      <view v-else-if="order" class="detail-body">
+        <!-- 状态卡片 -->
+        <view class="status-card">
+          <view class="status-icon-row">
+            <view class="status-dot" :class="statusDotClass"></view>
+            <text class="status-main">{{ orderStatusText(order.order_status) }}</text>
+          </view>
+          <text class="status-sub">{{ payStatusText(order.payment_status) }}</text>
+        </view>
+
+        <!-- 商品信息 -->
+        <view class="section-card">
+          <view class="section-title">商品信息</view>
+          <view
+            class="product-item"
+            v-for="(product, idx) in order.products"
+            :key="idx"
+          >
+            <image class="product-img" :src="product.image" mode="aspectFill" />
+            <view class="product-info">
+              <text class="product-name">{{ product.name }}</text>
+              <view class="product-bottom">
+                <text class="product-price">￥{{ getDecimal(product.unit_price) }}</text>
+                <text class="product-qty">x{{ product.qty }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 订单信息 -->
+        <view class="section-card">
+          <view class="section-title">订单信息</view>
+          <view class="info-row">
+            <text class="info-label">订单编号</text>
+            <text class="info-value" @click="copyText(order.order_id)">{{ order.order_id }}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">下单时间</text>
+            <text class="info-value">{{ formatTime(order.createdAt) }}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">设备编号</text>
+            <text class="info-value">{{ order.device_id }}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">订单来源</text>
+            <text class="info-value">{{ orderSourceText(order.order_source) }}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">商品数量</text>
+            <text class="info-value">{{ order.total_qty }} 件</text>
+          </view>
+        </view>
+
+        <!-- 金额信息 -->
+        <view class="section-card">
+          <view class="section-title">金额信息</view>
+          <view class="info-row">
+            <text class="info-label">商品总额</text>
+            <text class="info-value">￥{{ getDecimal(order.total_amount) }}</text>
+          </view>
+          <view class="info-row" v-if="getDecimal(order.discount_amount) !== '0'">
+            <text class="info-label">优惠金额</text>
+            <text class="info-value discount">-￥{{ getDecimal(order.discount_amount) }}</text>
+          </view>
+          <view class="info-row total">
+            <text class="info-label">实付金额</text>
+            <text class="info-value price">￥{{ getDecimal(order.paid_amount) }}</text>
+          </view>
+        </view>
+
+        <!-- 退款信息 -->
+        <view class="section-card" v-if="order.has_refund && order.refund_info">
+          <view class="section-title">退款信息</view>
+          <view class="info-row">
+            <text class="info-label">退款状态</text>
+            <text class="info-value refunded">已退款</text>
+          </view>
+        </view>
+      </view>
+
+      <view v-else class="empty-state">
+        <text class="empty-text">订单不存在</text>
+      </view>
+
+      <view class="bottom-spacer"></view>
+    </scroll-view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-bar" v-if="order">
+      <view
+        v-if="order.payment_status === 'PENDING'"
+        class="btn-action btn-pay"
+        @click="handlePay"
+      >
+        立即支付
+      </view>
+      <view
+        v-else-if="order.payment_status === 'PAID' && !order.has_refund"
+        class="btn-action btn-refund"
+        @click="handleRefund"
+      >
+        申请退款
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { get } from '@/utils/request.js';
+import { checkLoginWithPrompt } from '@/utils/auth-guard.js';
+
+export default {
+  data() {
+    return {
+      orderId: '',
+      order: null,
+      loading: false
+    };
+  },
+  computed: {
+    statusDotClass() {
+      if (!this.order) return '';
+      const s = this.order.order_status;
+      if (s === 'COMPLETED') return 'dot-success';
+      if (s === 'CANCELLED') return 'dot-grey';
+      return 'dot-blue';
+    }
+  },
+  onLoad(options) {
+    this.orderId = options.order_id || '';
+    if (this.orderId) {
+      this.fetchOrder();
+    }
+  },
+  methods: {
+    async fetchOrder() {
+      this.loading = true;
+      try {
+        const res = await get('/user/orders', {
+          page: 1,
+          limit: 1,
+          filter: JSON.stringify({ order_id: this.orderId })
+        });
+
+        const ret = res.data || {};
+        if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
+          this.order = ret.data[0];
+        }
+      } catch (e) {
+        uni.showToast({ title: '获取订单失败', icon: 'none' });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    getDecimal(val) {
+      if (!val) return '0.00';
+      if (val.$numberDecimal) return val.$numberDecimal;
+      return String(val);
+    },
+
+    formatTime(iso) {
+      if (!iso) return '';
+      const d = new Date(iso);
+      const pad = n => String(n).padStart(2, '0');
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    },
+
+    orderStatusText(status) {
+      const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
+      return map[status] || status;
+    },
+    payStatusText(status) {
+      const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
+      return map[status] || status;
+    },
+    orderSourceText(source) {
+      const map = { SCAN: '扫码开门', APP: 'APP下单' };
+      return map[source] || source;
+    },
+
+    copyText(text) {
+      uni.setClipboardData({
+        data: text,
+        success: () => uni.showToast({ title: '已复制', icon: 'success' })
+      });
+    },
+
+    handlePay() {
+      uni.showModal({
+        title: '立即支付',
+        content: `确认支付￥${this.getDecimal(this.order.total_amount)}？`,
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '支付功能开发中', icon: 'none' });
+          }
+        }
+      });
+    },
+    handleRefund() {
+      uni.showModal({
+        title: '申请退款',
+        content: '确认申请退款？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '退款功能开发中', icon: 'none' });
+          }
+        }
+      });
+    },
+
+    goBack() {
+      uni.navigateBack();
+    }
+  }
+};
+</script>
+
+<style scoped>
+page {
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.detail-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+/* 导航栏 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24rpx;
+  height: 88rpx;
+  background: #fff;
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.nav-back {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.back-arrow {
+  font-size: 48rpx;
+  color: #333;
+  line-height: 1;
+}
+.nav-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+}
+.nav-placeholder {
+  width: 60rpx;
+}
+
+/* 内容区域 */
+.detail-scroll {
+  flex: 1;
+  height: 0;
+}
+
+/* 状态卡片 */
+.status-card {
+  background: linear-gradient(135deg, #2979ff, #1e60e0);
+  padding: 40rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+.status-icon-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+.status-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+}
+.dot-blue { background: #fff; }
+.dot-success { background: #52c41a; }
+.dot-grey { background: #999; }
+.status-main {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
+}
+.status-sub {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.75);
+  padding-left: 28rpx;
+}
+
+/* 通用卡片 */
+.section-card {
+  background: #fff;
+  margin: 20rpx;
+  border-radius: 16rpx;
+  padding: 24rpx 28rpx;
+}
+.section-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+/* 商品项 */
+.product-item {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 0;
+}
+.product-item + .product-item {
+  border-top: 1rpx solid #f5f5f5;
+}
+.product-img {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 10rpx;
+  background: #f0f0f0;
+  flex-shrink: 0;
+}
+.product-info {
+  flex: 1;
+  margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 120rpx;
+}
+.product-name {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.product-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.product-price {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+.product-qty {
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 信息行 */
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+}
+.info-row + .info-row {
+  border-top: 1rpx solid #f5f5f5;
+}
+.info-row.total {
+  border-top: 1rpx solid #f0f0f0;
+  margin-top: 8rpx;
+  padding-top: 20rpx;
+}
+.info-label {
+  font-size: 26rpx;
+  color: #999;
+}
+.info-value {
+  font-size: 26rpx;
+  color: #333;
+}
+.info-value.discount {
+  color: #ff6b6b;
+}
+.info-value.price {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #e4393c;
+}
+.info-value.refunded {
+  color: #ff6b6b;
+}
+
+/* 加载/空状态 */
+.loading-state, .empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 120rpx 0;
+}
+.loading-text, .empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 底部操作栏 */
+.bottom-bar {
+  background: #fff;
+  padding: 16rpx 30rpx;
+  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+.btn-action {
+  width: 100%;
+  height: 88rpx;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.btn-pay {
+  background: linear-gradient(135deg, #2979ff, #1e60e0);
+  color: #fff;
+}
+.btn-refund {
+  background: #fff;
+  border: 2rpx solid #2979ff;
+  color: #2979ff;
+}
+
+/* 底部占位 */
+.bottom-spacer {
+  height: 40rpx;
+}
+</style>
diff --git a/src/pages/order/order.vue b/src/pages/order/order.vue
index f7b7428..8261b2d 100644
--- a/src/pages/order/order.vue
+++ b/src/pages/order/order.vue
@@ -2,24 +2,24 @@
   <view class="order-page">
     <!-- 顶部Tab切换 -->
     <view class="tab-header">
-      <view 
-        class="tab-item" 
+      <view
+        class="tab-item"
         :class="{ active: currentTab === 'all' }"
         @click="switchTab('all')"
       >
         <text class="tab-text">全部订单</text>
         <view class="tab-line" v-if="currentTab === 'all'"></view>
       </view>
-      <view 
-        class="tab-item" 
+      <view
+        class="tab-item"
         :class="{ active: currentTab === 'paid' }"
         @click="switchTab('paid')"
       >
         <text class="tab-text">已支付</text>
         <view class="tab-line" v-if="currentTab === 'paid'"></view>
       </view>
-      <view 
-        class="tab-item" 
+      <view
+        class="tab-item"
         :class="{ active: currentTab === 'unpaid' }"
         @click="switchTab('unpaid')"
       >
@@ -43,34 +43,39 @@
     </view>
 
     <!-- 订单列表 -->
-    <scroll-view class="order-scroll" scroll-y>
+    <scroll-view class="order-scroll" scroll-y @scrolltolower="loadMore">
       <view class="order-list">
-        <view 
-          class="order-card" 
-          v-for="(order, index) in filteredOrders" 
-          :key="index"
+        <view
+          class="order-card"
+          v-for="order in filteredOrders"
+          :key="order._id"
         >
           <!-- 第一行: 日期 + 状态 -->
           <view class="order-header">
-            <text class="order-date">{{ order.create_time }}</text>
-            <text class="order-status" :class="{ paid: order.status === 'paid', unpaid: order.status === 'unpaid' }">
-              {{ order.status === 'paid' ? '已支付' : '未支付' }}
-            </text>
+            <text class="order-date">{{ formatTime(order.createdAt) }}</text>
+            <view class="status-tags">
+              <text class="order-status" :class="orderStatusClass(order.order_status)">
+                {{ orderStatusText(order.order_status) }}
+              </text>
+              <text class="pay-status" :class="payStatusClass(order.payment_status)">
+                {{ payStatusText(order.payment_status) }}
+              </text>
+            </view>
           </view>
           <view class="divider"></view>
 
-          <!-- 商品列表（整体可点击跳转） -->
+          <!-- 商品列表 -->
           <view class="product-section" @click="goToDetail(order)">
             <view class="product-list">
-              <view 
-                class="product-item" 
-                v-for="(product, pIndex) in order.products" 
+              <view
+                class="product-item"
+                v-for="(product, pIndex) in order.products"
                 :key="pIndex"
               >
                 <image class="product-img" :src="product.image" mode="aspectFill" />
                 <view class="product-info">
                   <text class="product-name">{{ product.name }}</text>
-                  <text class="product-price-qty">￥{{ product.price }} x {{ product.quantity }}</text>
+                  <text class="product-price-qty">￥{{ getDecimal(product.unit_price) }} x {{ product.qty }}</text>
                 </view>
               </view>
             </view>
@@ -81,27 +86,44 @@
 
           <!-- 总计 -->
           <view class="order-total">
-            <text class="total-qty">共{{ order.totalQuantity }}件</text>
+            <text class="total-qty">共{{ order.total_qty }}件</text>
             <view class="total-amount">
               <text class="total-label">总计:</text>
-              <text class="total-price">￥{{ order.totalAmount }}</text>
+              <text class="total-price">￥{{ getDecimal(order.total_amount) }}</text>
             </view>
           </view>
 
           <!-- 操作按钮 -->
           <view class="order-action">
-            <view 
-              class="action-btn" 
-              :class="{ 'pay-btn': order.status === 'unpaid', 'refund-btn': order.status === 'paid' }"
-              @click="handleAction(order)"
+            <view
+              v-if="order.payment_status === 'PENDING'"
+              class="action-btn pay-btn"
+              @click="handlePay(order)"
             >
-              {{ order.status === 'unpaid' ? '立即支付' : '申请退款' }}
+              立即支付
+            </view>
+            <view
+              v-else-if="order.payment_status === 'PAID' && !order.has_refund"
+              class="action-btn refund-btn"
+              @click="handleRefund(order)"
+            >
+              申请退款
             </view>
           </view>
         </view>
 
+        <!-- 加载状态 -->
+        <view class="loading-state" v-if="loading">
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <!-- 加载更多 / 没有更多 -->
+        <view class="load-more" v-if="!loading && orderList.length > 0 && total > limit">
+          <text class="load-more-text">{{ hasNext ? '上拉加载更多' : '没有更多了' }}</text>
+        </view>
+
         <!-- 空状态 -->
-        <view class="empty-state" v-if="filteredOrders.length === 0">
+        <view class="empty-state" v-if="!loading && filteredOrders.length === 0">
           <text class="empty-text">暂无订单</text>
         </view>
       </view>
@@ -118,11 +140,7 @@
         <view class="sidebar-content">
           <view class="date-row">
             <text class="date-label">开始时间</text>
-            <picker 
-              mode="date" 
-              :value="tempStartTime" 
-              @change="onStartTimeChange"
-            >
+            <picker mode="date" :value="tempStartTime" @change="onStartTimeChange">
               <view class="date-picker">
                 <text class="date-value">{{ tempStartTime || '请选择' }}</text>
               </view>
@@ -130,11 +148,7 @@
           </view>
           <view class="date-row">
             <text class="date-label">结束时间</text>
-            <picker 
-              mode="date" 
-              :value="tempEndTime" 
-              @change="onEndTimeChange"
-            >
+            <picker mode="date" :value="tempEndTime" @change="onEndTimeChange">
               <view class="date-picker">
                 <text class="date-value">{{ tempEndTime || '请选择' }}</text>
               </view>
@@ -164,7 +178,8 @@
 
 <script>
 import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
-import { checkLoginWithPrompt } from '@/utils/auth-guard.js';
+import { get } from '@/utils/request.js';
+import { checkLoginWithPrompt, getCachedUserInfo } from '@/utils/auth-guard.js';
 
 export default {
   components: { PageNavBar },
@@ -176,99 +191,92 @@ export default {
       tempEndTime: '',
       filterStartTime: '',
       filterEndTime: '',
-      // 模拟订单数据
-      orderList: [
-        {
-          id: 1,
-          create_time: '2026-04-30 10:25:30',
-          status: 'paid',
-          products: [
-            { name: '君乐宝450ml悦鲜活', price: 0.01, quantity: 2, image: '/static/c1.png' },
-            { name: '可口可乐330ml', price: 3.00, quantity: 1, image: '/static/c4.png' }
-          ],
-          totalQuantity: 3,
-          totalAmount: '0.04'
-        },
-        {
-          id: 2,
-          create_time: '2026-04-29 15:12:45',
-          status: 'unpaid',
-          products: [
-            { name: '农夫山泉550ml', price: 2.00, quantity: 3, image: '/static/c5.png' }
-          ],
-          totalQuantity: 3,
-          totalAmount: '6.00'
-        },
-        {
-          id: 3,
-          create_time: '2026-04-28 09:30:00',
-          status: 'paid',
-          products: [
-            { name: '乐事薯片原味75g', price: 7.50, quantity: 1, image: '/static/c6.png' },
-            { name: '白桔（0.0.0.0-5.5.5）', price: 0.05, quantity: 5, image: '/static/c3.png' }
-          ],
-          totalQuantity: 6,
-          totalAmount: '1.00'
-        },
-        {
-          id: 4,
-          create_time: '2026-04-27 18:45:20',
-          status: 'unpaid',
-          products: [
-            { name: '白红（0.0.0.0-9.9.9）', price: 0.06, quantity: 10, image: '/static/c2.png' }
-          ],
-          totalQuantity: 10,
-          totalAmount: '0.60'
-        },
-        {
-          id: 5,
-          create_time: '2026-04-25 12:00:00',
-          status: 'paid',
-          products: [
-            { name: '君乐宝450ml悦鲜活', price: 0.01, quantity: 1, image: '/static/c1.png' }
-          ],
-          totalQuantity: 1,
-          totalAmount: '0.01'
-        }
-      ]
+      orderList: [],
+      loading: false,
+      page: 1,
+      limit: 10,
+      hasNext: true,
+      total: 0
     };
   },
   computed: {
     filteredOrders() {
       let list = this.orderList;
-      
-      // Tab筛选
+
       if (this.currentTab === 'paid') {
-        list = list.filter(o => o.status === 'paid');
+        list = list.filter(o => o.payment_status === 'PAID');
       } else if (this.currentTab === 'unpaid') {
-        list = list.filter(o => o.status === 'unpaid');
+        list = list.filter(o => o.payment_status === 'PENDING');
       }
-      
-      // 日期筛选
-      if (this.filterStartTime) {
-        list = list.filter(o => o.create_time >= this.filterStartTime);
-      }
-      if (this.filterEndTime) {
-        list = list.filter(o => o.create_time.split(' ')[0] <= this.filterEndTime);
-      }
-      
+
       return list;
     }
   },
   onLoad() {
-    // 进入订单页需要登录
     if (!checkLoginWithPrompt('order')) return;
+    this.fetchOrders();
   },
   methods: {
+    // 拉取订单列表
+    async fetchOrders(append = false) {
+      if (this.loading) return;
+      this.loading = true;
+
+      try {
+        const userInfo = getCachedUserInfo();
+        const userId = userInfo && userInfo.user_id;
+        if (!userId) {
+          uni.showToast({ title: '无法获取用户信息', icon: 'none' });
+          return;
+        }
+
+        const filter = { user_id: userId };
+        if (this.filterStartTime) filter.start_time = this.filterStartTime;
+        if (this.filterEndTime) filter.end_time = this.filterEndTime;
+
+        const res = await get('/user/orders', {
+          page: this.page,
+          limit: this.limit,
+          filter: JSON.stringify(filter)
+        });
+
+        const ret = res.data || {};
+        if (ret.code === 0) {
+          const list = Array.isArray(ret.data) ? ret.data : [];
+          const meta = ret.meta || {};
+
+          if (append) {
+            this.orderList = this.orderList.concat(list);
+          } else {
+            this.orderList = list;
+          }
+
+          this.total = meta.total || list.length;
+          this.hasNext = !!meta.hasNext;
+        } else {
+          uni.showToast({ title: ret.message || '获取订单失败', icon: 'none' });
+        }
+      } catch (e) {
+        uni.showToast({ title: '网络请求失败', icon: 'none' });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 上拉加载更多
+    loadMore() {
+      if (!this.hasNext || this.loading) return;
+      this.page++;
+      this.fetchOrders(true);
+    },
+
     switchTab(tab) {
       this.currentTab = tab;
     },
-    onStartTimeChange(e) {
-      this.tempStartTime = e.detail.value;
-    },
-    onEndTimeChange(e) {
-      this.tempEndTime = e.detail.value;
-    },
+
+    // 筛选
+    onStartTimeChange(e) { this.tempStartTime = e.detail.value; },
+    onEndTimeChange(e) { this.tempEndTime = e.detail.value; },
     resetFilter() {
       this.tempStartTime = '';
       this.tempEndTime = '';
@@ -277,39 +285,82 @@ export default {
       this.filterStartTime = this.tempStartTime;
       this.filterEndTime = this.tempEndTime;
       this.showFilterSidebar = false;
+      this.page = 1;
+      this.hasNext = true;
+      this.fetchOrders();
     },
     clearFilter() {
       this.filterStartTime = '';
       this.filterEndTime = '';
+      this.page = 1;
+      this.hasNext = true;
+      this.fetchOrders();
     },
+
+    // 格式化时间
+    formatTime(iso) {
+      if (!iso) return '';
+      const d = new Date(iso);
+      const pad = n => String(n).padStart(2, '0');
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    },
+
+    // 解析 MongoDB Decimal128
+    getDecimal(val) {
+      if (!val) return '0.00';
+      if (val.$numberDecimal) return val.$numberDecimal;
+      return String(val);
+    },
+
+    // 订单状态
+    orderStatusText(status) {
+      const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
+      return map[status] || status;
+    },
+    orderStatusClass(status) {
+      if (status === 'COMPLETED') return 'paid';
+      if (status === 'CANCELLED') return 'cancelled';
+      return 'processing';
+    },
+
+    // 支付状态
+    payStatusText(status) {
+      const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
+      return map[status] || status;
+    },
+    payStatusClass(status) {
+      if (status === 'PAID') return 'paid';
+      if (status === 'PENDING') return 'unpaid';
+      return '';
+    },
+
     goToDetail(order) {
-      uni.showToast({ title: '订单详情开发中', icon: 'none' });
+      uni.navigateTo({ url: `/pages/order/detail?order_id=${order.order_id}` });
     },
-    handleAction(order) {
-      if (order.status === 'unpaid') {
-        // 支付需要登录
-        if (!checkLoginWithPrompt('pay')) return;
-        uni.showModal({
-          title: '立即支付',
-          content: `确认支付￥${order.totalAmount}？`,
-          success: (res) => {
-            if (res.confirm) {
-              uni.showToast({ title: '支付成功', icon: 'success' });
-            }
+    handlePay(order) {
+      if (!checkLoginWithPrompt('pay')) return;
+      uni.showModal({
+        title: '立即支付',
+        content: `确认支付￥${this.getDecimal(order.total_amount)}？`,
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '支付功能开发中', icon: 'none' });
           }
-        });
-      } else {
-        uni.showModal({
-          title: '申请退款',
-          content: '确认申请退款？',
-          success: (res) => {
-            if (res.confirm) {
-              uni.showToast({ title: '退款申请已提交', icon: 'success' });
-            }
-          }
-        });
-      }
+        }
+      });
     },
+    handleRefund(order) {
+      uni.showModal({
+        title: '申请退款',
+        content: '确认申请退款？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '退款功能开发中', icon: 'none' });
+          }
+        }
+      });
+    },
+
     handleNavPrev() {
       uni.navigateBack({ fail: () => { uni.switchTab({ url: '/pages/index/index' }); } });
     },
@@ -426,16 +477,36 @@ page { height: 100%; background-color: #f5f5f5; }
   font-size: 26rpx;
   color: #666;
 }
-.order-status {
-  font-size: 26rpx;
-  font-weight: bold;
+.status-tags {
+  display: flex;
+  gap: 12rpx;
+}
+.order-status, .pay-status {
+  font-size: 22rpx;
+  padding: 4rpx 14rpx;
+  border-radius: 6rpx;
+}
+.order-status.processing {
+  background: #e8f4ff;
+  color: #2979ff;
 }
 .order-status.paid {
+  background: #e8faf0;
   color: #19be6b;
 }
-.order-status.unpaid {
+.order-status.cancelled {
+  background: #f5f5f5;
+  color: #999;
+}
+.pay-status.paid {
+  background: #e8faf0;
+  color: #19be6b;
+}
+.pay-status.unpaid {
+  background: #fff0f0;
   color: #e4393c;
 }
+
 .divider {
   height: 1rpx;
   background: #f0f0f0;
@@ -554,6 +625,28 @@ page { height: 100%; background-color: #f5f5f5; }
   color: #999;
 }
 
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 40rpx 0;
+}
+.loading-text {
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 加载更多 */
+.load-more {
+  display: flex;
+  justify-content: center;
+  padding: 30rpx 0;
+}
+.load-more-text {
+  font-size: 24rpx;
+  color: #ccc;
+}
+
 /* 筛选侧边栏 */
 .filter-sidebar-mask {
   position: fixed;
@@ -645,4 +738,4 @@ page { height: 100%; background-color: #f5f5f5; }
 .bottom-spacer {
   height: 120rpx;
 }
-</style>
\ No newline at end of file
+</style>