添加TextBookDetail购买页面

src/components/Header.vue

@@ -3,19 +3,29 @@
   <div class="LoginNav">
     <div class="logo">
       <template v-if="configInfor">
-        <img :src="configInfor.logo_image_url" alt="logo" class="logo-image" @click="handleSelect" />
+        <img
+          :src="configInfor.logo_image_url"
+          alt="logo"
+          class="logo-image"
+          @click="handleSelect"
+        />
       </template>
       <template v-else>
         <span class="logo-img"> logo </span>
       </template>
       <ul class="logo-projectlist">
-          <li v-for="(itemI,indexI) in projectList" :key="indexI" :class="indexI==LoginNavIndex?'active':''" @click="handleCommand(indexI)">
-              {{ itemI.name }}
-          </li>
+        <li
+          v-for="(itemI, indexI) in projectList"
+          :key="indexI"
+          :class="indexI == LoginNavIndex ? 'active' : ''"
+          @click="handleCommand(indexI)"
+        >
+          {{ itemI.name }}
+        </li>
       </ul>
     </div>
     <div class="userName">
-      <template v-if="1 == 2">
+      <template v-if="routePath == '/GoodsDetail'">
         <el-dropdown
           style="margin-right: 16px; cursor: pointer"
           trigger="click"
@@ -35,7 +45,9 @@
         </el-dropdown>
       </template>
       <div v-if="!userMessage" class="selectLoginOrRegistration">
-        <span @click="cutLoginReg">登录</span>
+        <span @click="cutLoginReg">
+          {{ routePath == "/GoodsDetail" ? $t("Key9") : "登录" }}
+        </span>
       </div>
       <!-- 用户头像和用户名 -->
       <div class="user" v-else>
@@ -55,11 +67,11 @@
         <div class="userShow" v-show="userShow">
           <p @click="gopresonal">
             <img src="../assets/login/project7.png" alt="" />
-            个人中心
+            {{ routePath == "/GoodsDetail" ? $t("Key38") : "个人中心" }}
           </p>
           <p @click="QuitLogin">
             <img src="../assets/login/Frame77.png" alt="" />
-            退出登录
+            {{ routePath == "/GoodsDetail" ? $t("Key39") : "退出登录" }}
           </p>
         </div>
       </div>
@@ -150,6 +162,7 @@ export default {
       lang: "",
       is_exist: "false",
       headTimer: null,
+      routePath: "",
     };
   },
   watch: {},
@@ -166,7 +179,7 @@ export default {
       let _this = this;
       _this.LoginNavIndex = command;
       if (!_this.userMessage) {
-        this.$message.warning("请重新登录");
+        //this.$message.warning("请重新登录");
         window.location.href = "/";
         return;
       }
@@ -207,6 +220,13 @@ export default {
         }
       });
     },
+    async changeLang(command) {
+      console.log(command);
+      this.lang = command.language_name;
+      let lang_type = command.language_type;
+      await setI18nLang(lang_type);
+      this.$router.go(0);
+    },
     getChildSysList() {
       let _this = this;
       let MethodName = "login_control-GetChildSysList_CanEnter_PC";
@@ -239,6 +259,8 @@ export default {
   },
   created() {
     let _this = this;
+    let routePath = this.$route.path;
+    this.routePath = routePath;
     let config = getConfig();
     if (config) {
       _this.configInfor = JSON.parse(config);
@@ -258,12 +280,12 @@ export default {
       } else {
         _this.projectName = "学习中心";
       }
+      _this.getLangList();
       _this.getNotReadMessage();
       _this.headTimer = setInterval(() => {
         _this.getNotReadMessage();
       }, 120000);
     }
-    //_this.getLangList();
   },
   beforeDestroy() {
     if (this.headTimer) {
@@ -289,32 +311,32 @@ export default {
   font-family: "sourceR";
   .logo {
     &-image {
-    //   width: 188px;
+      //   width: 188px;
       height: 48px;
       cursor: pointer;
     }
     display: flex;
     align-items: center;
-    .logo-projectlist{
-        display: flex;
-        padding: 0 24px;
-        height: 64px;
-        list-style: none;
-        li{
-            padding: 0 12px;
-            color: rgba(0, 0, 0, 0.45);
-            font-size: 16px;
-            line-height: 64px;
-            cursor: pointer;
-            font-weight: 500;
-            &:hover{
-                background: #F6F6F6;
-            }
-            &.active{
-                color: #FF9900;
-                background: #FFEFD6;
-            }
+    .logo-projectlist {
+      display: flex;
+      padding: 0 24px;
+      height: 64px;
+      list-style: none;
+      li {
+        padding: 0 12px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        line-height: 64px;
+        cursor: pointer;
+        font-weight: 500;
+        &:hover {
+          background: #f6f6f6;
         }
+        &.active {
+          color: #ff9900;
+          background: #ffefd6;
+        }
+      }
     }
   }
   .userName {

src/components/pyment/Audit.vue

@@ -0,0 +1,242 @@
+<template>
+  <!-- 审核 -->
+  <div class="Nopyment">
+    <div class="message">
+      <div>
+        <img :src="data.coverUrl" alt="" />
+      </div>
+      <div class="text">
+        <p class="p1">
+          {{ data.name }}
+        </p>
+        <p class="p2">
+          <span>xx课程</span>
+        </p>
+        <p class="p3">{{ data.teacher }}</p>
+      </div>
+      <div class="price">
+        <p>${{ data.price }}</p>
+      </div>
+    </div>
+    <div class="total">
+      <p class="p1">
+        <span> 一件商品，总金额： </span>
+        <span class="co-value">￥{{ data.price }}</span>
+      </p>
+      <p class="p2">
+        <span> 优惠折扣： </span>
+        <span class="co-value">-${{ discount_money }}</span>
+      </p>
+      <p class="p4">
+        <span></span>
+        <span class="co-value useCode">使没使用优惠码</span>
+      </p>
+      <p class="p3">
+        <span> 应付： </span>
+        <span class="co-value">￥{{ receivables_money }}</span>
+      </p>
+    </div>
+    <div class="submitBtn">
+      <div>
+        <img src="../../assets/teacherTrain/auditimg.png" alt="" />
+        参加本课程学习需提交申请，审核通过后完成付款即可参加学习。
+      </div>
+      <button @click="buy(data)">提交申请</button>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { LearnWebSI } from "@/api/api";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["data", "orderNumber", "closePyment"],
+  data() {
+    //这里存放数据
+    return {
+      discount_code: "", //优惠码
+      discount_money: 0.0, // 优惠金额
+      receivables_money: this.data.price, // 应收款
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 提交申请
+    buy(item) {},
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.Nopyment {
+  .message {
+    width: 656px;
+    height: 152px;
+    background: rgba(70, 70, 70, 0.03);
+    border-radius: 8px;
+    display: flex;
+    img {
+      width: 120px;
+      height: 120px;
+      margin-left: 16px;
+      margin-top: 16px;
+    }
+    .text {
+      margin-left: 24px;
+      .p1 {
+        width: 360px;
+        //   height: 45px;
+        max-height: 48px;
+        font-size: 16px;
+        line-height: 20px;
+        color: #2c2c2c;
+
+        margin-top: 22px;
+        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;
+          font-size: 12px;
+          text-align: center;
+          color: #ff9900;
+
+          line-height: 24px;
+          padding: 2px 8px;
+        }
+      }
+      .p3 {
+        margin-top: 10px;
+      }
+    }
+    .price {
+      p {
+        margin-left: 67px;
+        margin-top: 22px;
+        font-weight: bold;
+        font-size: 16px;
+        text-align: right;
+        color: #ff4c00;
+      }
+    }
+  }
+  .promotionCode {
+    display: flex;
+    justify-content: flex-start;
+    align-self: center;
+    width: 100%;
+    margin-top: 24px;
+    height: 58px;
+    line-height: 56px;
+    border-top: 1px solid rgba(44, 44, 44, 0.15);
+    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+    .sp1 {
+      font-size: 16px;
+      color: #000000;
+    }
+    input {
+      padding: 0 24px;
+      flex: 1;
+      height: 56px;
+      outline: none;
+      border: none;
+      box-sizing: border-box;
+    }
+    .sp2 {
+      cursor: pointer;
+      font-size: 16px;
+      color: #ff9900;
+    }
+  }
+  .total {
+    width: 656px;
+    text-align: right;
+    color: #000000;
+    font-size: 16px;
+    padding-top: 24px;
+    .useCode {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+    > 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;
+    button {
+      width: 120px;
+      height: 40px;
+      background: #ff9900;
+
+      border-radius: 4px;
+      color: white;
+      line-height: 40px;
+      text-align: center;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/pyment/Confirmorder.vue

@@ -0,0 +1,332 @@
+<template>
+  <!-- 未支付 -->
+  <div class="Nopyment" v-loading="loading">
+    <div class="message">
+      <div>
+        <img :src="data.picture_url" alt="" />
+      </div>
+      <div class="text">
+        <p class="p1">
+          {{ data.name }}
+        </p>
+        <!-- <p class="p2">
+          <span>xx课程</span>
+        </p> -->
+        <p class="p3">{{ data.author }}</p>
+      </div>
+      <div class="price">
+        <p>￥{{ data.price }}</p>
+      </div>
+    </div>
+    <div class="promotionCode">
+      <span class="sp1"> <!-- 使用优惠码 -->{{ this.$t("Key475") }} </span>
+      <!-- 请输入兑换码 -->
+      <input
+        v-model="discount_code"
+        type="text"
+        :placeholder="$t('Key109')"
+        @input="changeCode"
+      />
+      <span
+        class="sp2"
+        v-loading="codeloading"
+        @click="verifyCode"
+        v-if="isShow"
+      >
+        <!-- 确定 -->
+        {{ $t("Key94") }}</span
+      >
+      <span class="sp2" v-else>-{{ discount_money }}</span>
+    </div>
+    <div class="total">
+      <p class="p1">
+        <span>
+          <!-- 一件商品，总金额：  -->
+
+          {{ $t("Key53") }}：</span
+        >
+        <span class="co-value">￥{{ data.price }}</span>
+      </p>
+      <p class="p2">
+        <span>
+          <!-- 优惠折扣 -->
+          {{ $t("Key54") }}：</span
+        >
+        <span class="co-value">-￥{{ discount_money }}</span>
+      </p>
+      <p class="p3">
+        <span>
+          <!-- 应付  -->
+          {{ $t("Key55") }}：</span
+        >
+        <span class="co-value">￥{{ receivables_money }}</span>
+      </p>
+    </div>
+    <div class="submitBtn">
+      <button @click="buy(data)">
+        {{ $t("Key116") }}
+        <!-- 确定订单 -->
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { LearnWebSI } from "@/api/ajax";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["data", "changeOrderNumber", "goods_type"],
+  data() {
+    //这里存放数据
+    return {
+      discount_code: "", //优惠码
+      discount_money: 0, // 优惠金额
+      receivables_money: this.data.price, // 应收款
+      back_discount_code: "", //优惠码
+      loading: false,
+      codeloading: false,
+      isShow: true,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 添加订单
+    buy(item) {
+      // 首先添加订单
+      this.loading = true;
+      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.picture_id, //封面图片id
+        goods_person_name_desc: this.data.author, //老师
+        price: item.price, //价格
+        discount_code: this.back_discount_code,
+      })
+        .then((res) => {
+          console.log(res);
+          this.changeOrderNumber(
+            res.id,
+            this.back_discount_code,
+            this.discount_money,
+            this.receivables_money
+          );
+          this.loading = false;
+          // 调取支付接口
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
+    //更改优惠码
+    changeCode() {
+      this.isShow = true;
+      this.discount_money = "0.00";
+      this.receivables_money = this.data.hasOwnProperty("price")
+        ? this.data.price
+        : this.data.goods_price;
+    },
+    clearData() {
+      this.isShow = true;
+      this.discount_code = "";
+      this.discount_money = "0.00";
+      this.receivables_money = this.data.hasOwnProperty("price")
+        ? this.data.price
+        : this.data.goods_price;
+    },
+    //验证优惠码
+    verifyCode() {
+      if (this.discount_code == "") {
+        this.$message.warning(this.$t("Key109")); //"请输入优惠码"
+        return;
+      }
+      this.codeloading = true;
+      let MethodName = "order-order_manager-VerificationDiscountCode";
+      let resData = JSON.parse(JSON.stringify(this.data));
+
+      let data = {
+        goods_id: resData.id, //商品id
+        goods_type: 101, //商品类型
+        price: resData.price, //价格
+        discount_code: this.discount_code.trim(),
+      };
+      LearnWebSI(MethodName, data).then((res) => {
+        this.codeloading = false;
+        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 {
+    width: 100%;
+    height: 152px;
+    background: rgba(70, 70, 70, 0.03);
+    border-radius: 8px;
+    display: flex;
+    img {
+      width: 120px;
+      height: 120px;
+      margin-left: 16px;
+      margin-top: 16px;
+    }
+    .text {
+      margin-left: 24px;
+      .p1 {
+        width: 360px;
+        //   height: 45px;
+        max-height: 48px;
+        font-size: 16px;
+        line-height: 20px;
+        color: #2c2c2c;
+        margin-top: 22px;
+        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;
+          font-size: 12px;
+          text-align: center;
+          color: #ff9900;
+
+          line-height: 24px;
+          padding: 2px 8px;
+        }
+      }
+      .p3 {
+        margin-top: 10px;
+      }
+    }
+    .price {
+      p {
+        margin-left: 67px;
+        margin-top: 22px;
+        font-weight: bold;
+        font-size: 16px;
+        text-align: right;
+        color: #ff4c00;
+      }
+    }
+  }
+  .promotionCode {
+    display: flex;
+    justify-content: flex-start;
+    align-self: center;
+    width: 100%;
+    margin-top: 24px;
+    height: 58px;
+    line-height: 56px;
+    border-top: 1px solid rgba(44, 44, 44, 0.15);
+    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+    .sp1 {
+      font-size: 16px;
+      color: #000000;
+    }
+    input {
+      padding: 0 24px;
+      flex: 1;
+      height: 56px;
+      outline: none;
+      border: none;
+      box-sizing: border-box;
+    }
+    .sp2 {
+      cursor: pointer;
+      font-size: 16px;
+      color: #ff9900;
+    }
+  }
+  .total {
+    width: 656px;
+    text-align: right;
+    color: #000000;
+    font-size: 16px;
+    padding-top: 24px;
+    > 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;
+    button {
+      width: 120px;
+      height: 40px;
+      background: #ff9900;
+
+      border-radius: 4px;
+      color: white;
+      line-height: 40px;
+      text-align: center;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/pyment/Payment.vue

@@ -0,0 +1,349 @@
+<template>
+  <!-- 支付 -->
+  <div class="Nopyment" v-loading="loading">
+    <div class="message">
+      <div>
+        <img :src="data.picture_url" alt="" />
+      </div>
+      <div class="text">
+        <p class="p1">
+          {{ data.name }}
+        </p>
+        <!-- <p class="p2">
+          <span>xx课程</span>
+        </p> -->
+        <p class="p3">{{ data.author }}</p>
+      </div>
+      <div class="price">
+        <p>￥{{ data.price }}</p>
+      </div>
+    </div>
+    <div class="pay-platform">
+      <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"
+        >
+          <img :src="item.img" class="plat-logo" />
+          <img src="../../assets/pay/active.png" class="active-icon" />
+        </li>
+      </ul>
+    </div>
+    <div class="total">
+      <p class="p1">
+        <span>
+          <!-- 一件商品，总金额：  -->
+          {{ $t("Key53") }}：</span
+        >
+        <span class="co-value">￥{{ data.price }}</span>
+      </p>
+      <p class="p2">
+        <span>
+          <!-- 优惠折扣 -->
+          {{ $t("Key54") }}：
+        </span>
+        <span class="co-value">-￥{{ data.discount_money }}</span>
+      </p>
+      <p class="p4">
+        <span></span>
+        <span class="co-value useCode">
+          <!-- "没使用优惠码" -->
+          {{ data.back_discount_code ? data.back_discount_code : $t("Key108") }}
+        </span>
+      </p>
+      <p class="p3">
+        <span>
+          <!-- 应付  -->
+          {{ $t("Key55") }}：
+        </span>
+        <span class="co-value">￥{{ data.receivables_money }}</span>
+      </p>
+    </div>
+    <div class="submitBtn">
+      <button @click="buy(data)"><!-- 去支付 -->{{ $t("Key474") }}</button>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { LearnWebSI } from "@/api/ajax";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["data", "orderNumber", "closePyment"],
+  data() {
+    //这里存放数据
+    return {
+      loading: false,
+      platList: [
+        {
+          img: require("../../assets/pay/shouxinyi.png"),
+          isSelected: true,
+        },
+      ],
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 购买
+    buy(item) {
+      this.loading = true;
+      // 首先添加订单
+      let Mnam = "order-order_manager-PayMyOrder";
+      LearnWebSI(Mnam, {
+        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 {
+            window.location.href = res.pay_page_url;
+          }
+          // this.$message({
+          //   type: "success",
+          //   message: "支付成功",
+          // });
+          // this.closePyment("支付成功");
+          // this.loading = false;
+          // 调取支付接口
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.Nopyment {
+  .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;
+    &-title {
+      padding: 0;
+      margin: 0;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 150%;
+      color: #000000;
+      margin-bottom: 16px;
+    }
+    &-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0;
+      padding: 0;
+      > li {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: 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;
+        > .plat-logo {
+          width: 99px;
+          height: 26px;
+        }
+        > .active-icon {
+          position: absolute;
+          bottom: -1px;
+          right: -1px;
+          width: 20px;
+          height: 20px;
+          display: block;
+        }
+        &.active {
+          border-color: #ff9900;
+        }
+      }
+    }
+  }
+  .message {
+    width: 656px;
+    height: 152px;
+    background: rgba(70, 70, 70, 0.03);
+    border-radius: 8px;
+    display: flex;
+    margin-bottom: 24px;
+    img {
+      width: 120px;
+      height: 120px;
+      margin-left: 16px;
+      margin-top: 16px;
+    }
+    .text {
+      margin-left: 24px;
+      .p1 {
+        width: 360px;
+        //   height: 45px;
+        max-height: 48px;
+        font-size: 16px;
+        line-height: 20px;
+        color: #2c2c2c;
+
+        margin-top: 22px;
+        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;
+          font-size: 12px;
+          text-align: center;
+          color: #ff9900;
+
+          line-height: 24px;
+          padding: 2px 8px;
+        }
+      }
+      .p3 {
+        margin-top: 10px;
+      }
+    }
+    .price {
+      p {
+        margin-left: 67px;
+        margin-top: 22px;
+        font-weight: bold;
+        font-size: 16px;
+        text-align: right;
+        color: #ff4c00;
+      }
+    }
+  }
+  .promotionCode {
+    display: flex;
+    justify-content: flex-start;
+    align-self: center;
+    width: 100%;
+    margin-top: 24px;
+    height: 58px;
+    line-height: 56px;
+    border-top: 1px solid rgba(44, 44, 44, 0.15);
+    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+    .sp1 {
+      font-size: 16px;
+      color: #000000;
+    }
+    input {
+      padding: 0 24px;
+      flex: 1;
+      height: 56px;
+      outline: none;
+      border: none;
+      box-sizing: border-box;
+    }
+    .sp2 {
+      cursor: pointer;
+      font-size: 16px;
+      color: #ff9900;
+    }
+  }
+  .total {
+    width: 656px;
+    text-align: right;
+    color: #000000;
+    font-size: 16px;
+    padding-top: 24px;
+    .useCode {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+    > 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;
+    button {
+      width: 120px;
+      height: 40px;
+      background: #ff4d00;
+
+      border-radius: 4px;
+      color: white;
+      line-height: 40px;
+      text-align: center;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="scss">
+</style>

src/main.js

@@ -15,6 +15,7 @@ import store from './store'
 import router from './router'
 
 import '@/permission' // permission control
+import i18n from '@/utils/i18n';
 
 // import '@/rem.js'
 // 拖拽插件
@@ -61,6 +62,7 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   data: function () {
     return {
       isRecording: false

src/router/index.js

@@ -28,74 +28,79 @@ Vue.use(Router);
  * all roles can be accessed
  */
 export const constantRoutes = [{
-        path: '/404',
-        component: () =>
-            import ('@/views/404'),
-        hidden: true
-    },
-    {
-        path: '/login',
-        component: () =>
-            import ('@/views/login'),
-        hidden: true
-    },
-    {
-        path: '/',
-        redirect: '/EnterSys',
-        hidden: true
-    },
-    {
-        path: '/EnterSys',
-        component: () =>
-            import ('@/views/courseList')
-    },
-    {
-        path: '/courseView',
-        component: () =>
-            import ('@/views/courseView')
-    },
-    {
-        path: '/bookView',
-        component: () =>
-            import ('@/views/bookView')
-    },
-    {
-        path: '/adultInput',
-        component: () =>
-            import ('@/views/adultInput')
-    },
-    {
-        path: '/adultInput3',
-        component: () =>
-            import ('@/views/adultInput3')
-    },
-    {
-        path: '/JoinLine',
-        component: () =>
-            import ('@/components/common/JoinLine')
-    },
-    {
-        path: '/discountCodeList',
-        component: () =>
-            import ('@/views/discountCodeList')
-    },
-    // 404 page must be placed at the end !!!
-    { path: '*', redirect: '/', hidden: true }
+  path: '/404',
+  component: () =>
+    import('@/views/404'),
+  hidden: true
+},
+{
+  path: '/login',
+  component: () =>
+    import('@/views/login'),
+  hidden: true
+},
+{
+  path: '/',
+  redirect: '/EnterSys',
+  hidden: true
+},
+{
+  path: '/EnterSys',
+  component: () =>
+    import('@/views/courseList')
+},
+{
+  path: '/courseView',
+  component: () =>
+    import('@/views/courseView')
+},
+{
+  path: '/bookView',
+  component: () =>
+    import('@/views/bookView')
+},
+{
+  path: '/adultInput',
+  component: () =>
+    import('@/views/adultInput')
+},
+{
+  path: '/adultInput3',
+  component: () =>
+    import('@/views/adultInput3')
+},
+{
+  path: '/JoinLine',
+  component: () =>
+    import('@/components/common/JoinLine')
+},
+{
+  path: '/discountCodeList',
+  component: () =>
+    import('@/views/discountCodeList')
+},
+{
+  path: '/GoodsDetail',
+  component: () =>
+    import('@/views/TextbookDetail')
+},
+// 404 page must be placed at the end !!!
+{ path: '*', redirect: '/', hidden: true }
 ];
 
 const createRouter = () =>
-    new Router({
-        // mode: 'history', // require service support
-        scrollBehavior: () => ({ y: 0 }),
-        routes: constantRoutes
-    });
+  new Router({
+    // mode: 'history', // require service support
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes
+  });
 
 const router = createRouter();
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-    const newRouter = createRouter();
-    router.matcher = newRouter.matcher; // reset router
+  const newRouter = createRouter();
+  router.matcher = newRouter.matcher; // reset router
 }
 
 export default router;

src/store/getters.js

@@ -3,6 +3,7 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  language_type: state => state.lang.language_type,
 }
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import lang from './modules/lang'
 
 Vue.use(Vuex)
 
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    lang
   },
   getters
 })

src/store/modules/lang.js

@@ -0,0 +1,38 @@
+import Cookies from 'js-cookie';
+import { getContentFile } from '@/api/ajax';
+
+const state = {
+  language_type: localStorage.getItem('language_type') || 'ZH'
+}
+
+const mutations = {
+  SET_UPDATE_LANGUAGE_TYPE: (state, language_type) => {
+    localStorage.setItem('language_type', language_type);
+    state.language_type = language_type;
+  },
+}
+
+const actions = {
+  // 用户更换语言类型
+  updateLanguageType({ commit }, language_type) {
+    return new Promise((reslove, reject) => {
+      let MethodName = "login_control-UpdateLanguageType";
+      getContentFile(MethodName, { language_type })
+        .then(() => {
+          commit('SET_UPDATE_LANGUAGE_TYPE', language_type);
+          reslove();
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  },
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/utils/i18n.js

@@ -47,18 +47,24 @@ export async function setI18nLang(language_type) {
  * @param {Object} Parameter word_key_list 需要读取的词汇
  */
 export function updateWordPack(Parameter) {
-  Parameter.language_type = store.getters.language_type;
-  let MethodName = 'language_manager-GetWordPack';
-  getStaticContent(MethodName, Parameter).then(data => {
-    let localWord = i18n.messages[data.language_type];
-    if (localWord === undefined) {
-      localWord = {};
-    }
-    let wordPack = Object.assign(localWord, data.word_pack);
+  return new Promise((resolve, reject) => {
+    Parameter.language_type = store.getters.language_type;
+    let MethodName = 'language_manager-GetWordPack';
+    getStaticContent(MethodName, Parameter).then(data => {
+      let localWord = i18n.messages[data.language_type];
+      if (localWord === undefined) {
+        localWord = {};
+      }
+      let wordPack = Object.assign(localWord, data.word_pack);
+
+      i18n.setLocaleMessage(data.language_type, wordPack);
+      resolve()
+      // localStorage.setItem('i18n-message', JSON.stringify(i18n.messages));
+    }).catch(err => {
+      reject(err)
+    });
+  })
 
-    i18n.setLocaleMessage(data.language_type, wordPack);
-    // localStorage.setItem('i18n-message', JSON.stringify(i18n.messages));
-  });
 }
 
 export default i18n;

src/views/TextbookDetail.vue

@@ -188,8 +188,7 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import Header from "@/components/inputModules/common/Header";
-import HeaderOne from "@/components/inputModules/common/HeaderOne";
+import Header from "@/components/Header";
 import { TextbookAPI, LearnWebSI } from "@/api/ajax";
 import Confirmorder from "@/components/pyment/Confirmorder";
 import Payment from "@/components/pyment/Payment";
@@ -199,7 +198,6 @@ export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     Header,
-    HeaderOne,
     Confirmorder,
     Payment,
     BookView,
@@ -357,6 +355,9 @@ export default {
   async created() {
     await updateWordPack({
       word_key_list: [
+        "Key9",
+        "Key38",
+        "Key39",
         "Key52",
         "Key53",
         "Key54",