修改问题

src/components/payment/Confirmorder.vue

@@ -1,23 +1,20 @@
 <template>
   <!-- 未支付 -->
-  <div class="Nopyment" v-loading="loading">
+  <div v-loading="loading" class="Nopyment">
     <div class="message">
       <div>
-        <img
-          :src="require('../../assets/teacherdev/' + getimgurl(data) + '.png')"
-          alt=""
-        />
+        <img :src="getCoverImg(data)" alt="" />
       </div>
       <div class="text">
         <p class="p1">
           {{ data.name }}
         </p>
         <p class="p2">
-          <span><!-- 教研资料 -->{{ $t("Key214") }}</span>
+          <span><!-- 教研资料 -->{{ $t('Key214') }}</span>
         </p>
         <p class="p3">
           <span v-for="(item, i) in data.teacher" :key="i + item">
-            {{ item }}{{ i == data.teacher.length - 1 ? "" : "," }}
+            {{ item }}{{ i == data.teacher.length - 1 ? '' : ',' }}
           </span>
         </p>
       </div>
@@ -26,33 +23,21 @@
       </div>
     </div>
     <div class="promotionCode">
-      <span class="sp1"> <!-- 使用优惠码 -->{{ $t("Key791") }} </span>
-      <input
-        v-model="discount_code"
-        type="text"
-        :placeholder="$t('Key792')"
-        @input="changeCode"
-      />
-      <span
-        class="sp2"
-        v-loading="codeloading"
-        @click="verifyCode"
-        v-if="isShow"
-      >
-        <!-- 确定 -->{{ $t("Key94") }}
+      <span class="sp1"> <!-- 使用优惠码 -->{{ $t('Key791') }} </span>
+      <input v-model="discount_code" type="text" :placeholder="$t('Key792')" @input="changeCode" />
+      <span v-if="isShow" v-loading="codeloading" class="sp2" @click="verifyCode">
+        <!-- 确定 -->{{ $t('Key94') }}
       </span>
       <template v-else>
-        <span class="sp2" v-if="discount_code_status == 1"
-          >-¥<span v-html="changePrice(discount_money, 16)"></span
-        ></span>
+        <span v-if="discount_code_status == 1" class="sp2">
+          -¥<span v-html="changePrice(discount_money, 16)"></span>
+        </span>
       </template>
     </div>
     <div class="total">
       <p class="p1">
-        <span> {{ $t("Key790") }}： </span>
-        <span class="co-value"
-          >¥<span v-html="changePrice(data.price, 16)"></span
-        ></span>
+        <span> {{ $t('Key790') }}： </span>
+        <span class="co-value">¥<span v-html="changePrice(data.price, 16)"></span></span>
       </p>
       <!-- <p class="p2">
         <span> {{ $t("Key54") }}： </span>
@@ -61,30 +46,27 @@
         ></span>
       </p> -->
       <p class="p3">
-        <span> {{ $t("Key55") }}： </span>
-        <span class="co-value"
-          >¥<span v-html="changePrice(receivables_money, 24)"></span
-        ></span>
+        <span> {{ $t('Key55') }}： </span>
+        <span class="co-value">¥<span v-html="changePrice(receivables_money, 24)"></span></span>
       </p>
     </div>
     <div class="submitBtn">
-      <button @click="buy(data)"><!-- 确定订单 -->{{ $t("Key58") }}</button>
+      <button @click="buy(data)"><!-- 确定订单 -->{{ $t('Key58') }}</button>
     </div>
   </div>
 </template>
 
 <script>
-//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》from ‘《组件路径》';
-import { LearnWebSI } from "@/api/api";
+import { LearnWebSI } from '@/api/api';
+import { getCoverImg } from '@/utils/index';
+
 export default {
-  //import引入的组件需要注入到对象中才能使用
-  components: {},
-  props: ["data", "changeOrderNumber", "goods_type", "goods_detail_type"],
+  props: ['data', 'changeOrderNumber', 'goods_type', 'goods_detail_type'],
   data() {
-    //这里存放数据
+    // 这里存放数据
     return {
-      discount_code: "", //优惠码
+      getCoverImg,
+      discount_code: '', // 优惠码
       discount_money: 0, // 优惠金额
       receivables_money: this.data.price, // 应收款
       loading: false,
@@ -93,82 +75,40 @@ export default {
       discount_code_status: 0,
     };
   },
-  //计算属性 类似于data概念
-  computed: {},
-  //监控data中数据变化
-  watch: {},
-  //方法集合
+  // 方法集合
   methods: {
     changePrice(price, fontSize1, fontSize2) {
-      price = price ? price * 1 : 0;
-      price = price.toFixed(2);
-      price = price.toString();
-      let arr = price.split(".");
-      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
-        arr[0]
-      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
-        arr[1]
-      }</span>`;
+      let _price = price ? Number(price) : 0;
+      _price = _price.toFixed(2).toString();
+      let arr = _price.split('.');
+      let str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
+      }px;">${arr[1]}</span>`;
 
       return str;
     },
     changediscount_money(value) {
-      if (value == 0) {
-        return "-¥" + value + ".00";
-      }
-    },
-    //   根据不同的文件类型展示不同图片
-    getimgurl(item) {
-      let index = item.tag.indexOf("downloadable");
-      let type = "";
-      if (index != -1) {
-        type = item.tag[2];
-      } else {
-        type = item.tag[1];
-      }
-      switch (type) {
-        case "ppt":
-          return "ppt";
-        case "pptx":
-          return "ppt";
-        case "pdf":
-          return "pdf";
-        case "xlsx":
-          return "exceil";
-        case "xls":
-          return "exceil";
-        case "doc":
-          return "word";
-        case "docx":
-          return "word";
-        case "word":
-          return "word";
-        default:
-          return "word";
+      if (value === 0) {
+        return `-¥${value}.00`;
       }
     },
     // 购买
     buy(item) {
       this.loading = true;
       // 首先添加订单
-      let Mnam = "order-order_manager-AddMyOrder";
+      let Mnam = 'order-order_manager-AddMyOrder';
       LearnWebSI(Mnam, {
-        goods_id: item.id, //商品id
-        goods_type: this.goods_type, //商品类型
-        goods_name: item.name, //商品名称
-        goods_picture_id: item.coverFileId, //封面图片id
-        goods_person_name_desc: this.data.pymentTeacher, //老师
-        price: item.price, //价格
+        goods_id: item.id, // 商品id
+        goods_type: this.goods_type, // 商品类型
+        goods_name: item.name, // 商品名称
+        goods_picture_id: item.coverFileId, // 封面图片id
+        goods_person_name_desc: this.data.pymentTeacher, // 老师
+        price: item.price, // 价格
         discount_code: this.back_discount_code,
         goods_detail_type: this.goods_detail_type,
       })
         .then((res) => {
-          this.changeOrderNumber(
-            res.id,
-            this.back_discount_code,
-            this.discount_money,
-            this.receivables_money
-          );
+          this.changeOrderNumber(res.id, this.back_discount_code, this.discount_money, this.receivables_money);
           this.loading = false;
           // 调取支付接口
         })
@@ -176,211 +116,216 @@ export default {
           this.loading = false;
         });
     },
-    //更改优惠码
+    // 更改优惠码
     changeCode() {
       this.isShow = true;
       this.receivables_money = this.data.price;
-      this.discount_money = "0.00";
+      this.discount_money = '0.00';
     },
     clearData() {
-      this.discount_code = "";
-      this.discount_money = "0.00";
+      this.discount_code = '';
+      this.discount_money = '0.00';
       this.receivables_money = this.data.price;
     },
-    //验证优惠码
+    // 验证优惠码
     verifyCode() {
-      if (this.discount_code == "") {
-        this.$message.warning(this.$t("Key109"));
+      if (this.discount_code === '') {
+        this.$message.warning(this.$t('Key109'));
         return;
       }
       this.codeloading = true;
-      let MethodName = "order-order_manager-VerificationDiscountCode";
+      let MethodName = 'order-order_manager-VerificationDiscountCode';
       let resData = JSON.parse(JSON.stringify(this.data));
       let data = {
-        goods_id: resData.id, //商品id
-        goods_type: this.goods_type, //商品类型
-        price: resData.price, //价格
+        goods_id: resData.id, // 商品id
+        goods_type: this.goods_type, // 商品类型
+        price: resData.price, // 价格
         discount_code: this.discount_code.trim(),
       };
       LearnWebSI(MethodName, data).then((res) => {
         this.codeloading = false;
         this.discount_code_status = res.discount_code_status;
-        if (this.discount_code_status != 1 && this.discount_code_status != 2) {
-          this.$message.warning(this.$t("Key696")); //优惠码无效
+        if (this.discount_code_status !== 1 && this.discount_code_status !== 2) {
+          this.$message.warning(this.$t('Key696')); // 优惠码无效
+        } else if (this.discount_code_status === 2) {
+          this.$message.warning(this.$t('Key697')); // 优惠码已被使用
         } else {
-          if (this.discount_code_status == 2) {
-            this.$message.warning(this.$t("Key697")); //优惠码已被使用
-          } else {
-            this.isShow = false;
-            this.back_discount_code = res.discount_code;
-            this.discount_money = res.discount_money; // 优惠金额
-            this.receivables_money = res.receivables_money; // 应收款
-          }
+          this.isShow = false;
+          this.back_discount_code = res.discount_code;
+          this.discount_money = res.discount_money; // 优惠金额
+          this.receivables_money = res.receivables_money; // 应收款
         }
       });
     },
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  //生命周期-创建之前
+  // 生命周期-创建之前
   beforeCreated() {},
-  //生命周期-挂载之前
-  beforeMount() {},
-  //生命周期-更新之前
+  // 生命周期-更新之前
   beforUpdate() {},
-  //生命周期-更新之后
-  updated() {},
-  //生命周期-销毁之前
+  // 生命周期-销毁之前
   beforeDestory() {},
-  //生命周期-销毁完成
+  // 生命周期-销毁完成
   destoryed() {},
-  //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
 };
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .Nopyment {
   .message {
+    display: flex;
     width: 100%;
     height: 152px;
-    background: rgba(70, 70, 70, 0.03);
+    background: rgba(70, 70, 70, 3%);
     border-radius: 8px;
-    display: flex;
+
     img {
       width: 120px;
       height: 120px;
-      margin-left: 16px;
       margin-top: 16px;
+      margin-left: 16px;
     }
+
     .text {
       margin-left: 24px;
+
       .p1 {
+        display: -webkit-box;
         width: 360px;
+
         //   height: 45px;
         max-height: 48px;
+        margin-top: 22px;
+        overflow: hidden;
         font-size: 16px;
         line-height: 20px;
         color: #2c2c2c;
-
-        margin-top: 22px;
+        text-overflow: ellipsis;
         word-break: break-all;
-        display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
-        overflow: hidden;
       }
+
       .p2 {
         margin-top: 10px;
+
         span {
           width: 64px;
           height: 24px;
-          background: #ffefd8;
-
-          border-radius: 4px;
-          font-weight: bold;
+          padding: 2px 8px;
           font-size: 12px;
-          text-align: center;
-          color: #ff9900;
-
+          font-weight: bold;
           line-height: 24px;
-          padding: 2px 8px;
+          color: #f90;
+          text-align: center;
+          background: #ffefd8;
+          border-radius: 4px;
         }
       }
+
       .p3 {
         margin-top: 10px;
       }
     }
+
     .price {
       p {
-        margin-left: 67px;
         margin-top: 22px;
-        font-weight: bold;
+        margin-left: 67px;
         font-size: 16px;
-        text-align: right;
+        font-weight: bold;
         color: #ff4c00;
+        text-align: right;
       }
     }
   }
+
   .promotionCode {
     display: flex;
-    justify-content: flex-start;
     align-self: center;
+    justify-content: flex-start;
     width: 100%;
-    margin-top: 24px;
     height: 58px;
+    margin-top: 24px;
     line-height: 56px;
-    border-top: 1px solid rgba(44, 44, 44, 0.15);
-    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+    border-top: 1px solid rgba(44, 44, 44, 15%);
+    border-bottom: 1px solid rgba(44, 44, 44, 15%);
+
     .sp1 {
       font-size: 16px;
-      color: #000000;
+      color: #000;
     }
+
     input {
-      padding: 0 24px;
+      box-sizing: border-box;
       flex: 1;
       height: 56px;
-      outline: none;
+      padding: 0 24px;
       border: none;
-      box-sizing: border-box;
+      outline: none;
     }
+
     .sp2 {
-      cursor: pointer;
       font-size: 16px;
-      color: #ff9900;
+      color: #f90;
+      cursor: pointer;
     }
   }
+
   .total {
     width: 656px;
-    text-align: right;
-    color: #000000;
-    font-size: 16px;
     padding-top: 24px;
+    font-size: 16px;
+    color: #000;
+    text-align: right;
+
     > p {
       > span {
         display: inline-block;
       }
+
       .co-value {
         width: 160px;
       }
     }
+
     .p1 {
       > span {
         display: inline-block;
         line-height: 24px;
       }
     }
+
     .p2 {
       margin: 16px 0 10px;
     }
+
     .p3 {
       > span {
         line-height: 36px;
       }
+
       .co-value {
         font-size: 24px;
         color: #ff4c00;
       }
     }
   }
+
   .submitBtn {
-    text-align: right;
     margin-top: 16px;
+    text-align: right;
+
     button {
       width: 120px;
       height: 40px;
-      background: #ff9900;
-
-      border-radius: 4px;
-      color: white;
       line-height: 40px;
+      color: white;
       text-align: center;
+      cursor: pointer;
+      background: #f90;
       border: none;
+      border-radius: 4px;
       outline: none;
-      cursor: pointer;
     }
   }
 }

src/components/payment/Payment.vue

@@ -1,23 +1,20 @@
 <template>
   <!-- 支付 -->
-  <div class="Nopyment" v-loading="loading">
+  <div v-loading="loading" class="Nopyment">
     <div class="message">
       <div>
-        <img
-          :src="require('../../assets/teacherdev/' + getimgurl(data) + '.png')"
-          alt=""
-        />
+        <img :src="getCoverImg(data)" alt="" />
       </div>
       <div class="text">
         <p class="p1">
           {{ data.name }}
         </p>
         <p class="p2">
-          <span> <!-- 教研资料 -->{{ $t("Key214") }} </span>
+          <span> <!-- 教研资料 -->{{ $t('Key214') }} </span>
         </p>
         <p class="p3">
           <span v-for="(item, i) in data.teacher" :key="i + item">
-            {{ item }}{{ i == data.teacher.length - 1 ? "" : "," }}
+            {{ item }}{{ i == data.teacher.length - 1 ? '' : ',' }}
           </span>
         </p>
       </div>
@@ -26,13 +23,9 @@
       </div>
     </div>
     <div class="pay-platform">
-      <p class="pay-platform-title"><!-- 选择支付平台 -->{{ $t("Key473") }}</p>
+      <p class="pay-platform-title"><!-- 选择支付平台 -->{{ $t('Key473') }}</p>
       <ul class="pay-platform-list">
-        <li
-          :class="item.isSelected ? 'active' : ''"
-          v-for="(item, index) in platList"
-          :key="'plat' + index"
-        >
+        <li v-for="(item, index) in platList" :key="'plat' + index" :class="item.isSelected ? 'active' : ''">
           <img :src="item.img" class="plat-logo" />
           <img src="../../assets/pay/active.png" class="active-icon" />
         </li>
@@ -40,7 +33,7 @@
     </div>
     <div class="total">
       <p class="p1">
-        <span> {{ $t("Key790") }}： </span>
+        <span> {{ $t('Key790') }}： </span>
         <span class="co-value">¥<span v-html="changePrice(data.price, 16)"></span></span>
       </p>
       <!-- <p class="p2">
@@ -60,111 +53,70 @@
         </span>
       </p> -->
       <p class="p3">
-        <span> {{ $t("Key55") }}： </span>
-        <span class="co-value"
-          >¥<span v-html="changePrice(data.receivables_money, 24)"></span
-        ></span>
+        <span> {{ $t('Key55') }}： </span>
+        <span class="co-value">¥<span v-html="changePrice(data.receivables_money, 24)"></span></span>
       </p>
     </div>
     <div class="submitBtn">
-      <button @click="buy(data)"><!-- 去支付 -->{{ $t("Key474") }}</button>
+      <button @click="buy(data)"><!-- 去支付 -->{{ $t('Key474') }}</button>
     </div>
   </div>
 </template>
 
 <script>
-//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》from ‘《组件路径》';
-import { LearnWebSI } from "@/api/api";
+import { LearnWebSI } from '@/api/api';
+import { getCoverImg } from '@/utils/index';
+
 export default {
-  //import引入的组件需要注入到对象中才能使用
-  components: {},
-  props: ["data", "orderNumber", "closePyment"],
+  props: ['data', 'orderNumber', 'closePyment'],
   data() {
-    //这里存放数据
+    // 这里存放数据
     return {
-      discount_code: "", //优惠码
+      getCoverImg,
+      discount_code: '', // 优惠码
       discount_money: 0, // 优惠金额
       receivables_money: this.data.price, // 应收款
       loading: false,
       platList: [
         {
-          img: require("../../assets/pay/shouxinyi.png"),
+          img: require('../../assets/pay/shouxinyi.png'),
           isSelected: true,
         },
       ],
     };
   },
-  //计算属性 类似于data概念
-  computed: {},
-  //监控data中数据变化
-  watch: {},
-  //方法集合
   methods: {
     changePrice(price, fontSize1, fontSize2) {
-      price = price ? price * 1 : 0;
-      price = price.toFixed(2);
-      price = price.toString();
-      let arr = price.split(".");
-      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
-        arr[0]
-      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
-        arr[1]
-      }</span>`;
+      let _price = price ? Number(price) : 0;
+      _price = _price.toFixed(2).toString();
+      let arr = _price.split('.');
+      let str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
+      }px;">${arr[1]}</span>`;
 
       return str;
     },
     changediscount_money(value) {
-      if (value == 0) {
-        return "-¥" + value + ".00";
-      }
-    },
-    //   根据不同的文件类型展示不同图片
-    getimgurl(item) {
-      let index = item.tag.indexOf("downloadable");
-      let type = "";
-      if (index != -1) {
-        type = item.tag[2];
-      } else {
-        type = item.tag[1];
-      }
-      switch (type) {
-        case "ppt":
-          return "ppt";
-        case "pptx":
-          return "ppt";
-        case "pdf":
-          return "pdf";
-        case "xlsx":
-          return "exceil";
-        case "xls":
-          return "exceil";
-        case "doc":
-          return "word";
-        case "docx":
-          return "word";
-        case "word":
-          return "word";
-        default:
-          return "word";
+      if (value === 0) {
+        return `-¥${value}.00`;
       }
     },
     // 购买
-    buy(item) {
+    buy() {
       this.loading = true;
       // 首先添加订单
-      let Mnam = "order-order_manager-PayMyOrder";
+      let Mnam = 'order-order_manager-PayMyOrder';
       LearnWebSI(Mnam, {
-        id: this.orderNumber, //商品id
-        pay_money: this.data.receivables_money, //支付金额
-        bank_transaction_sn: "", //银行交易流水号
+        id: this.orderNumber, // 商品id
+        pay_money: this.data.receivables_money, // 支付金额
+        bank_transaction_sn: '', // 银行交易流水号
       })
         .then((res) => {
           console.log(res);
-          if (!res.pay_page_url) {
-            window.location.href = "/GCLS-Personal/#/OrderPaySuccess";
-          } else {
+          if (res.pay_page_url) {
             window.location.href = res.pay_page_url;
+          } else {
+            window.location.href = '/GCLS-Personal/#/OrderPaySuccess';
           }
           // this.$message({
           //   type: "success",
@@ -174,231 +126,238 @@ export default {
           // this.loading = false;
           // 调取支付接口
         })
-        .catch((res) => {
+        .finally(() => {
           this.loading = false;
         });
     },
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    console.log(this.data);
-  },
-  //生命周期-创建之前
-  beforeCreated() {},
-  //生命周期-挂载之前
-  beforeMount() {},
-  //生命周期-更新之前
-  beforUpdate() {},
-  //生命周期-更新之后
-  updated() {},
-  //生命周期-销毁之前
-  beforeDestory() {},
-  //生命周期-销毁完成
-  destoryed() {},
-  //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
 };
 </script>
+
 <style lang="scss" scoped>
-/* @import url(); 引入css类 */
 .Nopyment {
   .message {
+    display: flex;
     width: 100%;
     height: 152px;
-    background: rgba(70, 70, 70, 0.03);
-    border-radius: 8px;
-    display: flex;
     margin-bottom: 24px;
+    background: rgba(70, 70, 70, 3%);
+    border-radius: 8px;
+
     img {
       width: 120px;
       height: 120px;
-      margin-left: 16px;
       margin-top: 16px;
+      margin-left: 16px;
     }
+
     .text {
       margin-left: 24px;
+
       .p1 {
+        display: -webkit-box;
         width: 360px;
+
         //   height: 45px;
         max-height: 48px;
+        margin-top: 22px;
+        overflow: hidden;
         font-size: 16px;
         line-height: 20px;
         color: #2c2c2c;
-
-        margin-top: 22px;
+        text-overflow: ellipsis;
         word-break: break-all;
-        display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
-        overflow: hidden;
       }
+
       .p2 {
         margin-top: 10px;
+
         span {
           width: 64px;
           height: 24px;
-          background: #ffefd8;
-
-          border-radius: 4px;
-          font-weight: bold;
+          padding: 2px 8px;
           font-size: 12px;
-          text-align: center;
-          color: #ff9900;
-
+          font-weight: bold;
           line-height: 24px;
-          padding: 2px 8px;
+          color: #f90;
+          text-align: center;
+          background: #ffefd8;
+          border-radius: 4px;
         }
       }
+
       .p3 {
         margin-top: 10px;
       }
     }
+
     .price {
       p {
-        margin-left: 67px;
         margin-top: 22px;
-        font-weight: bold;
+        margin-left: 67px;
         font-size: 16px;
-        text-align: right;
+        font-weight: bold;
         color: #ff4c00;
+        text-align: right;
       }
     }
   }
+
   .promotionCode {
     display: flex;
-    justify-content: flex-start;
     align-self: center;
+    justify-content: flex-start;
     width: 100%;
-    margin-top: 24px;
     height: 58px;
+    margin-top: 24px;
     line-height: 56px;
-    border-top: 1px solid rgba(44, 44, 44, 0.15);
-    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+    border-top: 1px solid rgba(44, 44, 44, 15%);
+    border-bottom: 1px solid rgba(44, 44, 44, 15%);
+
     .sp1 {
       font-size: 16px;
-      color: #000000;
+      color: #000;
     }
+
     input {
-      padding: 0 24px;
+      box-sizing: border-box;
       flex: 1;
       height: 56px;
-      outline: none;
+      padding: 0 24px;
       border: none;
-      box-sizing: border-box;
+      outline: none;
     }
+
     .sp2 {
-      cursor: pointer;
       font-size: 16px;
-      color: #ff9900;
+      color: #f90;
+      cursor: pointer;
     }
   }
+
   .total {
     width: 656px;
-    text-align: right;
-    color: #000000;
-    font-size: 16px;
     padding-top: 24px;
+    font-size: 16px;
+    color: #000;
+    text-align: right;
+
     .useCode {
       font-size: 12px;
-      color: rgba(0, 0, 0, 0.5);
+      color: rgba(0, 0, 0, 50%);
     }
+
     > p {
       > span {
         display: inline-block;
       }
+
       .co-value {
         width: 160px;
       }
     }
+
     .p1 {
       > span {
         display: inline-block;
         line-height: 24px;
       }
     }
+
     .p2 {
       margin: 16px 0 8px;
     }
+
     .p3 {
       > span {
         line-height: 36px;
       }
+
       .co-value {
         font-size: 24px;
         color: #ff4c00;
       }
     }
+
     .p4 {
       margin-bottom: 16px;
     }
   }
+
   .submitBtn {
-    text-align: right;
     margin-top: 16px;
+    text-align: right;
+
     button {
       width: 120px;
       height: 40px;
-      background: #ff4d00;
-      border-radius: 4px;
-      color: white;
       line-height: 40px;
+      color: white;
       text-align: center;
+      cursor: pointer;
+      background: #ff4d00;
       border: none;
+      border-radius: 4px;
       outline: none;
-      cursor: pointer;
     }
   }
+
   .pay-platform {
-    width: 656px;
     box-sizing: border-box;
-    padding: 16px 0 16px;
-    border-top: 1px rgba(44, 44, 44, 0.15) solid;
-    border-bottom: 1px rgba(44, 44, 44, 0.15) solid;
+    width: 656px;
+    padding: 16px 0;
+    border-top: 1px rgba(44, 44, 44, 15%) solid;
+    border-bottom: 1px rgba(44, 44, 44, 15%) solid;
+
     &-title {
       padding: 0;
       margin: 0;
+      margin-bottom: 16px;
+      font-size: 16px;
       font-style: normal;
       font-weight: normal;
-      font-size: 16px;
       line-height: 150%;
-      color: #000000;
-      margin-bottom: 16px;
+      color: #000;
     }
+
     &-list {
       display: flex;
       flex-wrap: wrap;
-      margin: 0;
       padding: 0;
+      margin: 0;
+
       > li {
         position: relative;
+        box-sizing: border-box;
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         width: 152px;
         height: 60px;
-        background: #ffffff;
-        border: 1px solid rgba(44, 44, 44, 0.15);
-        box-sizing: border-box;
-        border-radius: 4px;
-        cursor: pointer;
         margin: 0 8px 8px 0;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid rgba(44, 44, 44, 15%);
+        border-radius: 4px;
+
         > .plat-logo {
           width: 99px;
           height: 26px;
         }
+
         > .active-icon {
           position: absolute;
-          bottom: -1px;
           right: -1px;
+          bottom: -1px;
+          display: block;
           width: 20px;
           height: 20px;
-          display: block;
         }
+
         &.active {
-          border-color: #ff9900;
+          border-color: #f90;
         }
       }
     }

src/components/teacher-dev/Teaching.vue

@@ -1,11 +1,11 @@
 <template>
   <!-- 教学 -->
   <div class="Teaching">
-    <div class="top" v-if="!type">
+    <div v-if="!type" class="top">
       <div class="title">
-        <span class="text"> <!-- 教辅资料  -->{{ $t("Key214") }} </span>
+        <span class="text"> <!-- 教辅资料  -->{{ $t('Key214') }} </span>
         <div class="more" @click="goMore">
-          <span> <!-- 查看更多  -->{{ $t("Key47") }} </span>
+          <span> <!-- 查看更多  -->{{ $t('Key47') }} </span>
           <img src="../../assets/teacherdev/moreImage.png" alt="" />
         </div>
       </div>
@@ -13,23 +13,13 @@
     <div class="class_list">
       <div v-for="(item, i) in classList" :key="i" @click="gopreview(item)">
         <div class="listImage">
-          <!-- <el-image lazy :src="item.picture_url" alt=""></el-image> -->
-          <img
-            :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
-            alt=""
-          />
-          <!-- <span v-else>加载失败</span> -->
+          <img :src="getCoverImg(item)" alt="" />
         </div>
-        <!-- <el-image
-          lazy
-          :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
-          alt=""
-        ></el-image> -->
         <p class="one_name">
           {{ item.name }}
         </p>
-        <p class="price" v-if="item.price*1>0">
-          ¥<span class="price_1" v-html="changePrice(item.price*1,24, 16)"></span>
+        <p v-if="item.price * 1 > 0" class="price">
+          ¥<span class="price_1" v-html="changePrice(item.price * 1, 24, 16)"></span>
         </p>
       </div>
     </div>
@@ -37,70 +27,41 @@
 </template>
 
 <script>
+import { getCoverImg } from '@/utils/index';
+
 export default {
-  props: ["classList", "type"],
+  props: ['classList', 'type'],
   data() {
-    return {};
+    return {
+      getCoverImg,
+    };
   },
   methods: {
     goMore() {
       this.$router.push({
-        path: "/Viewmore",
+        path: '/Viewmore',
         query: {
-          classify: "TEACHING",
+          classify: 'TEACHING',
         },
       });
     },
     // 前往预览页面
     gopreview(item) {
       this.$router.push({
-        path: "/Preview",
+        path: '/Preview',
         query: {
           id: item.id,
-          allList: this.type ? "allList" : null,
+          allList: this.type ? 'allList' : null,
         },
       });
     },
-    //   根据不同的文件类型展示不同图片
-    getimgurl(item) {
-      let index = item.tag.indexOf("downloadable");
-      let type = "";
-      if (index != -1) {
-        type = item.tag[2];
-      } else {
-        type = item.tag[1];
-      }
-      switch (type) {
-        case "ppt":
-          return "ppt";
-        case "pptx":
-          return "ppt";
-        case "pdf":
-          return "pdf";
-        case "xlsx":
-          return "exceil";
-        case "xls":
-          return "exceil";
-        case "doc":
-          return "word";
-        case "docx":
-          return "word";
-        case "word":
-          return "word";
-        default:
-          return "word";
-      }
-    },
     changePrice(price, fontSize1, fontSize2) {
-      price = price ? price : 0;
-      price = price.toFixed(2);
-      price = price.toString();
-      let arr = price.split(".");
-      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
-        arr[0]
-      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
-        arr[1]
-      }</span>`;
+      let _price = price || 0;
+      _price = _price.toFixed(2).toString();
+      let arr = _price.split('.');
+      let str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
+      }px;">${arr[1]}</span>`;
       return str;
     },
   },
@@ -112,25 +73,30 @@ export default {
   .top {
     width: 1200px;
     margin: 0 auto;
+
     .title {
-      width: 100%;
-      height: 90px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 90px;
+
       .text {
         position: relative;
         font-size: 24px;
         font-weight: bold;
       }
+
       .more {
-        cursor: pointer;
-        font-size: 16px;
         display: flex;
         align-items: center;
+        font-size: 16px;
+        cursor: pointer;
+
         span {
           opacity: 0.4;
         }
+
         img {
           width: 25px;
           height: 19px;
@@ -138,91 +104,104 @@ export default {
       }
     }
   }
+
   .class_list {
-    width: 1200px;
     box-sizing: border-box;
-    margin: 0 auto;
-    background: #fff;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    padding: 50px 20px 8px 20px;
+    width: 1200px;
+    padding: 50px 20px 8px;
+    margin: 0 auto;
+    background: #fff;
 
     > div {
       width: 192px;
-      margin-left: 20px;
       margin-right: 20px;
-      transition: all 1s;
-      cursor: pointer;
       margin-bottom: 32px;
+      margin-left: 20px;
+      cursor: pointer;
+      transition: all 1s;
+
       .one_name {
+        display: -webkit-box;
         height: 48px;
+        padding-left: 4px;
         margin-top: 16px;
-        line-height: 150%;
-        word-break: break-all;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
         overflow: hidden;
         font-size: 16px;
+        line-height: 150%;
         color: #2c2c2c;
+        text-overflow: ellipsis;
+        word-break: break-all;
         cursor: pointer;
-        padding-left: 4px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
       }
+
       .price {
+        font-size: 24px;
         font-weight: bold;
         color: #2c2c2c;
-        font-size: 24px;
+
         .price_2 {
           font-size: 16px;
         }
       }
+
       p {
         font-size: 16px;
       }
+
       .listImage {
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         width: 100%;
         height: 256px;
+        color: #c0c4cc;
+
         // border: 1px solid rgba(0, 0, 0, 0.15);
         img {
           max-width: 100%;
           max-height: 100%;
         }
-        color: #c0c4cc;
       }
+
       .gray {
         color: #a3a3a3;
       }
+
       .origin {
-        color: #ff9900;
+        color: #f90;
       }
     }
+
     .more {
-      background: url("../../assets/teacherdev/image 13.png") center;
       position: relative;
+      background: url('../../assets/teacherdev/image 13.png') center;
+
       .shade {
         position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 100%;
         height: 100%;
-        background: #000000;
-        opacity: 0.6;
         cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        background: #000;
+        opacity: 0.6;
+
         > div {
           img {
             width: 58px;
             height: 58px;
           }
+
           span {
             position: relative;
-            color: white;
             top: -20px;
+            color: white;
           }
         }
       }

src/components/teacher-dev/Textbook.vue

@@ -3,9 +3,9 @@
   <div class="Textbook">
     <div class="top">
       <div class="title">
-        <span class="text"> <!-- 教研资料 -->{{ $t("Key554") }} </span>
+        <span class="text"> <!-- 教研资料 -->{{ $t('Key554') }} </span>
         <div class="more" @click="goMore">
-          <span> <!-- 查看更多  -->{{ $t("Key47") }} </span>
+          <span> <!-- 查看更多  -->{{ $t('Key47') }} </span>
           <img src="../../assets/teacherdev/moreImage.png" alt="" />
         </div>
       </div>
@@ -13,19 +13,10 @@
     <div class="class_list">
       <div v-for="(item, i) in classList" :key="i" @click="gopreview(item)">
         <div class="listImage">
-          <img
-            :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
-            alt=""
-          />
-          <!-- <span v-else>加载失败</span> -->
+          <img :src="getCoverImg(item)" alt="封面" />
         </div>
-        <!-- <el-image
-          lazy
-          :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
-          alt=""
-        ></el-image> -->
         <p class="one_name">{{ item.name }}</p>
-        <p class="price" v-if="item.price*1 > 0">
+        <p v-if="item.price * 1 > 0" class="price">
           ¥<span class="price_1" v-html="changePrice(item.price * 1, 24, 16)"></span>
         </p>
       </div>
@@ -34,103 +25,84 @@
 </template>
 
 <script>
+import { getCoverImg } from '@/utils/index';
+
 export default {
-  props: ["classList", "type"],
+  props: {
+    classList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
-    return {};
+    return {
+      getCoverImg,
+    };
   },
   methods: {
     // 前往更多
     goMore() {
       this.$router.push({
-        path: "/Viewmore",
+        path: '/Viewmore',
         query: {
-          classify: "TEXTBOOK",
+          classify: 'TEXTBOOK',
         },
       });
     },
     gopreview(item) {
       this.$router.push({
-        path: "/Preview",
+        path: '/Preview',
         query: {
           id: item.id,
         },
       });
     },
-    //   根据不同的文件类型展示不同图片
-    getimgurl(item) {
-      let index = item.tag.indexOf("downloadable");
-      let type = "";
-      if (index != -1) {
-        type = item.tag[2];
-      } else {
-        type = item.tag[1];
-      }
-      switch (type) {
-        case "ppt":
-          return "ppt";
-        case "pptx":
-          return "ppt";
-        case "pdf":
-          return "pdf";
-        case "xlsx":
-          return "exceil";
-        case "xls":
-          return "exceil";
-        case "doc":
-          return "word";
-        case "docx":
-          return "word";
-        case "word":
-          return "word";
-        default:
-          return "word";
-      }
-    },
+
     // 处理价格
     changePrice(price, fontSize1, fontSize2) {
-      price = price ? price : 0;
-      price = price.toFixed(2);
-      price = price.toString();
-      let arr = price.split(".");
-      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
-        arr[0]
-      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
-        arr[1]
-      }</span>`;
+      let _price = price || 0;
+      _price = _price.toFixed(2).toString();
+      let arr = _price.split('.');
+      let str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
+      }px;">${arr[1]}</span>`;
       return str;
     },
   },
-  created() {},
 };
 </script>
 
 <style lang="scss" scoped>
 .Textbook {
   .top {
-    width: 1200px;
-    margin: 0 auto;
     display: flex;
     justify-content: space-between;
+    width: 1200px;
+    margin: 0 auto;
+
     .title {
-      width: 100%;
-      height: 90px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 90px;
+
       .text {
         position: relative;
         font-size: 24px;
         font-weight: bold;
       }
+
       .more {
-        cursor: pointer;
-        font-size: 16px;
         display: flex;
         align-items: center;
+        font-size: 16px;
+        cursor: pointer;
+
         span {
           opacity: 0.4;
         }
+
         img {
           width: 25px;
           height: 19px;
@@ -138,91 +110,104 @@ export default {
       }
     }
   }
+
   .class_list {
-    width: 1200px;
     box-sizing: border-box;
-    margin: 0 auto;
-    background: #fff;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    padding: 50px 20px 8px 20px;
+    width: 1200px;
+    padding: 50px 20px 8px;
+    margin: 0 auto;
+    background: #fff;
+
     > div {
       width: 192px;
-      margin-left: 20px;
       margin-right: 20px;
-      transition: all 1s;
+      margin-left: 20px;
       cursor: pointer;
+      transition: all 1s;
+
       .one_name {
+        display: -webkit-box;
         height: 48px;
+        padding-left: 4px;
         margin-top: 16px;
-        line-height: 150%;
-        word-break: break-all;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
         overflow: hidden;
         font-size: 16px;
+        line-height: 150%;
         color: #2c2c2c;
+        text-overflow: ellipsis;
+        word-break: break-all;
         cursor: pointer;
-        padding-left: 4px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
       }
+
       .price {
+        margin-bottom: 32px;
+        font-size: 24px;
         font-weight: bold;
         color: #2c2c2c;
-        font-size: 24px;
-        margin-bottom: 32px;
 
         .price_2 {
           font-size: 16px;
         }
       }
+
       p {
         font-size: 16px;
       }
+
       .listImage {
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         width: 100%;
         height: 256px;
+        color: #c0c4cc;
+
         // border: 1px solid rgba(0, 0, 0, 0.15);
         img {
           max-width: 100%;
           max-height: 100%;
         }
-        color: #c0c4cc;
       }
+
       .gray {
         color: #a3a3a3;
       }
+
       .origin {
-        color: #ff9900;
+        color: #f90;
       }
     }
+
     .more {
-      background: url("../../assets/teacherdev/image 13.png") center;
       position: relative;
+      background: url('../../assets/teacherdev/image 13.png') center;
+
       .shade {
         position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 100%;
         height: 100%;
-        background: #000000;
-        opacity: 0.6;
         cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        background: #000;
+        opacity: 0.6;
+
         > div {
           img {
             width: 58px;
             height: 58px;
           }
+
           span {
             position: relative;
-            color: white;
             top: -20px;
+            color: white;
           }
         }
       }

src/components/teacher-dev/ToolBook.vue

@@ -3,9 +3,9 @@
   <div class="Textbook">
     <div class="top">
       <div class="title">
-        <span class="text"> <!-- 工具书 -->{{ $t("Key555") }} </span>
+        <span class="text"> <!-- 工具书 -->{{ $t('Key555') }} </span>
         <div class="more" @click="goMore">
-          <span> <!-- 查看更多  -->{{ $t("Key47") }} </span>
+          <span> <!-- 查看更多  -->{{ $t('Key47') }} </span>
           <img src="../../assets/teacherdev/moreImage.png" alt="" />
         </div>
       </div>
@@ -13,19 +13,10 @@
     <div class="class_list">
       <div v-for="(item, i) in classList" :key="i" @click="gopreview(item)">
         <div class="listImage">
-          <img
-            :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
-            alt=""
-          />
-          <!-- <span v-else>加载失败</span> -->
+          <img :src="getCoverImg(item)" alt="" />
         </div>
-        <!-- <el-image
-          lazy
-          :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
-          alt=""
-        ></el-image> -->
         <p class="one_name">{{ item.name }}</p>
-        <p class="price" v-if="item.price * 1>0">
+        <p v-if="item.price * 1 > 0" class="price">
           ¥<span class="price_1" v-html="changePrice(item.price * 1, 24, 16)"></span>
         </p>
       </div>
@@ -34,103 +25,79 @@
 </template>
 
 <script>
+import { getCoverImg } from '@/utils/index';
+
 export default {
-  props: ["classList", "type"],
+  props: ['classList', 'type'],
   data() {
-    return {};
+    return {
+      getCoverImg,
+    };
   },
+  created() {},
   methods: {
     // 前往更多
     goMore() {
       this.$router.push({
-        path: "/Viewmore",
+        path: '/Viewmore',
         query: {
-          classify: "TOOLBOOK",
+          classify: 'TOOLBOOK',
         },
       });
     },
     gopreview(item) {
       this.$router.push({
-        path: "/Preview",
+        path: '/Preview',
         query: {
           id: item.id,
         },
       });
     },
-    //   根据不同的文件类型展示不同图片
-    getimgurl(item) {
-      let index = item.tag.indexOf("downloadable");
-      let type = "";
-      if (index != -1) {
-        type = item.tag[2];
-      } else {
-        type = item.tag[1];
-      }
-      switch (type) {
-        case "ppt":
-          return "ppt";
-        case "pptx":
-          return "ppt";
-        case "pdf":
-          return "pdf";
-        case "xlsx":
-          return "exceil";
-        case "xls":
-          return "exceil";
-        case "doc":
-          return "word";
-        case "docx":
-          return "word";
-        case "word":
-          return "word";
-        default:
-          return "word";
-      }
-    },
     // 处理价格
     changePrice(price, fontSize1, fontSize2) {
-      price = price ? price : 0;
-      price = price.toFixed(2);
-      price = price.toString();
-      let arr = price.split(".");
-      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
-        arr[0]
-      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
-        arr[1]
-      }</span>`;
+      let _price = price || 0;
+      _price = _price.toFixed(2).toString();
+      let arr = _price.split('.');
+      let str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
+      }px;">${arr[1]}</span>`;
       return str;
     },
   },
-  created() {},
 };
 </script>
 
 <style lang="scss" scoped>
 .Textbook {
   .top {
-    width: 1200px;
-    margin: 0 auto;
     display: flex;
     justify-content: space-between;
+    width: 1200px;
+    margin: 0 auto;
+
     .title {
-      width: 100%;
-      height: 90px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 90px;
+
       .text {
         position: relative;
         font-size: 24px;
         font-weight: bold;
       }
+
       .more {
-        cursor: pointer;
-        font-size: 16px;
         display: flex;
         align-items: center;
+        font-size: 16px;
+        cursor: pointer;
+
         span {
           opacity: 0.4;
         }
+
         img {
           width: 25px;
           height: 19px;
@@ -138,91 +105,104 @@ export default {
       }
     }
   }
+
   .class_list {
-    width: 1200px;
     box-sizing: border-box;
-    margin: 0 auto;
-    background: #fff;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    padding: 50px 20px 8px 20px;
+    width: 1200px;
+    padding: 50px 20px 8px;
+    margin: 0 auto;
+    background: #fff;
+
     > div {
       width: 192px;
-      margin-left: 20px;
       margin-right: 20px;
-      transition: all 1s;
+      margin-left: 20px;
       cursor: pointer;
+      transition: all 1s;
+
       .one_name {
+        display: -webkit-box;
         height: 48px;
+        padding-left: 4px;
         margin-top: 16px;
-        line-height: 150%;
-        word-break: break-all;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
         overflow: hidden;
         font-size: 16px;
+        line-height: 150%;
         color: #2c2c2c;
+        text-overflow: ellipsis;
+        word-break: break-all;
         cursor: pointer;
-        padding-left: 4px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
       }
+
       .price {
+        margin-bottom: 32px;
+        font-size: 24px;
         font-weight: bold;
         color: #2c2c2c;
-        font-size: 24px;
-        margin-bottom: 32px;
 
         .price_2 {
           font-size: 16px;
         }
       }
+
       p {
         font-size: 16px;
       }
+
       .listImage {
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         width: 100%;
         height: 256px;
+        color: #c0c4cc;
+
         // border: 1px solid rgba(0, 0, 0, 0.15);
         img {
           max-width: 100%;
           max-height: 100%;
         }
-        color: #c0c4cc;
       }
+
       .gray {
         color: #a3a3a3;
       }
+
       .origin {
-        color: #ff9900;
+        color: #f90;
       }
     }
+
     .more {
-      background: url("../../assets/teacherdev/image 13.png") center;
       position: relative;
+      background: url('../../assets/teacherdev/image 13.png') center;
+
       .shade {
         position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 100%;
         height: 100%;
-        background: #000000;
-        opacity: 0.6;
         cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        background: #000;
+        opacity: 0.6;
+
         > div {
           img {
             width: 58px;
             height: 58px;
           }
+
           span {
             position: relative;
-            color: white;
             top: -20px;
+            color: white;
           }
         }
       }

src/utils/index.js

@@ -1,14 +1,38 @@
 import { getStaticContent } from '@/api/api';
-import { setConfig } from './auth'
+import { setConfig } from './auth';
 
 export function getConfigInfor() {
-    return new Promise((resolve, reject) => {
-        let MethodName = 'sys_config_manager-GetLogo';
-        getStaticContent(MethodName, {}).then(res => {
-            setConfig(res);
-            resolve(res)
-        }).catch(err => {
-            reject(err);
-        })
-    })
-}
+  return new Promise((resolve, reject) => {
+    let MethodName = 'sys_config_manager-GetLogo';
+    getStaticContent(MethodName, {})
+      .then((res) => {
+        setConfig(res);
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+// 文件图片
+const fileImgList = {
+  ppt: 'ppt',
+  pptx: 'ppt',
+  pdf: 'ppt',
+  xlsx: 'exceil',
+  xls: 'exceil',
+  doc: 'word',
+  docx: 'word',
+  word: 'word',
+};
+/**
+ * 根据文件类型获取图片地址
+ * @param {object} item
+ * @returns {string} 图片地址
+ */
+export function getCoverImg(item) {
+  const type = item.tag.indexOf('downloadable') === -1 ? item.tag[1] : item.tag[2];
+  const imgType = fileImgList[type] ?? 'word';
+  return require(`@/assets/teacherdev/${imgType}.png`);
+}

src/utils/setMethods.js

@@ -1,33 +1,32 @@
 export function json2excel(tableJson, filenames, autowidth, bookTypes) {
-    import("@/vendor/Export2Excel").then(excel => {
-        var tHeader = []
-        var dataArr = []
-        var sheetnames = []
-        for (var i in tableJson) {
-            tHeader.push(tableJson[i].tHeader)
-            dataArr.push(formatJson(tableJson[i].filterVal, tableJson[i].tableDatas))
-            sheetnames.push(tableJson[i].sheetName)
-        }
-        excel.export_json_to_excel({
-            header: tHeader,
-            data: dataArr,
-            sheetname: sheetnames,
-            filename: filenames,
-            autoWidth: autowidth,
-            bookType: bookTypes
-        })
-    })
+  import('@/vendor/Export2Excel').then((excel) => {
+    let tHeader = [];
+    let dataArr = [];
+    let sheetnames = [];
+    for (let i in tableJson) {
+      tHeader.push(tableJson[i].tHeader);
+      dataArr.push(formatJson(tableJson[i].filterVal, tableJson[i].tableDatas));
+      sheetnames.push(tableJson[i].sheetName);
+    }
+    excel.export_json_to_excel({
+      header: tHeader,
+      data: dataArr,
+      sheetname: sheetnames,
+      filename: filenames,
+      autoWidth: autowidth,
+      bookType: bookTypes,
+    });
+  });
 }
 
 // 数据过滤，时间过滤
 function formatJson(filterVal, jsonData) {
-    return jsonData.map(v =>
-        filterVal.map(j => {
-            if (j === "timestamp") {
-                return parseTime(v[j])
-            } else {
-                return v[j]
-            }
-        })
-    )
-}
+  return jsonData.map((v) =>
+    filterVal.map((j) => {
+      if (j === 'timestamp') {
+        return parseTime(v[j]);
+      }
+      return v[j];
+    }),
+  );
+}

src/views/teacher-dev/Preview.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- 预览 -->
-  <div class="tarcer-dev-Preview" v-loading="loading" v-if="isData">
-    <Header />
+  <div v-if="isData" v-loading="loading" class="tarcer-dev-Preview">
+    <HeaderPage />
 
-    <HeaderOne v-if="!Ispreview && data" :text="data.name" :allList="allList" />
-    <div class="main" v-if="data">
+    <HeaderOne v-if="!Ispreview && data" :text="data.name" :all-list="allList" />
+    <div v-if="data" class="main">
       <div class="flassify">
         <div class="text">
           <p class="p1">{{ data.name }}</p>
@@ -16,25 +16,25 @@
           </p>
           <!-- <p>{{ data.updateTime }}</p> -->
         </div>
-        <div class="pay_collect" v-if="!Ispreview">
-          <div class="price" v-if="!data.isPurchased">
+        <div v-if="!Ispreview" class="pay_collect">
+          <div v-if="!data.isPurchased" class="price">
             ¥
             <span class="price_1" v-html="changePrice(data.price * 1, 24, 16)"></span>
           </div>
-          <div class="pay" @click="buy" v-if="!data.isPurchased"><!-- 购买 -->{{ $t('Key72') }}</div>
-          <div class="download" v-if="data.isPurchased && IsDownload">
-            <img @click="download" src="../../assets/teacherdev/download.png" alt="" />
+          <div v-if="!data.isPurchased" class="pay" @click="buy"><!-- 购买 -->{{ $t('Key72') }}</div>
+          <div v-if="data.isPurchased && IsDownload" class="download">
+            <img src="../../assets/teacherdev/download.png" alt="" @click="download" />
             <!-- <span>DOWNLOAD</span> -->
           </div>
           <div class="collect">
-            <img @click="changeCollect" v-show="!data.isFavorite" src="../../assets/teacherdev/collect4.png" alt="" />
-            <img @click="changeCollect" v-show="data.isFavorite" src="../../assets/teacherdev/collect3.png" alt="" />
+            <img v-show="!data.isFavorite" src="../../assets/teacherdev/collect4.png" alt="" @click="changeCollect" />
+            <img v-show="data.isFavorite" src="../../assets/teacherdev/collect3.png" alt="" @click="changeCollect" />
           </div>
         </div>
       </div>
       <div :class="data.isPurchased || Ispreview ? 'buy' : 'NObuy'">
         <!--fileUrl需要改成安全地址 file_url_https -->
-        <iframe :src="attachment[0].newpath" width="100%" height="1000px" id="ifm"></iframe>
+        <iframe id="ifm" :src="attachment[0].newpath" width="100%" height="1000px"></iframe>
         <!-- <object
           type="text/html"
           height="1000px"
@@ -71,15 +71,15 @@
           {{ i / numPages }}
         </pdf> -->
       </div>
-      <div v-if="!data.isPurchased && !Ispreview" @click="buy" class="buyBtn"><!-- 点击购买 -->{{ $t('Key574') }}</div>
+      <div v-if="!data.isPurchased && !Ispreview" class="buyBtn" @click="buy"><!-- 点击购买 -->{{ $t('Key574') }}</div>
     </div>
     <el-dialog :visible.sync="NopymentShow" width="720px" :before-close="closeNoPyment">
-      <div class="dialogTitle" slot="title"><!-- 商品详情 -->{{ $t('Key52') }}</div>
+      <div slot="title" class="dialogTitle"><!-- 商品详情 -->{{ $t('Key52') }}</div>
       <Confirmorder
         ref="Confirmorder"
         :data="data"
         :goods_type="401"
-        :changeOrderNumber="changeOrderNumber"
+        :change-order-number="changeOrderNumber"
         :goods_detail_type="goods_detail_type"
       />
     </el-dialog>
@@ -90,13 +90,13 @@
       width="720px"
       :before-close="closePyment"
     >
-      <Payment :data="data" :orderNumber="orderNumber" :closePyment="closePyment" />
+      <Payment :data="data" :order-number="orderNumber" :close-pyment="closePyment" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import Header from '@/components/Header';
+import HeaderPage from '@/components/Header';
 import HeaderOne from '@/components/teacher-dev/HeaderOne';
 import pdf from 'vue-pdf';
 import Confirmorder from '@/components/payment/Confirmorder';
@@ -108,13 +108,12 @@ const Base64 = require('js-base64').Base64;
 
 import { materialdetail, materialvisit, LearnWebSI, Personamaterialdetail, getContentFile } from '@/api/api';
 export default {
-  name: 'tarcer-dev-Preview',
+  name: 'TarcerDevPreview',
   components: {
-    Header,
+    HeaderPage,
     HeaderOne,
-    pdf,
     Confirmorder,
-    Payment
+    Payment,
   },
   data() {
     return {
@@ -125,24 +124,85 @@ export default {
       attachment: null,
       loading: false,
       Ispreview: '', // 是不是预览
-      NopymentShow: false, //添加订单弹窗
-      PymentShow: false, //支付订单弹窗
-      orderNumber: null, //订单号
-      IsDownload: false, //是否可以下载
+      NopymentShow: false, // 添加订单弹窗
+      PymentShow: false, // 支付订单弹窗
+      orderNumber: null, // 订单号
+      IsDownload: false, // 是否可以下载
       allList: null,
       isData: false,
       goods_detail_type: null,
-      file_preview_url: ''
+      file_preview_url: '',
     };
   },
   computed: {},
+  async created() {
+    let data = JSON.parse(getConfig());
+    this.file_preview_url = data.doc_preview_service_address;
+    await updateWordPack({
+      word_key_list: [
+        'Key5',
+        'Key8',
+        'Key9',
+        'Key39',
+        'Key43',
+        'Key52',
+        'Key53',
+        'Key54',
+        'Key55',
+        'Key58',
+        'Key72',
+        'Key94',
+        'Key475',
+        'Key109',
+        'Key131',
+        'Key214',
+        'Key232',
+        'Key108',
+        'Key396',
+        'Key472',
+        'Key473',
+        'Key474',
+        'Key572',
+        'Key574',
+        'Key575',
+        'Key576',
+        'Key696',
+        'Key697',
+        'Key227',
+        'Key803',
+        'Key790',
+        'Key791',
+        'Key792',
+      ],
+    });
+    this.isData = true;
+  },
+  mounted() {
+    this.materialId = this.$route.query.id;
+    this.Ispreview = this.$route.query.type;
+    this.allList = this.$route.query.allList;
+    if (this.$route.query.invok_module === 'GCLS-Personal') {
+      this.PersonalDetail();
+    } else if (this.materialId) {
+      this.getdetail();
+      if (!this.Ispreview) {
+        materialvisit({
+          id: this.materialId,
+        })
+          .then((res) => {})
+          .catch((res) => {
+            this.loading = false;
+          });
+      }
+    }
+  },
   methods: {
     // 下载
     download() {
       let userInfor = JSON.parse(getToken());
-      let UserCode = '',
-        UserType = '',
-        SessionID = '';
+      let SessionID = '';
+      let UserCode = '';
+      let UserType = '';
       if (userInfor) {
         UserCode = userInfor.user_code;
         UserType = userInfor.user_type;
@@ -153,11 +213,9 @@ export default {
         SessionID,
         UserCode,
         UserType,
-        FileID
+        FileID,
       };
-      location.href =
-        process.env.VUE_APP_BASE_API +
-        `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
+      location.href = `${process.env.VUE_APP_BASE_API}/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
     },
     // 生成订单 同时切换到支付弹窗
     changeOrderNumber(val, back_discount_code, discount_money, receivables_money) {
@@ -175,18 +233,17 @@ export default {
     },
     closePyment(str) {
       this.PymentShow = false;
-      if (str == '支付成功') {
+      if (str === '支付成功') {
         this.getdetail();
       }
     },
     // 处理价格
     changePrice(price, fontSize1, fontSize2) {
-      price = price ? price : 0;
-      price = price.toFixed(2);
-      price = price.toString();
-      let arr = price.split('.');
-      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${arr[0]}</span>.<span style="font-size: ${
-        fontSize2 ? fontSize2 : 16
+      let _price = price || 0;
+      _price = _price.toFixed(2).toString();
+      let arr = _price.split('.');
+      let str = `<span style="font-size: ${fontSize1 || 16}px;">${arr[0]}</span>.<span style="font-size: ${
+        fontSize2 || 16
       }px;">${arr[1]}</span>`;
       return str;
     },
@@ -197,7 +254,7 @@ export default {
       let loadingTask = pdf.createLoadingTask(_this.attachment[0].fileRelativePath);
 
       loadingTask.promise
-        .then(pdf => {
+        .then((pdf) => {
           if (_this.data.isPurchased) {
             _this.numPages = pdf.numPages;
           } else {
@@ -205,7 +262,7 @@ export default {
           }
           _this.loading = false;
         })
-        .catch(err => {
+        .catch((err) => {
           console.error('Pdf Loading failed', err);
         });
     },
@@ -216,19 +273,19 @@ export default {
         let Mname = 'order-collection_manager-CancelMyGoodsCollection';
         LearnWebSI(Mname, {
           goods_id_list: [this.materialId],
-          goods_type: 401
+          goods_type: 401,
         })
-          .then(res => {
+          .then((res) => {
             this.$message({
               type: 'success',
-              message: this.$t('Key396') //"取消收藏成功",
+              message: this.$t('Key396'), // "取消收藏成功",
             });
             this.data.isFavorite = false;
 
             this.loading = false;
             // this.getdetail();
           })
-          .catch(res => {
+          .catch((res) => {
             this.loading = false;
           });
       } else {
@@ -240,19 +297,19 @@ export default {
           goods_person_name_desc: this.data.teacher,
           goods_picture_id: this.data.coverFileId,
           goods_price: this.data.price,
-          goods_detail_type: this.goods_detail_type
+          goods_detail_type: this.goods_detail_type,
         })
-          .then(res => {
+          .then((res) => {
             this.$message({
               type: 'success',
-              message: this.$t('Key575') //"收藏成功",
+              message: this.$t('Key575'), // "收藏成功",
             });
             this.data.isFavorite = true;
 
             this.loading = false;
             // this.getdetail();
           })
-          .catch(res => {
+          .catch((res) => {
             this.loading = false;
           });
       }
@@ -271,21 +328,21 @@ export default {
       this.loading = true;
       materialdetail({
         materialId: this.materialId,
-        isSelectForUpdate: this.Ispreview ? true : false
+        isSelectForUpdate: Boolean(this.Ispreview),
       })
-        .then(res => {
+        .then((res) => {
           if (res.data.result) {
             let index = res.data.result.tag.indexOf('downloadable');
-            if (index != -1) {
+            if (index !== -1) {
               this.IsDownload = true;
             }
             this.data = res.data.result;
             this.data.pymentTeacher = '';
             res.data.result.teacher.forEach((item, i) => {
-              if (i != this.data.teacher.length - 1) {
-                this.data.pymentTeacher += item + ';';
-              } else {
+              if (i === this.data.teacher.length - 1) {
                 this.data.pymentTeacher += item;
+              } else {
+                this.data.pymentTeacher += `${item};`;
               }
             });
             this.data.fileType = this.data.tag[this.data.tag.length - 1];
@@ -303,8 +360,8 @@ export default {
             //   console.log(this.attachment[0].fileRelativePath);
             //   this.getNumPages();
             // }
-            this.changePrice(this.data.price * 1, 24, 16);
-            this.goods_detail_type = this.getimgurl(this.data);
+            this.changePrice(Number(this.data.price), 24, 16);
+            this.goods_detail_type = this.getImgType(this.data);
             // 3000的
             // let path = `http://dcsapi.com/?k=71630476088128307289910&url=${this.attachment[0].fileUrlHttps}`;
             // this.attachment[0].newpath = path;
@@ -317,11 +374,11 @@ export default {
             // var previewUrl =
             //   originUrl + `&fullfilename=${this.attachment[0].name}`;
             // GC 找的免费的 需要后台部署  谷歌可以 火狐和edge不行
-            let path = `${this.file_preview_url}/onlinePreview?url=` + Base64.encode(this.attachment[0].fileUrlHttps);
+            let path = `${this.file_preview_url}/onlinePreview?url=${Base64.encode(this.attachment[0].fileUrlHttps)}`;
             this.attachment[0].newpath = path;
           }
         })
-        .catch(res => {
+        .catch((res) => {
           this.loading = false;
         });
     },
@@ -329,26 +386,26 @@ export default {
       this.loading = true;
       Personamaterialdetail({
         materialId: this.materialId,
-        isSelectForUpdate: this.Ispreview ? true : false
+        isSelectForUpdate: Boolean(this.Ispreview),
       })
-        .then(res => {
+        .then((res) => {
           if (res.data.result) {
             let index = res.data.result.tag.indexOf('downloadable');
-            if (index != -1) {
+            if (index !== -1) {
               this.IsDownload = true;
             }
             this.data = res.data.result;
             this.data.pymentTeacher = '';
             res.data.result.teacher.forEach((item, i) => {
-              if (i != this.data.teacher.length - 1) {
-                this.data.pymentTeacher += item + ';';
-              } else {
+              if (i === this.data.teacher.length - 1) {
                 this.data.pymentTeacher += item;
+              } else {
+                this.data.pymentTeacher += `${item};`;
               }
             });
             this.data.fileType = this.data.tag[this.data.tag.length - 1];
             this.attachment = JSON.parse(res.data.result.attachment);
-            let path = `${this.file_preview_url}/onlinePreview?url=` + Base64.encode(this.attachment[0].fileUrlHttps);
+            let path = `${this.file_preview_url}/onlinePreview?url=${Base64.encode(this.attachment[0].fileUrlHttps)}`;
             this.attachment[0].newpath = path;
             this.loading = false;
             // if (
@@ -363,87 +420,17 @@ export default {
             //   console.log(this.attachment[0].fileRelativePath);
             //   this.getNumPages();
             // }
-            this.changePrice(this.data.price * 1, 24, 16);
+            this.changePrice(Number(this.data.price), 24, 16);
           }
         })
-        .catch(res => {
+        .catch((res) => {
           this.loading = false;
         });
     },
-    getimgurl(item) {
-      let index = item.tag.indexOf('downloadable');
-      let type = '';
-      if (index != -1) {
-        type = item.tag[2];
-      } else {
-        type = item.tag[1];
-      }
-      return type;
-    }
-  },
-  async created() {
-    let data = JSON.parse(getConfig());
-    this.file_preview_url = data.doc_preview_service_address;
-    await updateWordPack({
-      word_key_list: [
-        'Key5',
-        'Key8',
-        'Key9',
-        'Key39',
-        'Key43',
-        'Key52',
-        'Key53',
-        'Key54',
-        'Key55',
-        'Key58',
-        'Key72',
-        'Key94',
-        'Key475',
-        'Key109',
-        'Key131',
-        'Key214',
-        'Key232',
-        'Key108',
-        'Key396',
-        'Key472',
-        'Key473',
-        'Key474',
-        'Key572',
-        'Key574',
-        'Key575',
-        'Key576',
-        'Key696',
-        'Key697',
-        'Key227',
-        'Key803',
-        'Key790',
-        'Key791',
-        'Key792'
-      ]
-    });
-    this.isData = true;
+    getImgType(item) {
+      return item.tag.indexOf('downloadable') === -1 ? item.tag[1] : item.tag[2];
+    },
   },
-  mounted() {
-    this.materialId = this.$route.query.id;
-    this.Ispreview = this.$route.query.type;
-    this.allList = this.$route.query.allList;
-    if (this.$route.query.invok_module == 'GCLS-Personal') {
-      this.PersonalDetail();
-    } else {
-      if (this.materialId) {
-        this.getdetail();
-        if (!this.Ispreview) {
-          materialvisit({
-            id: this.materialId
-          })
-            .then(res => {})
-            .catch(res => {
-              this.loading = false;
-            });
-        }
-      }
-    }
-  }
 };
 </script>
 
@@ -452,31 +439,36 @@ export default {
   height: 100%;
 
   .main {
+    position: relative;
     min-height: 543px;
-    background: #f6f6f6;
-    padding-bottom: 20px;
     padding-top: 30px;
-    position: relative;
+    padding-bottom: 20px;
+    background: #f6f6f6;
   }
+
   .flassify {
     position: relative;
+    display: flex;
+    justify-content: space-between;
     width: 1140px;
     height: 154px;
+
+    // align-items: center;
+    padding: 0 30px;
     margin: 0 auto;
     background-color: #fff;
     border-radius: 8px;
-    display: flex;
-    justify-content: space-between;
-    // align-items: center;
-    padding: 0 30px;
+
     .text {
       height: 100%;
       padding-top: 24px;
+
       .p1 {
-        font-weight: bold;
         font-size: 30px;
+        font-weight: bold;
         color: #1f2127;
       }
+
       .p2 {
         margin-top: 8px;
         margin-bottom: 8px;
@@ -484,57 +476,65 @@ export default {
         color: #1f2127;
       }
     }
+
     .pay_collect {
+      display: flex;
+      align-content: center;
+
       // position: absolute;
       // right: 30px;
       // bottom: 24px;
       height: 100%;
       padding-top: 90px;
-      display: flex;
-      align-content: center;
+
       .price {
-        font-weight: bold;
-        font-size: 24px;
         margin-right: 20px;
+        font-size: 24px;
+        font-weight: bold;
+
         .price_2 {
           font-size: 16px;
         }
       }
+
       .pay {
         width: 120px;
         height: 40px;
-        background: #ff9900;
-        border-radius: 4px;
-        color: white;
-        font-weight: 600;
+        margin-right: 20px;
         font-size: 20px;
-        text-align: center;
+        font-weight: 600;
         line-height: 40px;
+        color: white;
+        text-align: center;
         cursor: pointer;
-        margin-right: 20px;
+        background: #f90;
+        border-radius: 4px;
       }
+
       .collect {
         display: flex;
         align-items: center;
         height: 40px;
-
-        font-weight: bold;
         font-size: 24px;
+        font-weight: bold;
         color: #1f2127;
+
         img {
           width: 24px;
           margin-right: 10px;
           cursor: pointer;
         }
       }
+
       .download {
-        height: 40px;
-        margin-right: 20px;
         display: flex;
         align-items: center;
-        font-weight: bold;
+        height: 40px;
+        margin-right: 20px;
         font-size: 24px;
+        font-weight: bold;
         color: #1f2127;
+
         img {
           width: 24px;
           margin-right: 10px;
@@ -543,33 +543,38 @@ export default {
       }
     }
   }
+
   .buy {
     width: 1200px;
-    margin: 24px auto;
     min-height: 1000px;
+    margin: 24px auto;
+
     // filter: blur(8px);
   }
+
   .NObuy {
     width: 1200px;
-    margin: 24px auto;
     min-height: 1000px;
+    margin: 24px auto;
     filter: blur(8px);
   }
+
   .buyBtn {
+    position: relative;
+    top: -150px;
     width: 284px;
     height: 67px;
-    background: #ff9900;
-    border-radius: 8px;
-    text-align: center;
+    margin: 0 auto;
+    font-size: 22px;
+    font-weight: bold;
     line-height: 67px;
     color: white;
-    font-weight: bold;
-    font-size: 22px;
-    margin: 0 auto;
+    text-align: center;
     cursor: pointer;
-    position: relative;
-    top: -150px;
+    background: #f90;
+    border-radius: 8px;
   }
+
   .dialogTitle {
   }
 }
@@ -580,12 +585,15 @@ export default {
     padding: 30px 32px;
   }
 }
+
 .cui-ribbonTopBars {
   display: none !important;
 }
+
 .overlay--1PlEz {
   display: none !important;
 }
+
 #overlay--1PlEz {
   display: none !important;
 }

src/views/teacher-dev/TextAnalysis.vue

@@ -6,7 +6,7 @@
       <div class="input_main">
         <el-input v-model="txt" type="textarea" placeholder="请输入文本" :autosize="{ minRows: 9 }" />
         <div class="text_btn">
-          <span class="left">{{ txt.length }}/1000</span>
+          <span class="left">{{ txt.length }}/{{ maxWordCount }}</span>
           <div class="operation">
             <el-upload
               ref="upload"
@@ -63,7 +63,6 @@
 
 <script>
 import {
-  postapi,
   AddTextFile,
   GetTextAnalyseRecordInfo,
   PageQueryMyTextAnalyseRecordList,
@@ -83,6 +82,7 @@ export default {
   data() {
     return {
       txt: '',
+      maxWordCount: 1000,
       loading: false,
       token: null,
       pageSize: 20,
@@ -219,7 +219,7 @@ export default {
       if (this.txt === '') {
         return this.$message.warning('请先输入内容');
       }
-      if (this.txt.length > 1000) {
+      if (this.txt.length > this.maxWordCount) {
         return this.$message.warning('超出字数限制');
       }
       this.loading = true;

src/views/teacher-dev/index.vue

@@ -1,90 +1,70 @@
 <template>
-  <div
-    class="teacher_edu"
-    v-if="isData"
-  >
+  <div v-if="isData" class="teacher_edu">
     <!-- 头部导航及搜索 -->
-    <Header />
+    <HeaderPage />
     <div class="nav_title">
       <div class="inner">
         <el-menu
           :default-active="activeIndex"
           class="el-menu-demo"
           mode="horizontal"
-          @select="handleSelect"
           text-color="#000"
           active-text-color="#FF9900"
+          @select="handleSelect"
         >
           <!-- <el-menu-item index="TEACHINGTOOL"> 教研工具</el-menu-item> -->
-          <el-menu-item index="TEXTBOOK">
-            <!-- 教辅资料 -->{{ $t("Key554") }}
-          </el-menu-item>
-          <el-menu-item index="TEACHING">
-            <!-- 教研资料 -->{{ $t("Key214") }}
-          </el-menu-item>
-          <el-menu-item index="TOOLBOOK">
-            <!-- 工具书 -->{{ $t("Key555") }}
-          </el-menu-item>
+          <el-menu-item index="TEXTBOOK"> <!-- 教辅资料 -->{{ $t('Key554') }} </el-menu-item>
+          <el-menu-item index="TEACHING"> <!-- 教研资料 -->{{ $t('Key214') }} </el-menu-item>
+          <el-menu-item index="TOOLBOOK"> <!-- 工具书 -->{{ $t('Key555') }} </el-menu-item>
         </el-menu>
-        <div
-          class="seek"
-          @keyup="keyDownSeekData"
-        >
+        <div class="seek" @keyup="keyDownSeekData">
           <!-- 搜索课程 -->
           <el-input
+            id=""
+            v-model="SeekName"
             type="text"
             name=""
-            id=""
             :placeholder="$t('Key131')"
-            v-model="SeekName"
-            @change="SeekName = SeekName.trim()"
             maxlength="50"
+            @change="SeekName = SeekName.trim()"
           />
-          <img
-            @click="gotoSeekResult"
-            src="../../assets/teacherdev/Group2149.png"
-            alt=""
-          />
+          <img src="../../assets/teacherdev/Group2149.png" alt="" @click="gotoSeekResult" />
         </div>
       </div>
     </div>
     <!-- 主要信息列表 -->
-    <div
-      class="main"
-      v-loading="loading"
-    >
+    <div v-loading="loading" class="main">
       <div id="TEACHINGTOOL">
         <TeachingTool v-if="textAnalyseShow" />
       </div>
-      <div id="TEXTBOOK" v-if="textBookList">
-        <Textbook v-if="textBookList.material_list" :classList="textBookList.material_list" />
+      <div v-if="textBookList" id="TEXTBOOK">
+        <Textbook v-if="textBookList.material_list" :class-list="textBookList.material_list" />
       </div>
-      <div id="TEACHING" v-if="teachingList">
-        <Teaching v-if="teachingList.material_list" :classList="teachingList.material_list" />
+      <div v-if="teachingList" id="TEACHING">
+        <Teaching v-if="teachingList.material_list" :class-list="teachingList.material_list" />
       </div>
-      <div id="TOOLBOOK" v-if="toolBookList">
-        <ToolBook v-if="toolBookList.material_list" :classList="toolBookList.material_list" />
+      <div v-if="toolBookList" id="TOOLBOOK">
+        <ToolBook v-if="toolBookList.material_list" :class-list="toolBookList.material_list" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Header from "@/components/Header";
+import HeaderPage from '@/components/Header';
 
-import Textbook from "@/components/teacher-dev/Textbook";
-import Teaching from "@/components/teacher-dev/Teaching";
-import ToolBook from "@/components/teacher-dev/ToolBook";
-import TeachingTool from "@/components/teacher-dev/TeachingTool";
+import Textbook from '@/components/teacher-dev/Textbook';
+import Teaching from '@/components/teacher-dev/Teaching';
+import ToolBook from '@/components/teacher-dev/ToolBook';
+import TeachingTool from '@/components/teacher-dev/TeachingTool';
 
-import { materiallistAll } from "@/api/api";
-import { updateWordPack } from "@/utils/i18n";
+import { materiallistAll } from '@/api/api';
+import { updateWordPack } from '@/utils/i18n';
 
 export default {
-  name: "teacher_edu",
+  name: 'TeacherEdu',
   components: {
-    Header,
-
+    HeaderPage,
     Teaching,
     Textbook,
     ToolBook,
@@ -93,19 +73,63 @@ export default {
 
   data() {
     return {
-      activeIndex: "TEXTBOOK",
-      navName: "CLASSICAL COURSE",
-      SeekName: "",
+      activeIndex: 'TEXTBOOK',
+      navName: 'CLASSICAL COURSE',
+      SeekName: '',
       loading: false,
       dataList: null,
-      textBookList: null, //book数据
+      textBookList: null, // book数据
       teachingList: null, // tea数据
-      toolBookList: null, //工具书
+      toolBookList: null, // 工具书
       isData: false,
       textAnalyseShow: true,
     };
   },
   computed: {},
+  async created() {
+    console.log('2023.04.27');
+    // 如果是edu.blcup.com环境下就隐藏文本分析入口
+    if (document.domain === 'edu.blcup.com') {
+      this.textAnalyseShow = false;
+    }
+    await updateWordPack({
+      word_key_list: ['Key5', 'Key8', 'Key9', 'Key39', 'Key47', 'Key131', 'Key214', 'Key214', 'Key554', 'Key555'],
+    });
+    this.isData = true;
+    // 需要根据身份信息来判断是进入首页还是录入
+    // if (token) {
+    //   if (JSON.parse(token).popedom_code_list.indexOf(2000006) != -1) {
+    //     this.$router.push("/teacherdevEntering");
+    //   } else {
+    //     this.$router.push({ path: "/" });
+    //   }
+    // }
+    // this.loading = true;
+    // // 验证登录拿到JSESSIONID放到cookies中后面的接口用来验证用户身份
+    // VerifyLogin()
+    //   .then((res) => {
+    //     if (res.data?.JSESSSIONID) {
+    //       Cookies.set("JSESSIONID", res.data.JSESSSIONID);
+    //
+    //     }
+    //   })
+    //   .catch((res) => {
+    //     this.loading = false;
+    //   });
+  },
+  mounted() {
+    this.getData();
+    window.addEventListener('scroll', () => {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      // 滚动条滚动的距离
+      let node = document.getElementsByClassName('nav_title')[0];
+      if (scrollTop > 120) {
+        node.classList.add('xiding_nav');
+      } else {
+        node.classList.remove('xiding_nav');
+      }
+    });
+  },
   methods: {
     // 切换导航
     handleSelect(key, keyPath) {
@@ -123,18 +147,18 @@ export default {
     },
     // 前往搜索结果
     gotoSeekResult() {
-      if (this.SeekName != "") {
+      if (this.SeekName === '') {
+        this.$message.warning('请输入内容');
+      } else {
         this.SeekName = this.SeekName.trim();
         this.$router.push({
-          path: "/Viewmore",
+          path: '/Viewmore',
           query: { keyWord: this.SeekName },
         });
-      } else {
-        this.$message.warning("请输入内容");
       }
     },
     keyDownSeekData(e) {
-      if (e.keyCode == 13) {
+      if (e.keyCode === 13) {
         this.gotoSeekResult();
       }
     },
@@ -144,159 +168,106 @@ export default {
       materiallistAll({
         cur_page: 1,
         page_capacity: 10,
-        tag: "TEXTBOOK",
+        tag: 'TEXTBOOK',
         name: this.keyWord,
       })
         .then((res) => {
           this.textBookList = res;
         })
-        .catch((res) => {
+        .finally(() => {
           this.loading = false;
         });
       materiallistAll({
         cur_page: 1,
         page_capacity: 10,
-        tag: "TEACHING",
+        tag: 'TEACHING',
         name: this.keyWord,
       })
         .then((res) => {
           this.teachingList = res;
-          this.loading = false;
         })
-        .catch((res) => {
+        .finally(() => {
           this.loading = false;
         });
       materiallistAll({
         cur_page: 1,
         page_capacity: 10,
-        tag: "TOOLBOOK",
+        tag: 'TOOLBOOK',
         name: this.keyWord,
       })
         .then((res) => {
           this.toolBookList = res;
-          this.loading = false;
         })
-        .catch((res) => {
+        .finally(() => {
           this.loading = false;
         });
     },
   },
-  async created() {
-    console.log('2023.04.27')
-    // 如果是edu.blcup.com环境下就隐藏文本分析入口
-    if (document.domain == "edu.blcup.com") {
-      this.textAnalyseShow = false;
-    }
-    await updateWordPack({
-      word_key_list: [
-        "Key5",
-        "Key8",
-        "Key9",
-        "Key39",
-        "Key47",
-        "Key131",
-        "Key214",
-        "Key214",
-        "Key554",
-        "Key555",
-      ],
-    });
-    this.isData = true;
-    // 需要根据身份信息来判断是进入首页还是录入
-    // if (token) {
-    //   if (JSON.parse(token).popedom_code_list.indexOf(2000006) != -1) {
-    //     this.$router.push("/teacherdevEntering");
-    //   } else {
-    //     this.$router.push({ path: "/" });
-    //   }
-    // }
-    // this.loading = true;
-    // // 验证登录拿到JSESSIONID放到cookies中后面的接口用来验证用户身份
-    // VerifyLogin()
-    //   .then((res) => {
-    //     if (res.data?.JSESSSIONID) {
-    //       Cookies.set("JSESSIONID", res.data.JSESSSIONID);
-    //
-    //     }
-    //   })
-    //   .catch((res) => {
-    //     this.loading = false;
-    //   });
-  },
-  mounted() {
-    this.getData();
-    window.addEventListener("scroll", () => {
-      let scrollTop =
-        window.pageYOffset ||
-        document.documentElement.scrollTop ||
-        document.body.scrollTop;
-      // 滚动条滚动的距离
-      let node = document.getElementsByClassName("nav_title")[0];
-      if (scrollTop > 120) {
-        node.classList.add("xiding_nav");
-      } else {
-        node.classList.remove("xiding_nav");
-      }
-    });
-  },
 };
 </script>
 <style lang="scss" scoped>
 .teacher_edu {
   min-height: 100vh;
+
   // background: #f6f6f6;
   .seek {
-    width: 300px;
-    height: 40px;
-    background: #ffffff;
-    border: 1px solid #d9d9d9;
     box-sizing: border-box;
-    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 300px;
+    height: 40px;
     padding: 0 16px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+
     input {
       width: 90%;
+      margin-left: 5px;
       border: none;
       outline: none;
-      margin-left: 5px;
     }
+
     img {
       width: 18px;
       height: 18px;
       cursor: pointer;
     }
   }
+
   .nav_title {
     width: 100%;
-
     background: #fff;
+
     .inner {
-      width: 1200px;
-      margin: 0 auto;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+      width: 1200px;
+      margin: 0 auto;
     }
 
     .el-menu-item {
       font-size: 16px;
     }
+
     // 取消组件默认的样式
     .el-menu.el-menu--horizontal {
       border-bottom: none;
     }
   }
+
   .xiding_nav {
     position: fixed;
     top: 0;
     z-index: 999;
   }
+
   .main {
     min-height: 80vh;
-    background: #f6f6f6;
     padding-bottom: 50px;
+    background: #f6f6f6;
   }
 }
 </style>
@@ -305,19 +276,22 @@ export default {
   .el-input__prefix {
     color: black;
   }
+
   .el-input__inner {
-    border: none;
     height: 38px;
     padding: 0;
+    border: none;
   }
 }
+
 .nav_title {
   .el-menu--horizontal > .el-menu-item {
     height: 64px;
     line-height: 64px;
   }
+
   .el-menu--horizontal > .el-menu-item.is-active {
     font-weight: bold !important;
   }
 }
-</style>
+</style>