HM21St_Page_User/src/views/bookStore/Subscribe.vue

<template>
  <div class="bookItem">
    <Header
      :headerBg="headerBg"
      :headerBorder="headerBorder"
      :userBg="userBg"
    />
    <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'?'二十一世纪英文报·精读课堂':'二十一世纪英文报'}}</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'):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+'）':'《二十一世纪学生英文报》'}}</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.age_desc}}</span>
                    </div>
                    <div class="info-item">
                        <label>期刊页数</label>
                        <span>{{info.issue_info.page_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.period_desc}}</span>
                    </div>
                    <div class="info-item">
                        <label>期刊定价</label>
                        <span v-if="bookType==='baozhi'">{{info.issue_info.price}}元/期</span>
                        <span v-else-if="bookType==='jingdu'">{{info.issue_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.organizer}}</span>
                    </div>
                </div>
                <div class="info-box order-box">
                    <div class="info-item order-item" style="margin-bottom:16px">
                        <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'">
                        <label>订阅期数</label>
                        <div class="order-content">
                            <ul>
                                <li v-for="item in orderList" :key="item.value" :class="[orderTotalNumber===item.value?'active':'']" @click="changeOrderNumber(item)">
                                    {{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===-1&&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>
                            <b v-if="orderTotalNumber!==-1">{{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="30">
                                        </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>
                        </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">
                        <label>结算价格</label>
                        <div class="order-content">
                            <span class="OPPOSans">￥{{info.price_reservation|cutMoneyFiter}}</span>
                            <span class="old-price" v-if="info.price&&info.price_reservation!==info.price">￥{{info.price|cutMoneyFiter}}</span>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <a class="el-button" @click="handleChangeWay('wei')">立即购买</a>
                    <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a>
                </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" :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: '#1F1F1F',
        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: 11,
        studyTypeName: '小学版',
        orderTotalNumber: 5,
        orderList:[
            {
                label:'5 期',
                value: 5
            },
            {
                label:'10 期',
                value: 10
            },
            {
                label:'20 期',
                value: 20
            },
            {
                label:'40 期',
                value: 40
            },
            {
                label:'自定义',
                value: -1
            }
        ],
        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
            }
            
        ],
        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: '初三版'
            },
        ]
    }
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(['$studyType']),
  },
  //监控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
    },
    // 详情
    getInfo(){
        this.loading = true
        let MethodName = "/ShopServer/Client/ReservationQuery/GetReservationInfo_Issue";
        // let customStr = 'false'
        // if(this.orderTotalNumber===-1){
        //     if(this.customOrderNumberList.length>0){
        //         customStr = ''
        //         this.customOrderNumberList.forEach(item => {
        //             customStr += item.issue_no + ','
        //         });
        //         customStr = customStr.substring(0,customStr.length-1)
        //     }else{
        //         // return
        //     }
        // }
        let data = {
            study_phase: this.studyType,
            period_count: this.orderTotalNumber!==-1?this.orderTotalNumber:this.customOrderNumberList.length,
            is_custom_select_issue_no: this.orderTotalNumber!==-1?'false':'true'
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.loading = false
            if(res.status===1){
                this.info = res
                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
                        }
                    })
                })
                this.sales = res.buy_info.total_buy_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(() => {
            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.getInfo()
    },
    changeStudy(item){
        this.studyType = item.study_phase
        this.studyTypeName = item.study_phase_name
        this.customOrderNumberList = []
        this.getInfo()
    },
    changeOrderNumber(item){
        this.orderTotalNumber = item.value
        this.getInfo()
    },
    getDiscountRule(){
        let MethodName = "/OrgServer/Manager/SysConfigManager/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(){
        let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
        let data = {
            goods_type: this.bookType==='LB'?0:this.bookType==='baozhi'?2:null,
            goods_id_list: [this.id],
            pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:null
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status === 1){
                this.orderId = res.id
                this.qr_code_url = res.qr_code_url
                this.paymentShow = true;
                this.order_amount = res.order_amount
            }
        })
        // this.paymentShow = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前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] : '#1F1F1F'
        this.previousPage = arr[4] ? arr[4] : '商城'
    }
    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()
    }
  },
  //生命周期 - 挂载完成（可以访问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: 592px;
                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;
                                }
                            }
                        }
                        .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;
                }
            }
        }
    }
  }
  .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.40);
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        text-decoration: line-through;
    }
    b{
        color: rgba(0, 0, 0, 0.40);
        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: #000;
            font-size: 12px;
            font-weight: 600;
            line-height: 20px; 
        }
        .btn-box{
            a{
                margin-left: 6px;
                border-radius: 2px;
                background: #F2F2F2;
                width: 24px;
                height: 24px;
                display: block;
                text-align: center;
                line-height: 24px;
            }
        }
    }
    &-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>