GCLS_Page_Book/src/views/TextbookDetail.vue

<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: [
        "Key9",
        "Key38",
        "Key39",
        "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 {
          min-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 {
              min-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>