纳入 track-uniapp 前端项目 (扫码/任务树/记录/转交Picker)

2026-08-05 15:01:46 +08:00
parent eaaeb38d0a
commit 5e53cd7f79
28 changed files with 12898 additions and 1 deletions
--- a/track-uniapp/src/pages/scan/index.vue
+++ b/track-uniapp/src/pages/scan/index.vue
@ -0,0 +1,98 @@
+<template>
+  <view class="page">
+    <!-- 扫码大按钮 -->
+    <view class="scan-btn" @tap="handleScanCode">
+      <text class="scan-icon">📷</text>
+      <text class="scan-text">点击扫码</text>
+      <text class="scan-hint">扫描二维码 / 条码查询产品</text>
+    </view>
+
+    <!-- 手动输入 -->
+    <view class="manual-input">
+      <input v-model="serialNumber" class="input" type="text" maxlength="16"
+        placeholder="手动输入16位序列号" @confirm="handleSearch" />
+      <button class="search-btn" @tap="handleSearch" :disabled="loading">
+        {{ loading ? '查询中' : '查询' }}
+      </button>
+    </view>
+
+    <!-- 最近扫描 -->
+    <view v-if="lastScanned" class="last-scan">最近扫描: <text class="sn-text">{{ lastScanned }}</text></view>
+    <view v-if="loading" class="loading">查询中...</view>
+    <view v-if="error" class="error-box">{{ error }}</view>
+
+    <!-- 空状态 -->
+    <view v-if="!loading && !error" class="empty">
+      <text class="empty-icon">📱</text>
+      <text class="empty-text">扫码或手动输入序列号查询产品进度</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { get } from "../../utils/request";
+
+export default {
+  data() {
+    return {
+      serialNumber: "",
+      lastScanned: "",
+      loading: false,
+      error: "",
+    };
+  },
+  methods: {
+    async doQuery(sn) {
+      if (!sn || sn.length < 8) { this.error = "序列号至少需要 8 位"; return; }
+      this.serialNumber = sn;
+      this.lastScanned = sn;
+      this.loading = true;
+      this.error = "";
+      try {
+        await get(`/products/scan/${sn}`);
+        uni.navigateTo({ url: `/pages/scan/detail?serial=${sn}` });
+      } catch (e) {
+        this.error = e?.data?.detail || "未找到该产品";
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleSearch() { this.doQuery(this.serialNumber.trim()); },
+    handleScanCode() {
+      uni.scanCode({
+        onlyFromCamera: true, scanType: ["qrCode", "barCode"],
+        success: (res) => {
+          const sn = (res.result || "").replace(/[^a-zA-Z0-9]/g, "").slice(0, 16);
+          this.doQuery(sn);
+        },
+        fail: (err) => {
+          if (!err.errMsg || !err.errMsg.includes("cancel")) {
+            uni.showToast({ title: "扫码失败，请重试", icon: "none" });
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.page { min-height: 100vh; padding: 40px 16px 16px; }
+.scan-btn { display: flex; flex-direction: column; align-items: center; justify-content: center;
+  height: 180px; background: linear-gradient(135deg, #2563EB, #3B82F6);
+  border-radius: 16px; color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,0.3); }
+.scan-icon { font-size: 52px; margin-bottom: 8px; }
+.scan-text { font-size: 20px; font-weight: 700; }
+.scan-hint { font-size: 13px; opacity: 0.8; margin-top: 4px; }
+.manual-input { display: flex; gap: 8px; margin-top: 16px; }
+.input { flex: 1; height: 44px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: #fff; }
+.search-btn { height: 44px; padding: 0 20px; background: #2563EB; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 44px; }
+.search-btn[disabled] { opacity: 0.6; }
+.last-scan { font-size: 12px; color: #9ca3af; margin-top: 16px; }
+.sn-text { font-family: monospace; color: #4b5563; }
+.loading { text-align: center; padding: 24px 0; color: #6b7280; }
+.error-box { padding: 12px; border-radius: 10px; background: #fef2f2; color: #dc2626; font-size: 13px; border: 1px solid #fecaca; margin-top: 12px; }
+.empty { display: flex; flex-direction: column; align-items: center; padding-top: 40px; color: #9ca3af; }
+.empty-icon { font-size: 48px; margin-bottom: 8px; }
+.empty-text { font-size: 14px; }
+</style>