精读列表

src/App.vue

@@ -105,7 +105,7 @@ export default {
             });
         this.$store.commit('setProviceCity',provinceCityList)
         this.$store.commit('setProviceCityAll',provinceCityListAll)
-        await getLogin('/OrgServer/Manager/SysConfigManager/GetSysConfig_Preview', {})
+        await getLogin('/OrgServer/Client/SysConfigQuery/GetSysConfig_Preview', {})
         .then((res) => {
             if(res.status===1){
                 this.$store.commit('setPreviewUrl',res.preview_server_url)

src/components/common/BookAllListModule.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="BookListModule">
+  <div class="BookListModule" v-if="Bookinfo">
     <div class="module">
       <div class="title">
         <div class="title-left">
@@ -12,15 +12,15 @@
             <a class="lookmore" @click="lookmore"><span>查看全部</span><i class="el-icon-arrow-right"></i></a>
         </div> -->
       </div>
-      <div class="list" v-if="Bookinfo.bookType!=='ZB'">
+      <div class="peruselist" v-if="Bookinfo.bookType==='jingdu'">
         <div
           v-for="(item,index) in Bookinfo.BookList"
           :key="index+'todayNew'"
           :style="{
-              marginLeft:index==0||index%5==0?'0':'50px',
+              marginLeft:index==0||index%4==0?'0':'24px',
             }"
         >
-          <BookCard
+          <BookPeruseCard
             :item="item"
             :headerBg="headerBg"
             :headerBorder="headerBorder"
@@ -30,7 +30,7 @@
           />
         </div>
       </div>
-      <div class="listlive" v-else>
+      <div class="listlive" v-else-if="Bookinfo.bookType==='ZB'">
         <div
           v-for="(item,index) in Bookinfo.BookList"
           :key="index+'todayNew'"
@@ -48,6 +48,24 @@
           />
         </div>
       </div>
+      <div class="list" v-else>
+        <div
+          v-for="(item,index) in Bookinfo.BookList"
+          :key="index+'todayNew'"
+          :style="{
+              marginLeft:index==0||index%5==0?'0':'50px',
+            }"
+        >
+          <BookCard
+            :item="item"
+            :headerBg="headerBg"
+            :headerBorder="headerBorder"
+            :userBg="userBg"
+            :LoginNavIndex="LoginNavIndex"
+            :previousPage="Bookinfo.name"
+          />
+        </div>
+      </div>
       <div class="nodata" v-if="Bookinfo.BookList.length===0">
         <img src="../../assets/nodata.png" />
         <p>找不到文件</p>
@@ -61,11 +79,13 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import BookCard from "./BookCard.vue"
 import BookLiveCard from "./BookLiveCard.vue"
+import BookPeruseCard from "./BookPeruseCard.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     BookCard,
-    BookLiveCard
+    BookLiveCard,
+    BookPeruseCard
   },
   props: ["Bookinfo","showAll","showPage","LoginNavIndex","userBg","headerBorder","headerBg","previousPage"],
   data() {
@@ -100,7 +120,6 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -181,7 +200,7 @@ export default {
         }
     }
   }
-  .list,.listlive {
+  .list,.listlive,.peruselist {
     margin-top: 24px;
     display: flex;
     flex-wrap: wrap;
@@ -196,7 +215,7 @@ export default {
       }
     }
   }
-  .listlive{
+  .listlive,.peruselist{
     >div{
         width: 282px;
     }

src/components/common/BookListModule.vue

@@ -117,7 +117,7 @@ export default {
         this.$router.push({
           path: "/bookStore/all",
           query: {
-            name: encodeURIComponent(this.typeList[this.name].name),
+            name: this.name==='jingdu'?encodeURIComponent(this.typeList[this.name].name):'全部'+encodeURIComponent(this.typeList[this.name].name),
             type: this.name
           }
         })

src/components/common/BookPeruseCard.vue

@@ -35,9 +35,10 @@
                 >
                 </el-rate>
             </template> -->
+            <span class="batch">第 {{item.batch}} 期</span>
             <p class="author">
-               <span>科普知识与现代技术</span> 
-               <label class="xiaoxue">小学版</label>
+               <span>{{item.label}}</span> 
+               <label class="xiaoxue" :style="{background:phaseTypeList[item.study_phase]?phaseTypeList[item.study_phase].bg:'',color:phaseTypeList[item.study_phase]?phaseTypeList[item.study_phase].color:''}">{{item.study_phase_name}}</label>
             </p>
             <template v-if="!type||type!='bookShelf'">
                 <p class="price">
@@ -72,6 +73,24 @@ export default {
         2:{
             type: 'baozhi'
         }
+      },
+      phaseTypeList:{
+        11:{
+            bg:'#E8FFFB',
+            color: '#0FC6C2'
+        },
+        21:{
+            bg: '#F5E8FF',
+            color: '#722ED1'
+        },
+        22:{
+            bg: '#FFECE8',
+            color: '#F53F3F'
+        },
+        23: {
+            bg: '#E8F3FF',
+            color: '#165DFF'
+        }
       }
     }
   },
@@ -116,11 +135,10 @@ export default {
     handleLink(){
         let url  = this.LoginNavIndex +'&&&1&&&2&&&3&&&' + this.previousPage
         this.$router.push({
-            path: "/articlePeruseDetail",
+            path: "/bookPeruseItem",
             query: {
                 headerConfig: encodeURIComponent(url),
-                isBuy:this.isBuy,
-                cardType: this.item.course_type||this.goodsTypeList[this.item.type].type,
+                cardType: 'jingdu',
                 id: this.item.id
             },
         });
@@ -155,6 +173,21 @@ export default {
 .BookCard {
   width: 100%;
   cursor: pointer;
+  position: relative;
+  .batch{
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 0px 0px 8px 0px;
+    background: rgba(0, 0, 0, 0.64);
+    padding: 4px 8px;
+    display: block;
+    color: #FFF;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    text-align: center;
+  }
   .image {
     width: 100%;
     height: 174px;

src/router/index.js

@@ -95,6 +95,11 @@ export const constantRoutes = [{
             import ('@/views/bookShelf/bookItem.vue')
     },
     {
+        path: '/bookPeruseItem',
+        component: () =>
+            import ('@/views/bookShelf/bookPeruseItem.vue')
+    },
+    {
         path: '/courseDetail',
         component: () =>
             import ('@/views/bookShelf/courseDetail.vue')

src/views/bookShelf/articlePeruseDetail.vue

@@ -17,26 +17,28 @@
         </div>
     </div>
     <div class="article-box">
-        <div class="article-top">
-            <span class="preparation">导读</span>
-            <h3>{{peruseDetail.en_title+' '+peruseDetail.cn_title}}</h3>
-            <label v-if="peruseDetail.label" :style="{background:tagBg[Math.floor(Math.random() * 3)],color:tagColor[Math.floor(Math.random() * 3)]}">{{ '# ' + peruseDetail.label}}</label>
-            <p>{{peruseDetail.introduction}}</p>
-        </div>
-        <div class="article-content">
-            <div v-for="(item,index) in peruseDetail.content.article" :key="item.sectionId">
-                <div class="article-en" :class="[index===0?'article-en-title':'']" v-html="item.enArticle"></div>
-                <div class="article-cn" :class="[index===0?'article-cn-title':'']" v-if="translateFlag">{{item.chArticle}}</div>
-                <div class="voice-box">
+        <div class="artricle-inner" :style="{background:bgColorList[activeIndex].contentInnerBg}">
+            <div class="article-top">
+                <span class="preparation" :style="{color:bgColorList[activeIndex].sourceColor}">导读</span>
+                <h3 :style="{color:bgColorList[activeIndex].contentColor}">{{peruseDetail.en_title+' '+peruseDetail.cn_title}}</h3>
+                <label v-if="peruseDetail.label" :style="{background:tagBg[Math.floor(Math.random() * 3)],color:tagColor[Math.floor(Math.random() * 3)]}">{{ '# ' + peruseDetail.label}}</label>
+                <p :style="{color:bgColorList[activeIndex].sourceColor}">{{peruseDetail.introduction}}</p>
+            </div>
+            <div class="article-content" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
+                <div v-for="(item,index) in peruseDetail.content.article" :key="item.sectionId">
+                    <div class="article-en" :class="[index===0?'article-en-title':'']" :style="{color:index===0?bgColorList[activeIndex].titleColor:bgColorList[activeIndex].contentColor,fontSize:index===0?(wordFontsize+16)+'px':wordFontsize+'px',lineHeight:index===0?(wordFontsize+24)+'px':(wordFontsize+8)+'px'}" v-html="item.enArticle"></div>
+                    <div class="article-cn" :class="[index===0?'article-cn-title':'']" v-if="translateFlag" :style="{color:index===0?bgColorList[activeIndex].sourceColor:bgColorList[activeIndex].contentColor,fontSize:wordFontsize+'px',lineHeight:(wordFontsize+8)+'px'}">{{item.chArticle}}</div>
+                    <div class="voice-box">
 
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="article-bottom">
+            <div class="article-bottom">
 
+            </div>
         </div>
     </div>
-    <a></a>
+    <a class="translate" :class="[translateFlag?'active':'']"><svg-icon icon-class="translate" class="wrapper"></svg-icon></a>
   </div>
 </template>
 
@@ -55,7 +57,7 @@ export default {
   },
   data(){
     return{
-        wordFontsize: 18, // 文章文字大小
+        wordFontsize: 16, // 文章文字大小
         bgColorList:[
             {
                 type:'white',
@@ -229,7 +231,6 @@ export default {
     // 切换主题颜色
     handleChangeBgColor(index){
         this.activeIndex = index
-        this.inityuan()
     },
     // 获取精读详情
     getPeruseDetail(){
@@ -294,9 +295,11 @@ export default {
         }
     }
     .article-box{
-        width: 1000px;
-        margin: 90px auto;
-        background: #fff;
+        padding: 90px 0;
+        .artricle-inner{
+            width: 1000px;
+            margin: 0 auto;
+        }
         .article-top{
             padding: 16px 24px 24px;
             .preparation{
@@ -376,6 +379,9 @@ export default {
         }
     }
 }
+.translate{
+    position: fixed;
+}
 </style>
 <style lang="scss">
 .article-fontsize{

src/views/bookShelf/bookPeruseItem.vue

@@ -0,0 +1,607 @@
+<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="'cover'">
+                    </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">
+                    <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')">立即购买</a>
+                        <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a>
+                    </template> 
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="main-center" v-if="info">
+        <el-tabs type="card" style="margin-bottom:24px;">
+            <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" />
+    </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 } 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, // 上次阅读索引
+    }
+  },
+  //计算属性 类似于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
+                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(){
+        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: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.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
+            },
+        });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前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: 297px;
+                height: 414px;
+                border: 1px solid #F3F3F3;
+            }
+        }
+        .book-info-right{
+            flex: 1;
+            padding-left: 88px;
+            .title{
+                color: #2F3742;
+                font-weight: 500;
+                font-size: 32px;
+                line-height: 44px;
+                margin: 0 0 16px 0;
+            }
+            .org,.date{
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 22px;
+                color: rgba(0, 0, 0, 0.4);
+            }
+            .date{
+                margin-left: 32px;
+                line-height: 24px;
+            }
+            .label-box{
+                display: flex;
+                flex-flow: wrap;
+                margin: 16px 0;
+                label{
+                    margin: 0 8px 8px 0;
+                    border-radius: 20px;
+                    padding: 4px 12px;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 22px;
+                }
+            }
+            .book-describe{
+                border-top: 1px solid #E5E6EB;
+                border-bottom: 1px solid #E5E6EB;
+                padding: 16px 0;
+                .title{
+                    font-weight: 500;
+                    font-size: 16px;
+                    line-height: 24px;
+                    color: #000000;
+                    margin-bottom: 8px;
+                }
+                .author{
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 20px;
+                    color: #000000;
+                    margin-bottom: 8px;
+                    display: block;
+                }
+                .describe{
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 22px;
+                    color: #000000;
+                    margin: 0;
+                }
+            }
+            .price-box{
+                padding: 20px 0 16px 0;
+                display: flex;
+                align-items: flex-end;
+                .price{
+                    font-weight: 500;
+                    font-size: 32px;
+                    line-height: 40px;
+                    color: #EA5939;
+                }
+                .oldPrice{
+                    padding: 0 0 2px 7px;
+                    font-weight: 500;
+                    font-size: 14px;
+                    line-height: 22px;
+                    color: rgba(0, 0, 0, 0.4);
+                    text-decoration-line: line-through;
+                }
+            }
+            .info-box{
+                display: flex;
+                flex-flow: wrap;
+                border-bottom: 1px solid #EBEBEB;
+                margin: 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;
+                }
+            }
+        }
+    }
+  }
+  .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>

src/views/bookStore/all.vue

@@ -29,7 +29,7 @@
         <div class="filt-inner">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item :to="{ path: '/' }">商城</el-breadcrumb-item>
-                <el-breadcrumb-item>全部{{nameTypeCn}}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{nameTypeCn}}</el-breadcrumb-item>
             </el-breadcrumb>
             <h2>筛选：</h2>
             <template v-if="itemType==='kecheng'">
@@ -81,7 +81,26 @@
                     </ul>
                 </div>
             </template>
-            
+            <template v-if="itemType==='jingdu'">
+                <div class="filt-item">
+                    <label>主题</label>
+                    <ul>
+                        <li :class="[itemy.value===jingduForm.categoryValue?'active':'']" v-for="(itemy,indexy) in themeList" :key="indexy" @click="handleClick('jingduForm','categoryValue',itemy.value)">
+                            <i v-if="itemy.value===baozhiForm.categoryValue" class="el-icon-success"></i>
+                            {{itemy.label}}
+                        </li>
+                    </ul>
+                </div>
+                <div class="filt-item">
+                    <label>学段</label>
+                    <ul>
+                        <li :class="[items.study_phase===jingduForm.studyValue?'active':'']" v-for="(items,indexs) in jingduStudyList" :key="indexs" @click="handleClick('jingduForm','studyValue',items.study_phase,items.study_phase_name)">
+                            <i v-if="items.study_phase===jingduForm.studyValue" class="el-icon-success"></i>
+                            {{items.study_phase_name}}
+                        </li>
+                    </ul>
+                </div>
+            </template>
             <div class="filt-item">
                 <label>搜索</label>
                 <el-input placeholder="搜索" v-model="searchValue" maxlength="20">
@@ -102,17 +121,6 @@
       />
       <el-pagination
         background
-        :current-page="currentPage"
-        :page-size="page_capacity"
-        :page-sizes="[10, 20, 30, 40, 50]"
-        :total="Bookinfo.number"
-        layout="total, prev, pager, next, sizes, jumper"
-        @size-change="(val)=>handleSizeChange(val,'page_capacity','currentPage')"
-        @current-change="(val)=>handleCurrentChange(val,'currentPage')"
-        v-if="Bookinfo.number>0&&Bookinfo.bookType!=='ZB'"
-      />
-      <el-pagination
-        background
         :current-page="currentPages"
         :page-size="page_capacitys"
         :page-sizes="[8, 16, 24, 32, 40]"
@@ -120,7 +128,18 @@
         layout="total, prev, pager, next, sizes, jumper"
         @size-change="(val)=>handleSizeChange(val,'page_capacitys','currentPages')"
         @current-change="(val)=>handleCurrentChange(val,'currentPages')"
-        v-else-if="Bookinfo.number>0&&Bookinfo.bookType==='ZB'"
+        v-if="Bookinfo.number>0&&(Bookinfo.bookType==='ZB'||Bookinfo.bookType==='jingdu')"
+      />
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="page_capacity"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :total="Bookinfo.number"
+        layout="total, prev, pager, next, sizes, jumper"
+        @size-change="(val)=>handleSizeChange(val,'page_capacity','currentPage')"
+        @current-change="(val)=>handleCurrentChange(val,'currentPage')"
+        v-else-if="Bookinfo.number>0&&Bookinfo.bookType!=='ZB'"
       />
     </div>
   </div>
@@ -178,7 +197,7 @@ export default {
         numberstr: '',
         bookType: null
       },
-      nameTypeCn: this.$route.query.name?decodeURIComponent(this.$route.query.name):'画刊',
+      nameTypeCn: this.$route.query.name?decodeURIComponent(this.$route.query.name):'全部画刊',
       itemType:this.$route.query.type?this.$route.query.type:'huakan',
       yearList:[
         {
@@ -222,12 +241,35 @@ export default {
         studyValue: window.localStorage.getItem("baozhiFormstudyValue")?window.localStorage.getItem("baozhiFormstudyValue")*1:-1,
         typeValue: window.localStorage.getItem("baozhiFormtypeValue")?window.localStorage.getItem("baozhiFormtypeValue")*1:0,
       },
+      jingduForm:{
+        studyValue: window.localStorage.getItem("jingduFormstudyValue")?window.localStorage.getItem("jingduFormstudyValue")*1:11,
+        categoryValue: window.localStorage.getItem("jingduFormcategoryValue")?window.localStorage.getItem("jingduFormcategoryValue"):''
+      },
       currentPage: 1, // 当前页码
       page_capacity: 10, // 每页条数
       currentPages: 1,
       page_capacitys: 8, // 每页条数
       searchValue: '',
-      titleName:window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):''
+      titleName:this.itemType==='jingdu'?window.localStorage.getItem("jingduFormstudyValueName")?window.localStorage.getItem("jingduFormstudyValueName"):this.itemType==='baozhi'?window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):'':'':'',
+      themeList:[],
+      jingduStudyList: [
+        {
+            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概念
@@ -248,7 +290,7 @@ export default {
         }
         if(name){
             this.titleName = name
-            window.localStorage.setItem('baozhiFormstudyValueName',name)
+            window.localStorage.setItem(form+'studyValueName',name)
         }
         this[form][file] = value
         this.currentPage = 1;
@@ -257,7 +299,7 @@ export default {
     },
     handleData(val){
         if(val){
-            if(this.courseForm.categoryValue==='ZB'){
+            if(this.courseForm.categoryValue==='ZB'||this.itemType==='jingdu'){
                 this.currentPages = val
             }else{
                 this.currentPage = val
@@ -266,8 +308,8 @@ export default {
         }
         let MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryCourseList"
         let data = {
-            page_capacity: this.courseForm.categoryValue==='ZB'?this.page_capacitys:this.page_capacity,
-            cur_page: this.courseForm.categoryValue==='ZB'?this.currentPages:this.currentPage,
+            page_capacity: this.courseForm.categoryValue==='ZB'||this.itemType==='jingdu'?this.page_capacitys:this.page_capacity,
+            cur_page: this.courseForm.categoryValue==='ZB'||this.itemType==='jingdu'?this.currentPages:this.currentPage,
             search_content: this.searchValue.trim(),
         }
         if(this.itemType==='kecheng'){
@@ -310,6 +352,26 @@ export default {
             .catch(() => {
                 
             }); 
+        }else if(this.itemType==='jingdu'){
+            MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryIreadArticleList"
+            data.label = this.jingduForm.categoryValue
+            data.study_phase = this.jingduForm.studyValue
+            getLogin(MethodName, data)
+            .then((res) => {
+                if(res.status===1){
+                    this.Bookinfo = {
+                        name: this.titleName,
+                        number: res.total_count,
+                        numberstr: '共' + res.total_count + '期',
+                        study: this.jingduForm.studyValue,
+                        BookList: res.iread_article_list,
+                        bookType: 'jingdu'
+                    }
+                }
+            })
+            .catch(() => {
+                
+            }); 
         }
     },
     handleSizeChange(val,type,page) {
@@ -342,7 +404,14 @@ export default {
                 this.studyList = studyList.concat(res.study_phase_list)
                 this.baozhiStudyList = res.study_phase_list
                 this.baozhiForm.studyValue = window.localStorage.getItem("baozhiFormstudyValue")?window.localStorage.getItem("baozhiFormstudyValue")*1:res.study_phase_list[0]?res.study_phase_list[0].study_phase:-1
-                this.titleName = window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):res.study_phase_list[0]?res.study_phase_list[0].study_phase_name:''
+                if(this.itemType==='baozhi'){
+                    this.titleName = window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):res.study_phase_list[0]?res.study_phase_list[0].study_phase_name:''
+                }else if(this.itemType==='jingdu'){
+                    this.titleName = window.localStorage.getItem("jingduFormstudyValueName")?window.localStorage.getItem("jingduFormstudyValueName"):res.study_phase_list[0]?res.study_phase_list[0].study_phase_name:''
+                }else if(this.itemType==='kecheng'){
+                    this.titleName = window.localStorage.getItem("courseFormstudyValueName")?window.localStorage.getItem("courseFormstudyValueName"):res.study_phase_list[0]?res.study_phase_list[0].study_phase_name:''
+                }
+                
             }
         })
         .catch(() => {
@@ -376,10 +445,39 @@ export default {
             this.loading = false
         });
         
+    },
+    getLabelList(){
+        this.themeList = [
+            {
+                value: '',
+                label: '全部'
+            }
+        ]
+        let yearList = []
+        let MethodName = "/ShopServer/Client/ShopHomeQuery/GetIreadArticleLabelList"
+        getLogin(MethodName, {})
+        .then((res) => {
+            if(res.status===1){
+                res.label_list.forEach(nowYear => {
+                    let obj = {
+                        value: nowYear,
+                        label: nowYear
+                    }
+                    yearList.push(obj)
+                })
+                this.themeList = this.themeList.concat(yearList)
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    if(this.itemType==='jingdu'){
+        this.getLabelList()
+    }
     this.getStudyList()
     this.getYearList()
     this.handleData()

src/views/bookStore/index.vue

@@ -198,17 +198,17 @@ export default {
     },
     // 精读列表
     getPeruseList(){
-        let MethodName = "/ShopServer/Client/ShopHomeQuery/QueryIssueList";
+        let MethodName = "/ShopServer/Client/ShopHomeQuery/QueryIreadArticleList";
         let data = {
             top_n: 3
         }
         getLogin(MethodName, data)
         .then((res) => {
             if(res.status===1){
-                res.issue_list.forEach(item => {
+                res.iread_article_list.forEach(item => {
                     item.course_type="jingdu"
                 });
-                this.PeruseList = res.issue_list
+                this.PeruseList = res.iread_article_list
             }
         })
         .catch(() => {