长春跟踪app

heyujie

2021-08-20 3b9477e4179ac9fca90a1abeb2cf544155d832bc

 src/pages/desktop/index/components/Desktop.vue

@@ -1,25 +1,299 @@
<template>
  <div class="desktop">
    <d-frame v-for="item in this.$store.state.desktop.frames" :data="item" :key="item.id"></d-frame>
    <safari :data="$store.state.desktop.safari" v-if="$store.state.desktop.safari.active"></safari>
    <d-frame
      v-for="item in this.$store.state.desktop.frames"
      :data="item"
      :key="item.id"
    ></d-frame>
    <safari
      :data="$store.state.desktop.safari"
      v-if="$store.state.desktop.safari.active"
    ></safari>

    <div class="warn-tag" v-if="showFreeVersion">
      <span class="text"
        >试用版尚未激活，仅支持部分功能使用，如需使用全部功能，请尽快激活系统。</span
      >
      <span class="go-to" @click="gotoActive">前往激活</span>
      <span class="icon iconfont" @click="showFreeVersion = false"
        >&#xe61b;</span
      >
    </div>

    <el-dialog title="激活SmartAI" :visible.sync="dialogVisible" width="40%">
      <div class="ver"><span class="ver-text">版本：</span>{{ version }}</div>
      <div class="ver">
        <span class="ver-text">状态：</span>{{ versionState }}
      </div>
      <el-divider></el-divider>
      <div class="info">
        如果还没有产品密钥，你可以使用手机扫码或前往此链接
        <a href="http://os.smartai.com:7004" target="_blank"
          >http://os.smartai.com:7004</a
        >
        购买。
      </div>

      <!-- <img class="qr-code-img" src="/images/desktop/weather.png" /> -->
      <!-- <img class="qr-code-img" src="http://192.168.8.10:7009/version/offline/qrcode" /> -->
      <img
        class="qr-code-img"
        src="http://192.168.20.189:7009/version/offline/qrcode"
      />

      <el-divider></el-divider>

      <div class="ask">
        如果你具有SmartAI提供的产品密钥，请在此处输入激活SmartAI。
      </div>

      <div class="validate">
        <form id="myForm">
          <!-- <el-input
            class="single-input"
            size="small"
            ref="secrectKey"
            :maxlength="4"
            v-model="secrectKey"
            placeholder=""
            @input="onInput(1)"
          ></el-input
          >-
          <el-input
            class="single-input"
            size="small"
            ref="input2"
            :maxlength="4"
            v-model="input2"
            placeholder=""
            @input="onInput(2)"
          ></el-input
          >-
          <el-input
            class="single-input"
            size="small"
            ref="input3"
            :maxlength="4"
            v-model="input3"
            placeholder=""
            @input="onInput(3)"
          ></el-input>
          -
          <el-input
            class="single-input"
            size="small"
            ref="input4"
            :maxlength="4"
            v-model="input4"
            placeholder=""
            @input="onInput(4)"
          ></el-input
          >-
          <el-input
            class="single-input"
            size="small"
            ref="input5"
            :maxlength="4"
            v-model="input5"
            placeholder=""
            @input="onInput(5)"
          ></el-input> -->

          <el-input
            type="textarea"
            autosize
            style="width: 480px"
            placeholder="将产品密钥粘贴在此处"
            v-model="secrectKey"
          >
          </el-input>
        </form>

        <el-upload
          class="upload-demo"
          action
          :http-request="uploadKey"
          :limit="1"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">导入产品密钥文件</el-button>

          <!-- <div class="el-upload__tip" slot="tip"></div> -->
        </el-upload>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">继续试用</el-button>
        <el-button type="primary" @click="activateVersion">激活</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DFrame from './DFrame';
import Safari from './Safari';

import DFrame from "./DFrame";
import Safari from "./Safari";
import {
  getActiveQrCode,
  getSN,
  activateVersion,
  uploadKey,
} from "@/api/system";
export default {
  name: "Desktop",
  components: {
    DFrame, Safari
  }
}
    DFrame,
    Safari,
  },
  data() {
    return {
      showFreeVersion: true,
      dialogVisible: false,
      version: "SmartAI试用版",
      versionState: "尚未激活",
      secrectKey: "",
      input2: "",
      input4: "",
      input3: "",
      input5: "",
    };
  },
  mounted() {
    getSN().then((res) => {
      this.showFreeVersion = res.data.sn == "";
    });
  },
  methods: {
    activateVersion() {
      if (this.secrectKey.trim()=="") {
        this.$message.warning("请先填写产品密钥")
        return 
      }
      activateVersion({code:this.secrectKey.trim()}).then((res) => {
        debugger
        if (res.code==200) {
          this.$notify.success("激活成功")
          this.goToSysInfo()
          this.dialogVisible = false;

        }else{
          this.$notify.error(res.msg)
        }
      }).catch((err) => {
          this.$notify.error(err.msg)
      })
    },
    goToSysInfo() {
      window.parent.postMessage({ msg: `toVindicate?menu=系统信息` }, "*");
    },
    gotoActive() {
      this.showFreeVersion = false;
      this.dialogVisible = true;
    },
    uploadKey(params) {
      let param = new FormData();
      param.append("code", params.file);
      uploadKey(param).then(
        (res) => {
          this.$message.success("导入成功");
          this.secrectKey = res.data;
        },
        (err) => {
          this.$message.error("导入失败");
        }
      );
    },
    onInput(val) {
      if (this[`input${val}`].length == 4 && val < 5) {
        this.$refs[`input${val + 1}`].focus();
      }
      if (this[`input${val}`].length == 0 && val > 0) {
        this.$refs[`input${val - 1}`].focus();
      }
    },
  },
};
</script>

<style scoped>
<style lang="scss" >
.desktop {
  width: 100%;
  height: 100%;
  .el-dialog__header {
    padding: 15px 20px 10px;
    text-align: left;
    font-weight: 600;
  }
  .el-dialog__body {
    text-align: left;
    padding: 30px 50px;
    padding-top: 20px;
  }
  .el-divider--horizontal {
    margin: 20px 0;
  }
  .validate {
    display: flex;
    align-items: baseline;
    margin-top: 15px;
  }
  #myForm {
    display: flex;
    align-items: center;
    margin-right: 10px;
    .single-input {
      margin: 0 8px;
      width: 60px;
    }
  }
  .ver {
    margin-bottom: 10px;
    font-size: 16px;
    .ver-text {
      font-weight: 600;
    }
  }
  .info {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .qr-code-img {
    // width: 120px;
    // height: 120px;
  }
  .ask {
    margin-top: 20px;
    font-size: 15px;
  }
}
.warn-tag {
  width: 35%;
  text-align: left;
  box-sizing: border-box;
  padding: 0 25px;
  height: 45px;
  background-color: rgba(255, 238, 230, 1);
  z-index: 99999;
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 55px;
  left: calc(50% - 17.5%);
  line-height: 45px;
  border-radius: 5px;
  .go-to {
    color: rgba(71, 153, 247, 1);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
  }
  .text {
    font-size: 13px;
  }
  .icon {
    font-size: 14px;
    cursor: pointer;
  }
}
</style>