HM21St_Page_User/src/views/bookShelf/bookPeruseItem.vue

<template>
  <div class="bookItem">
    <Header
      :headerBg="headerBg"
      :headerBorder="headerBorder"
      :userBg="userBg"
      :LoginNavIndex="LoginNavIndex"
      ref="header"
    />
    <div class="navBar" v-if="info">
      <div class="navBar-left">
        <a class="goback" @click="$router.go(-1)"
          ><i class="el-icon-arrow-left"></i>精读课堂</a
        >
        <div class="border"></div>
        <p>{{ "第 " + info.batch + " 期" }}{{ info.cn_title }}</p>
      </div>
      <!-- <div class="navBar-right">
            <a @click="handleShare">
                <svg-icon icon-class="share-personal" className="icon-share"></svg-icon>
                <span>分享</span>
            </a>
            <a @click="handlelike">
                <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
                <span>收藏</span>
            </a>
        </div> -->
    </div>
    <div class="main-top" v-if="info">
      <div class="main-top-inner">
        <el-carousel
          class="swiper-container"
          trigger="click"
          arrow="never"
          height="414px"
        >
          <!-- <el-carousel-item v-for="(item1, index) in data.imgList" :key="index"> -->
          <el-image
            class="image"
            :src="
              info.cover_img
                ? info.cover_img
                : bookType === 'baozhi'
                ? require('../../assets/baozhi' +
                    (Math.floor(Math.random() * 2) + 1) +
                    '.png')
                : require('../../assets/kecheng' +
                    (Math.floor(Math.random() * 3) + 1) +
                    '.png')
            "
            :fit="'contain'"
          >
          </el-image>
          <!-- </el-carousel-item> -->
        </el-carousel>
        <div class="book-info-right">
          <h1 class="title">{{ info.cn_title }}</h1>
          <!-- <b class="org">{{data.org}}</b><span class="date">2023.07.01-2023.07.21</span> -->
          <div class="sales-box" v-if="isBuy === 'false'">
            <div class="sales-left">
              <span>优惠价</span>
              <span class="OPPOSans">￥{{ info.price | cutMoneyFiter }}</span>
            </div>
            <span class="sales-right" v-if="sales >= 1000"
              >累计销售 {{ salesCn }}</span
            >
          </div>
          <!-- <div class="book-describe">
                    <h2 class="title">{{data.describe.title}}</h2>
                    <span class="author">{{'BY '+data.describe.author}}</span>
                    <p class="describe">{{data.describe.describe}}</p>
                </div> -->
          <div class="info-box">
            <div class="info-item">
              <label>机构</label>
              <span>中报二十一世纪（北京）传媒科技有限公司</span>
            </div>
            <div class="info-item">
              <label>学段</label>
              <span>{{ info.study_phase_name }}版</span>
            </div>
            <div class="info-item">
              <label>期数</label>
              <span>{{ info.batch }} 期</span>
            </div>
            <div class="info-item">
              <label>有效期</label>
              <span>永久有效</span>
            </div>
            <div class="info-item">
              <label>主题</label>
              <span>{{ info.label }}</span>
            </div>
          </div>
          <div class="btn-box">
            <a class="continue" v-if="isBuy === 'true'" @click="handleLink"
              >继续学习</a
            >
            <template v-else>
              <a
                class="el-button"
                @click="handleChangeWay('wei')"
                :loading="createOrderLoading"
                >立即购买</a
              >
              <!-- <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a> -->
              <a class="upgrade" @click="linkSubscribe">多期订阅</a>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="main-center" v-if="info">
      <el-tabs type="card" style="margin-bottom: 24px" v-if="info.introduction">
        <el-tab-pane label="简介">
          <div v-html="info.introduction"></div>
        </el-tab-pane>
      </el-tabs>
      <div class="banner-box-close" v-if="bannerFlag">
        <a v-if="1 == 2" href="#" target="_blank">
          <img class="banner-item" src="../../assets/banner4.png" />
        </a>
        <img v-else class="banner-item" src="../../assets/banner4.png" />
        <div class="close-box">
          <a class="close-btn" @click="bannerFlag = false"
            ><i class="el-icon-close"></i
          ></a>
          <span class="close-tips">广告</span>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="paymentShow"
      :show-close="false"
      :close-on-click-modal="false"
      width="712px"
      class="bookItem-dialog"
      v-if="paymentShow"
    >
      <Payment
        :data="info"
        :payWay="payWay"
        @handleClose="handleClose"
        @handleSuccess="handleSuccess"
        :orderId="orderId"
        :qr_code_url="qr_code_url"
        :order_amount="order_amount"
      />
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import BookCard from "@/components/common/BookCard.vue";
import Payment from "./components/Payment.vue";
import TreeList from "./components/TreeList";
import CourseList from "./components/CourseList.vue";
import { cutMoneyFiter } from "@/utils/defined";
import { getLogin, getNoToken } from "@/api/ajax";
import { getToken } from "@/utils/auth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookCard, Payment, TreeList, CourseList },
  props: [],
  filters: {
    cutMoneyFiter,
  },
  data() {
    //这里存放数据
    return {
      config: this.$route.query.headerConfig
        ? decodeURIComponent(this.$route.query.headerConfig)
        : "",
      LoginNavIndex: 0,
      userBg: "rgba(0, 0, 0, 0.24)",
      headerBorder: "#5C5C5C",
      headerBg: "#00ADEF",
      previousPage: "商城",
      tagBg: ["#C9EBFF", "#FFFAC9", "#D7C9FF"], // 标签背景色
      tagColor: ["#006DAA", "#AA8500", "#7849C4"], // 标签字体颜色
      paymentShow: false, // 支付弹窗
      payWay: this.$route.query.paywei ? this.$route.query.paywei : "dui",
      bookType: this.$route.query.cardType
        ? this.$route.query.cardType
        : "baozhi", // 书籍类型
      bannerFlag: true, // 是否展示广告
      id: this.$route.query.id ? this.$route.query.id : "",
      info: null, // 信息
      courseList: [],
      sales: null,
      salesCn: "",
      isBuy: "false",
      userMessage: getToken() ? JSON.parse(getToken()) : null,
      orderId: "",
      qr_code_url: "",
      pre_play_cs_item_id: "", //上次阅读课节id
      pre_play_index: null, // 上次阅读索引
      order_amount: null,
      createOrderLoading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 分享
    handleShare() {},
    // 收藏
    handlelike() {},
    handleChangeWay(type) {
      if (!this.userMessage) {
        this.$refs.header.handleLogin(
          "/bookItem?headerConfig=" +
            this.$route.query.headerConfig +
            "&cardType=" +
            this.bookType +
            "&id=" +
            this.id +
            "&paywei=" +
            type,
          "url"
        );
        return false;
      }
      this.payWay = type;
      this.handleOrder();
    },
    // 关闭弹窗
    handleClose() {
      this.paymentShow = false;
      this.getInfo();
    },
    handleSuccess() {
      this.paymentShow = false;
      this.getInfo();
    },
    // 详情
    getInfo() {
      let MethodName = "/PaperServer/Client/Iread/GetIreadBriefInfo";
      let data = {
        id: this.id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.info = res.data;
          }
        })
        .catch(() => {});
      if (this.userMessage) {
        getLogin("/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus", {
          goods_type: 3,
          goods_id: this.id,
        })
          .then((res) => {
            if (res.status === 1) {
              this.isBuy = res.buy_info.is_buy;
              this.sales = res.data.sold_count;
              if (this.sales < 1000) {
                this.salesCn = "";
              } else if (1000 <= this.sales && this.sales < 10000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "000+";
              } else if (10000 <= this.sales && this.sales < 100000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "万+";
              } else if (100000 <= this.sales && this.sales < 1000000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "0万+";
              } else if (1000000 <= this.sales && this.sales < 10000000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "00万+";
              } else if (10000000 <= this.sales && this.sales < 100000000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "000万+";
              } else if (100000000 <= this.sales) {
                this.salesCn = this.sales.toString().substring(0, 1) + "亿+";
              }
            }
          })
          .catch(() => {});
      } else {
        getNoToken(
          "/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus",
          {
            goods_type: 3,
            goods_id: this.id,
          },
          "VOID"
        )
          .then((res) => {
            if (res.status === 1) {
              this.isBuy = res.buy_info.is_buy;
              this.sales = res.data.sold_count;
              if (this.sales < 1000) {
                this.salesCn = "";
              } else if (1000 <= this.sales && this.sales < 10000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "000+";
              } else if (10000 <= this.sales && this.sales < 100000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "万+";
              } else if (100000 <= this.sales && this.sales < 1000000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "0万+";
              } else if (1000000 <= this.sales && this.sales < 10000000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "00万+";
              } else if (10000000 <= this.sales && this.sales < 100000000) {
                this.salesCn = this.sales.toString().substring(0, 1) + "000万+";
              } else if (100000000 <= this.sales) {
                this.salesCn = this.sales.toString().substring(0, 1) + "亿+";
              }
            }
          })
          .catch(() => {});
      }
    },
    // 生成订单
    handleOrder() {
      this.createOrderLoading = true;
      let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
      let data = {
        goods_type: 3,
        goods_id_list: [this.id],
        pay_type:
          this.payWay === "wei"
            ? 3
            : this.payWay === "zhi"
            ? 4
            : this.payWay === "dui"
            ? 5
            : null,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.createOrderLoading = false;
          if (res.status === 1) {
            this.order_amount = res.order_amount;
            if (this.order_amount <= 0) {
              this.getInfo();
            } else {
              this.orderId = res.id;
              this.qr_code_url = res.qr_code_url;
              this.paymentShow = true;
            }
          }
        })
        .catch(() => {
          this.createOrderLoading = false;
        });
      // this.paymentShow = true;
    },
    // 跳转
    handleLink() {
      let url =
        this.LoginNavIndex +
        "&&&" +
        this.userBg +
        "&&&" +
        this.headerBorder +
        "&&&" +
        this.headerBg;
      this.$router.push({
        path: "/articlePeruseDetail",
        query: {
          headerConfig: encodeURIComponent(url),
          peruseId: this.id,
        },
      });
    },
    // 多期订阅
    linkSubscribe() {
      this.$router.push({
        path: "/subscribe",
        query: {
          name: encodeURIComponent("精读"),
          type: "jingdu",
          studyType: this.info.study_phase,
          studyTypeName: encodeURIComponent(this.info.study_phase_name),
        },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.config) {
      let arr = this.config.split("&&&");
      this.LoginNavIndex = arr[0] * 1;
      this.userBg = arr[1] ? arr[1] : "rgba(0, 0, 0, 0.24)";
      this.headerBorder = arr[2] ? arr[2] : "#5C5C5C";
      this.headerBg = arr[3] ? arr[3] : "#00ADEF";
      this.previousPage = arr[4] ? arr[4] : "商城";
    }
    if (this.userMessage) {
      this.getInfo();
      if (this.$route.query.paywei) {
        this.handleOrder();
      }
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookItem {
  background: #f7f8fa;
  min-height: 100%;
  .main-top {
    background: #ffffff;
    padding: 48px 0;
    margin-top: 56px;
    &-inner {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      .swiper-container {
        width: 416px;
        height: 440px;
        text-align: center;
        .el-image {
          width: 414px;
          height: 414px;
          border: 1px solid #f3f3f3;
        }
      }
      .book-info-right {
        flex: 1;
        padding-left: 88px;
        .title {
          color: #2f3742;
          font-weight: 500;
          font-size: 32px;
          line-height: 44px;
          margin: 0 0 16px 0;
        }
        .org,
        .date {
          font-weight: 500;
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.4);
        }
        .date {
          margin-left: 32px;
          line-height: 24px;
        }
        .label-box {
          display: flex;
          flex-flow: wrap;
          margin: 16px 0;
          label {
            margin: 0 8px 8px 0;
            border-radius: 20px;
            padding: 4px 12px;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
          }
        }
        .book-describe {
          border-top: 1px solid #e5e6eb;
          border-bottom: 1px solid #e5e6eb;
          padding: 16px 0;
          .title {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #000000;
            margin-bottom: 8px;
          }
          .author {
            font-weight: 400;
            font-size: 12px;
            line-height: 20px;
            color: #000000;
            margin-bottom: 8px;
            display: block;
          }
          .describe {
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #000000;
            margin: 0;
          }
        }
        .price-box {
          padding: 20px 0 16px 0;
          display: flex;
          align-items: flex-end;
          .price {
            font-weight: 500;
            font-size: 32px;
            line-height: 40px;
            color: #ea5939;
          }
          .oldPrice {
            padding: 0 0 2px 7px;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.4);
            text-decoration-line: line-through;
          }
        }
        .info-box {
          display: flex;
          flex-flow: wrap;
          border-bottom: 1px solid #ebebeb;
          margin: 24px 0;
          .info-item {
            width: 50%;
            margin-bottom: 15px;
            font-size: 14px;
            line-height: 22px;
            display: flex;
            label {
              color: #c2c2c2;
              font-weight: 400;
              margin-right: 16px;
              width: 58px;
              display: block;
              text-align: justify;
              text-justify: distribute-all-lines;
              text-align-last: justify;
              -moz-text-align-last: justify;
              -webkit-text-align-last: justify;
            }
          }
        }
        .btn-box {
          display: flex;
          .el-button {
            width: 112px;
            height: 40px;
            background: #ea5939;
            box-shadow: 0px 8px 16px rgba(234, 89, 57, 0.24);
            border-radius: 4px;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            border: none;
          }
          .svg-icon {
            margin-left: 7px;
          }
          .continue {
            width: 112px;
            height: 40px;
            background: #175dff;
            border-radius: 4px;
            font-weight: 500;
            font-size: 16px;
            line-height: 40px;
            color: rgba(255, 255, 255, 1);
            display: block;
            text-align: center;
            box-shadow: 0px 8px 16px rgba(23, 93, 255, 0.24);
          }
          .upgrade {
            margin-left: 16px;
            display: block;
            padding: 0px 24px;
            height: 40px;
            background: #e9e9e9;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
            border-radius: 4px;
            color: #595959;
            font-weight: 500;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
            width: 130px;
          }
        }
      }
    }
  }
  .main-center {
    width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      border-color: #e7e7e7;
    }
  }
  .main-bottom {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
    &-top {
      display: flex;
      justify-content: space-between;
      p {
        margin: 0;
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        color: #1f2c5c;
        font-family: initial;
      }
      .right {
        color: rgba(0, 0, 0, 0.88);
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        cursor: pointer;
        a {
          margin-right: 8px;
        }
      }
    }
  }
  .list {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 200px;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 24px;
    }
  }
}
.banner-box-close {
  margin-top: 40px;
}
.sales-box {
  display: flex;
  // width: 592px;
  padding: 16px;
  border-radius: 4px;
  background: #f5f5f5;
  justify-content: space-between;
  align-items: flex-end;
  color: #adadad;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  .OPPOSans {
    margin: 0 8px 0 16px;
    color: #ea5939;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
  }
  .old-price {
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: line-through;
  }
}
</style>
<style lang="scss">
.bookItem {
  .el-carousel__button {
    width: 8px;
    height: 8px;
    background: #d9d9d9;
    opacity: 1;
    border-radius: 4px;
  }
  .el-carousel__indicator.is-active {
    .el-carousel__button {
      background: #5e5e5e;
    }
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-tab-pane {
    background: #f8f8f8;
    border: 1px solid #e7e7e7;
    border-top: none;
    padding: 24px;
  }
  .el-tabs__item {
    width: 160px;
    height: 38px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 38px;
    color: #1f2c5c;
    &:hover {
      background: #e7e7e7;
    }
    &.is-active {
      // background: #3459D2;
      // color: #EEF3FF;
      border-bottom: none;
      background: #e7e7e7;
    }
  }
}
.bookitem-dropdown.el-dropdown-menu {
  padding: 4px;
  .el-dropdown-menu__item {
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    color: #000000;
  }
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #fdecee;
    border-radius: 4px;
    color: #ea5939;
  }
}

.bookItem-dialog {
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog {
    border: 1px solid #ebebeb;
    box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
      0px 16px 24px 2px rgba(0, 0, 0, 0.04),
      0px 8px 10px -5px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>