leadal-auth 0.0.1

package/src/components/finger-register/index.vue

@@ -0,0 +1,685 @@
+<template>
+  <div class="flex-center align-center h100 w100">
+    <!-- 指纹注册弹窗 -->
+    <div class="finger-dialog">
+      <div class="finger-register-content">
+        <div
+          style="
+            color: #333;
+            font-size: 24px;
+            margin-bottom: 12px;
+            padding-top: 48px;
+            text-align: center;
+            margin-top: 24px;
+          "
+        >
+          {{ stepTips }}
+        </div>
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 50px;
+          "
+        >
+          <!-- 左手区域 -->
+          <div class="hand-area left-hand">
+            <div class="hand-image-wrapper">
+              <img :src="leftHandleImg" class="hand-image" />
+              <!-- 左手指尖按钮 -->
+              <div class="finger-buttons-overlay">
+                <div
+                  v-for="(finger, index) in leftFingers"
+                  :key="'left-' + index"
+                  :class="[
+                    'finger-circle',
+                    {
+                      active:
+                        selectedFinger && selectedFinger.value === finger.value,
+                      ready: !!finger.fingerInfo,
+                    },
+                  ]"
+                  :style="{ top: finger.top + 'px', left: finger.left + 'px' }"
+                  @click="handleSelectFinger(finger)"
+                ></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右手区域 -->
+          <div class="hand-area right-hand">
+            <div class="hand-image-wrapper">
+              <img :src="rightHandleImg" class="hand-image" />
+              <!-- 右手指尖按钮 -->
+              <div class="finger-buttons-overlay">
+                <div
+                  v-for="(finger, index) in rightFingers"
+                  :key="'right-' + index"
+                  :class="[
+                    'finger-circle',
+                    {
+                      active:
+                        selectedFinger && selectedFinger.value === finger.value,
+                      ready: !!finger.fingerInfo,
+                    },
+                  ]"
+                  :style="{ top: finger.top + 'px', left: finger.left + 'px' }"
+                  @click="handleSelectFinger(finger)"
+                ></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 指纹状态区域 -->
+          <div class="fingerprint-status">
+            <div class="fingerprint-image-container">
+              <div class="delete-button">
+                <el-button
+                  type="text"
+                  size="large"
+                  @click="handleDeleteFinger"
+                  v-if="selectedFinger && selectedFinger.fingerInfo"
+                >
+                <i class="el-icon-delete" style="font-size: 20px; color: #999;"></i>
+              </el-button>
+              </div>
+              <img :src="currentFingerprintImage" class="fingerprint-image" />
+              <p class="status-text">
+                {{ fingerStatusText }}
+              </p>
+              <!-- fingerInfo存在 显示删除按钮 固定在右上角 -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="flex-center align-center w100">
+        <el-button
+          type="primary"
+          style="
+            width: 214px;
+            height: 40px;
+            border-radius: 20px;
+            font-size: 16px;
+          "
+          :loading="loading"
+          :disabled="!selectedFinger || fingerRegisterStep !== 5 || !fingerTemp"
+          @click="handleSaveFingerprint"
+          >保存</el-button
+        >
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  uploadFingerApi,
+  getMaxFingerSeqApi,
+  findByUserIdApi,
+  deleteFingerApi,
+} from "@/api/finger";
+
+export default {
+  name: "FingerRegisterView",
+  props: {
+    row: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // -1:指纹录入失败，请重试
+      // 0:请选择需要采集的手指
+      // 1:请将手指放在设备上
+      // 2:再次将手指放在设备上
+      // 3:最后一次将手指放在设备上
+      // 4:指纹采集完成
+      // 5:正在录入
+      // 6:指纹录入完成
+      fingerRegisterStep: 0,
+      currentFingerprintImage: require("@/assets/finger-status-start.png"),
+      gifTimeoutId: null,
+      selectedFinger: null,
+      fingerTemp: null, // 指纹模板(base64 字符串)
+      fingerId: null, // 后端接口指纹id
+      fid: null, // 指纹仪唯一id
+      loading: false,
+      leftFingers: [
+        {
+          label: "大拇指",
+          value: "left-thumb",
+          top: 122,
+          left: 6,
+          index: 0,
+          fingerInfo: null,
+        },
+        {
+          label: "食指",
+          value: "left-index",
+          top: 20,
+          left: 60,
+          index: 1,
+          fingerInfo: null,
+        },
+        {
+          label: "中指",
+          value: "left-middle",
+          top: 3,
+          left: 98,
+          index: 2,
+          fingerInfo: null,
+        },
+        {
+          label: "无名指",
+          value: "left-ring",
+          top: 12,
+          left: 136,
+          index: 3,
+          fingerInfo: null,
+        },
+        {
+          label: "小拇指",
+          value: "left-little",
+          top: 35,
+          left: 176,
+          index: 4,
+          fingerInfo: null,
+        },
+      ],
+      rightFingers: [
+        {
+          label: "大拇指",
+          value: "right-thumb",
+          top: 118,
+          left: 178,
+          index: 5,
+          fingerInfo: null,
+        },
+        {
+          label: "食指",
+          value: "right-index",
+          top: 16,
+          left: 121,
+          index: 6,
+          fingerInfo: null,
+        },
+        {
+          label: "中指",
+          value: "right-middle",
+          top: 0,
+          left: 83,
+          index: 7,
+          fingerInfo: null,
+        },
+        {
+          label: "无名指",
+          value: "right-ring",
+          top: 11,
+          left: 43,
+          index: 8,
+          fingerInfo: null,
+        },
+        {
+          label: "小拇指",
+          value: "right-little",
+          top: 42,
+          left: 5,
+          index: 9,
+          fingerInfo: null,
+        },
+      ],
+    };
+  },
+  computed: {
+    // ...mapGetters(["userId", "devSn", "devType", "tenantId"]),
+    userId() {
+      return this.row.userId;
+    },
+    devSn() {
+      return this.$store.getters.getFingerprintDeviceSN;
+    },
+    devType() {
+      return 1;
+    },
+    tenantId() {
+      return null;
+    },
+    leftHandleImg() {
+      return this.selectedFinger && this.selectedFinger.value.includes("left")
+        ? require("@/assets/blue-left.png")
+        : require("@/assets/left.png");
+    },
+    rightHandleImg() {
+      return this.selectedFinger && this.selectedFinger.value.includes("right")
+        ? require("@/assets/blue-right.png")
+        : require("@/assets/right.png");
+    },
+    stepTips() {
+      if (this.fingerRegisterStep === -1) {
+        return "指纹采集异常，请重试！";
+      }
+
+      return this.fingerRegisterStep === 0
+        ? "请选择需要采集的手指"
+        : this.fingerRegisterStep === 1
+        ? "请将手指放在设备上"
+        : this.fingerRegisterStep === 2
+        ? "请再次将手指放在设备上"
+        : this.fingerRegisterStep === 3
+        ? "最后一次将手指放在设备上"
+        : this.fingerRegisterStep === 4
+        ? "正在指纹采集"
+        : this.fingerRegisterStep === 5
+        ? "指纹采集成功"
+        : "未知状态";
+    },
+    fingerStatusText() {
+      if (this.fingerRegisterStep === -1) {
+        return "指纹采集异常，请重试！";
+      }
+      return this.fingerRegisterStep === 0
+        ? "采集指纹一共需要三次按压"
+        : this.fingerRegisterStep === 1
+        ? "请将手指放在设备上"
+        : this.fingerRegisterStep === 2
+        ? "请再次将手指放在设备上"
+        : this.fingerRegisterStep === 3
+        ? "最后一次将手指放在设备上"
+        : this.fingerRegisterStep === 4
+        ? "正在处理指纹数据..."
+        : this.fingerRegisterStep === 5
+        ? "指纹采集成功"
+        : "准备采集指纹";
+    },
+  },
+  watch: {
+    fingerRegisterStep(newStep) {
+      clearTimeout(this.gifTimeoutId);
+      const gifDuration = 800;
+
+      if (newStep === 1 || newStep === 0 || newStep === -1) {
+        this.currentFingerprintImage = require("@/assets/finger-status-start.png");
+      } else if (newStep === 2) {
+        this.currentFingerprintImage = require("@/assets/finger-status-1.gif");
+        this.gifTimeoutId = setTimeout(() => {
+          this.currentFingerprintImage = require("@/assets/finger-status-1-last.png");
+        }, gifDuration);
+      } else if (newStep === 3) {
+        this.currentFingerprintImage = require("@/assets/finger-status-2.gif");
+        this.gifTimeoutId = setTimeout(() => {
+          this.currentFingerprintImage = require("@/assets/finger-status-2-last.png");
+        }, gifDuration);
+      } else if (newStep === 4) {
+        this.currentFingerprintImage = require("@/assets/finger-status-3.gif");
+        this.gifTimeoutId = setTimeout(() => {
+          this.currentFingerprintImage = require("@/assets/finger-status-3-last.png");
+        }, gifDuration);
+      } else if (newStep === 5) {
+        this.currentFingerprintImage = require("@/assets/finger-status-compeleted.png");
+      }
+    },
+  },
+  mounted() {
+    this.loadCurrentUserFingerInfo();
+    this.$authEventBus.$on(
+      "startCollectionMessage",
+      this.startCollectionMessage
+    );
+  },
+  beforeDestroy() {
+    clearTimeout(this.gifTimeoutId);
+    this.$authEventBus.$off(
+      "startCollectionMessage",
+      this.startCollectionMessage
+    );
+  },
+  methods: {
+    startCollectionMessage(data) {
+      console.log("startCollectionMessage:", data);
+      
+      if (data.status === 200 || data.result === 0) {
+        // 采集成功
+        const { count, temp, image } = data.data;
+        
+        console.log(`指纹采集进度: ${count}/4`);
+        
+        // 根据count更新采集步骤
+        if (count === 1) {
+          this.fingerRegisterStep = 2; // 第一次采集完成，提示第二次
+        } else if (count === 2) {
+          this.fingerRegisterStep = 3; // 第二次采集完成，提示第三次
+        } else if (count === 3) {
+          this.fingerRegisterStep = 4; // 第三次采集完成，正在处理
+        } else if (count === 4) {
+          // 采集完成，获取到指纹模板
+          this.fingerRegisterStep = 5; // 指纹采集成功
+          this.fingerTemp = temp; // 保存指纹模板
+          console.log("✅ 指纹采集完成，获取到指纹模板");
+          
+          // 自动保存指纹
+          this.$nextTick(() => {
+            this.addFingerprint();
+          });
+        }
+        
+        // 如果有指纹图像，可以显示（可选）
+        if (image) {
+          console.log("收到指纹图像数据");
+        }
+        
+      } else {
+        // 采集失败
+        console.error("指纹采集失败:", data.msg || "未知错误");
+        this.fingerRegisterStep = -1; // 采集异常
+        this.$message?.error?.(data.msg || "指纹采集失败，请重试");
+      }
+    },
+    handleClose() {
+      // 如果在采集过程中，建议添加确认关闭的提示
+    },
+    async handleSelectFinger(finger) {
+      if (this.fingerRegisterStep > 0 && this.fingerRegisterStep < 5) {
+        this.$message({
+          message: "指纹采集尚未完成，请先完成当前采集",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (!finger.fingerInfo) {
+        try {
+          const res = await getMaxFingerSeqApi({
+            devSn: this.devSn,
+            devType: this.devType,
+            fingerNo: finger.index,
+            tenantId: this.tenantId,
+            userId: this.userId,
+          });
+          
+          this.fingerId = res.data.fingerId;
+          this.fid = res.data.fingerSeq;
+          this.selectedFinger = finger;
+          this.fingerRegisterStep = 1;
+          this.fingerTemp = null; // 重置指纹模板
+          
+          console.log(`开始采集 ${finger.label} 指纹，fingerId: ${this.fingerId}, fid: ${this.fid}`);
+          this.startCollection();
+        } catch (error) {
+          console.error("获取指纹信息失败:", error);
+        }
+      } else {
+        this.selectedFinger = finger;
+      }
+    },
+    handleSaveFingerprint() {
+      this.addFingerprint();
+    },
+    handleDeleteFinger() {
+      this.$confirm("确定删除指纹吗？")
+        .then(() => {
+          deleteFingerApi({ fingerId: this.selectedFinger.fingerInfo.id })
+            .then(() => {
+              this.selectedFinger = null;
+              this.fingerRegisterStep = 0;
+              this.$message.success("删除成功");
+              this.loadCurrentUserFingerInfo();
+            })
+        })
+        .catch(() => {});
+    },
+    startCollection() {
+      // 开始采集指纹
+      this.$authEventBus.$emit("startCollection");
+    },
+    loadCurrentUserFingerInfo() {
+      findByUserIdApi({
+        devType: this.devType,
+        tenantId: this.tenantId,
+        userId: this.userId,
+      }).then((res) => {
+        const data = res.data;
+        const newLeftArr = this.leftFingers.map((r) => {
+          const item = data.find((a) => a.fingerNo === r.index);
+          return { ...r, fingerInfo: item };
+        });
+
+        const newRightArr = this.rightFingers.map((r) => {
+          const item = data.find((a) => a.fingerNo === r.index);
+          return { ...r, fingerInfo: item };
+        });
+        this.leftFingers = newLeftArr;
+        this.rightFingers = newRightArr;
+      });
+    },
+    addFingerprint() {
+      if (!this.fingerId) {
+        this.$message.error("未获取到指纹ID");
+        return;
+      }
+
+      if (!this.fingerTemp) {
+        this.$message.error("未获取到指纹模板");
+        return;
+      }
+
+      if (!this.selectedFinger) {
+        this.$message.error("请先选择手指");
+        return;
+      }
+      if (!this.fid) {
+        this.$message.error("未获取到指纹序列号");
+        return;
+      }
+      
+      this.loading = true;
+      console.log("开始保存指纹到服务器...");
+      
+      uploadFingerApi({
+        data: this.fingerTemp,
+        fingerId: this.fingerId,
+      })
+        .then(() => {
+          console.log("✅ 指纹保存成功");
+          this.loadCurrentUserFingerInfo();
+          
+          // 重置状态
+          this.selectedFinger = null;
+          this.fingerRegisterStep = 0;
+          this.fingerTemp = null;
+          this.fingerId = null;
+          this.fid = null;
+          
+          this.$message.success("指纹录入成功！");
+        })
+        .catch((error) => {
+          console.error("❌ 指纹保存失败:", error);
+          this.fingerRegisterStep = -1;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 弹窗样式 */
+.finger-dialog {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f8f8fb;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.close-icon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+/* 内容布局 */
+.finger-register-content {
+  height: calc(100% - 182px);
+  margin-left: 24px;
+  margin-right: 24px;
+  border-radius: 12px;
+}
+
+/* 手部区域样式 */
+.hand-area {
+  width: 210px;
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+}
+
+.hand-image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.hand-image {
+  width: 200px;
+  height: 260px;
+  object-fit: contain;
+}
+
+/* 指尖按钮样式 */
+.finger-buttons-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.finger-circle {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 3px solid #c0c0c0;
+  background-color: #f8f8fb;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.finger-circle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 5px rgba(59, 128, 239, 0.5);
+}
+
+.finger-circle.active {
+  border: 3px solid #3b80ef;
+  background: #3b80ef3f;
+}
+
+.finger-circle.ready {
+  width: 25px;
+  height: 25px;
+  background: url(@/assets/finger-ready.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 指纹状态区域 */
+.fingerprint-status {
+  width: 300px;
+  height: 300px;
+  margin-left: 32px;
+  display: flex;
+  flex-direction: column;
+  border: 1px dashed #d6d9e1;
+  background: white;
+  border-radius: 12px;
+}
+
+.status-header {
+  padding: 12px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #eee;
+}
+
+.status-title {
+  font-size: 14px;
+  color: #666;
+}
+
+.fingerprint-image-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 20px 20px 20px;
+}
+
+.fingerprint-image {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 20px;
+}
+
+.status-text {
+  font-size: 14px;
+  color: #999;
+  text-align: center;
+}
+
+.collect-progress {
+  margin: 0 20px 20px;
+}
+
+.progress-text {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.progress-bar {
+  height: 8px;
+  background-color: #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-inner {
+  height: 100%;
+  background-color: #3b80ef;
+  transition: width 0.3s;
+}
+
+/* 底部按钮 */
+.dialog-footer .el-button {
+  margin: 20px 10px;
+}
+
+.delete-button {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>