精读订阅

src/router/index.js

@@ -159,6 +159,16 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/bookShelf/articlePeruseDetail.vue')
     },
+    {
+        path: '/share',
+        component: () =>
+            import ('@/views/bookShelf/share.vue')
+    },
+    {
+        path: '/articleShareDetail',
+        component: () =>
+            import ('@/views/bookShelf/articleShareDetail.vue')
+    },
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/', hidden: true }
 ]

src/utils/defined.js

@@ -1,6 +1,6 @@
 export const cutMoneyFiter = (amount) => {
     if (!amount) {
-        return "-"
+        return "0.00"
     }
     //强制保留两位小数
     let f = parseFloat(amount);

src/views/bookShelf/articleDetail.vue

@@ -616,7 +616,9 @@ export default {
             this.loading = false
             if(res.status===1){
                 this.articleInfo = res.data
-                this.inityuan()
+                setTimeout(() => {
+                    this_.inityuan()
+                }, 100);
             }
         })
         .catch(() => {

src/views/bookShelf/articleShareDetail.vue

@@ -0,0 +1,583 @@
+<template>
+  <div class="bookShare" :style="{background:bgColorList[activeIndex].contentBg}" v-if="articleInfo" :v-loading="loading">
+    <div class="navBar" :class="['navBar-'+bgColorList[activeIndex].type]" :style="{background:bgColorList[activeIndex].navBg}">
+        <div class="navBar-left" @click="cutLoginReg">
+            <svg-icon icon-class="logo"></svg-icon>
+        </div>
+        <div class="navBar-right">
+            <el-image
+                :src="require('../../assets/avatar.png')"
+                fit="cover" style="width:24px;height:24px;margin:0 8px;border-radius:50%">
+            </el-image>
+            <span class="name">某某分享的文章</span>
+        </div>
+    </div>
+    <div class="article-box">
+        <div class="artricle-inner" :style="{background:bgColorList[activeIndex].contentInnerBg}">
+            <!-- 文章 -->
+            <div class="atricle-data">
+                <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='original'"></normal-model>
+            </div>
+            <!-- 词汇表 -->
+            <div class="glossary-box" :style="{borderTopColor:bgColorList[activeIndex].contentBg}">
+                <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle}">
+                    <h2>词汇表</h2>
+                    <a @click="showGlossary=!showGlossary">{{showGlossary?'收起':'展开'}}</a>
+                </div>
+                <el-collapse-transition >
+                    <div v-if="showGlossary">
+                        <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">生词</h4>
+                        <new-word-list class="newWord-list" :list="articleInfo.art_voc_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likeWordList="likeWordList" @changeLike="changeLike" :noLike="true"></new-word-list>
+                        <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">短语</h4>
+                        <phrase-list class="newWord-list" :list="articleInfo.art_phrase_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likePhraseList="likePhraseList" @changeLike="changeLike" :noLike="true"></phrase-list>
+                        <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">注释</h4>
+                        <annotation-list class="newWord-list" :list="articleInfo.art_explain_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></annotation-list>
+                    </div>
+                </el-collapse-transition>
+                <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle,marginTop:'40px'}">
+                    <h2>详细统计</h2>
+                </div>
+                <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇信息</h4>
+                <div class="word-info">
+                    <div v-for="(itemI,indexI) in wordInfo" :key="indexI" :style="{background:bgColorList[activeIndex].glossaryBg}">
+                        <label :style="{color:bgColorList[activeIndex].statisticTitle}">{{itemI.label}}</label>
+                        <span :style="{color:bgColorList[activeIndex].statisticValue}">{{itemI.value}}</span>
+                    </div>
+                </div>
+                <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">词汇分布</h4>
+                <div class="echarts-box">
+                    <ul class="echarts-type">
+                        <li v-for="(itemE,indexE) in vocabularyType" :key="indexE"
+                            @mouseover="gaolangbzt(indexE, 'shanxing_main')"
+                            @mouseout="closegaolangbzt(indexE, 'shanxing_main')"
+                            :style="{background:bgColorList[activeIndex].type==='white'?itemE.bg:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBg:itemE.darkBg,color:bgColorList[activeIndex].type==='white'?itemE.color:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenColor:itemE.darkColor,borderColor:bgColorList[activeIndex].type==='white'?itemE.border:bgColorList[activeIndex].type==='darkGreen'?itemE.darkGreenBorder:itemE.darkBorder}">
+                            <span class="name">{{itemE.name}}</span>
+                            <span class="number">{{itemE.value}}</span>
+                            <span class="percent">{{itemE.percent}}</span>
+                        </li>
+                    </ul>
+                    <div id="shanxing_main" style="height: 360px"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NewWordList from './components/NewWordList.vue';
+import PhraseList from './components/PhraseList.vue';
+import AnnotationList from './components/AnnotationList.vue'
+import NormalModel from "./components/NormalModel.vue"
+import * as echarts from "echarts";
+import { getLogin } from "@/api/ajax";
+export default {
+  name: 'articleDetail',
+  computed: {
+    
+  },
+  components: {
+    NewWordList,
+    PhraseList,
+    AnnotationList,
+    NormalModel,
+  },
+  data(){
+    return{
+        LoginNavIndex: 0,
+        wordFontsize: 18, // 文章文字大小
+        bgColorList:[
+            {
+                type:'white',
+                contentBg:'#F2F3F5',
+                contentInnerBg:'#FFFFFF',
+                navBg:'#FFFFFF',
+                border:'#E5E6EB',
+                bg:'#FFFFFF',
+                border_active:'#3459D2',
+                boxBorder:'#E5E6EB',
+                titleColor:'#1F2C5C',
+                sourceColor:'#929CA8',
+                contentColor:'#2F3742',
+                btnColor:'#3459D2',
+                glossaryTitle:'#2F3742',
+                glossarySubtitle:'#4E5969',
+                glossaryBg:'#F7F8FA',
+                newWordColor:'#175DFF',
+                newWordOtherColor:'#667180',
+                newWordStar:'#FFB224',
+                newWordType:{
+                    'daochu':{
+                        text:'导出',
+                        color:'#F5319D',
+                        bg:'#FFE8F1'
+                    },
+                    'xuanbi':{
+                        text:'选必',
+                        color:'#175DFF',
+                        bg:'#D9E2FC'
+                    }
+                },
+                phraseColor:'#ED5F00',
+                phraseOhterColor:'#2F3742',
+                annotationTitle:'#4E5969',
+                annotationOhter:'#667180',
+                statisticTitle:'#2F3742',
+                statisticValue:'#3459D2',
+                menuBg:'#EEF3FF',
+                audiobg:'#FFFFFF',
+                audioBorder:'#EBEBEB'
+            }
+        ],
+        activeIndex:0, // 选择主题色的索引
+        showGlossary: true, // 是否展开词汇表
+        wordInfo:{
+            length: {
+                        label:'文章长度',
+                        value:463
+                    },
+            number: {
+                        label:'词汇数量',
+                        value:236
+                    },
+            averageLength: {
+                        label:'平均词长',
+                        value:4.52
+                    },
+            lexicalDensity: {
+                        label:'词汇密度',
+                        value:0.51
+                    },
+            wordDifficulty: {
+                        label:'词汇难度',
+                        value:2.05
+                    },
+        },
+        vocabularyType:[
+            {
+                name:'小学',
+                percent:30.51,
+                value: 72,
+                bg:'#F2FCE3',
+                color:'#5B7217',
+                darkBg:'#5B7217',
+                border:'#F2FCE3',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#F2FCE3',
+                darkGreenColor:'#5B7217',
+                darkGreenBorder:'#F2FCE3'
+            },
+            {
+                name:'初中',
+                percent:26.27,
+                value: 62,
+                bg:'#EFFCEF',
+                color:'#3D9A50',
+                darkBg:'#2F6E3B',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#EFFCEF',
+                darkGreenColor:'#3D9A50',
+                darkGreenBorder:'#EFFCEF'
+            },
+            {
+                name:'高中必修',
+                percent:2.97,
+                value: 7,
+                bg:'#E7EEFF',
+                color:'#175DFF',
+                darkBg:'#006793',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#E7F3FF',
+                darkGreenColor:'#0081F1',
+                darkGreenBorder:'#E7F3FF'
+            },
+            {
+                name:'高中选必',
+                percent:6.78,
+                value: 16,
+                bg:'#EEF3FF',
+                color:'#3459D2',
+                darkBg:'#2C49AA',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#EEF3FF',
+                darkGreenColor:'#3459D2',
+                darkGreenBorder:'#EEF3FF'
+            },
+            {
+                name:'导出词',
+                percent:16.95,
+                value: 40,
+                bg:'#FFECF5',
+                color:'#E03177',
+                darkBg:'#AE1955',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#FFECF5',
+                darkGreenColor:'#E03177',
+                darkGreenBorder:'#FFECF5'
+            },
+            {
+                name:'超纲词',
+                percent:0.00,
+                value: 0,
+                bg:'#FFE8E8',
+                color:'#CD2B31',
+                darkBg:'#8F2025',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#FFE8E8',
+                darkGreenColor:'#CD2B31',
+                darkGreenBorder:'#FFE8E8'
+            },
+            {
+                name:'专有',
+                percent:10.17,
+                value: 24,
+                bg:'#DFE4E2',
+                color:'#4A524E',
+                border:'rgba(0, 0, 0, 0.08)',
+                darkBg:'#4A524E',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#DFE4E2',
+                darkGreenColor:'#4A524E',
+                darkGreenBorder:'rgba(0, 0, 0, 0.08)'
+            },
+            {
+                name:'其他',
+                percent:6.36,
+                value: 15,
+                bg:'#C1C5CD',
+                color:'#504F57',
+                darkBg:'#2F3742',
+                darkColor:'rgba(255, 255, 255, 0.64)',
+                darkBorder:'rgba(255, 255, 255, 0.08)',
+                darkGreenBg:'#C1C5CD',
+                darkGreenColor:'#504F57',
+                darkGreenBorder:'#C1C5CD'
+            }
+        ],
+        articleType:this.$route.query.type?this.$route.query.type*1:1,
+        articleId:this.$route.query.id?this.$route.query.id:'',
+        noRead: true, // 未读
+        support: false, // 点赞
+        oppose: false, // 不支持
+        timer: null,
+        readLength: 0,
+        articleInfo: null,
+        loading: false,
+        menuType: 'original',
+        menuFeature: '', // 功能
+        shareSrc: '', // 分享图片
+        share_url: '', // 分享链接
+        shareLoading: false,
+        likeWordList: [], // 收藏短语list
+        likePhraseList: [],
+        likeSentencelist: [],
+    }
+  },
+  methods: {
+    inityuan() {
+      var chartDom = document.getElementById("shanxing_main");
+      var myChart = echarts.init(chartDom);
+      var option;
+      let newdata = JSON.parse(JSON.stringify(this.vocabularyType));
+      newdata.forEach((item) => {
+        let percent = item.percent;
+        if (percent % 1 == 0) {
+          item.name = item.name + " " + percent + "%";
+        } else {
+          item.name = item.name + " " + percent.toFixed(2) + "%";
+        }
+      });
+      option = {
+        color:this.bgColorList[this.activeIndex].type==='white'?['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:this.bgColorList[this.activeIndex].type==='darkGreen'?['#90C62F','#55B467','#5FD4F4','#5373E7','#F04F88','#F2555A','#D7DCDA','#99A29E']:['#5B7217','#2F6E3B','#006793','#2C49AA','#AE1955','#F2555A','#4A524E','#2F3742'],
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            radius: ["50%", "90%"],
+            data: newdata,
+            itemStyle: {
+            borderColor: "rgba(255, 255, 255, 0.24)",
+            borderWidth: 1,
+            },
+            top: 50,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+        xAxis: {
+          show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false, //不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, //不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, //不显示坐标轴上的文字
+          },
+        },
+      };
+      option && myChart.setOption(option);
+    },
+    // 鼠标进入
+    gaolangbzt(index, id) {
+      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
+      compareChart.dispatchAction({
+        type: "highlight",
+        seriesIndex: 0,
+        dataIndex: index,
+      });
+    },
+    // 鼠标移出
+    closegaolangbzt(index, id) {
+      var compareChart = echarts.getInstanceByDom(document.getElementById(id));
+      compareChart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: index,
+      });
+    },
+    getArticleDetail(){
+        this.loading = true
+        let this_ = this;
+        let MethodName = "/PaperServer/Client/Article/GetArticleDetail";
+        let data = {
+            id: this.articleId,
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            if(res.status===1){
+                this_.articleInfo = res.data
+                setTimeout(() => {
+                    this_.inityuan()
+                }, 100);
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        }); 
+        getLogin('/ShopServer/Client/CollectManager/GetMyCollectIntegrateInfo_Article', {
+            article_id: this.articleId,
+        })
+        .then((res) => {
+            if(res.status===1){ 
+                this.likeWordList = []
+                res.word_list.forEach(item=>{
+                    this.likeWordList.push(item.word)
+                })
+                this.likePhraseList = []
+                res.phrase_list.forEach(item=>{
+                    this.likePhraseList.push(item.phrase)
+                })
+                this.likeSentencelist = []
+                res.sentence_list.forEach(item=>{
+                    this.likeSentencelist.push(item.sentence_id)
+                })
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        }); 
+    },
+    // 切换登录的注册
+    cutLoginReg() {
+      window.location.href = "/";
+    },
+    changeLike(type,list){
+        this[type] = list
+    }
+  },
+  created(){
+    if(this.articleId){
+        this.getArticleDetail()
+    }
+  },
+  mounted(){
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bookShare{
+    min-height: calc(100vh - 64px);
+    .navBar-left{
+        cursor: pointer;
+        font-size: 0;
+        z-index: 2;
+        .svg-icon{
+            width: 204px;
+            height: 32px;
+            color: rgba(29, 33, 41, 1);
+        }
+    }
+    .navBar-right{
+        display: flex;
+        align-items: center;
+        span{
+            color: #86909C;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 24px; 
+        }
+    }
+    .article-box{
+        position: relative;
+        padding: 20px 0;
+        .artricle-inner{
+            width: 1000px;
+            margin: 0 auto;
+            border-radius: 8px;
+        }
+        .mene-right{
+            position: fixed;
+            right: calc((100% - 1000px)/2 - 196px);
+            top: 144px;
+            width: 176px;
+            background: #FFFFFF;
+            border: 1px solid #E5E6EB;
+            border-radius: 8px;
+            padding: 4px;
+        }
+    }
+    .atricle-data{
+        padding: 120px 100px 40px 100px;
+    }
+    .glossary-box{
+        border-top: 1px solid #F2F3F5;
+        padding: 40px;
+        .title{
+            display: flex;
+            justify-content: space-between;
+            h2{
+                margin: 0;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 32px;
+            }
+            a{
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 24px;
+            }
+        }
+        h4{
+            margin: 24px 0 8px 0;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 20px;
+        }
+    }
+    .newWord-list{
+        padding: 2px 4px;
+    }
+    .word-info{
+        display: flex;
+        justify-content: space-between;
+        >div{
+            width: 178px;
+            height: 64px;
+            border-radius: 4px;
+            padding: 8px 12px;
+            label{
+                display: block;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 20px;
+                margin-bottom: 4px;
+            }
+            span{
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 24px;
+            }
+        }
+    }
+    .echarts-box{
+        display: flex;
+        .echarts-type{
+            width: 232px;
+            flex-shrink: 0;
+            li{
+                height: 38px;
+                border-radius: 4px;
+                margin-bottom: 8px;
+                font-size: 14px;
+                line-height: 20px;
+                display: flex;
+                padding: 8px 12px;
+                cursor: pointer;
+                border: 1px solid transparent;
+                .name{
+                    flex: 1;
+                }
+                .number{
+                    width: 40px;
+                    text-align: right;
+                }
+                .percent{
+                    width: 80px;
+                    text-align: right;
+                }
+            }
+        }
+        #shanxing_main{
+            flex: 1;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.bookShare{
+    .navBar{
+        border-color: transparent;
+        top: 0;
+        &-white{
+            border-color: #EBEBEB;
+            .el-input-number__decrease, .el-input-number__increase,.el-input__inner{
+                color: #1C2129;
+            }
+            .el-input-number__decrease{
+                border-right: 1px solid #E5E6EB;
+            }
+            .el-input-number__increase{
+                border-left: 1px solid #E5E6EB;
+            }
+            .goback{
+                color: #1D2129;
+            }
+            .border{
+                background: #E5E6EB;
+                height: 16px;
+                margin-top: 2px;
+            }
+            .article-title{
+                color: #86909C;
+            }
+        }
+    }
+}
+.login-dialog{
+   .el-dialog__header,.el-dialog__body{
+        padding: 0;
+    }
+    .el-dialog{
+        border: 1px solid #E5E6EB;
+        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: 4px;
+        overflow: hidden;
+    } 
+}
+</style>

src/views/bookShelf/components/NewWordList.vue

@@ -21,8 +21,10 @@
                     </div>
                 </div>
                 <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?olorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
-                <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
-                <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
+                <template v-if="!noLike">
+                    <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
+                    <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
+                </template>
                 <!-- <i class="el-icon-arrow-right"></i> -->
             </li>
         </ul>
@@ -33,7 +35,7 @@
             width="570px"
             class="login-dialog"
             v-if="wordcardShow">
-            <WordCard @closeWord="closeWord" />
+            <WordCard @closeWord="closeWord" :data="activeItem" />
         </el-dialog>
     </div>
     
@@ -47,7 +49,7 @@ import WordCard from "../../personalCenter/components/WordCard.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {WordCard},
-  props: ["list","colorObj","likeWordList"],
+  props: ["list","colorObj","likeWordList","noLike"],
   data() {
     //这里存放数据
     return {
@@ -58,7 +60,8 @@ export default {
         voicePauseSrc: '',
         voicePlaySrc: require("../../../assets/voice-play-gray.png"),
         activeIndex: null,
-        likeWord: JSON.parse(JSON.stringify(this.likeWordList))
+        likeWord: JSON.parse(JSON.stringify(this.likeWordList)),
+        activeItem: null
     }
   },
   //计算属性 类似于data概念
@@ -133,6 +136,7 @@ export default {
     // 查看单词卡片
     showWord(obj){
         this.wordcardShow = true
+        this.activeItem = obj
     },
     // 关闭单词卡片
     closeWord(){

src/views/bookShelf/components/PhraseList.vue

@@ -11,8 +11,10 @@
                     </div>
                 </div>
             </div>
-            <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
-            <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
+            <template v-if="!noLike">
+                <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
+                <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
+            </template>
             <!-- <i class="el-icon-arrow-right"></i> -->
         </li>
     </ul>
@@ -26,7 +28,7 @@ import WordCard from "../../personalCenter/components/WordCard.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {WordCard},
-  props: ["list","colorObj","likePhraseList"],
+  props: ["list","colorObj","likePhraseList","noLike"],
   data() {
     //这里存放数据
     return {

src/views/bookShelf/share.vue

@@ -0,0 +1,83 @@
+<template>
+  
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { getLogin } from "@/api/ajax";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    let MethodName = "/ShopServer/Client/ShareManager/GetShareRecordInfo";
+    let data = {
+        id: this.$route.query.share_id
+    }
+    getLogin(MethodName, data)
+    .then((res) => {
+        if(res.status===1){
+            if(new Date().getTime()>new Date(res.share_record.share_time_end).getTime()){
+                this.$message.error('链接已过期')
+                return
+            }
+            if(res.share_record.share_count_cur>=res.share_record.share_count_max){
+                this.$message.error('分享次数已达上限')
+                return
+            }
+            this.$router.replace({
+                path: "/articleShareDetail",
+                query: {
+                    id: res.share_record.goods_id
+                },
+            })
+        }
+    })
+    .catch(() => {
+    }); 
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+
+</style>
+<style lang="scss">
+
+</style>

src/views/bookStore/Subscribe.vue

@@ -5,6 +5,7 @@
       :headerBorder="headerBorder"
       :userBg="userBg"
       :LoginNavIndex="0"
+      ref="header"
     />
     <div class="navBar" v-if="info">
         <div class="navBar-left">
@@ -49,11 +50,11 @@
                 <div class="info-box">
                     <div class="info-item">
                         <label>适合年龄</label>
-                        <span>{{info.issue_info.age_desc||info.iread_info.age_desc}}</span>
+                        <span>{{info.issue_info?info.issue_info.age_desc:info.iread_info.age_desc}}</span>
                     </div>
                     <div class="info-item">
                         <label>期刊页数</label>
-                        <span>{{info.issue_info.page_count_desc||info.iread_info.article_count_desc}}</span>
+                        <span>{{info.issue_info?info.issue_info.page_count_desc:info.iread_info.article_count_desc}}</span>
                         <el-tooltip placement="right" v-if="bookType==='baozhi'">
                             <div slot="content">双刊、特辑、寒暑假合刊除外</div>
                             <el-button class="tooltip-btn"><svg-icon icon-class="icon-mark"></svg-icon></el-button>
@@ -61,7 +62,7 @@
                     </div>
                     <div class="info-item">
                         <label>出版周期</label>
-                        <span>{{info.issue_info.period_desc||info.iread_info.period_desc}}</span>
+                        <span>{{info.issue_info?info.issue_info.period_desc:info.iread_info.period_desc}}</span>
                     </div>
                     <div class="info-item">
                         <label>期刊定价</label>
@@ -74,7 +75,7 @@
                     </div>
                     <div class="info-item" style="width:100%;">
                         <label>主办单位</label>
-                        <span>{{info.issue_info.organizer||info.iread_info.organizer}}</span>
+                        <span>{{info.issue_info?info.issue_info.organizer:info.iread_info.organizer}}</span>
                     </div>
                 </div>
                 <div class="info-box order-box">
@@ -170,8 +171,8 @@
                     <div class="info-item order-item" v-if="settlement||info.settlement_price">
                         <label>结算价格</label>
                         <div class="order-content">
-                            <span class="OPPOSans">￥{{settlement.price_settlement||info.settlement_price.price_settlement|cutMoneyFiter}}</span>
-                            <span class="old-price" v-if="(settlement&&settlement.price&&settlement.price_settlement!==settlement.price)||(info.settlement_price&&info.settlement_price.price!==info.settlement_price.price_settlement)">￥{{settlement.price||info.settlement_price.price|cutMoneyFiter}}</span>
+                            <span class="OPPOSans">￥{{settlement?settlement.price_settlement:info.settlement_price.price_settlement|cutMoneyFiter}}</span>
+                            <span class="old-price" v-if="(settlement&&settlement.price&&settlement.price_settlement!==settlement.price)||(info.settlement_price&&info.settlement_price.price!==info.settlement_price.price_settlement)">￥{{settlement?settlement.price:info.settlement_price.price|cutMoneyFiter}}</span>
                         </div>
                     </div>
                 </div>
@@ -441,7 +442,8 @@ export default {
             },
         ],
         settlement: null, // 结算价格
-        createOrderLoading: false
+        createOrderLoading: false,
+        valid_period_id: null
     }
   },
   //计算属性 类似于data概念
@@ -462,7 +464,7 @@ export default {
     },
     handleChangeWay(type){
          if(!this.userMessage){
-            this.$refs.header.handleLogin('/bookItem?headerConfig='+this.$route.query.headerConfig+'&cardType='+this.bookType+'&id='+this.id+'&paywei='+type,'url')
+            this.$refs.header.handleLogin('/subscribe?name='+this.$route.query.name+'&type='+this.$route.query.type+'&paywei='+type,'url')
             return false
         }
         this.payWay = type;
@@ -475,7 +477,7 @@ export default {
     // 详情
     getInfo(){
         this.loading = true
-        if(this.bookType===2){
+        if(this.bookType==='baozhi'){
             let MethodName = "/ShopServer/Client/ReservationQuery/GetReservationInfo_Issue";
             let data = {
                 study_phase: this.studyType,
@@ -512,11 +514,13 @@ export default {
             .then((res) => {
                 this.loading = false
                 if(res.status===1){
+                    this.valid_period_id = res.valid_period_list[0]?res.valid_period_list[0].id:''
                     getLogin('/ShopServer/Client/ReservationQuery/GetReservationInfo_Iread', {
                         study_phase: this.studyType,
-                        valid_period_id: res.valid_period_list[0]?res.valid_period_list[0].valid_period_id:''
+                        valid_period_id: res.valid_period_list[0]?res.valid_period_list[0].id:''
                     }).then((ress) => {
                         if(ress.status===1){
+
                             this.info = ress
                         }
                     })
@@ -604,9 +608,14 @@ export default {
         let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
         let data = {
             is_reservation: 'true',
+            sale_model: this.bookType==='jingdu'?1:0,
             goods_type: this.bookType==='jingdu'?3:2,
-            goods_id_list: [this.id],
-            pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:null
+            goods_study_phase: this.studyType,
+            period_count: this.orderTotalNumber!==-1?this.orderTotalNumber:this.customOrderNumberList.length,
+            is_custom_select_issue_no: this.orderTotalNumber!==-1?'false':'true',
+            issue_no_list:this.customOrderNumberList,
+            pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:null,
+            valid_period_id: this.valid_period_id
         }
         getLogin(MethodName, data)
         .then((res) => {