HM21St_Page_User/src/views/bookShelf/bookPeruseItem.vue

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

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookCard, Payment, TreeList, CourseList },
  props: [],
  filters:{
    cutMoneyFiter
  },
  data() {
    //这里存放数据
    return {
        config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
        LoginNavIndex: 0,
        userBg: 'rgba(0, 0, 0, 0.24)',
        headerBorder: '#5C5C5C',
        headerBg: '#1F1F1F',
        previousPage: '商城',
        tagBg:['#C9EBFF','#FFFAC9','#D7C9FF'], // 标签背景色
        tagColor:['#006DAA','#AA8500','#7849C4'], // 标签字体颜色
        paymentShow: false, // 支付弹窗
        payWay:this.$route.query.paywei?this.$route.query.paywei:'dui',
        bookType: this.$route.query.cardType?this.$route.query.cardType:'baozhi', // 书籍类型
        bannerFlag: true, // 是否展示广告
        id: this.$route.query.id?this.$route.query.id:'',
        info: null, // 信息
        courseList:[],
        sales: null,
        salesCn: '',
        isBuy: 'false',
        userMessage: getToken()?JSON.parse(getToken()):null,
        orderId: '',
        qr_code_url: '',
        pre_play_cs_item_id: '', //上次阅读课节id
        pre_play_index: null, // 上次阅读索引
        order_amount: null,
        createOrderLoading: false,
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 分享
    handleShare(){

    },
    // 收藏
    handlelike(){

    },
    handleChangeWay(type){
        if(!this.userMessage){
            this.$refs.header.handleLogin('/bookItem?headerConfig='+this.$route.query.headerConfig+'&cardType='+this.bookType+'&id='+this.id+'&paywei='+type,'url')
            return false
        }
        this.payWay = type;
        this.handleOrder()
    },
    // 关闭弹窗
    handleClose(){
        this.paymentShow = false
        this.getInfo()
    },
    // 详情
    getInfo(){
        let MethodName = "/PaperServer/Client/Iread/GetIreadBriefInfo";
        let data = {
                id: this.id,
            }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.info = res.data
            }
        })
        .catch(() => {
            
        }); 
        if(this.userMessage){
            getLogin('/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus', {
                goods_type: 3,
                goods_id: this.id
            })
            .then((res) => {
                if(res.status===1){
                    this.isBuy = res.buy_info.is_buy
                    this.sales = res.data.sold_count
                    if(this.sales<1000){
                        this.salesCn = ''
                    }else if(1000<=this.sales&&this.sales<10000){
                        this.salesCn = this.sales.toString().substring(0,1)+'000+'
                    }else if(10000<=this.sales&&this.sales<100000){
                        this.salesCn = this.sales.toString().substring(0,1)+'万+'
                    }else if(100000<=this.sales&&this.sales<1000000){
                        this.salesCn = this.sales.toString().substring(0,1)+'0万+'
                    }else if(1000000<=this.sales&&this.sales<10000000){
                        this.salesCn = this.sales.toString().substring(0,1)+'00万+'
                    }else if(10000000<=this.sales&&this.sales<100000000){
                        this.salesCn = this.sales.toString().substring(0,1)+'000万+'
                    }else if(100000000<=this.sales){
                        this.salesCn = this.sales.toString().substring(0,1)+'亿+'
                    }
                }
            })
            .catch(() => {
                
            }); 
        }else{
            getNoToken('/ShopServer/Client/BookshelfQuery/GetGoodsBuyStatus', {
                goods_type: 3,
                goods_id: this.id
            }, 'VOID')
            .then((res) => {
                if(res.status===1){
                    this.isBuy = res.buy_info.is_buy
                    this.sales = res.data.sold_count
                    if(this.sales<1000){
                        this.salesCn = ''
                    }else if(1000<=this.sales&&this.sales<10000){
                        this.salesCn = this.sales.toString().substring(0,1)+'000+'
                    }else if(10000<=this.sales&&this.sales<100000){
                        this.salesCn = this.sales.toString().substring(0,1)+'万+'
                    }else if(100000<=this.sales&&this.sales<1000000){
                        this.salesCn = this.sales.toString().substring(0,1)+'0万+'
                    }else if(1000000<=this.sales&&this.sales<10000000){
                        this.salesCn = this.sales.toString().substring(0,1)+'00万+'
                    }else if(10000000<=this.sales&&this.sales<100000000){
                        this.salesCn = this.sales.toString().substring(0,1)+'000万+'
                    }else if(100000000<=this.sales){
                        this.salesCn = this.sales.toString().substring(0,1)+'亿+'
                    }
                }
            })
            .catch(() => {
                
            }); 
        }
    },
    // 生成订单
    handleOrder(){
        this.createOrderLoading = true
        let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
        let data = {
            goods_type: 3,
            goods_id_list: [this.id],
            pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:this.payWay==='dui'?5:null
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.createOrderLoading = false
            if(res.status === 1){
                this.order_amount = res.order_amount
                if(this.order_amount<=0){
                    this.getInfo()
                }else{
                    this.orderId = res.id
                    this.qr_code_url = res.qr_code_url
                    this.paymentShow = true;
                }
            }
        }).catch(()=>{
            this.createOrderLoading = false
        })
        // this.paymentShow = true;
    },
    // 跳转
    handleLink(){
        let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
        this.$router.push({
            path: "/articlePeruseDetail",
            query: {
                headerConfig: encodeURIComponent(url),
                peruseId: this.id
            },
        });
    },
    // 多期订阅
    linkSubscribe(){
        this.$router.push({
          path: "/subscribe",
          query: {
            name: encodeURIComponent('精读'),
            type: 'jingdu',
            studyType: this.info.study_phase,
            studyTypeName: encodeURIComponent(this.info.study_phase_name)
          }
        })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(this.config){
        let arr = this.config.split('&&&')
        this.LoginNavIndex = arr[0] * 1
        this.userBg = arr[1] ? arr[1] : 'rgba(0, 0, 0, 0.24)'
        this.headerBorder = arr[2] ? arr[2] : '#5C5C5C'
        this.headerBg = arr[3] ? arr[3] : '#1F1F1F'
        this.previousPage = arr[4] ? arr[4] : '商城'
    }
    this.getInfo()
    if(this.$route.query.paywei){
        this.handleOrder()
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookItem {
  background: #F7F8FA;
  min-height: 100%;
  .main-top {
    background: #FFFFFF;
    padding: 48px 0;
    margin-top: 56px;
    &-inner{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        .swiper-container{
            width: 416px;
            height: 440px;
            text-align: center;
            .el-image{
                width: 414px;
                height: 414px;
                border: 1px solid #F3F3F3;
            }
        }
        .book-info-right{
            flex: 1;
            padding-left: 88px;
            .title{
                color: #2F3742;
                font-weight: 500;
                font-size: 32px;
                line-height: 44px;
                margin: 0 0 16px 0;
            }
            .org,.date{
                font-weight: 500;
                font-size: 14px;
                line-height: 22px;
                color: rgba(0, 0, 0, 0.4);
            }
            .date{
                margin-left: 32px;
                line-height: 24px;
            }
            .label-box{
                display: flex;
                flex-flow: wrap;
                margin: 16px 0;
                label{
                    margin: 0 8px 8px 0;
                    border-radius: 20px;
                    padding: 4px 12px;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                }
            }
            .book-describe{
                border-top: 1px solid #E5E6EB;
                border-bottom: 1px solid #E5E6EB;
                padding: 16px 0;
                .title{
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 24px;
                    color: #000000;
                    margin-bottom: 8px;
                }
                .author{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 20px;
                    color: #000000;
                    margin-bottom: 8px;
                    display: block;
                }
                .describe{
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                    color: #000000;
                    margin: 0;
                }
            }
            .price-box{
                padding: 20px 0 16px 0;
                display: flex;
                align-items: flex-end;
                .price{
                    font-weight: 500;
                    font-size: 32px;
                    line-height: 40px;
                    color: #EA5939;
                }
                .oldPrice{
                    padding: 0 0 2px 7px;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 22px;
                    color: rgba(0, 0, 0, 0.4);
                    text-decoration-line: line-through;
                }
            }
            .info-box{
                display: flex;
                flex-flow: wrap;
                border-bottom: 1px solid #EBEBEB;
                margin: 24px 0;
                .info-item{
                    width: 50%;
                    margin-bottom: 15px;
                    font-size: 14px;
                    line-height: 22px;
                    display: flex;
                    label{
                        color: #C2C2C2;
                        font-weight: 400;
                        margin-right: 16px;
                        width: 58px;
                        display: block;
                        text-align:justify;
                        text-justify:distribute-all-lines;
                        text-align-last:justify;
                        -moz-text-align-last:justify;
                        -webkit-text-align-last:justify;
                    }
                }
            }
            .btn-box{
                display: flex;
                .el-button{
                    width: 112px;
                    height: 40px;
                    background: #EA5939;
                    box-shadow: 0px 8px 16px rgba(234, 89, 57, 0.24);
                    border-radius: 4px;
                    font-weight: 500;
                    font-size: 16px;
                    color: #FFFFFF;
                    border: none;
                }
                .svg-icon{
                    margin-left: 7px;
                }
                .continue{
                    width: 112px;
                    height: 40px;
                    background: #175DFF;
                    border-radius: 4px;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 40px;
                    color: rgba(255, 255, 255, 1);
                    display: block;
                    text-align: center;
                    box-shadow: 0px 8px 16px rgba(23, 93, 255, 0.24);
                }
                .upgrade{
                    margin-left: 16px;
                    display: block;
                    padding: 0px 24px;
                    height: 40px;
                    background: #E9E9E9;
                    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
                    border-radius: 4px;
                    color: #595959;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 40px;
                    text-align: center;
                    width: 130px;
                }
            }
        }
    }
  }
  .main-center{
    width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
        border-color: #E7E7E7;
    }
  }
  .main-bottom{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
    &-top{
        display: flex;
        justify-content: space-between;
        p{
            margin: 0;
            font-weight: 500;
            font-size: 24px;
            line-height: 32px;
            color: #1F2C5C;
            font-family: initial;
        }
        .right{
            color: rgba(0, 0, 0, 0.88);
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            cursor: pointer;
            a{
                margin-right: 8px;
            }
        }
    }
  }
  .list {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    > div {
        width: 200px;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
        margin-bottom: 24px;
    }
  }
}
.banner-box-close{
    margin-top: 40px;
}
.sales-box{
    display: flex;
    // width: 592px;
    padding: 16px;
    border-radius: 4px;
    background: #F5F5F5;
    justify-content: space-between;
    align-items: flex-end;
    color: #ADADAD;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    .OPPOSans{
        margin: 0 8px 0 16px;
        color: #EA5939;
        font-size: 32px;
        font-weight: 500;
        line-height: 40px;
    }
    .old-price{
        color: rgba(0, 0, 0, 0.40);
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        text-decoration: line-through;
    }
}
</style>
<style lang="scss">
.bookItem{
    .el-carousel__button{
        width: 8px;
        height: 8px;
        background: #D9D9D9;
        opacity: 1;
        border-radius: 4px;
    }
    .el-carousel__indicator.is-active{
        .el-carousel__button{
            background: #5E5E5E;
        }
    }
    .el-tabs__header{
        margin: 0;
    }
    .el-tab-pane{
        background: #F8F8F8;
        border: 1px solid #E7E7E7;
        border-top: none;
        padding: 24px;
    }
    .el-tabs__item{
        width: 160px;
        height: 38px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        line-height: 38px;
        color: #1F2C5C;
        &:hover{
            background: #E7E7E7;
        }
        &.is-active{
            // background: #3459D2;
            // color: #EEF3FF;
            border-bottom: none;
            background: #E7E7E7;
        }
    }
}
.bookitem-dropdown.el-dropdown-menu{
    padding: 4px;
    .el-dropdown-menu__item{
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
        color: #000000;
    }
    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
        background: #FDECEE;
        border-radius: 4px;
        color: #EA5939;
    }
}

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