HM21St_Page_User/src/views/bookStore/Subscribe.vue

<template>
  <div class="bookItem">
    <Header
      :headerBg="headerBg"
      :headerBorder="headerBorder"
      :userBg="userBg"
      :LoginNavIndex="1"
      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>
          {{
            bookType === "jingdu"
              ? "二十一世纪英文报·精读课堂"
              : bookType === "huakan"
              ? "二十一世纪英文报·少儿画刊"
              : "二十一世纪英文报"
          }}
        </p>
      </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="
              bookType === 'jingdu'
                ? require('../../assets/cover-order-jingdu.png')
                : bookType === 'huakan'
                ? require('../../assets/cover-order-huakan.png')
                : require('../../assets/cover-order-' + studyType + '.png')
            "
            :fit="'contain'"
          >
          </el-image>
          <!-- </el-carousel-item> -->
        </el-carousel>
        <div class="book-info-right" v-loading="loading">
          <h1 class="title">
            {{
              bookType === "jingdu"
                ? "Teens 精读课堂（" + studyTypeName + "）"
                : bookType === "huakan"
                ? "二十一世纪英文报·少儿画刊"
                : "《二十一世纪学生英文报》"
            }}
          </h1>
          <!-- <b class="org">{{data.org}}</b><span class="date">2023.07.01-2023.07.21</span> -->
          <div class="sales-box">
            <div class="sales-left">
              <span>订阅价格</span>
              <span class="OPPOSans"
                >￥{{ info.price_reservation | cutMoneyFiter }}</span
              >
              <!-- <span class="old-price" v-if="info.price_discount&&info.price_discount!==info.price">￥{{info.price|cutMoneyFiter}}</span> -->
              <b>元 / 期</b>
            </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" :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">
            <div class="info-item">
              <label>适合年龄</label>
              <span>{{
                info.issue_info
                  ? info.issue_info.age_desc
                  : info.iread_info.age_desc
              }}</span>
            </div>
            <div class="info-item">
              <label>期刊页数</label>
              <span>{{
                info.issue_info
                  ? info.issue_info.page_count_desc
                  : info.iread_info.article_count_desc
              }}</span>
              <el-tooltip placement="right" v-if="bookType === 'baozhi'">
                <div slot="content">双刊、特辑、寒暑假合刊除外</div>
                <el-button class="tooltip-btn"
                  ><svg-icon icon-class="icon-mark"></svg-icon
                ></el-button>
              </el-tooltip>
            </div>
            <div class="info-item">
              <label>出版周期</label>
              <span>{{
                info.issue_info
                  ? info.issue_info.period_desc
                  : info.iread_info.period_desc
              }}</span>
            </div>
            <div class="info-item">
              <label>期刊定价</label>
              <span v-if="bookType === 'baozhi' || bookType === 'huakan'"
                >{{ info.issue_info.price }}元/期</span
              >
              <span v-else-if="bookType === 'jingdu'"
                >{{ info.iread_info.price }}元/年</span
              >
              <el-tooltip placement="right" v-if="bookType === 'baozhi'">
                <div slot="content">双刊、特辑、寒暑假合刊除外</div>
                <el-button class="tooltip-btn"
                  ><svg-icon icon-class="icon-mark"></svg-icon
                ></el-button>
              </el-tooltip>
            </div>
            <div class="info-item" style="width: 100%">
              <label>主办单位</label>
              <span>{{
                info.issue_info
                  ? info.issue_info.organizer
                  : info.iread_info.organizer
              }}</span>
            </div>
          </div>
          <div class="info-box order-box">
            <div
              class="info-item order-item"
              style="margin-bottom: 16px"
              v-if="bookType !== 'huakan'"
            >
              <label>订阅学段</label>
              <div class="order-content">
                <ul>
                  <li
                    v-for="item in bookType === 'baozhi'
                      ? $studyType
                      : studyTypeList"
                    :key="item.study_phase"
                    :class="[studyType === item.study_phase ? 'active' : '']"
                    @click="changeStudy(item)"
                  >
                    {{ item.study_phase_name }}
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="info-item order-item"
              style="margin-bottom: 16px"
              v-if="bookType === 'baozhi' || bookType === 'huakan'"
            >
              <label>订阅期数</label>
              <div class="order-content">
                <ul>
                  <li
                    v-for="item in orderList"
                    :key="item.value"
                    :class="[
                      orderTotalNumber === item.value ? 'active' : '',
                      totalLength < item.value && item.value !== 10000
                        ? 'disabled'
                        : '',
                    ]"
                    @click="
                      changeOrderNumber(
                        item,
                        (totalLength < item.value && item.value !== 10000) ||
                          item.value === -2
                      )
                    "
                  >
                    {{ item.label }}
                  </li>
                  <el-tooltip placement="right" style="height: 32px">
                    <div slot="content" v-html="rules"></div>
                    <el-button class="tooltip-btn"
                      ><svg-icon icon-class="icon-mark"></svg-icon
                    ></el-button>
                  </el-tooltip>
                </ul>
                <div
                  v-if="
                    orderTotalNumber === 10000 &&
                    info.issue_no_school_year_list.length > 0
                  "
                  class="custom-box"
                >
                  <div class="custom-box-top">
                    <h5>
                      {{
                        info.issue_no_school_year_list[customPage].year_begin +
                        "-" +
                        info.issue_no_school_year_list[customPage].year_end +
                        " 学年"
                      }}
                    </h5>
                    <div class="btn-box">
                      <a @click="changeCustomPage('-')"
                        ><i class="el-icon-arrow-left"></i
                      ></a>
                      <a @click="changeCustomPage('+')"
                        ><i class="el-icon-arrow-right"></i
                      ></a>
                    </div>
                  </div>
                  <ul class="custom-box-bottom">
                    <li
                      v-for="(itemc, indexc) in info.issue_no_school_year_list[
                        customPage
                      ].issue_no_list"
                      :key="indexc"
                      :style="{
                        width: itemc.width ? itemc.width * 52 + 'px' : '',
                        borderRight: itemc.farRight ? 'none !important' : '',
                        borderBottom: itemc.farBottom ? 'none !important' : '',
                      }"
                      :class="[
                        customOrderNumberList.indexOf(itemc.issue_no) > -1
                          ? 'active'
                          : '',
                      ]"
                      @click="changeCustomOrder(itemc)"
                    >
                      <el-tooltip placement="bottom">
                        <div slot="content">
                          第 {{ itemc.issue_no }} 期<br />
                          出版日期：{{ itemc.shelve_date }}
                        </div>
                        <el-button class="custom-btn">{{
                          itemc.issue_no
                        }}</el-button>
                      </el-tooltip>
                    </li>
                  </ul>
                </div>
                <template v-if="orderTotalNumber !== -1">
                  <template v-if="orderTotalNumber === -2">
                    <el-input-number
                      v-model="customizeNum"
                      :min="1"
                      :max="totalLength"
                      label="请输入期数"
                      @change="getInfo"
                    ></el-input-number>
                  </template>
                  <template v-else>
                    <b v-if="orderTotalNumber !== 10000"
                      >{{ info.issue_no_begin }} - {{ info.issue_no_end }}</b
                    >
                    <b v-else>已选 {{ customOrderNumberList.length }} 期</b>
                    <el-tooltip placement="bottom" style="height: 32px">
                      <div slot="content">
                        <el-table
                          class="order-table"
                          :data="orderTable"
                          max-height="200px"
                          style="width: 317px"
                        >
                          <el-table-column label="#" type="index" width="40">
                          </el-table-column>
                          <el-table-column
                            property="issue_no"
                            label="期"
                            width="112"
                          >
                          </el-table-column>
                          <el-table-column
                            property="shelve_date"
                            label="发行日期"
                            width="100"
                          >
                          </el-table-column>
                          <el-table-column
                            property="price"
                            label="价格"
                            width="75"
                          >
                            <template slot-scope="scope">
                              {{ scope.row.price | cutMoneyFiter }}
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <el-button class="tooltip-btn"
                        ><svg-icon icon-class="icon-mark"></svg-icon
                      ></el-button>
                    </el-tooltip>
                  </template>
                </template>
              </div>
            </div>
            <div class="info-item order-item" v-if="bookType === 'jingdu'">
              <label>有效期</label>
              <div class="order-content">
                <b>365天</b>
                <el-tooltip placement="right">
                  <div slot="content">{{ validityStr }}</div>
                  <el-button class="tooltip-btn"
                    ><svg-icon icon-class="icon-mark"></svg-icon
                  ></el-button>
                </el-tooltip>
              </div>
            </div>
            <div
              class="info-item order-item"
              v-if="settlement || info.settlement_price"
            >
              <label>结算价格</label>
              <div class="order-content">
                <span class="OPPOSans"
                  >￥{{
                    settlement
                      ? settlement.price_settlement
                      : info.settlement_price.price_settlement | cutMoneyFiter
                  }}</span
                >
                <span
                  class="old-price"
                  v-if="
                    (settlement &&
                      settlement.price &&
                      settlement.price_settlement !== settlement.price) ||
                    (info.settlement_price &&
                      info.settlement_price.price !==
                        info.settlement_price.price_settlement)
                  "
                  >￥{{
                    settlement
                      ? settlement.price
                      : info.settlement_price.price | cutMoneyFiter
                  }}</span
                >
              </div>
            </div>
            <!-- <div class="info-item order-item" v-if="bookType === 'huakan'">
              <label>结算价格</label>
              <div class="order-content">
                <span class="OPPOSans">￥28.80</span>
                <span class="old-price">￥30.20</span>
              </div>
            </div> -->
          </div>
          <div class="btn-box">
            <el-button
              class="el-button"
              @click="handleChangeWay('wei')"
              :loading="createOrderLoading"
              >立即购买</el-button
            >
            <!-- <el-button class="upgrade" @click="handleChangeWay('dui')">使用兑换码</el-button> -->
          </div>
        </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 { cutMoneyFiter } from "@/utils/defined";
import { getLogin } from "@/api/ajax";
import { mapState } from "vuex";
import Payment from "../bookShelf/components/Payment.vue";
import { getToken } from "@/utils/auth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, Payment },
  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,
      },
      tagBg: ["#C9EBFF", "#FFFAC9", "#D7C9FF"], // 标签背景色
      tagColor: ["#006DAA", "#AA8500", "#7849C4"], // 标签字体颜色
      paymentShow: false, // 支付弹窗
      payWay: this.$route.query.paywei ? this.$route.query.paywei : "dui",
      bookType: this.$route.query.type ? this.$route.query.type : "baozhi", // 书籍类型
      bannerFlag: true, // 是否展示广告
      id: this.$route.query.id ? this.$route.query.id : "",
      info: null, // 信息
      courseList: [],
      sales: null,
      salesCn: "",
      isBuy: "false",
      studyType: this.$route.query.studyType
        ? this.$route.query.studyType
        : this.$route.query.type && this.$route.query.type === "huakan"
        ? 1
        : 11,
      studyTypeName: this.$route.query.studyTypeName
        ? decodeURIComponent(this.$route.query.studyTypeName)
        : "小学版",
      orderTotalNumber: 5,
      orderList: [
        {
          label: "5 期",
          value: 5,
        },
        {
          label: "10 期",
          value: 10,
        },
        {
          label: "20 期",
          value: 20,
        },
        {
          label: "40 期",
          value: 40,
        },
        {
          label: "自定义期数",
          value: -2,
        },
        {
          label: "年订阅（当月起订）",
          value: -1,
        },
        {
          label: "已发行期数自选预定",
          value: 10000,
        },
      ],
      orderTable: [
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
        {
          name: "915 期（合刊）",
          date: "2023-06-26",
          price: 12,
        },
      ],
      customizeNum: 1, // 自定义期数
      customPage: 0,
      custonList: [
        {
          title: "2019-2020 学年",
          total: 14,
          list: [
            {
              label: "759",
              value: "759",
              width: 1,
              number: 1, // 算完下一个去复制上一个是不是末位 如果下一个加起来的number/10有余数那就是下一行了
            },
            {
              label: "758",
              value: "758",
              width: 1,
              number: 2,
            },
            {
              label: "757",
              value: "757",
              width: 1,
              number: 3,
            },
            {
              label: "756",
              value: "756",
              width: 1,
              number: 4,
            },
            {
              label: "755",
              value: "755",
              width: 1,
              number: 5,
            },
            {
              label: "754",
              value: "754",
              width: 1,
              number: 1,
            },
            {
              label: "753",
              value: "753",
              width: 1,
              number: 1,
            },
            {
              label: "752",
              value: "752",
              width: 1,
              number: 1,
            },
            {
              label: "751",
              value: "751",
              width: 1,
              number: 1,
            },
            {
              label: "751",
              value: "751",
              width: 1,
              number: 1,
              farRight: true,
            },
            {
              label: "共同战“疫”",
              value: "gong",
              width: 2,
              number: 1,
              farBottom: true,
            },
            {
              label: "750",
              value: "750",
              width: 1,
              number: 1,
              farBottom: true,
            },
            {
              label: "769",
              value: "769",
              width: 1,
              number: 1,
              farBottom: true,
            },
          ],
        },
      ],
      customOrderNumberList: [],
      validityStr: "", // 有效期
      rules: "", // 折扣规则
      loading: false,
      orderId: "",
      qr_code_url: "",
      order_amount: null,
      userMessage: getToken() ? JSON.parse(getToken()) : null,
      studyTypeList: [
        {
          study_phase: 11,
          study_phase_name: "小学版",
        },
        {
          study_phase: 21,
          study_phase_name: "初一版",
        },
        {
          study_phase: 22,
          study_phase_name: "初二版",
        },
        {
          study_phase: 23,
          study_phase_name: "初三版",
        },
      ],
      settlement: null, // 结算价格
      createOrderLoading: false,
      valid_period_id: null,
      totalLength: 0,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$studyType"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 分享
    handleShare() {},
    // 收藏
    handlelike() {},
    handleChangeWay(type) {
      if (!this.userMessage) {
        this.$refs.header.handleLogin(
          "/subscribe?name=" +
            this.$route.query.name +
            "&type=" +
            this.$route.query.type +
            "&paywei=" +
            type,
          "url"
        );
        return false;
      }
      this.payWay = type;
      this.handleOrder();
    },
    // 关闭弹窗
    handleClose() {
      this.paymentShow = false;
    },
    handleSuccess() {
      this.paymentShow = false;
    },
    // 详情
    getInfo(flag) {
      this.loading = true;
      if (flag) {
      }
      if (this.bookType === "baozhi") {
        if (this.orderTotalNumber !== -1) {
          let MethodName =
            "/ShopServer/Client/ReservationQuery/GetReservationInfo_Issue";
          let data = {
            goods_type: 2,
            study_phase: this.studyType,
            period_count:
              this.orderTotalNumber !== 10000
                ? this.orderTotalNumber === -2
                  ? this.customizeNum
                  : this.orderTotalNumber
                : this.customOrderNumberList.length,
            is_custom_select_issue_no:
              this.orderTotalNumber !== 10000 ? "false" : "true",
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.info = res;
                res.issue_no_school_year_list =
                  res.issue_no_school_year_list.reverse();
                this.orderTable = res.issue_no_list;
                res.issue_no_school_year_list.forEach((item) => {
                  item.issue_no_list.forEach((items, indexs) => {
                    const regex = /[\u4e00-\u9fa5]/g;
                    if (regex.test(items.issue_no)) {
                      items.width = Math.ceil(items.issue_no.length / 3);
                      items.number = item.issue_no_list[indexs - 1]
                        ? item.issue_no_list[indexs - 1].number +
                          Math.ceil(items.issue_no.length / 3)
                        : Math.ceil(items.issue_no.length / 3);
                    } else {
                      items.width = 1;
                      items.number = item.issue_no_list[indexs - 1]
                        ? item.issue_no_list[indexs - 1].number + 1
                        : 1;
                    }
                  });
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }

        if (
          this.totalLength >=
          (this.orderTotalNumber !== 10000
            ? this.orderTotalNumber === -2
              ? this.customizeNum
              : this.orderTotalNumber
            : this.customOrderNumberList.length)
        ) {
          this.handleOrderPrice();
        } else {
          this.settlement = null;
        }
      } else if (this.bookType === "huakan") {
        this.loading = false;
        if (this.orderTotalNumber !== -1) {
          let MethodName =
            "/ShopServer/Client/ReservationQuery/GetReservationInfo_Issue";
          let data = {
            goods_type: 4,
            study_phase: 1,
            period_count:
              this.orderTotalNumber !== 10000
                ? this.orderTotalNumber === -2
                  ? this.customizeNum
                  : this.orderTotalNumber
                : this.customOrderNumberList.length,
            is_custom_select_issue_no:
              this.orderTotalNumber !== 10000 ? "false" : "true",
          };
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.info = res;
                res.issue_no_school_year_list =
                  res.issue_no_school_year_list.reverse();
                this.orderTable = res.issue_no_list;
                res.issue_no_school_year_list.forEach((item) => {
                  item.issue_no_list.forEach((items, indexs) => {
                    const regex = /[\u4e00-\u9fa5]/g;
                    if (regex.test(items.issue_no)) {
                      items.width = Math.ceil(items.issue_no.length / 3);
                      items.number = item.issue_no_list[indexs - 1]
                        ? item.issue_no_list[indexs - 1].number +
                          Math.ceil(items.issue_no.length / 3)
                        : Math.ceil(items.issue_no.length / 3);
                    } else {
                      items.width = 1;
                      items.number = item.issue_no_list[indexs - 1]
                        ? item.issue_no_list[indexs - 1].number + 1
                        : 1;
                    }
                  });
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }

        // this.info = {
        //   issue_no_end: "928",
        //   issue_no_school_year_list: [],
        //   issue_info: {
        //     period_desc: "每月出版，2月、 8月休刊",
        //     age_desc: "5-8 岁",
        //     price: 10,
        //     organizer: "中国日报社《二十一世纪学生英文报》",
        //     page_count_desc: "24 页",
        //   },
        //   price_reservation: 10,
        //   issue_no_begin: "929",
        //   issue_no_list: [
        //     {
        //       shelve_date: "2024-07-31",
        //       issue_no: "929",
        //       price: 2.4,
        //     },
        //     {
        //       shelve_date: "2025-07-10",
        //       issue_no: "931",
        //       price: 2.4,
        //     },
        //     {
        //       shelve_date: "2025-08-07",
        //       issue_no: "928",
        //       price: 2.4,
        //     },
        //   ],
        // };

        if (
          this.totalLength >=
          (this.orderTotalNumber !== 10000
            ? this.orderTotalNumber === -2
              ? this.customizeNum
              : this.orderTotalNumber
            : this.customOrderNumberList.length)
        ) {
          this.handleOrderPrice();
        } else {
          this.settlement = null;
        }
      } else {
        let MethodName =
          "/ShopServer/Client/ReservationQuery/GetReservationValidPeriodList_Iread";
        getLogin(MethodName, {})
          .then((res) => {
            this.loading = false;
            if (res.status === 1) {
              this.valid_period_id = res.valid_period_list[0]
                ? res.valid_period_list[0].id
                : "";
              getLogin(
                "/ShopServer/Client/ReservationQuery/GetReservationInfo_Iread",
                {
                  study_phase: this.studyType,
                  valid_period_id: res.valid_period_list[0]
                    ? res.valid_period_list[0].id
                    : "",
                }
              )
                .then((ress) => {
                  if (ress.status === 1) {
                    this.info = ress;
                  }
                })
                .catch(() => {});
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    // 计算结算价格
    handleOrderPrice(flag) {
      this.loading = true;
      let MethodName =
        "/ShopServer/Client/ReservationQuery/ComputeReservationSettlementPrice_Issue";
      let data = {
        goods_type: this.bookType === "huakan" ? 4 : 2,
        study_phase: this.studyType,
        period_count:
          this.orderTotalNumber !== 10000
            ? this.orderTotalNumber === -2
              ? this.customizeNum
              : this.orderTotalNumber
            : this.customOrderNumberList.length,
        is_custom_select_issue_no:
          this.orderTotalNumber !== 10000 ? "false" : "true",
        issue_no_list: this.customOrderNumberList,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.settlement = res;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changeCustomOrder(item) {
      if (this.customOrderNumberList.indexOf(item.issue_no) > -1) {
        this.customOrderNumberList.splice(
          this.customOrderNumberList.indexOf(item.issue_no),
          1
        );
        this.orderTable.splice(
          this.customOrderNumberList.indexOf(item.issue_no),
          1
        );
      } else {
        this.customOrderNumberList.push(item.issue_no);
        this.orderTable.push(item);
      }
      this.handleOrderPrice();
    },
    async changeStudy(item) {
      this.studyType = item.study_phase;
      this.studyTypeName = item.study_phase_name;
      this.customOrderNumberList = [];
      await this.handleIssueLength();
    },
    changeOrderNumber(item, flag) {
      if (flag && item.value !== -2) return false;
      this.orderTotalNumber = item.value;
      this.getInfo();
    },
    getDiscountRule() {
      let MethodName =
        "/OrgServer/Client/SysConfigQuery/GetSysConfig_DiscountRule";
      getLogin(MethodName, {}).then((res) => {
        if (res.status === 1) {
          let str = "一次性订阅：<br/>";
          res.rule_list.forEach((item) => {
            str +=
              item.buy_count + " 期 " + item.discount.toFixed(1) + " 折<br/>";
          });
          this.rules = str;
        }
      });
    },
    changeCustomPage(type) {
      if (type === "-") {
        if (this.customPage !== 0) {
          this.customPage--;
        } else {
          this.$message.warning("已经是最新学年");
        }
      } else {
        if (
          this.customPage !==
          this.info.issue_no_school_year_list.length - 1
        ) {
          this.customPage++;
        } else {
          this.$message.warning("后面没有数据啦");
        }
      }
    },
    // 生成订单
    handleOrder() {
      this.createOrderLoading = true;
      let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
      let data = {
        is_reservation: "true",
        sale_model: this.bookType === "jingdu" ? 1 : 0,
        goods_type:
          this.bookType === "jingdu" ? 3 : this.bookType === "huakan" ? 4 : 2,
        goods_study_phase: this.bookType === "huakan" ? 1 : this.studyType,
        period_count:
          this.orderTotalNumber !== 10000
            ? this.orderTotalNumber === -2
              ? this.customizeNum
              : this.orderTotalNumber
            : this.customOrderNumberList.length,
        is_custom_select_issue_no:
          this.orderTotalNumber !== 10000 ? "false" : "true",
        issue_no_list: this.customOrderNumberList,
        pay_type:
          this.payWay === "wei"
            ? 3
            : this.payWay === "zhi"
            ? 4
            : this.payWay === "dui"
            ? 5
            : null,
        valid_period_id: this.valid_period_id,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.createOrderLoading = false;
          if (res.status === 1) {
            this.order_amount = res.order_amount;
            if (this.order_amount <= 0) {
            } else {
              this.orderId = res.id;
              this.qr_code_url = res.qr_code_url;
              this.paymentShow = true;
            }
          }
        })
        .catch(() => {
          this.createOrderLoading = false;
        });
      // this.paymentShow = true;
    },
    getTotalSales() {
      let MethodName = "/ShopServer/Client/ShopHomeQuery/GetGoodsTotalSales";
      let data = {
        goods_type:
          this.bookType === "jingdu" ? 3 : this.bookType === "huakan" ? 4 : 2,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.sales = res.sale_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(() => {});
    },
    // 获取已发行期数
    handleIssueLength() {
      this.totalLength = 0;
      let MethodName =
        "/ShopServer/Client/ReservationQuery/GetCanReservationPeriodCount_Issue";
      let data = {
        goods_type: this.bookType === "baozhi" ? 2 : 4,
        study_phase: this.bookType === "baozhi" ? this.studyType : 1,
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.totalLength = res.period_count_max;
            this.getInfo();
          }
        })
        .catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async 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.bookType === "baozhi" || this.bookType === "huakan") {
      await this.handleIssueLength();
    } else {
      this.getInfo();
    }
    this.getDiscountRule();
    let date1 =
      new Date().getFullYear() +
      "." +
      (new Date().getMonth() + 1 < 10
        ? "0" + (new Date().getMonth() + 1)
        : new Date().getMonth() + 1) +
      "." +
      new Date().getDate();
    let data2 = new Date(
      new Date(
        new Date().getFullYear() +
          1 +
          "." +
          (new Date().getMonth() + 1 < 10
            ? "0" + (new Date().getMonth() + 1)
            : new Date().getMonth() + 1) +
          "." +
          new Date().getDate()
      ).getTime() -
        24 * 60 * 60 * 1000
    );
    data2 =
      data2.getFullYear() +
      "." +
      (data2.getMonth() + 1 < 10
        ? "0" + (data2.getMonth() + 1)
        : data2.getMonth() + 1) +
      "." +
      data2.getDate();
    this.validityStr = date1 + " ~ " + data2;
    if (this.$route.query.paywei) {
      this.handleOrder();
    }
    this.getTotalSales();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookItem {
  background: #f7f8fa;
  min-height: calc(100vh - 135px);
  .main-top {
    background: #ffffff;
    padding: 48px 0;
    margin-top: 56px;
    min-height: calc(100vh - 135px);
    &-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;
          width: 680px;
          margin-top: 48px;
          .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;
            flex-shrink: 0;
            display: block;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
            -moz-text-align-last: justify;
            -webkit-text-align-last: justify;
          }
        }
        .order-box {
          margin-bottom: 24px;
          padding: 24px 0 0;
          margin-top: 0;
          .order-item {
            margin-bottom: 24px;
            width: 100%;
            label {
              line-height: 32px;
            }
            .order-content {
              line-height: 32px;
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                flex-flow: wrap;
                li {
                  cursor: pointer;
                  border-radius: 2px;
                  background: #f2f3f5;
                  margin-right: 8px;
                  margin-bottom: 8px;
                  padding: 4px 15px;
                  color: #000;
                  font-size: 14px;
                  font-weight: 500;
                  line-height: 22px;
                  border: 1px solid #f2f3f5;
                  &.active {
                    color: #ea5939;
                    background: #ffffff;
                    border-color: #ea5939;
                  }
                  &.disabled {
                    cursor: not-allowed;
                    background: #f2f3f5;
                    color: #bababa;
                    border-color: #f2f3f5;
                  }
                }
              }
              .el-table {
                background: #303133;
              }
            }
            .OPPOSans {
              margin: 0 8px 0 0;
              color: #ea5939;
              font-size: 20px;
              font-weight: 500;
              line-height: 28px;
            }
            .old-price {
              color: rgba(0, 0, 0, 1);
              font-size: 12px;
              font-weight: 500;
              line-height: 22px;
              text-decoration: line-through;
            }
          }
        }
        .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: 680px;
  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;
  }
  b {
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
  }
}
.custom-box {
  width: 522px;
  border: 1px solid #e5e6eb;
  background: #fff;
  margin: 4px 0 8px 0;
  &-top {
    padding: 8px 16px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    h5 {
      margin: 0;
      color: #ea5939;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
    }
    .btn-box {
      a {
        margin-left: 6px;
        border-radius: 2px;
        background: #00adef;
        width: 24px;
        height: 24px;
        display: block;
        text-align: center;
        line-height: 24px;
        font-size: 20px;
        color: #fff;
      }
    }
  }
  &-bottom {
    border-top: 1px solid #e5e6eb;
    li {
      padding: 8px !important;
      margin: 0 !important;
      background: #ffffff !important;
      border: none !important;
      min-width: 52px;
      height: 36px;
      text-align: center;
      border-right: 1px solid #e5e6eb !important;
      border-bottom: 1px solid #e5e6eb !important;
      border-radius: 0 !important;
      display: flex;
      .custom-btn {
        border: none;
        width: 100%;
        background: initial;
        padding: 0;
        line-height: 20px;
        height: 20px;
        color: #000;
      }
      &.active {
        border-right: 1px solid #f5f5f5 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        background: #ea5939 !important;
        &:hover {
          .custom-btn {
            color: #fff !important;
          }
        }
        .custom-btn {
          color: #fff !important;
        }
      }
      &:hover {
        .custom-btn {
          color: #000 !important;
        }
      }
    }
  }
}
</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;
  }
}
.tooltip-btn {
  border: none;
  padding: 0;
  margin-left: 6px;
  color: #bebebe;
  &:focus,
  &:hover {
    color: #bebebe;
    background: none;
  }
}
.order-table.el-table {
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
.order-table.el-table th.el-table__cell {
  background: #3e424b !important;
  padding: 2px 5px;
}
.order-table.el-table .el-table__cell {
  padding: 2px 5px;
}
.order-table.el-table thead {
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
.order-table.el-table td.el-table__cell,
.order-table.el-table th.el-table__cell.is-leaf {
  border-bottom-color: #3e424b;
}
.order-table.el-table tr,
.order-table.el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: #1d2129;
}
.order-table.el-table .cell {
  padding: 0 5px !important;
}
.order-table.el-table::before {
  height: 0;
}
.order-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
</style>