书架精读包年订阅

src/components/common/BookAllListModule.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="BookListModule" v-if="Bookinfo">
     <div class="module">
-      <div class="title">
+      <div class="title" v-if="!this.$route.query.from">
         <div class="title-left">
             <span>
                 {{Bookinfo.name}}

src/components/common/BookPeruseListCard.vue

@@ -0,0 +1,175 @@
+<template>
+    <div>
+        <el-skeleton style="width: 240px" :loading="true" animated v-if="item.skeleton">
+            <template slot="template">
+                <el-skeleton-item
+                    variant="image"
+                    style="width: 200px; height: 280px;"
+                />
+                <div style="padding: 12px;width: 200px;">
+                    <el-skeleton-item variant="h3" style="width: 100%; height: 22px" />
+                    <el-skeleton-item variant="text" style="margin: 4px 0 12px 0; height: 16px; width:50%;" />
+                    <el-skeleton-item variant="text" style="height: 21px; width:70%;" v-if="!type||type!='bookShelf'" />
+                </div>
+            </template>
+        </el-skeleton>
+        <div class="BookCard" @click="handleLink" v-else>
+            <!-- <div
+            class="image"
+            :style="{height:height?height:'280px'}"
+            ></div> -->
+            <el-image
+                class="image"
+                :src="require('../../assets/cover-order-jingdu.png')"
+                :fit="'cover'">
+            </el-image>
+            <div class="bottom">
+            <p class="name">精读课堂·{{item.study_phase_name}}</p>
+            <!-- <template>
+                <el-rate
+                v-model="item.score"
+                disabled
+                show-score
+                :colors="colors"
+                :score-template="score"
+                >
+                </el-rate>
+            </template> -->
+            <p class="author">有效期：{{item.end_date||'暂无'}}</p>
+            <template v-if="!type||type!='bookShelf'">
+                <p class="price">
+                <span class="OPPOSans">￥{{item.price_discount?item.price_discount:item.price|cutMoneyFiter}}</span>
+                <s v-if="item.price_discount&&item.price_discount!==item.price">￥{{item.price|cutMoneyFiter}}</s>
+                </p>
+            </template>
+            </div>
+        </div> 
+    </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { cutMoneyFiter } from '@/utils/defined';
+export default {
+  name: "BookCard",
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["item", "height","type","LoginNavIndex","userBg","headerBorder","headerBg","previousPage","isBuy"],
+  filters:{
+    cutMoneyFiter
+  },
+  data() {
+    //这里存放数据
+    return {
+      goodsTypeList:{
+        0:{
+            type: 'LB'
+        },
+        2:{
+            type: 'baozhi'
+        }
+      }
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    score() {
+      return this.item.score.toFixed(1)
+    }
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    handleLink(){
+        let url  = this.LoginNavIndex +'&&&1&&&2&&&3&&&' + this.previousPage
+        this.$router.push({
+            path: "/bookStore/all",
+            query: {
+                name: encodeURIComponent('我的订阅'),
+                type: 'jingdu',
+                from: this.item.study_phase
+            }
+        });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // let data = this.changeData(this.dataContext)
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.BookCard {
+  width: 100%;
+  cursor: pointer;
+  .image {
+    width: 100%;
+    height: 280px;
+  }
+  .bottom {
+    // height: 132px;
+    padding: 12px;
+  }
+  p {
+    margin: 0;
+    padding: 0;
+  }
+  .name {
+    width: 100%;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #2F3742;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .author {
+    margin-top: 4px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    color: #929CA8;
+  }
+  .price {
+    margin-top: 12px;
+    display: flex;
+    align-items: flex-end;
+    :nth-child(1) {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+      color: #EC5E41;
+    }
+    :nth-child(2) {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 20px;
+      text-decoration-line: line-through;
+      color: #929CA8;
+      margin-left: 8px;
+    }
+  }
+}
+</style>

src/views/bookShelf/articleDetail.vue

@@ -24,7 +24,7 @@
                 <phrase-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='newWord'" :articleInfo="articleInfo" :likePhraseList="likePhraseList" :likeWord="likeWordList"></phrase-model>
                 <div class="article-btn" v-if="this.$route.query.iss_id">
                     <div class="left">
-                        <span :class="['support colloct-article',!noRead?'active':'']" @click="changeStatus('noRead')"><svg-icon icon-class="like-line"></svg-icon>2847</span>
+                        <span :class="['support colloct-article',!noRead?'active':'']" @click="changeStatus('noRead')"><svg-icon icon-class="like-line" :style="{marginRight:articleNumber?'8px':'0px'}"></svg-icon>{{articleNumber?articleNumber:''}}</span>
                         <!-- <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span> -->
                     </div>
                     <div class="center">
@@ -592,7 +592,8 @@ export default {
         issueChnList:[], // 报刊文章目录
         issueChnTanList: [], //文章摊平
         userMessage: getToken()?JSON.parse(getToken()):null,
-        activeArticleIndex: 0
+        activeArticleIndex: 0,
+        articleNumber: 0
     }
   },
   methods: {
@@ -741,6 +742,7 @@ export default {
         .then((res) => {
             if(res.status===1){
                 this.noRead = res.is_collect_article === 'false'
+                this.articleNumber = res.collect_person_count
                 if(!this.noRead){
                     clearInterval(this_.timer);
                     this_.timer = null;
@@ -793,6 +795,7 @@ export default {
             .then((res) => {
                 if(res.status===1){
                     this[flag] = !this[flag]
+                    this.articleNumber++
                     this.$message({
                         message: "收藏成功",
                         type: "success",
@@ -801,20 +804,20 @@ export default {
             })
             .catch(() => {
             }); 
-            let datas = {
-                sentence_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].id:this.articleInfo.art_corpus_data.sentList[1].id,
-                audio_file_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.mp3:'',
-                audio_begin_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].s:null,
-                audio_end_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].e:null
-            }
-            getLogin('/ShopServer/Client/CollectManager/AddCollect_Sentence', datas)
-            .then((res) => {
-                if(res.status===1){
+            // let datas = {
+            //     sentence_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].id:this.articleInfo.art_corpus_data.sentList[1].id,
+            //     audio_file_id: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.mp3:'',
+            //     audio_begin_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].s:null,
+            //     audio_end_time: this.articleInfo.art_sound_srt_data?this.articleInfo.art_sound_srt_data.sents[1].e:null
+            // }
+            // getLogin('/ShopServer/Client/CollectManager/AddCollect_Sentence', datas)
+            // .then((res) => {
+            //     if(res.status===1){
                     
-                }
-            })
-            .catch(() => {
-            }); 
+            //     }
+            // })
+            // .catch(() => {
+            // }); 
         }else{
             let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Article"
             getLogin(MethodName, {
@@ -823,6 +826,7 @@ export default {
             .then((res) => {
                 if(res.status===1){
                     this[flag] = !this[flag]
+                    this.articleNumber--
                     this.$message({
                         message: "取消收藏",
                         type: "success",

src/views/bookShelf/index.vue

@@ -10,7 +10,7 @@
         <li class="option-item" :class="[typeIndex===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(itemo,indexo)">
             <svg-icon :icon-class="itemo.img" className="icon-img"></svg-icon>
             <span>{{itemo.label}}</span>
-            <b>{{itemo.number}}</b>
+            <b>{{itemo.value===10?itemo.number+orderPeruseNumber:itemo.number}}</b>
         </li>
     </ul>
     <div class="main">
@@ -58,6 +58,17 @@
                     :previousPage="'书架'"
                 />
             </template>
+            <template v-if="item.type===30">
+                <BookPeruseListCard
+                    :item="item"
+                    type='bookShelf'
+                    :headerBg="'#1F1F1F'"
+                    :headerBorder="'#5C5C5C'"
+                    :userBg="'rgba(0, 0, 0, 0.24)'"
+                    :LoginNavIndex="1"
+                    :previousPage="'书架'"
+                />
+            </template>
             <template v-else>
                 <BookCard
                     :item="item"
@@ -88,11 +99,12 @@
 import Header from "../../components/Header.vue";
 import BookCard from "@/components/common/BookCard.vue"
 import BookPeruseCard from "@/components/common/BookPeruseCard.vue"
+import BookPeruseListCard from "@/components/common/BookPeruseListCard.vue"
 import { getLogin } from "@/api/ajax";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, BookCard, BookPeruseCard },
+  components: { Header, BookCard, BookPeruseCard, BookPeruseListCard },
   props: {},
   data() {
     //这里存放数据
@@ -180,7 +192,8 @@ export default {
       noMore: false,
       pageNumber: 1,
       pageSize: 30,
-      typeIndex: 0
+      typeIndex: 0,
+      orderPeruseNumber: 0, // 精读订阅个数
     }
   },
   //计算属性 类似于data概念
@@ -307,10 +320,26 @@ export default {
             this.loading = false
             if(res.status===1){
                 if(this.pageNumber===1){
-                    this.BookList = []
+                    if(this.typeValue===-1||this.typeValue===3){
+                        getLogin('/ShopServer/Client/BookshelfQuery/GetMyValidPeriodList_Iread', {})
+                        .then((ress) => {
+                            if(ress.status===1){
+                                this.orderPeruseNumber = ress.valid_period_list.length
+                                ress.valid_period_list.forEach(items=>{
+                                    items.type = 30
+                                })
+                                this.BookList = ress.valid_period_list.concat(res.goods_list)
+                            }else{
+                                this.BookList = res.goods_list
+                            }
+                        })
+                    }else{
+                        this.BookList = res.goods_list
+                    }
                     this.noMore = false
+                }else{
+                    this.BookList = this.BookList.concat(res.goods_list)
                 }
-                this.BookList = this.BookList.concat(res.goods_list)
                 if(res.total_page<=this.pageNumber){
                     this.noMore = true
                 }

src/views/bookStore/all.vue

@@ -4,7 +4,7 @@
       :headerBg="'#1F1F1F'"
       :headerBorder="'#5C5C5C'"
       :userBg="'rgba(0, 0, 0, 0.24)'"
-      :LoginNavIndex="0"
+      :LoginNavIndex="this.$route.query.from?1:0"
     />
     <div class="banner">
         <el-carousel height="320px" trigger="click" arrow="never">
@@ -28,7 +28,7 @@
     <div class="filt-box">
         <div class="filt-inner">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item :to="{ path: '/' }">商城</el-breadcrumb-item>
+                <el-breadcrumb-item :to="{ path: '/' }">{{this.$route.query.from?'精读课堂':'商城'}}</el-breadcrumb-item>
                 <el-breadcrumb-item>{{nameTypeCn}}</el-breadcrumb-item>
             </el-breadcrumb>
             <h2>筛选：</h2>
@@ -91,7 +91,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="filt-item">
+                <div class="filt-item" v-if="!this.$route.query.from">
                     <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)">
@@ -117,7 +117,7 @@
         :headerBg="'#1F1F1F'"
         :headerBorder="'#5C5C5C'"
         :userBg="'rgba(0, 0, 0, 0.24)'"
-        :LoginNavIndex="0"
+        :LoginNavIndex="this.$route.query.from?1:0"
       />
       <el-pagination
         background
@@ -242,7 +242,7 @@ export default {
         typeValue: window.localStorage.getItem("baozhiFormtypeValue")?window.localStorage.getItem("baozhiFormtypeValue")*1:0,
       },
       jingduForm:{
-        studyValue: window.localStorage.getItem("jingduFormstudyValue")?window.localStorage.getItem("jingduFormstudyValue")*1:11,
+        studyValue: this.$route.query.from?this.$route.query.from*1:window.localStorage.getItem("jingduFormstudyValue")?window.localStorage.getItem("jingduFormstudyValue")*1:11,
         categoryValue: window.localStorage.getItem("jingduFormcategoryValue")?window.localStorage.getItem("jingduFormcategoryValue"):''
       },
       currentPage: 1, // 当前页码
@@ -353,25 +353,48 @@ export default {
                 
             }); 
         }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'
+            if(this.$route.query.form){
+                MethodName = "/ShopServer/Client/BookshelfQuery/PageQueryMyIreadArticleList_UsePeriod"
+                data.label = this.jingduForm.categoryValue
+                data.study_phase = this.$route.query.form*1
+                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(() => {
-                
-            }); 
+                })
+                .catch(() => {
+                    
+                });
+            }else{
+                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) {