HM21St_Page_User/src/views/bookShelf/bookItem.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
          >{{ info.study_phase_name ? info.study_phase_name + "版" : "" }}</a
        >
        <div class="border"></div>
        <p>{{ info.name || info.iss_name }}</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_image_url || info.iss_cover_url
                ? info.cover_image_url || info.iss_cover_url
                : bookType === 'baozhi'
                ? require('../../assets/baozhi' +
                    (Math.floor(Math.random() * 2) + 1) +
                    '.png')
                : require('../../assets/kecheng' +
                    (Math.floor(Math.random() * 3) + 1) +
                    '.png')
            "
            :fit="'cover'"
          >
          </el-image>
          <!-- </el-carousel-item> -->
        </el-carousel>
        <div class="book-info-right">
          <h1 class="title">{{ info.name || info.iss_name }}</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.hasOwnProperty("price_discount") ||
                  info.hasOwnProperty("iss_price_sell")
                    ? info.price_discount || info.iss_price_sell
                    : info.price || info.iss_price_org | cutMoneyFiter
                }}</span
              >
              <span
                class="old-price"
                v-if="
                  (info.hasOwnProperty('price_discount') &&
                    info.price_discount !== info.price) ||
                  (info.hasOwnProperty('iss_price_sell') &&
                    info.iss_price_sell !== info.iss_price_org)
                "
                >￥{{ info.price || info.iss_price_org | cutMoneyFiter }}</span
              >
            </div>
            <span class="sales-right" v-if="sales >= 1000"
              >累计销售 {{ salesCn }}</span
            >
          </div>
          <div class="label-box">
            <label
              v-for="(itemL, indexL) in info.label_name_list ||
              info.info_tag_data"
              :key="indexL"
              :style="{
                background: tagBg[indexL % 3],
                color: tagColor[indexL % 3],
              }"
            >
              {{ "# " + itemL }}
            </label>
          </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"
            v-if="bookType === 'baozhi' || bookType === 'huakan'"
          >
            <div class="info-item">
              <label>出版社</label>
              <span>{{
                info.vendor_name ? info.vendor_name : "中国日报社"
              }}</span>
            </div>
            <!-- <div class="info-item">
                        <label>字数</label>
                        <span>78291</span>
                    </div> -->
            <div class="info-item">
              <label>发行时间</label>
              <span>{{ info.release_date }}</span>
            </div>
            <div class="info-item">
              <label>语种</label>
              <span>中英双语</span>
            </div>
            <div class="info-item">
              <label>期数</label>
              <span>{{ info.iss_no }} 期</span>
            </div>
            <div class="info-item">
              <label>学段</label>
              <span>{{ info.study_phase_name }}</span>
            </div>
            <!-- <div class="info-item">
                        <label>版本</label>
                        <span>基础版</span>
                    </div> -->
          </div>
          <div class="info-box" v-if="bookType === 'LB'">
            <div class="info-item">
              <label>机构</label>
              <!-- <span>{{ info.org_name }}</span> -->
              <span>中报二十一世纪(北京)传媒科技有限公司</span>
            </div>
            <div class="info-item" v-if="bookType === 'LB'">
              <label>教师</label>
              <span>{{ info.teacher_name_list.join("、") }}</span>
            </div>
            <div class="info-item">
              <label>类型</label>
              <span>录播课</span>
            </div>
            <div class="info-item">
              <label>课时</label>
              <span>{{ courseList.length + " 课时" }}</span>
            </div>
            <div class="info-item">
              <label>有效期</label>
              <span>{{ info.effective_month_count + " 个月" }}</span>
            </div>
            <div class="info-item">
              <label>学段</label>
              <span>{{ info.study_phase_name }}</span>
            </div>
          </div>
          <div class="info-box" v-if="bookType === 'zhuanji'">
            <div class="info-item">
              <label>出版社</label>
              <span>{{
                info.vendor_name ? info.vendor_name : "中国日报社"
              }}</span>
            </div>

            <div class="info-item">
              <label>学段</label>
              <span>{{ info.study_phase_name }}</span>
            </div>
            <!-- <div class="info-item">
                        <label>字数</label>
                        <span>78291</span>
                    </div> -->
            <div class="info-item">
              <label>发行时间</label>
              <span>{{ info.shelve_date }}</span>
            </div>
            <div class="info-item">
              <label>语种</label>
              <span>中英双语</span>
            </div>
            <div class="info-item" style="width: 100%">
              <label>期数</label>
              <span>{{ itemContentStr }} </span>
            </div>
            <!-- <div class="info-item">
                        <label>版本</label>
                        <span>基础版</span>
                    </div> -->
          </div>
          <div class="btn-box">
            <template v-if="isBuy === 'false'">
              <a
                class="el-button"
                @click="handleChangeWay('wei')"
                :loading="createOrderLoading"
                >立即购买</a
              >
              <p v-if="bookType === 'baozhi'" class="print-tips">
                温馨提示：电子报刊每篇文章打印+下载共5次机会，支持一键多篇打印，不支持一键多篇下载。
              </p>
            </template>
            <template v-else-if="isBuy === 'true' && bookType !== 'zhuanji'">
              <a class="continue" @click="handleLink">继续学习</a>
              <!-- <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a> -->
              <a
                class="upgrade"
                v-if="bookType === 'baozhi' || bookType === 'huakan'"
                @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.intro || info.iss_note"
      >
        <el-tab-pane label="简介">
          <div v-html="info.intro || info.iss_note"></div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs type="card" v-if="bookType !== 'huakan'">
        <!-- <el-tab-pane :label="bookType==='course'?'课程简介':'简介'">
                
            </el-tab-pane> -->
        <el-tab-pane label="目录" v-if="bookType === 'baozhi'">
          <tree-list
            :data="issueChnList"
            :isBuy="isBuy === 'true'"
            :headerBg="headerBg"
            :headerBorder="headerBorder"
            :userBg="userBg"
            :LoginNavIndex="LoginNavIndex"
            :cardType="bookType"
          >
          </tree-list>
        </el-tab-pane>
        <!-- <el-tab-pane label="目录" v-if="bookType==='huakan'">
                <tree-list 
                    :data="data.treeLists" 
                    :isBuy="isBuy==='true'"
                    :headerBg="headerBg"
                    :headerBorder="headerBorder"
                    :userBg="userBg"
                    :LoginNavIndex="LoginNavIndex"
                    :cardType="bookType">
                </tree-list>
            </el-tab-pane> -->
        <el-tab-pane label="课程目录" v-if="bookType === 'LB'">
          <course-list
            :data="courseList"
            :isBuy="isBuy === 'true'"
            :headerBg="headerBg"
            :headerBorder="headerBorder"
            :userBg="userBg"
            :LoginNavIndex="LoginNavIndex"
            :cardType="info.type"
          >
          </course-list>
        </el-tab-pane>
        <el-tab-pane label="内容" v-if="bookType === 'zhuanji'">
          <BookCard
            :item="item"
            class="item"
            v-for="(item, index) in itemList"
            :key="index + 'todayNew'"
          />
        </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"
        :orderId="orderId"
        :qr_code_url="qr_code_url"
        :order_amount="order_amount"
        @handleSuccess="handleSuccess"
      />
    </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: "商城",
      data: {
        navTitle: "第 815 期 Celebrating new King",
        title: "第 815 期 Celebrating new King",
        org: "二十一世纪英文报",
        tagList: ["中英双语", "经典读物", "初中必读"],
        imgList: [
          require("../../assets/img1.png"),
          require("../../assets/bookcard-image.png"),
        ],
        describe: {
          title: "Bring books up to date",
          author: "TEENS",
          describe:
            "Should childrenn read the original or adapted version? 英国童书再版遭大量删改引争议 词数 372 测试见IV版 建议阅读时间 5分钟 Puffin ...",
        },
        price: "3.9",
        oldPrice: "5.99",
        isBuy: this.$route.query.isBuy ? this.$route.query.isBuy : false,
        treeList: [
          {
            number: "1",
            title: "FRONTPAGE",
            children: [
              {
                number: "1.1",
                title: "Meeting Foreigners at an Airport",
              },
            ],
          },
          {
            number: "2",
            title: "OUR WORLD",
            children: [
              {
                number: "2.1",
                title: "Out in the fields",
              },
              {
                number: "2.2",
                title: "IN BRIEF 新闻速览",
              },
              {
                number: "2.3",
                title: "XI’S WORDS 英语学习",
              },
              {
                number: "2.4",
                title: "WORLD LENS 图行天下",
              },
              {
                number: "2.5",
                title: "4,200",
              },
            ],
          },
          {
            number: "3",
            title: "SCIENCE STUDY",
            children: [
              {
                number: "3.1",
                title: "Listened to by aliens",
              },
              {
                number: "3.2",
                title: "Wearable mushrooms",
              },
              {
                number: "3.3",
                title: "Lend a helping fin",
              },
            ],
          },
          {
            number: "4",
            title: "READING & WRITING",
            children: [
              {
                number: "4.1",
                title: "What’s the word 短文填空",
              },
              {
                number: "4.2",
                title: "任务型阅读：我的身体我做主",
              },
            ],
          },
        ],
        treeLists: [
          {
            chn_name: "Nature",
            chn_idx: 0,
            arts: [
              {
                id: "i21a160948",
                art_title: "I have a super ‘mouth’",
                en_flag: 1,
                art_status: 1,
                chn_item: "FRONTPAGE",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "My works",
            chn_idx: 1,
            arts: [
              {
                id: "i21a160954",
                art_title: "My works",
                en_flag: 1,
                art_status: 1,
                chn_item: "OUR WORLD",
                art_idx: 1,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Daily words",
            chn_idx: 2,
            arts: [
              {
                id: "i21a160962",
                art_title: "Happy birthday",
                en_flag: 1,
                art_status: 9,
                chn_item: "SCHOOL TIME",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Have a go",
            chn_idx: 3,
            arts: [
              {
                id: "i21a160964",
                art_title: "P1 Have a go",
                en_flag: 1,
                art_status: 9,
                chn_item: "MAGIC WORLD",
                art_idx: 0,
                art_author: "TEENS",
              },
              {
                id: "i21a160965",
                art_title: "Listen and write",
                en_flag: 1,
                art_status: 9,
                chn_item: "MAGIC WORLD",
                art_idx: 1,
                art_author: "TEENS",
              },
              {
                id: "i21a160966",
                art_title: "P6 Have a go",
                en_flag: 1,
                art_status: 1,
                chn_item: "MAGIC WORLD",
                art_idx: 2,
                art_author: "TEENS",
              },
              {
                id: "i21a160967",
                art_title: "P4 Have a go",
                en_flag: 1,
                art_status: 9,
                chn_item: "MAGIC WORLD",
                art_idx: 3,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Little Hikers",
            chn_idx: 4,
            arts: [
              {
                id: "i21a160968",
                art_title: "Beach full of shells",
                en_flag: 1,
                art_status: 9,
                chn_item: "SCIENCE STUDY",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Cartoons",
            chn_idx: 5,
            arts: [
              {
                id: "i21a160971",
                art_title: "Bud likes mud",
                en_flag: 1,
                art_status: 9,
                chn_item: "READING FUN",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Game bar",
            chn_idx: 6,
            arts: [
              {
                id: "i21a160972",
                art_title: "GAME BAR",
                en_flag: 1,
                art_status: 9,
                chn_item: "WORLD CUP FOCUS",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Word lab",
            chn_idx: 7,
            arts: [
              {
                id: "i21a160973",
                art_title: "Word lab",
                en_flag: 1,
                art_status: 9,
                chn_item: "LEARNING",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "Photos",
            chn_idx: 8,
            arts: [
              {
                id: "i21a160975",
                art_title: "Happy festival",
                en_flag: 1,
                art_status: 9,
                chn_item: "READING & WRITING",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
          {
            chn_name: "World wows",
            chn_idx: 9,
            arts: [
              {
                id: "i21a160978",
                art_title: "World wows",
                en_flag: 1,
                art_status: 9,
                chn_item: "EXTRA CREDIT",
                art_idx: 0,
                art_author: "TEENS",
              },
            ],
          },
        ],
      },
      guessList: [
        {
          src: require("../../assets/bookcard-image.png"),
          name: "名称名称名称名称名称名称名称名称名称名称名称名称",
          price: "3.00",
          oldprice: "3.00",
          author: "作者",
          score: 3,
          progress: "90%",
        },
        {
          src: require("../../assets/bookcard-image.png"),
          name: "名称名称名称名称名称名称名称名称名称名称名称名称",
          price: "3.00",
          oldprice: "3.00",
          author: "作者",
          score: 3,
        },
        {
          src: require("../../assets/bookcard-image.png"),
          name: "名称名称名称名称名称名称名称名称名称名称名称名称",
          price: "3.00",
          oldprice: "3.00",
          author: "作者",
          score: 3,
        },
        {
          src: require("../../assets/bookcard-image.png"),
          name: "名称名称名称名称名称名称名称名称名称名称名称名称",
          price: "3.00",
          oldprice: "3.00",
          author: "作者",
          score: 3,
        },
        {
          src: require("../../assets/bookcard-image.png"),
          name: "名称名称名称名称名称名称名称名称名称名称名称名称",
          price: "3.00",
          oldprice: "3.00",
          author: "作者",
          score: 3,
        },
      ],
      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, // 上次阅读索引
      issueChnList: [],
      order_amount: null,
      createOrderLoading: false,
      studyObj: {
        1: "学前",
        11: "小学",
        20: "初中",
        21: "初一",
        22: "初二",
        23: "初三",
        30: "高中",
        31: "高一",
        32: "高二",
        33: "高三",
        100: "全学段",
      },
      itemList: [],
      itemContentStr: "",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    $route(to, from) {
      if (to.query.id) {
        window.location.reload();
      }
    },
  },
  //方法集合
  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 = "/CourseServer/Client/LBCourseQuery/GetLBCourseInfo";
      let data = null;
      if (this.bookType === "LB") {
        data = {
          id: this.id,
          is_contain_cs_item: "true",
          cs_item_sort_mode: "ASCE",
        };
      } else if (this.bookType === "baozhi") {
        MethodName = "/PaperServer/Client/Issue/GetIssueBriefInfo";
        data = {
          id: this.id,
        };
      } else if (this.bookType === "huakan") {
        MethodName = "/PaperServer/Client/PicIssue/GetIssueBriefInfo";
        data = {
          id: this.id,
        };
      } else if (this.bookType === "zhuanji") {
        MethodName = "/ShopServer/Client/AlbumQuery/GetAlbumInfo";
        data = {
          id: this.id,
        };
      }
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            if (this.bookType === "LB") {
              this.info = res.lb_course;
              if (res.my_play_record.pre_play_cs_item_id) {
                this.pre_play_cs_item_id =
                  res.my_play_record.pre_play_cs_item_id;
              }
              this.courseList = this.handleCourseLength(res.cs_item_list);
            } else if (
              this.bookType === "baozhi" ||
              this.bookType === "huakan"
            ) {
              this.info = res.data;
              this.issueChnList = res.data.chn_art_data;
            } else if (this.bookType === "zhuanji") {
              this.info = res.album;
              this.info.study_phase_name = this.studyObj[res.album.study_phase];
            }
          }
        })
        .catch(() => {});
      if (this.userMessage) {
        getLogin("/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus", {
          goods_type:
            this.bookType === "LB"
              ? 0
              : this.bookType === "baozhi"
              ? 2
              : this.bookType === "huakan"
              ? 4
              : this.bookType === "zhuanji"
              ? 20
              : null,
          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:
              this.bookType === "LB"
                ? 0
                : this.bookType === "baozhi"
                ? 2
                : this.bookType === "huakan"
                ? 4
                : null,
            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(() => {});
      }
    },
    // 处理授课时长 小于1分钟的按1分钟 之后个位数四舍五入
    handleCourseLength(list) {
      let listArr = JSON.parse(JSON.stringify(list));
      listArr.forEach((item, index) => {
        if (item.file_media_duration) {
          if (item.file_media_duration < 60) {
            item.timeCn = "1分钟";
          } else if (item.file_media_duration < 600) {
            item.timeCn = Math.ceil(item.file_media_duration / 60) + "分钟";
          } else {
            let first =
              Math.ceil(item.file_media_duration / 60)
                .toString()
                .substring(
                  0,
                  Math.ceil(item.file_media_duration / 60).toString().length - 1
                ) * 1;
            let last =
              Math.ceil(item.file_media_duration / 60)
                .toString()
                .substring(
                  Math.ceil(item.file_media_duration / 60).toString().length - 1
                ) * 1;
            if (last < 5) {
              item.timeCn = first + "0分钟";
            } else {
              item.timeCn = first + 1 + "0分钟";
            }
          }
        } else {
          item.timeCn = "-";
        }
        if (item.id === this.pre_play_cs_item_id) {
          this.pre_play_index = index;
        }
      });
      return listArr;
    },
    // 生成订单
    handleOrder() {
      this.createOrderLoading = true;
      let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
      let data = {
        goods_type:
          this.bookType === "LB"
            ? 0
            : this.bookType === "baozhi"
            ? 2
            : this.bookType === "huakan"
            ? 4
            : this.bookType === "zhuanji"
            ? 20
            : null,
        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;
    },
    // 跳转
    async handleLink() {
      let url =
        this.LoginNavIndex +
        "&&&" +
        this.userBg +
        "&&&" +
        this.headerBorder +
        "&&&" +
        this.headerBg;
      let MethodNames = "/ShopServer/Client/BookshelfQuery/SetMyGoodsIsLooked";
      let datas = {
        goods_id: this.$route.query.id,
        goods_type: 0,
      };

      if (this.bookType === "baozhi" || this.info.goods_type === 2) {
        let articleId = "";
        datas.goods_type = 2;
        await getLogin(MethodNames, datas)
          .then((res) => {})
          .catch(() => {});
        if (this.info.last_read_art_id) {
          articleId = this.info.last_read_art_id;
        } else {
          for (let i = 0; i < this.issueChnList.length; i++) {
            if (articleId) {
              break;
            }
            if (
              this.issueChnList[i].arts &&
              this.issueChnList[i].arts.length > 0
            ) {
              for (let j = 0; j < this.issueChnList[i].arts.length; j++) {
                if (this.issueChnList[i].arts[j].id) {
                  articleId = this.issueChnList[i].arts[j].id;
                  break;
                }
              }
            }
          }
        }
        let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
        let data = {
          iss_id: this.$route.query.id,
          art_id: articleId,
        };
        await getLogin(MethodName, data).then((res) => {});

        this.$router.push({
          path: "/articleDetail",
          query: {
            headerConfig: encodeURIComponent(url),
            id: articleId,
            iss_id: this.$route.query.id,
          },
        });
      } else if (this.bookType === "huakan" || this.info.goods_type === 4) {
        datas.goods_type = 4;
        await getLogin(MethodNames, datas)
          .then((res) => {})
          .catch(() => {});
        this.$router.push({
          path: "/magazineDetail",
          query: {
            headerConfig: encodeURIComponent(url),
            iss_id: this.$route.query.id,
          },
        });
      } else if (this.info.goods_type === 3) {
        datas.goods_type = 3;
        await getLogin(MethodNames, datas)
          .then((res) => {})
          .catch(() => {});
        this.$router.push({
          path: "/bookPeruseItem",
          query: {
            headerConfig: encodeURIComponent(url),
            cardType: "jingdu",
            id: this.$route.query.id,
          },
        });
      } else if (this.bookType === "huakan" || this.info.goods_type === 4) {
        datas.goods_type = 4;
        await getLogin(MethodNames, datas)
          .then((res) => {})
          .catch(() => {});
        this.$router.push({
          path: "/magazineDetail",
          query: {
            headerConfig: encodeURIComponent(url),
            iss_id: this.$route.query.id,
          },
        });
      } else {
        datas.goods_type = 0;
        await getLogin(MethodNames, datas)
          .then((res) => {})
          .catch(() => {});
        this.$router.push({
          path: this.info.type === 1 ? "/courseDetail" : "/videoDetail",
          query: {
            headerConfig: encodeURIComponent(url),
            index: this.pre_play_index,
            id: this.id,
          },
        });
      }
    },
    // 多期订阅
    linkSubscribe() {
      this.$router.push({
        path: "/subscribe",
        query: {
          name: encodeURIComponent("报纸"),
          type: this.bookType,
          studyType: this.info.study_phase,
          studyTypeName: encodeURIComponent(this.info.study_phase_name),
        },
      });
    },
    // 专辑列表
    getIssList() {
      let MethodName =
        "/ShopServer/Client/AlbumQuery/PageQueryAlbumContentItemList";
      let data = {
        album_id: this.id,
        page_capacity: 50,
        cur_page: 1,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            res.content_item_list.forEach((item) => {
              item.type = item.goods_type;
            });
            this.itemList = res.content_item_list;
            this.itemContentStr = res.content_item_list
              .map((item) => item.name)
              .join("； ");
          }
        })
        .catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前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] : "商城";
    }
    this.getInfo();
    if (this.$route.query.paywei) {
      this.handleOrder();
    }
    if (this.bookType === "zhuanji") {
      this.getIssList();
    }
  },
  //生命周期 - 挂载完成（可以访问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: 297px;
          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-bottom: 24px;
          .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;
          align-items: center;
          gap: 10px;
          .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;
          }
          .print-tips {
            margin: 0;
            color: #ea5939;
            font-size: 12px;
          }
        }
      }
    }
  }
  .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;
  }
}
.item {
  width: 200px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  &:hover {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
}
:deep .el-tab-pane {
  display: flex;
  gap: 24px 36px;
  flex-flow: wrap;
}
</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>