labsop_experiment_android/pages/setting/index.vue

<template>
  <view class="setting-wrap">
    <div class="header">
      <div class="name">智能实验终端</div>
      <div class="activation-btn" @click="confirm">激活终端</div>
    </div>
    <view class="lab-input-wrap">
      <view class="input-col">
        <view class="title">服务器IP:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="ip"
            type="text"
            placeholder="请输入服务器IP"
          />
        </view>
      </view>
      <view class="input-col">
        <view class="title required">终端编号:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="no"
            type="text"
            placeholder="请输入终端编号"
          />
        </view>
      </view>
      <view class="input-col">
        <view class="title">终端租户码:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="tenant"
            type="text"
            placeholder="请输入终端租户码"
          />
        </view>
      </view>
      <view class="input-col">
        <view class="title">秘钥:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="token"
            type="text"
            placeholder="请输入秘钥"
          />
        </view>
      </view>
      <view class="input-col">
        <view class="title">微服务:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="service_path"
            type="text"
            placeholder="请输入微服务路径"
          />
        </view>
      </view>
      <view class="input-col">
        <view class="title">sdk:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="sdkKey"
            type="text"
            placeholder="请输入sdk"
          />
        </view>
      </view>
      <view class="input-col">
        <view class="title">logo:</view>
        <view class="input-box">
          <input
            class="lab-input"
            v-model="headerImg"
            type="text"
            placeholder="请输入sdk"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  const module = uni.requireNativePlugin("leven-arcFace-ArcFaceModule");
  export default {
    data() {
      return {
        ip: "",
        no: "",
        tenant: "",
        token: "",
        service_path: "",
        sdkKey: "CUjFXiqfJtDp6gZKUPKTSPLuVsKoyqw7WPgbQA5o7ebp",
        headerImg: "static/images/header.png",
      };
    },
    onMounted() {
      this.ip =
        uni.getStorageSync("labsop_ip") ||
        process.uniEnv.VUE_APP_MicroSrvProxy_API;
      this.no = uni.getStorageSync("labsop_no") || "";
      this.tenant =
        uni.getStorageSync("labsop_tenant") || process.uniEnv.VUE_APP_TENANT;
      this.token =
        uni.getStorageSync("labsop_android_token") ||
        process.uniEnv.VUE_APP_TOKEN;
      this.service_path = uni.getStorageSync("labsop_service_path") || "";
      this.sdkKey =
        uni.getStorageSync("labsop_sdkKey") ||
        "CUjFXiqfJtDp6gZKUPKTSPLuVsKoyqw7WPgbQA5o7ebp";
      this.headerImg =
        uni.getStorageSync("labsop_headerImg") || "static/images/header.png";
    },
    onShow() {
      this.ip =
        uni.getStorageSync("labsop_ip") ||
        process.uniEnv.VUE_APP_MicroSrvProxy_API;
      this.no = uni.getStorageSync("labsop_no") || "";
      this.tenant =
        uni.getStorageSync("labsop_tenant") || process.uniEnv.VUE_APP_TENANT;
      this.token =
        uni.getStorageSync("labsop_android_token") ||
        process.uniEnv.VUE_APP_TOKEN;
      this.service_path = uni.getStorageSync("labsop_service_path") || "";
      this.sdkKey =
        uni.getStorageSync("labsop_sdkKey") ||
        "CUjFXiqfJtDp6gZKUPKTSPLuVsKoyqw7WPgbQA5o7ebp";
      this.headerImg =
        uni.getStorageSync("labsop_headerImg") || "static/images/header.png";
    },
    onLoad() {},
    methods: {
      testSave() {
        uni.setStorageSync("labsop_ip", this.ip || "");
        uni.setStorageSync("labsop_no", this.no || "");
        uni.setStorageSync("labsop_tenant", this.tenant || "");
        uni.setStorageSync("labsop_android_token", this.token || "");
        uni.setStorageSync("labsop_service_path", this.service_path || "");
        uni.setStorageSync(
          "labsop_sdkKey",
          this.sdkKey || "CUjFXiqfJtDp6gZKUPKTSPLuVsKoyqw7WPgbQA5o7ebp"
        );
        this.headerImg =
          uni.getStorageSync("labsop_headerImg") || "static/images/header.png";
        uni.redirectTo({
          url: "/",
        });
      },
      // 激活引擎
      confirm() {
        // this.testSave();
        // return;
        if (!this.no) {
          uni.showToast({
            title: "终端编号不能为空",
            icon: "none",
            duration: 1000,
          });
          return;
        }
        module.activeEngine(
          {
            appId: "F4G44DgYsCFdZbfi4va9aE81bhTsRjHQvFUXxr9V5ym9",
            sdkKey: this.sdkKey,
          },
          (res) => {
            console.log(res);
            if (res.code == 0 || res.code == 90114) {
              uni.showModal({
                title: "提示",
                content: "确认设置" + this.no + "为当前系统的终端编号？",
                success: (res) => {
                  if (res.confirm) {
                    this.clearFace();
                    uni.setStorageSync("labsop_ip", this.ip || "");
                    uni.setStorageSync("labsop_no", this.no || "");
                    uni.setStorageSync("labsop_tenant", this.tenant || "");
                    uni.setStorageSync(
                      "labsop_android_token",
                      this.token || ""
                    );
                    uni.setStorageSync(
                      "labsop_service_path",
                      this.service_path || ""
                    );
                    uni.setStorageSync(
                      "labsop_sdkKey",
                      this.sdkKey ||
                        "CUjFXiqfJtDp6gZKUPKTSPLuVsKoyqw7WPgbQA5o7ebp"
                    );
                    this.headerImg =
                      uni.getStorageSync("labsop_headerImg") ||
                      "static/images/header.png";
                    uni.showToast({
                      title: "保存成功",
                      duration: 1000,
                    });
                    setTimeout(() => {
                      plus.runtime.restart();
                    }, 1000);
                  }
                },
              });
            } else {
              uni.showToast({
                title: "激活失败，请重新确认激活",
                icon: "none",
                duration: 1000,
              });
            }
          }
        );
      },
      // 清空人脸库
      clearFace() {
        module.clearFace((res) => {
          console.log("清空人脸库结果", res);
        });
      },
      backHome() {
        uni.redirectTo({
          url: "/pages/home/index",
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .setting-wrap {
    width: 100%;
    height: 100vh;
    background: #fff;
    .header {
      background: skyblue;
      width: 100%;
      height: 12.6vh;
      box-sizing: border-box;
      display: flex;
      .name {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6vw;
        color: #fff;
      }
      .activation-btn {
        font-size: 1.6vw;
        letter-spacing: 2px;
        color: #fff;
        width: 15vw;
        height: 100%;
        background: #395294;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .lab-input-wrap {
      padding: 8vh 6vw 0 6vw;
      display: flex;
      flex-wrap: wrap;
      .input-col {
        width: 50%;
        display: flex;
        margin-bottom: 40px;
        padding-right: 40px;
        .title {
          width: 9vw;
          font-size: 1.4vw;
          margin-right: 20px;
          text-align: right;
        }
        .input-box {
          flex: 1;
          border-bottom: 1px solid #ccc;
          .lab-input {
            padding-left: 4px;
            padding-bottom: 10px;
          }
        }
      }
    }
    .required::before {
      margin-right: 4px;
      color: red;
      content: "*";
      font-size: 20px;
    }
  }
</style>