leadal-auth 0.0.2 → 0.0.3

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

@@ -1,707 +0,0 @@
-<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
-    );
-     // 如果正在采集指纹，需要取消采集
-     if (this.fingerRegisterStep > 0 && this.fingerRegisterStep < 5) {
-      this.cancelCollection();
-    }
-  },
-  methods: {
-    cancelCollection() {
-      this.$authEventBus.$emit("cancelCollection");
-    },
-    
-    // 处理用户主动取消采集
-    handleCancelCollection() {
-      this.$confirm("确定要退出指纹采集吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        this.cancelCollection();
-        this.$message.info("已退出指纹采集");
-      }).catch(() => {
-        // 用户取消操作
-      });
-    },
-    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>