添加购买书籍页面

src/views/TextbookDetail.vue

@@ -0,0 +1,788 @@
+<template>
+  <!-- 教材详情 -->
+  <div class="TextbookDetail" v-if="TextbookData && isData">
+    <div class="nav">
+      <!-- 登录导航 -->
+      <Header />
+      <div class="shade"></div>
+    </div>
+    <div class="main" v-loading="loading">
+      <div class="bookDetail" v-if="detailSHow">
+        <div class="rightUp">
+          <span>HOT</span>
+        </div>
+        <div class="img">
+          <img :src="TextbookData.picture_url" alt="" />
+        </div>
+        <div class="text">
+          <p class="p1">{{ TextbookData.name }}</p>
+          <p class="p2">{{ TextbookData.org_name }}</p>
+          <p class="p2">{{ TextbookData.author }}</p>
+          <p class="p3">
+            {{ TextbookData.description }}
+          </p>
+          <div class="operation">
+            <span class="price">
+              ￥<span
+                class="price_1"
+                v-html="changePrice(TextbookData.price)"
+              ></span>
+            </span>
+            <button @click="getPurchase" class="get">
+              <!-- Key390-去学习 Key72-购买 -->
+              {{ bookIsBuy == "true" ? this.$t("Key390") : this.$t("Key72") }}
+            </button>
+            <!-- <button   class="acquired">
+              ACQUIRED
+            </button> -->
+            <span class="enshrine" @click="enshrineEvent">
+              <img
+                v-if="enshrine == 'false'"
+                src="../assets/textBookDetail/enshrine2.png"
+                alt=""
+              />
+              <img v-else src="../assets/textBookDetail/enshrine1.png" alt="" />
+            </span>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="more"  v-if="detailSHow">
+        <div class="moreTitle">更多推荐</div>
+        <div class="moreList">
+          <div class="moreOne">
+            <div>
+              <img src="../assets/textBookDetail/Rectangle 905.png" alt="" />
+            </div>
+            <div class="text">
+              <p class="p1">Learn Chinese with Ease-Learn Chinese with Ease</p>
+              <p>Beijing language and Culture University</p>
+              <p>Esther Howard</p>
+              <div class="operation">
+                <span class="price">
+                  ￥
+                  <span
+                    class="price_1"
+                    v-text="changePrice('19.99')"
+                  ></span>
+                  <span
+                    class="price_2"
+                    v-text="changePrice('19.99')"
+                  ></span>
+                </span>
+                <button class="get">GET</button>
+              </div>
+            </div>
+          </div>
+          <div class="moreOne">
+            <div>
+              <img src="../assets/textBookDetail/Rectangle 906.png" alt="" />
+            </div>
+            <div class="text">
+              <p class="p1">Learn Chinese with Ease-Learn Chinese with Ease</p>
+              <p>Beijing language and Culture University</p>
+              <p>Esther Howard</p>
+              <div class="operation">
+                <span class="price">
+                  ￥
+                  <span
+                    class="price_1"
+                    v-text="changePrice('19.99')"
+                  ></span>
+                  <span
+                    class="price_2"
+                    v-text="changePrice('19.99')"
+                  ></span>
+                </span>
+                <button class="get">GET</button>
+              </div>
+            </div>
+          </div>
+          <div class="moreOne">
+            <div>
+              <img src="../assets/textBookDetail/Rectangle 907.png" alt="" />
+            </div>
+            <div class="text">
+              <p class="p1">Learn Chinese with Ease-Learn Chinese with Ease</p>
+              <p>Beijing language and Culture University</p>
+              <p>Esther Howard</p>
+              <div class="operation">
+                <span class="price">
+                  ￥
+                  <span
+                    class="price_1"
+                    v-text="changePrice('1', '19.99')"
+                  ></span>
+                  <span
+                    class="price_2"
+                    v-text="changePrice('2', '19.99')"
+                  ></span>
+                </span>
+                <button class="get">GET</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+      <div class="cutDownOrimg" v-if="detailSHow">
+        <div class="sele">
+          <div
+            @click="SelectShowEvent('1')"
+            :class="SelectShow == '1' ? 'select' : ''"
+          >
+            <!-- 目录 -->{{ $t("Key612") }}
+          </div>
+          <div
+            @click="SelectShowEvent('2')"
+            :class="SelectShow == '1' ? '' : 'select'"
+          >
+            <!-- 资源 -->{{ $t("Key613") }}
+          </div>
+        </div>
+      </div>
+      <div v-if="SelectShow == '1'" class="Catalogue">
+        <BookView
+          :bookId="TextBookId"
+          @bookdetailShow="bookdetailShow"
+          :bookIsBuy="bookIsBuy"
+        ></BookView>
+      </div>
+      <div v-else class="Resources">
+        <div>
+          <img src="../assets/textBookDetail/fileType1.png" alt="" />
+          <span> 文件名 </span>
+          <img src="../assets/textBookDetail/upload.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <!-- 商品详情 -->
+    <el-dialog
+      class="buyWindow"
+      :title="$t('Key52')"
+      :visible.sync="NopymentShow"
+      width="720px"
+      :before-close="closeNoPyment"
+    >
+      <Confirmorder
+        :data="TextbookData"
+        :goods_type="101"
+        :changeOrderNumber="changeOrderNumber"
+        ref="Confirmorder"
+      />
+    </el-dialog>
+    <!-- 订单号 -->
+    <el-dialog
+      :title="$t('Key472') + '：' + orderNumber"
+      :visible.sync="PymentShow"
+      width="720px"
+      :before-close="closePyment"
+    >
+      <Payment
+        :data="TextbookData"
+        :orderNumber="orderNumber"
+        :closePyment="closePyment"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/inputModules/common/Header";
+import HeaderOne from "@/components/inputModules/common/HeaderOne";
+import { TextbookAPI, LearnWebSI } from "@/api/ajax";
+import Confirmorder from "@/components/pyment/Confirmorder";
+import Payment from "@/components/pyment/Payment";
+import BookView from "@/views/bookView"; // 教材预览
+import { updateWordPack } from "@/utils/i18n";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Header,
+    HeaderOne,
+    Confirmorder,
+    Payment,
+    BookView,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      enshrine: "false",
+      IsPurchase: false,
+      SelectShow: "1", //选择展示课程资源还是下载
+      TextBookId: null,
+      TextbookData: null,
+      loading: false,
+      NopymentShow: false, //添加订单弹窗
+      PymentShow: false, //支付订单弹窗
+      orderNumber: null, //订单号
+      IsDownload: false, //是否可以下载
+      detailSHow: true, // 除教材预览外其他内容是否显示
+      bookIsBuy: "false", // 教材是否已购买
+      isData: false,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    closeNoPyment() {
+      this.NopymentShow = false;
+      this.$refs.Confirmorder.clearData();
+    },
+    closePyment(str) {
+      this.PymentShow = false;
+      this.$refs.Confirmorder.clearData();
+      if (str == "支付成功") {
+        this.getdetail();
+      }
+    },
+    // 生成订单 同时切换到支付弹窗
+    changeOrderNumber(
+      val,
+      back_discount_code,
+      discount_money,
+      receivables_money
+    ) {
+      this.orderNumber = val;
+      this.NopymentShow = false;
+      this.TextbookData.back_discount_code = back_discount_code;
+      this.TextbookData.discount_money = discount_money;
+      this.TextbookData.receivables_money = receivables_money;
+      this.PymentShow = true;
+      this.isConfirmorder = false;
+    },
+    // 选择课程资源还是下载
+    SelectShowEvent(num) {
+      this.SelectShow = num;
+    },
+    changePrice(price) {
+      let str = "";
+      price = price ? price.toString() : "0.00";
+      if (price.indexOf(".") > -1) {
+        let arr = price.split(".");
+        str = `<span style="font-size: 24px;">${arr[0]}</span>.<span style="font-size: 16px;">${arr[1]}</span>`;
+      } else {
+        str = `<span style="font-size: 24px;">${price}</span>.<span  style="font-size: 16px;">00</span>`;
+      }
+
+      return str;
+    },
+
+    // 收藏
+    enshrineEvent() {
+      //   this.enshrine = !this.enshrine;
+      if (this.enshrine == "false") {
+        let Mname = "order-collection_manager-AddMyCollection";
+        let data = {
+          goods_id: this.TextBookId,
+          goods_type: 101,
+          goods_name: this.TextbookData.name,
+          goods_person_name_desc: this.TextbookData.author,
+          goods_picture_id: this.TextbookData.picture_id,
+          goods_price: this.TextbookData.price,
+        };
+        LearnWebSI(Mname, data).then((res) => {
+          this.enshrine = "true";
+          this.$message.success(this.$t("Key575")); //"收藏成功"
+        });
+      } else {
+        let Mname = "order-collection_manager-CancelMyGoodsCollection";
+        let data = {
+          goods_type: 101,
+          goods_id_list: [this.TextBookId],
+        };
+        LearnWebSI(Mname, data).then((res) => {
+          this.enshrine = "false";
+          this.$message.success(this.$t("Key396")); //"取消收藏成功"
+        });
+      }
+    },
+    // 购买
+    getPurchase() {
+      if (this.bookIsBuy == "true") {
+        this.$router.push("/courseview?bookId=" + this.TextBookId);
+      } else {
+        this.NopymentShow = true;
+      }
+    },
+    bookdetailShow(flag) {
+      this.detailSHow = flag;
+    },
+    //获取当前书籍是否已购买
+    handleIsBuy() {
+      let Mname = "order-order_manager-CheckMyGoodsBuyStatus";
+      let data = {
+        goods_type: 101,
+        goods_id: this.TextBookId,
+      };
+      LearnWebSI(Mname, data).then((res) => {
+        this.bookIsBuy = res.is_buy;
+      });
+    },
+    // 获取当前书籍是否已收藏
+    handleIsEnshrine() {
+      let Mname = "order-collection_manager-CheckMyGoodsCollectionStatus";
+      let data = {
+        goods_type: 101,
+        goods_id: this.TextBookId,
+      };
+      LearnWebSI(Mname, data).then((res) => {
+        this.enshrine = res.is_collection;
+      });
+    },
+    getdetail() {
+      this.loading = true;
+      this.TextBookId = this.$route.query.goods_id;
+      let Mname = "book-book_manager-GetBook";
+      // 获取课程详情
+      TextbookAPI(Mname, {
+        id: this.TextBookId,
+      })
+        .then((res) => {
+          this.TextbookData = res;
+          this.loading = false;
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+      this.handleIsBuy();
+      this.handleIsEnshrine();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created() {
+    await updateWordPack({
+      word_key_list: [
+        "Key52",
+        "Key53",
+        "Key54",
+        "Key55",
+        "Key72",
+        "Key94",
+        "Key108",
+        "Key109",
+        "Key116",
+        "Key390",
+        "Key396",
+        "Key472",
+        "Key473",
+        "Key474",
+        "Key475",
+        "Key575",
+        "Key612",
+        "Key613",
+      ],
+    });
+    this.isData = true;
+    this.getdetail();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.TextbookDetail {
+  // height: 100%;
+
+  .price_1 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 150%;
+    color: #ffffff;
+    .num1 {
+      font-size: 24px;
+    }
+    .num2 {
+      font-size: 16px;
+    }
+  }
+  .nav {
+    background: url("../assets/textBookDetail/Homebg2.png") no-repeat center;
+    background-size: 100% 100%;
+    // height: 60px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    position: relative;
+    .shade {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      color: #fff;
+      font-weight: bold;
+      font-size: 18px;
+      justify-content: space-around;
+      align-items: center;
+      .el-menu-demo {
+        background: rgba(0, 0, 0, 0);
+      }
+      // 取消组件默认的样式
+      .el-menu.el-menu--horizontal {
+        border-bottom: none;
+        li:hover {
+          background: none;
+        }
+        li {
+          background: none;
+        }
+      }
+      .nav_title {
+        text-align: left;
+      }
+      .seek {
+        input {
+          width: 450px;
+          height: 46px;
+          background: #979797;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 18px;
+          opacity: 0.5;
+        }
+        img {
+          position: relative;
+          right: 40px;
+          top: 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .headerone {
+    // margin-top: 10px;
+  }
+  .main {
+    min-height: 100%;
+    padding-top: 52px;
+    background: #e5e5e5;
+    padding-bottom: 20px;
+
+    .bookDetail {
+      width: 1240px;
+      margin: 0 auto;
+      background: #6e767c;
+      border-radius: 8px;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+      padding: 40px;
+      box-sizing: border-box;
+      .img {
+        margin-right: 32px;
+        img {
+          width: 168px;
+          height: 224px;
+        }
+      }
+      .rightUp {
+        margin: 0;
+        width: 72px;
+        height: 72px;
+        background: url("../assets/textBookDetail/Rectangle903.png");
+        position: absolute;
+        right: 0;
+        top: 0;
+        // text-align: right;
+        span {
+          display: inline-block;
+          color: #fff;
+          transform: rotateZ(45deg);
+          position: absolute;
+          left: 30px;
+          top: 15px;
+        }
+      }
+
+      .text {
+        width: 900px;
+        color: white;
+        p {
+          font-size: 16px;
+          margin: 0;
+        }
+        .p1 {
+          font-size: 40px;
+          font-weight: normal;
+          font-size: 40px;
+          line-height: 150%;
+          color: #ffffff;
+        }
+        > :not(.p1) {
+          margin-top: 16px;
+        }
+        .p2 {
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 150%;
+          color: #ffffff;
+        }
+        .p3 {
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 150%;
+          color: #ffffff;
+        }
+
+        .price {
+          font-size: 24px;
+          .price_2 {
+            font-size: 16px;
+          }
+        }
+        .operation {
+          display: flex;
+          align-items: center;
+          margin-top: 16px;
+        }
+        .get {
+          width: 120px;
+          height: 40px;
+          background: #ff9900;
+          border-radius: 4px;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 20px;
+          margin-left: 30px;
+          cursor: pointer;
+        }
+        .acquired {
+          width: 120px;
+          height: 40px;
+          background: #d5d5d5;
+          border-radius: 4px;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 16px;
+          margin-left: 30px;
+          cursor: pointer;
+        }
+        .enshrine {
+          margin-left: 30px;
+          img {
+            width: 24px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .more {
+      width: 1240px;
+      margin: 0 auto;
+      margin-top: 30px;
+      .moreTitle {
+        font-weight: 600;
+        font-size: 20px;
+        color: #000000;
+      }
+      .moreTitle::before {
+        content: "|";
+        background: #ff9900;
+        color: #ff9900;
+        margin-right: 16px;
+      }
+      .moreList {
+        width: 1300px;
+        margin: 0 auto;
+        // margin-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        // overflow-y: hidden;
+        // overflow-x: scroll;
+        .moreOne {
+          margin-right: 20px;
+          margin-top: 20px;
+          width: 598px;
+          height: 236px;
+          background: #ffffff;
+          border-radius: 8px;
+          display: flex;
+          > div {
+            margin-left: 32px;
+            margin-top: 32px;
+            img {
+              width: 120px;
+              height: 160px;
+            }
+          }
+          .text {
+            width: 390px;
+            margin-right: 23px;
+            > p:not(.p1) {
+              font-size: 16px;
+              color: #2c2c2c;
+              opacity: 0.7;
+              margin-top: 10px;
+            }
+            .p1 {
+              font-weight: 600;
+              font-size: 20px;
+              color: #2c2c2c;
+            }
+            .operation {
+              margin-top: 10px;
+              text-align: right;
+            }
+            .get {
+              width: 120px;
+              height: 40px;
+              background: #ff9900;
+              border-radius: 4px;
+              border: none;
+              outline: none;
+              color: white;
+              font-size: 20px;
+              margin-left: 30px;
+              cursor: pointer;
+            }
+            .acquired {
+              width: 120px;
+              height: 40px;
+              background: #d5d5d5;
+              border-radius: 4px;
+              border: none;
+              outline: none;
+              color: white;
+              font-size: 16px;
+              margin-left: 30px;
+              cursor: pointer;
+            }
+            .price {
+              font-size: 24px;
+              .price_2 {
+                font-size: 16px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .cutDownOrimg {
+      width: 1240px;
+      margin: 0 auto;
+      margin-top: 24px;
+      .sele {
+        width: 318px;
+        height: 48px;
+        background: #ebebeb;
+        border-radius: 30px;
+        color: #9f9f9f;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+        > div {
+          width: 158px;
+          height: 48px;
+          border-radius: 30px;
+          line-height: 48px;
+          text-align: center;
+          cursor: pointer;
+        }
+        .select {
+          background: #ff9900;
+          color: white;
+          box-shadow: 0px 2px 8px rgba(255, 153, 0, 0.15);
+        }
+      }
+    }
+    .Catalogue {
+      margin: 24px auto;
+      width: 1240px;
+      height: 710px;
+      background: #ffffff;
+      display: flex;
+      .left {
+        width: 340px;
+        height: 710px;
+        border-right: 1px solid #d9d9d9;
+        .title {
+          width: 80%;
+          margin: 29px auto;
+          font-weight: 600;
+          font-size: 24px;
+          color: #000000;
+          cursor: pointer;
+        }
+        .subtitle {
+          width: 80%;
+          margin: 0 auto;
+          height: 44px;
+          line-height: 44px;
+          font-weight: bold;
+          font-size: 14px;
+          color: #000000;
+          cursor: pointer;
+        }
+      }
+      .right {
+        width: 860px;
+        height: 710px;
+      }
+    }
+    .Resources {
+      margin: 24px auto;
+      width: 1240px;
+      height: 710px;
+      background: #ffffff;
+      display: flex;
+      box-sizing: border-box;
+      padding: 20px 24px;
+      div {
+        height: 40px;
+        margin: 12px 8px;
+        border: 1px solid rgba(44, 44, 44, 0.15);
+        border-radius: 4px;
+        padding: 0 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        img {
+          width: 24px;
+          margin: 0 10px;
+        }
+        span {
+          width: 182px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.buyWindow {
+  .el-dialog__body {
+    padding: 20px 32px;
+  }
+  .el-dialog__header {
+    padding: 20px 32px 10px;
+  }
+}
+</style>