From 7a95facf304dd7f2f491d873375e9de41f16d88f Mon Sep 17 00:00:00 2001
From: kk <875203880@qq.com>
Date: Mon, 15 Jun 2026 09:46:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=89=AB=E7=A0=81=E9=A1=B5/?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore            |   1 +
 App.vue               |  49 ++++---
 config/dev.js         |  14 ++
 config/env.js         |  20 +++
 config/index.js       |  19 +++
 config/prod.js        |  13 ++
 manifest.json         |   5 +
 pages.json            |   6 +
 pages/index/index.vue | 119 ++++++++++++++--
 pages/index/scan.vue  | 310 ++++++++++++++++++++++++++++++++++++++++++
 pages/mine/mine.vue   |   3 +-
 11 files changed, 531 insertions(+), 28 deletions(-)
 create mode 100644 config/dev.js
 create mode 100644 config/env.js
 create mode 100644 config/index.js
 create mode 100644 config/prod.js
 create mode 100644 pages/index/scan.vue

diff --git a/.gitignore b/.gitignore
index 9b62787..793696b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,4 @@ logs/
 # package-lock.json
 # yarn.lock
 # pnpm-lock.yaml
+/CLAUDE.md
diff --git a/App.vue b/App.vue
index 5098cf2..3f52957 100644
--- a/App.vue
+++ b/App.vue
@@ -1,19 +1,34 @@
-<script>
-	export default {
-		onLaunch: function() {
-			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
-	}
-</script>
-
-<style lang="scss">
+<script>
+	export default {
+		onLaunch: function(options) {
+			console.log('App Launch')
+
+			// #ifdef H5
+			// 解析 URL 路径中的设备编号（如 /A1036）
+			const path = window.location.pathname;
+			const segments = path.split('/').filter(Boolean);
+			if (segments.length > 0) {
+				const last = segments[segments.length - 1];
+				// 匹配设备编号格式：大写字母开头 + 大写字母/数字
+				if (/^[A-Z][A-Z0-9]+$/.test(last)) {
+					uni.redirectTo({
+						url: '/pages/index/index?device_id=' + last
+					});
+					return;
+				}
+			}
+			// #endif
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style lang="scss">
 	/*每个页面公共css */
 	@import '@/uni_modules/uni-scss/index.scss';
 	/* #ifndef APP-NVUE */
@@ -28,5 +43,5 @@
 		font-size: 14px;
 		color: #333;
 		padding: 10px;
-	}
+	}
 </style>
diff --git a/config/dev.js b/config/dev.js
new file mode 100644
index 0000000..6a1b44d
--- /dev/null
+++ b/config/dev.js
@@ -0,0 +1,14 @@
+/**
+ * 开发环境配置
+ */
+const dev = {
+  apiBaseUrl: 'http://192.168.0.23:4000',
+
+  // 开发阶段硬编码 Token（生产环境应从登录流程获取）
+  bearerToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImRlZXB2ZW5kaW5nIiwic3ViIjoiMTY0MDI0MTEyNiIsImZyb20iOiJwb3MiLCJyb2xlIjoicG9zIiwibWFpbmJvYXJkX2lkIjoiVDEwMDIiLCJwb3Nfc24iOiIxNjQwMjQxMTI2IiwiaWF0IjoxNzc4NDkxOTA3LCJleHAiOjE3NzkwOTY3MDd9.DjscZtrTCr30XOngToUifxoel4q2EGES_uqGQernkvg',
+
+  // 是否开启请求日志
+  enableRequestLog: true,
+};
+
+export default dev;
diff --git a/config/env.js b/config/env.js
new file mode 100644
index 0000000..5cbe679
--- /dev/null
+++ b/config/env.js
@@ -0,0 +1,20 @@
+/**
+ * 环境配置入口
+ * 根据编译模式自动选择 dev / prod 配置
+ */
+import common from './index.js';
+import dev from './dev.js';
+import prod from './prod.js';
+
+// uni-app 编译时通过 define 注译 __UNI_PLATFORM__
+// H5 开发模式下 process.env.NODE_ENV === 'development'
+const isProd = process.env.NODE_ENV === 'production';
+
+const envConfig = isProd ? prod : dev;
+
+const config = {
+  ...common,
+  ...envConfig,
+};
+
+export default config;
diff --git a/config/index.js b/config/index.js
new file mode 100644
index 0000000..764aacf
--- /dev/null
+++ b/config/index.js
@@ -0,0 +1,19 @@
+/**
+ * 公共配置（开发/生产环境共享）
+ */
+const common = {
+  // 应用信息
+  appName: '智能货柜',
+  appVersion: '1.0.0',
+
+  // 默认设备ID（开发调试用）
+  defaultDeviceId: 'A1036',
+
+  // 客服电话
+  servicePhone: '13264706088',
+
+  // 请求超时时间（ms）
+  requestTimeout: 10000,
+};
+
+export default common;
diff --git a/config/prod.js b/config/prod.js
new file mode 100644
index 0000000..1355cea
--- /dev/null
+++ b/config/prod.js
@@ -0,0 +1,13 @@
+/**
+ * 生产环境配置
+ */
+const prod = {
+  apiBaseUrl: 'https://api.arklink.com',
+
+  // 生产环境 Token 从登录流程获取，此处为空
+  bearerToken: '',
+
+  enableRequestLog: false,
+};
+
+export default prod;
diff --git a/manifest.json b/manifest.json
index 4da7353..823a8f2 100644
--- a/manifest.json
+++ b/manifest.json
@@ -56,5 +56,10 @@
         },
         "usingComponents" : true
     },
+    "h5" : {
+        "router" : {
+            "mode" : "history"
+        }
+    },
     "vueVersion" : "3"
 }
diff --git a/pages.json b/pages.json
index 9fd42c4..3b246c0 100644
--- a/pages.json
+++ b/pages.json
@@ -1,5 +1,11 @@
 {
   "pages": [
+    {
+      "path": "pages/index/scan",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/index/index",
       "style": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4848768..b969468 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -69,6 +69,10 @@
       <!-- 底部导航栏 -->
       <view class="tab-bar">
         <view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
+          <view class="home-icon">
+            <view class="home-roof"></view>
+            <view class="home-body"></view>
+          </view>
           <text class="tab-text">首页</text>
         </view>
 
@@ -77,6 +81,10 @@
         </view>
 
         <view class="tab-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
+          <view class="mine-icon">
+            <view class="mine-head"></view>
+            <view class="mine-body"></view>
+          </view>
           <text class="tab-text">我的</text>
         </view>
       </view>
@@ -130,15 +138,13 @@
 
 <script>
 import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
-
-const API_BASE = 'http://192.168.0.23:4000';
-const DEVICE_ID = 'A1036';
-const BEARER_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImRlZXB2ZW5kaW5nIiwic3ViIjoiMTY0MDI0MTEyNiIsImZyb20iOiJwb3MiLCJyb2xlIjoicG9zIiwibWFpbmJvYXJkX2lkIjoiVDEwMDIiLCJwb3Nfc24iOiIxNjQwMjQxMTI2IiwiaWF0IjoxNzc3NTI5MjYzLCJleHAiOjE3NzgxMzQwNjN9.I7eL2oL2rmkaJKH4R6aylUloyJh0dUS3vXLvKueX28I';
+import config from '@/config/env.js';
 
 export default {
   components: { PageNavBar },
   data() {
     return {
+      deviceId: '',
       currentTab: 'home',
       showQrcodePopup: false,
       loading: false,
@@ -151,7 +157,7 @@ export default {
         { title: '联系客服', action: 'call' },
         { title: '公众号信息', action: 'qrcode' }
       ],
-      servicePhone: '13264706088'
+      servicePhone: config.servicePhone
     };
   },
   computed: {
@@ -174,8 +180,19 @@ export default {
       return cat ? cat.products || [] : [];
     }
   },
-  onLoad() {
-    this.fetchProducts();
+  onLoad(options) {
+    // 支持通过 tab 参数切换到"我的"页面
+    if (options.tab === 'mine') {
+      this.currentTab = 'mine';
+    }
+
+    if (options.device_id) {
+      this.deviceId = options.device_id;
+      this.fetchProducts();
+    } else if (!options.tab) {
+      // 无设备编号且非 tab 跳转，跳回扫码页
+      uni.redirectTo({ url: '/pages/index/scan' });
+    }
   },
   methods: {
     switchTab(tab) { this.currentTab = tab; },
@@ -190,15 +207,27 @@ export default {
     },
     async fetchProducts() {
       this.loading = true;
+      const url = config.apiBaseUrl + '/device-product/getProductList';
+      const params = { device_id: this.deviceId };
+
+      if (config.enableRequestLog) {
+        console.log('[API] GET', url, params);
+      }
+
       try {
         const res = await uni.request({
-          url: API_BASE + '/device-product/getProductList',
+          url,
           method: 'GET',
-          data: { device_id: DEVICE_ID },
+          data: params,
           header: {
-            Authorization: 'Bearer ' + BEARER_TOKEN
+            Authorization: 'Bearer ' + config.bearerToken
           }
         });
+
+        if (config.enableRequestLog) {
+          console.log('[API] Response:', res.data);
+        }
+
         const ret = res.data || {};
         if (ret.code === 0 && Array.isArray(ret.data)) {
           this.categoryList = ret.data;
@@ -206,6 +235,9 @@ export default {
           uni.showToast({ title: ret.message || '获取商品失败', icon: 'none' });
         }
       } catch (e) {
+        if (config.enableRequestLog) {
+          console.error('[API] Error:', e);
+        }
         uni.showToast({ title: '网络请求失败', icon: 'none' });
       } finally {
         this.loading = false;
@@ -282,6 +314,73 @@ page { height: 100%; background-color: #fff; }
 .tab-bar .tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
 .tab-bar .tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
 .tab-bar .tab-item.active .tab-text { color: #2979ff; }
+
+/* 首页图标 */
+.tab-bar .home-icon {
+  width: 40rpx;
+  height: 36rpx;
+  position: relative;
+  margin-bottom: 6rpx;
+}
+.tab-bar .home-roof {
+  width: 0;
+  height: 0;
+  border-left: 22rpx solid transparent;
+  border-right: 22rpx solid transparent;
+  border-bottom: 18rpx solid #999;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tab-bar .home-body {
+  width: 30rpx;
+  height: 18rpx;
+  background-color: #999;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0 0 3rpx 3rpx;
+}
+.tab-bar .tab-item.active .home-roof {
+  border-bottom-color: #2979ff;
+}
+.tab-bar .tab-item.active .home-body {
+  background-color: #2979ff;
+}
+
+/* 我的图标（与扫一扫页共用） */
+.tab-bar .mine-icon {
+  width: 40rpx;
+  height: 36rpx;
+  position: relative;
+  margin-bottom: 6rpx;
+}
+.tab-bar .mine-head {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #999;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tab-bar .mine-body {
+  width: 28rpx;
+  height: 16rpx;
+  border-radius: 14rpx 14rpx 0 0;
+  background-color: #999;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tab-bar .tab-item.active .mine-head,
+.tab-bar .tab-item.active .mine-body {
+  background-color: #2979ff;
+}
 .door-btn-wrapper { position: relative; display: flex; align-items: center; justify-content: center; margin-top: -80rpx; }
 .door-btn { width: 160rpx; height: 160rpx; border-radius: 50%; background: linear-gradient(135deg, #2979ff, #1e60e0); color: #fff; font-size: 38rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 10rpx 36rpx rgba(41,121,255,0.55); }
 
diff --git a/pages/index/scan.vue b/pages/index/scan.vue
new file mode 100644
index 0000000..d8f7e3f
--- /dev/null
+++ b/pages/index/scan.vue
@@ -0,0 +1,310 @@
+<template>
+  <view class="scan-page">
+    <!-- 顶部品牌 -->
+    <view class="brand-area">
+      <text class="brand-name">智联方舟</text>
+    </view>
+
+    <!-- 中间扫一扫按钮 -->
+    <view class="scan-area">
+      <view class="scan-btn" @click="handleScan">
+        <!-- 二维码图标 -->
+        <view class="qr-icon">
+          <view class="qr-row">
+            <view class="qr-block"></view>
+            <view class="qr-block"></view>
+            <view class="qr-space"></view>
+            <view class="qr-block"></view>
+          </view>
+          <view class="qr-row">
+            <view class="qr-block"></view>
+            <view class="qr-space"></view>
+            <view class="qr-block"></view>
+            <view class="qr-space"></view>
+          </view>
+          <view class="qr-row">
+            <view class="qr-space"></view>
+            <view class="qr-block"></view>
+            <view class="qr-space"></view>
+            <view class="qr-block"></view>
+          </view>
+          <view class="qr-row">
+            <view class="qr-block"></view>
+            <view class="qr-block"></view>
+            <view class="qr-block"></view>
+            <view class="qr-space"></view>
+          </view>
+        </view>
+        <text class="scan-text">扫一扫</text>
+      </view>
+      <text class="scan-tip">扫描货柜上的二维码开始购物</text>
+    </view>
+
+    <!-- 我的入口 -->
+    <view class="mine-entry" @click="goMine">
+      <view class="mine-icon">
+        <view class="mine-head"></view>
+        <view class="mine-body"></view>
+      </view>
+      <text class="mine-text">我的</text>
+    </view>
+
+    <!-- 底部客服电话 -->
+    <view class="footer">
+      <text class="footer-text">客服电话：</text>
+      <text class="footer-phone" @click="callService">{{ servicePhone }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import config from '@/config/env.js';
+
+export default {
+  data() {
+    return {
+      servicePhone: config.servicePhone,
+    };
+  },
+  onLoad(options) {
+    // 1. query 参数中携带设备编号
+    if (options.device_id) {
+      uni.redirectTo({
+        url: '/pages/index/index?device_id=' + options.device_id,
+      });
+      return;
+    }
+
+    // #ifdef H5
+    // 2. URL 路径中携带设备编号（如 http://xxx/A1036）
+    const path = window.location.pathname;
+    const segments = path.split('/').filter(Boolean);
+    if (segments.length > 0) {
+      const last = segments[segments.length - 1];
+      if (/^[A-Z][A-Z0-9]+$/.test(last)) {
+        uni.redirectTo({
+          url: '/pages/index/index?device_id=' + last,
+        });
+        return;
+      }
+    }
+    // #endif
+  },
+  methods: {
+    handleScan() {
+      // #ifdef H5
+      uni.showToast({ title: 'H5 环境暂不支持扫码', icon: 'none' });
+      // #endif
+
+      // #ifdef MP-WEIXIN
+      uni.scanCode({
+        onlyFromCamera: false,
+        success: (res) => {
+          this.parseScanResult(res.result);
+        },
+        fail: () => {
+          uni.showToast({ title: '扫码取消', icon: 'none' });
+        },
+      });
+      // #endif
+    },
+    parseScanResult(result) {
+      // 解析扫码结果，提取 device_id
+      // 预期格式：https://domain/A1036 或 device_id=A1036
+      let deviceId = '';
+
+      try {
+        const url = new URL(result);
+        // 取路径最后一段作为设备编号
+        const pathParts = url.pathname.split('/').filter(Boolean);
+        if (pathParts.length > 0) {
+          deviceId = pathParts[pathParts.length - 1];
+        }
+      } catch {
+        // 非 URL 格式，尝试直接匹配
+        if (/^[A-Z][A-Z0-9]+$/.test(result)) {
+          deviceId = result;
+        }
+      }
+
+      if (deviceId) {
+        uni.redirectTo({
+          url: '/pages/index/index?device_id=' + deviceId,
+        });
+      } else {
+        uni.showToast({ title: '无效的二维码', icon: 'none' });
+      }
+    },
+    goMine() {
+      uni.navigateTo({ url: '/pages/index/index?tab=mine' });
+    },
+    callService() {
+      // #ifdef H5
+      window.location.href = 'tel:' + this.servicePhone;
+      // #endif
+
+      // #ifndef H5
+      uni.makePhoneCall({ phoneNumber: this.servicePhone, fail: () => {} });
+      // #endif
+    },
+  },
+};
+</script>
+
+<style scoped>
+page {
+  height: 100%;
+  background-color: #fff;
+}
+
+.scan-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  background-color: #fff;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 品牌区域 */
+.brand-area {
+  margin-top: 200rpx;
+  margin-bottom: 80rpx;
+}
+
+.brand-name {
+  font-size: 96rpx;
+  font-weight: bold;
+  color: #000;
+  letter-spacing: 12rpx;
+}
+
+/* 扫一扫按钮 */
+.scan-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 80rpx;
+}
+
+.scan-btn {
+  width: 360rpx;
+  height: 360rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #2979ff, #1e60e0);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 20rpx 60rpx rgba(41, 121, 255, 0.4);
+}
+
+/* 二维码图标 */
+.qr-icon {
+  width: 120rpx;
+  height: 120rpx;
+  margin-bottom: 20rpx;
+}
+
+.qr-row {
+  display: flex;
+  margin-bottom: 6rpx;
+}
+
+.qr-row:last-child {
+  margin-bottom: 0;
+}
+
+.qr-block {
+  width: 24rpx;
+  height: 24rpx;
+  background-color: #fff;
+  margin-right: 6rpx;
+  border-radius: 4rpx;
+}
+
+.qr-space {
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 6rpx;
+}
+
+.scan-text {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.scan-tip {
+  font-size: 26rpx;
+  color: #999;
+  margin-top: 40rpx;
+}
+
+/* 我的入口 */
+.mine-entry {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 140rpx;
+}
+
+.mine-icon {
+  width: 60rpx;
+  height: 54rpx;
+  position: relative;
+  margin-bottom: 12rpx;
+}
+
+.mine-head {
+  width: 24rpx;
+  height: 24rpx;
+  border-radius: 50%;
+  background-color: #999;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mine-body {
+  width: 44rpx;
+  height: 26rpx;
+  border-radius: 22rpx 22rpx 0 0;
+  background-color: #999;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mine-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 底部客服 */
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 32rpx 0;
+  padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.footer-text {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.footer-phone {
+  font-size: 26rpx;
+  color: #2979ff;
+}
+</style>
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 82747ce..f458e81 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -44,6 +44,7 @@
 
 <script>
 import PageNav from '@/components/page-nav/page-nav.vue';
+import config from '@/config/env.js';
 
 export default {
   components: {
@@ -78,7 +79,7 @@ export default {
       } else if (item.action === 'contact') {
         uni.showModal({
           title: '联系客服',
-          content: '客服电话：13264706088',
+          content: '客服电话：' + config.servicePhone,
           showCancel: false
         });
       }