我的订单

heyujie

2022-03-03 27d747817373e0181f0469f3af8817fc0c158751

 src/pages/ai/index/detail.vue

@@ -16,6 +16,7 @@
            <el-button

              size="mini"

              round

              class="update-btn"

              @click="upgradeSDKinWin"

              v-if="productDetail.isUpgrade"

              >更新</el-button

@@ -34,48 +35,58 @@
              @click="unloadSDKinWin"

              >卸载</el-button

            >



            <el-button

              size="mini"

              round

              v-if="!isActive && (!detailPrice || showInstallNotActive)"

              @click="downloadSdkInSide"

              >安装</el-button

            >

            <!-- suffix-icon="iconfont iconchushaixuanxiang" -->

            <el-input

              class="activeInput"

              placeholder="请输入激活码"

              size="mini"

              clearable

              :autofocus="true"

              v-model="activeCode"

              v-if="!isActive && !showInstallNotActive"

              v-if="!isActive && !showInstallNotActive && detailPrice"

            >

            </el-input>

            <el-button

              size="mini"

              round

              class="act-btn"

              v-if="!isActive && !showInstallNotActive"

              v-if="!isActive && !showInstallNotActive && detailPrice"

              @click="actived"

              >激活</el-button

            >

            <span

            <!-- <span

              class="icon iconfont"

              v-if="!isActive && !showInstallNotActive"

              @click="activeCode = ''"

              >&#xe6cb;</span

            >

            > -->

          </div>

        </div>

        <div class="back-btn" @click="goback">

        <!-- <div class="back-btn" @click="goback">

          <span class="icon iconfont">&#xe680;</span>

          <span class="back-text">返回上页</span>

        </div>

          <span class="back-text">返回</span>

        </div> -->

      </div>

      <div class="text-area">

        <div class="text-line">

          <span class="icon iconfont">{{ "\ue6b1" }}</span>

          <span class="icon iconfont">&#xe710;</span>

          <span class="title">版本：</span>

          <span class="desc">{{ productDetail.productVersion }}</span>

        </div>

        <div class="text-line">

          <span class="icon iconfont">{{ "\ue6b1" }}</span>

          <span class="icon iconfont">&#xe75b;</span>

          <span class="title">概述：</span>

          <span class="desc">{{ productDetail.description || "暂无" }}</span>

        </div>

        <div class="text-line">

          <span class="icon iconfont">{{ "\ue6b1" }}</span>

          <span class="icon iconfont">&#xe716;</span>

          <span class="title">详述：</span>

          <span class="desc">{{ productDetail.summary || "暂无" }}</span>

        </div>

@@ -133,6 +144,7 @@
          class="rec-item"

          v-for="(item, index) in otherProducts"

          :key="index"

          @click="checkInWindow(item)"

        >

          <div class="icon-img">

            <img

@@ -161,6 +173,43 @@
        </div>

      </div>

    </div>



    <el-dialog

      :visible.sync="showActivateSuccess"

      title="激活成功！"

      width="30%"

      class="active-Dial"

      :before-close="handleClose"

    >

      <div class="dialog-active">

        <ul class="desc">

          <li>

            <label>激活码:</label>

            <span>{{ activedSdkOrApp.activateCode }}</span>

          </li>

          <li>

            <label>产品名称:</label>

            <span>{{ activedSdkOrApp.productName }}</span>

          </li>

          <li>

            <label>配置详情:</label>

            <span>{{ activedSdkOrApp.setting }}</span>

          </li>

          <li>

            <label>服务到期日:</label>

            <span>{{ activedSdkOrApp.expireTime }}</span>

          </li>

          <li>

            <label>许可证:</label>

            <span>{{ activedSdkOrApp.licence }}</span>

          </li>

        </ul>

        <div class="text-right">

          <el-button type="primary" @click="checkMyAlgorith">确定</el-button>

          <p class="tip">提示：请在“已激活”中查看并安装算法</p>

        </div>

      </div>

    </el-dialog>

  </div>

</template>

<script>

@@ -182,11 +231,8 @@
  actApp,

} from "@/api/app";

import { getUrlKey } from "@/api/utils";

// import FileUploader from "@/components/subComponents/FileUpload/index";

export default {

  components: {

    // FileUploader,

  },

  components: {},

  computed: {

    updateNum() {

      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;

@@ -207,7 +253,6 @@
    return {

      installedList: [],

      hasNewVersionSdk: [],

      activeTab: 0,

      hasNewVersionApp: [],

      notInstalledList: [],

      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],

@@ -229,7 +274,6 @@
      isSDKDetail: true,

      actType: "",

      actId: "",

      input3: "",

      select: "",

      activedSdkOrApp: {

        activateCode: "",

@@ -242,8 +286,8 @@
      installedApps: [],

      storeApps: [],

      installFile: {},

      appUpgreading: true,

      sdkUpgreading: true,

      appUpgreading: false,

      sdkUpgreading: false,

      autoRefresh: true,

      productDetailVisible: false,

      isUpgrading: false,

@@ -258,8 +302,6 @@
      showInputCode: false,

      needToUpgradeInWin: false,

      showInstallNotActive: false,

      activeIndex: 0,

      menuArr: ["应用中心", "已激活", "离线升级/安装", "更新"],

    };

  },

  props: {

@@ -269,6 +311,7 @@
    detailProductID: {

      type: String,

    },

    detailPrice: {},

  },

  directives: {

    focus: {

@@ -282,15 +325,20 @@
    this.autoRefreshAppAndSdkState();

    this.getUnActivedList();

    this.getUnActivedAppList();

    this.showBackBtn();

    this.addBackListener();

  },

  beforeDestroy() {

    this.autoRefresh = false;

    this.hiddenBackBtn();

  },

  methods: {

    getDetail(id) {

      getAppDetail({ id: id || this.detailProductID })

        .then((res) => {

          if (res.success) {

            console.log("----------");

            console.log(res);

            this.productDetail = res.data.detail;

            this.otherProducts = res.data.randoms;



@@ -334,7 +382,7 @@
        this.actId = this.productDetail.productBaseId;

        this.isSDKDetail = this.productDetail.productTypeName == "SDK";

        this.isDefaultApp = this.productDetail.productBaseId.length < 10;

    


        this.otherProducts = res.data.randoms;

      });

    },

@@ -473,7 +521,6 @@
          );

          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {

            obj.upgradeLoading = true;



            this.appUpgreading = true;

          }



@@ -502,7 +549,8 @@
            .then((res) => {

              if (res && res.success) {

                app.unloadLoading = false;

                _this.getAllApps();

                // _this.getAllApps();

                this.$emit("flushApp");

                window.parent.postMessage(

                  {

                    msg: "AppUpdate",

@@ -514,6 +562,7 @@
                  message: "卸载应用成功",

                  type: "success",

                });

                this.goback();

              }

            })

            .catch((e) => {

@@ -613,7 +662,8 @@
    },

    checkMyAlgorith() {

      this.showActivateSuccess = false;

      this.activeName = "myAlgorithm";

      this.goback();

      this.activeName = "已激活";

    },

    onFileUpload(file) {

      this.patchFile = { ...file };

@@ -680,7 +730,6 @@
          );

          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {

            obj.upgradeLoading = true;



            this.sdkUpgreading = true;

          }



@@ -720,18 +769,11 @@
            .then((res) => {

              if (res && res.success) {

                sdk.unloadLoading = false;

                this.$notify({

                  title: "成功",

                  message: "卸载完成",

                  type: "success",

                });

                _this.getAllSdk();

                window.parent.postMessage(

                  {

                    msg: "AppUpdate",

                  },

                  "*"

                );

                this.$notify.success("卸载完成");

                // _this.getAllSdk();

                this.$emit("flushSdk");

                window.parent.postMessage({ msg: "AppUpdate" }, "*");

                this.goback();

              }

            })

            .catch((e) => {

@@ -781,17 +823,11 @@
        .then((rsp) => {

          this.productDetailVisible = false;

          this.downloadItem = "";

          this.$notify({

            type: "success",

            message: "算法已安装",

          });

          this.$notify.success("算法已安装");

          this.isUpgrading = false;

        })

        .catch((err) => {

          this.$notify({

            type: "warning",

            message: err.data,

          });

          this.$notify.warning(err.data);

          this.downloadItem = "";

          this.isUpgrading = false;

        });

@@ -827,20 +863,42 @@
      this.$set(item, "isEdit", false);

    },

    autoRefreshAppAndSdkState() {

      // 关闭后退出

      this.getAllApps();

      this.getAllSdk();

      if (!this.autoRefresh) {

        return;

      }

      if (this.appUpgreading) {

        this.getAllApps();

      }

      if (this.sdkUpgreading) {

        this.getAllSdk();

      }

      let _this = this;

      setTimeout(() => {

        _this.autoRefreshAppAndSdkState();

      }, 500);

        if (this.appUpgreading) {

          this.getAllApps();

        }

        if (this.sdkUpgreading) {

          this.getAllSdk();

        }

      }, 1000);

    },

    showBackBtn() {

      window.parent.postMessage(

        {

          msg: "showBack",

        },

        "*"

      );

    },

    hiddenBackBtn() {

      window.parent.postMessage(

        {

          msg: "hiddenBack",

        },

        "*"

      );

    },

    addBackListener() {

      window.addEventListener("message", (e) => {

        if (e.data.msg === "返回应用中心") {

          this.goback();

        }

      });

    },

  },

};

@@ -849,14 +907,12 @@
.detail-page {

  width: 100% !important;

  height: 100%;

  //   background-color: cornsilk;

  box-sizing: border-box;

  text-align: left;

  //   min-width: 1106px;

  .detail-top {

    padding: 35px 60px;

    padding-bottom: 20px;

    //   margin-bottom: 40px;

    border-bottom: 3px solid #f2f2f2;

    .title-area {

      display: flex;

@@ -866,7 +922,7 @@
        position: absolute;

        right: 0;

        top: 0;

        width: 80px;

        width: 51px;

        height: 20px;

        line-height: 20px;

        display: flex;

@@ -874,12 +930,12 @@
        align-items: center;

        cursor: pointer;

        .icon {

          margin-right: 2px;

          margin-right: 3px;

          font-size: 18px;

        }

        .back-text {

          font-size: 14px;

          letter-spacing: 0.1px;

          letter-spacing: 0.5px;

        }

      }

      .icon-img {

@@ -915,6 +971,19 @@
        .right-info-2 {

          display: flex;

          align-items: center;

          .activeInput {

            .el-input__suffix {

              display: flex;

              align-items: center;

              .el-input__suffix-inner {

                border-color: none;

                .el-icon-circle-close:before {

                  content: "\e79d" !important;

                  font-size: 14px;

                }

              }

            }

          }

          .iconfont {

            margin-left: 10px;

            font-size: 15px;

@@ -922,7 +991,8 @@
          }

          .el-input {

            margin-right: 12px;

            width: 220px;

            width: 224px;

            font-size: 12px;

            .el-input__inner {

              border: 1px solid #bdbdbd;

              border-radius: 20px;

@@ -938,19 +1008,23 @@
            background: #f2f2f7;

            border: 1px solid #f2f2f7;

          }

          .update-btn {

            border-color: #23d7ee;

            background-color: rgba(29, 212, 236, 0.1);

          }

          .act-btn {

            background: #23d7ee;

            border: 1px solid #23d7ee;

            color: #f2f2f2;

          }

          .act-btn:hover {

            background: #089fb3 !important;

            border-color: #089fb3 !important;

          }

          .el-button:hover {

            border-color: #23d7ee;

            background-color: rgba(29, 212, 236, 0.1);

          }

          // .act-btn:hover {

          //   background: #089fb3 !important;

          //   border-color: #089fb3 !important;

          // }

          // .el-button:hover {

          //   border-color: #23d7ee;

          //   background-color: rgba(29, 212, 236, 0.1);

          // }

          .el-button + .el-button {

            margin-left: 12px;

          }

@@ -961,11 +1035,9 @@
      .text-line {

        line-height: 17px;

        height: 25px;



        // margin-top: 6px;

        .icon {

          font-size: 14px;

          margin-right: 2px;

          margin-right: 4px;

        }

        .title {

          font-size: 12px;

@@ -997,16 +1069,13 @@
        margin-bottom: 10px;



        .title {

          width: 80px;

          height: 20px;

          display: inline-block;

          line-height: 20px;

          padding: 0px 10px;

          letter-spacing: 0.5px;

          font-size: 12px;

          color: #828282;

          display: flex;

          align-items: center;

          justify-content: center;

          font-weight: bold;

          border: 1px solid;

          border: 1px solid #e0e0e0;

          box-sizing: border-box;

          border-radius: 22px;

@@ -1046,15 +1115,16 @@
      font-weight: bold;

      letter-spacing: 0.5px;

      line-height: 26px;

          margin-bottom: 20px;

      margin-bottom: 20px;

    }

  }

  .rec-items {

    .rec-item {

      cursor: pointer;

      float: left;

      display: flex;

      margin: 0 15px;

         margin-bottom: 30px;

      margin-bottom: 30px;

      padding: 2px 0;

      height: 62px;

      box-sizing: border-box;

@@ -1076,9 +1146,14 @@
          font-size: 14px;

          font-weight: bold;

          line-height: 28px;

          width: 116px;

          height: 28px;

          letter-spacing: 0.1px;

          color: #4f4f4f;



          overflow: hidden;

          white-space: nowrap;

          text-overflow: ellipsis;

        }

        .desc-2 {

          font-size: 12px;

@@ -1086,22 +1161,20 @@
        }

      }

      .right-btn {

        // width: 20px;

        padding: 5px 0;

        .el-button {

          padding: 3px 12px;

          background-color: #1dd4ec !important;

          border-color: #1dd4ec !important;

          border-radius: 22px;

          background-color: #f2f2f7 !important;

          border-color: #f2f2f7 !important;

          color: #4f4f4f;

          font-size: 12px;

          font-weight: bold;

        }

        // .el-button--primary:focus {

        //   background: #0cabc0 !important;

        //   border-color: #0cabc0 !important;

        // .el-button--primary:hover {

        //   background: #089fb3 !important;

        //   border-color: #089fb3 !important;

        // }

        .el-button--primary:hover {

          background: #089fb3 !important;

          border-color: #089fb3 !important;

        }

      }

    }

  }