分享

src/icons/svg/Book-open.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Book-open (&#228;&#185;&#166;&#231;&#177;&#141;-&#230;&#137;&#147;&#229;&#188;&#128;)">
+<path id="Vector" d="M2.5 3.5H8C10.2092 3.5 12 5.29085 12 7.5V21C12 19.3432 10.6568 18 9 18H2.5V3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+<path id="Vector_2" d="M21.5 3.5H16C13.7908 3.5 12 5.29085 12 7.5V21C12 19.3432 13.3432 18 15 18H21.5V3.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+</g>
+</svg>

src/icons/svg/Doc-add.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Doc-add (&#230;&#150;&#135;&#230;&#161;&#163;&#230;&#183;&#187;&#229;&#138;&#160;)">
+<path id="Vector" d="M19 2H5C4.44771 2 4 2.44771 4 3V21C4 21.5523 4.44771 22 5 22H19C19.5523 22 20 21.5523 20 21V3C20 2.44771 19.5523 2 19 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.5 15H15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M8.5 18H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M9.5 8.5H14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M12 11V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/icons/svg/Notebook-and-pen.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Notebook-and-pen (&#231;&#172;&#148;&#232;&#174;&#176;&#230;&#156;&#172;&#229;&#146;&#140;&#231;&#172;&#148;)">
+<path id="Vector" d="M2 3V21H15V3H2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6 21V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M22 3H18V19L20 21L22 19V3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M18 6H22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M15 3H2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M15 21H2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M18 3V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_8" d="M22 3V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/views/bookShelf/articleDetail.vue

@@ -20,7 +20,7 @@
         <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'}"></normal-model>
+                <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='original'"></normal-model>
                 <div class="article-btn">
                     <div class="left">
                         <span :class="['support colloct-article',support?'active':'']" @click="changeStatus('support')"><svg-icon icon-class="like-line"></svg-icon>2847</span>
@@ -83,10 +83,22 @@
             </div>
             <!-- 右侧菜单 -->
             <div class="mene-right" :style="{background:bgColorList[activeIndex].contentInnerBg,borderColor:bgColorList[activeIndex].glossaryBg}">
-                <menu-right :colorObj="bgColorList[activeIndex]"></menu-right>
+                <menu-right :colorObj="bgColorList[activeIndex]" @changeArticleType="changeArticleType"></menu-right>
             </div>
         </div>
     </div>
+    <div class="share-box" v-if="menuFeature==='share'" v-loading="shareLoading">
+        <div class="share-box-top">
+            <h5>分享</h5>
+            <i class="el-icon-close" @click="handleCloseShare"></i>
+        </div>
+        <img :src="shareSrc" />
+        <div class="share-box-bottom">
+            <el-button type="primary" @click="downLoadImg(shareSrc)" size="small">下载图片</el-button>
+            <el-button @click="CopyToClipboard('copyDownUrl')" size="small" type="primary" plain>复制链接</el-button>
+            <span id="copyDownUrl">{{share_url}}</span>
+        </div>
+    </div>
   </div>
 </template>
 
@@ -501,6 +513,11 @@ export default {
         readLength: 0,
         articleInfo: null,
         loading: false,
+        menuType: 'original',
+        menuFeature: '', // 功能
+        shareSrc: 'data:image/jpeg;base64,R0lGODlhgAAwAPEAAPr6+gAAAOnp6QAAACwAAAAAgAAwAAAC/pSPqcvtD6OcDdiLs968+w+G4qgZ5Imm6jqa7AvHcubO9o17dc738+4LCk/AofG4KWICzKaoyTRCp1Toy5kUeKhP67AK9qrENG2HC0ILw2zWNLt9p+XIeHSlxigt1Tm5vkGH0ldiFpjHgQi49HdCWHammPG4yIg1FtUIsAfgdJkY0PlZyTc6mNnI6Wl6sXo3+SkYo0mCJbtpqOEaClr6askbJkM7Emu6Z8sqGqrp1QZz6/ibmmvpy6sbzGplrFxM3IV9XQiq/dt616wI7neeMiqLnL6Nra7M/oHvlz0qX+9+yZ44WO6+FZQ2EN05fwoHTqN3cFnCcBNPVfyjpJu424AQK0rE5M1gpIXVfAFjdJKfR30qPdaKKCjjw1caD8EMWS7iS5cxSy5LKYrgRGIsgbphA0aPz5o/jTYc6dJmVINIe/K7GtTpuJwIdVKtSqaIKUofVULd6VVkO2xiAd4SeJbi1HByL7RNuK5j3BBF86UFerel1MFc+eLcidZuybFwzRb2+5duYgtA9DoWutcOWHyHhfKqHFlrWcKQN+Ps7JlyNdSiiXY2HU0hyM8+Sdm2wem2bha5d/smUvu38BbBhxvXUfy4ckjLmyN3Dh1O9OmqKVi/jj27dgoFAAA7', // 分享图片
+        share_url: '123456', // 分享链接
+        shareLoading: false
     }
   },
   methods: {
@@ -672,6 +689,79 @@ export default {
             // .catch(() => {
             // }); 
         }
+    },
+    changeArticleType(type,e){
+        if(type==='print'||type==='share'||type==='list'||type==='cloud'){
+            this.menuFeature = type
+            if(type==='share'){
+                this.handleCreateShare()
+            }
+        }else{
+            this.menuType = type
+            this.menuFeature = ''
+        }
+    },
+    handleCloseShare(){
+        this.menuFeature = ''
+    },
+    CopyToClipboard(element) {
+      var doc = document,
+        text = doc.getElementById(element),
+        range,
+        selection;
+      if (doc.body.createTextRange) {
+        range = doc.body.createTextRange();
+        range.moveToElementText(text);
+        range.select();
+      } else if (window.getSelection) {
+        selection = window.getSelection();
+        range = doc.createRange();
+        range.selectNodeContents(text);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand("copy");
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+      window.getSelection().removeAllRanges();
+    },
+    downLoadImg(base64URL){
+        const a = document.createElement('a');  
+        a.download = '分享图片';  
+        const mimeType = base64URL.match(/:(.*?);/)[1];  
+        const byteCharacters = atob(base64URL.split(',')[1]);  
+        const byteNumbers = new Array(byteCharacters.length);  
+        for (let i = 0; i < byteCharacters.length; i++) {  
+            byteNumbers[i] = byteCharacters.charCodeAt(i);  
+        }  
+        const byteArray = new Uint8Array(byteNumbers);  
+        const blob = new Blob([byteArray], {type: mimeType});  
+        a.href = URL.createObjectURL(blob);  
+        document.body.appendChild(a);  
+        a.click();  
+        document.body.removeChild(a); 
+    },
+    // 创建分享
+    handleCreateShare(){
+        this.shareLoading = true
+        let MethodName = "/ShopServer/Client/ShareManager/CreateShareRecord";
+        let data = {
+            goods_type: 21,
+            goods_id: this.articleId
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.shareLoading = false
+            if(res.status===1){
+                this.share_url = res.share_url
+                this.shareSrc = 'data:image/jpeg;base64,'+res.image_content_base64
+            }
+        })
+        .catch(() => {
+            this.shareLoading = false
+        }); 
     }
   },
   created(){
@@ -915,6 +1005,70 @@ export default {
         cursor: initial;
     }
 }
+.share-box{
+    padding: 24px;
+    width: 428px;
+    height: 702px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -351px;
+    margin-left: -214px;
+    border-radius: 8px;
+    border: 1px solid #D0D3D9;
+    background: #FFF;
+    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+    &-top{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        h5{
+            color: #000;
+            font-size: 24px;
+            font-weight: 400;
+            line-height: 32px;
+            margin: 0;
+        }
+        .el-icon-close{
+            color: rgba(47, 55, 66, 1);
+            cursor: pointer;
+        }
+    }
+    img{
+        width: 380px;
+        height: 532px;
+        border-radius: 16px;
+        margin: 24px 0;
+    }
+    #copyDownUrl{
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    &-bottom{
+        .el-button{
+            width: 184px;
+            height: 48px;
+            color: #FFF;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 24px;
+            border-radius: 8px;
+            &.is-plain{
+                color: rgba(23, 93, 255, 1);
+                border-color: rgba(23, 93, 255, 1);
+                &:hover{
+                    background: rgba(231, 238, 255, 1);
+                }
+                &:focus{
+                    color: rgba(23, 93, 255, 1);
+                    border-color: rgba(23, 93, 255, 1);
+                    background: rgba(231, 238, 255, 1);
+                }
+            }
+        }
+    }
+}
 </style>
 <style lang="scss">
 .article-fontsize{

src/views/bookShelf/components/MenuRight.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="menu-box">
         <template v-for="(item,index) in list">
-            <div class="menu-item" :key="index" @click="handleChange(index,item)" :style="{background:activeIndex===index?colorObj.menuBg:'',color:activeIndex===index?colorObj.statisticValue:colorObj.glossaryTitle}" v-if="index<5||foldFlag">
+            <div class="menu-item" :key="index" @click="handleChange($event,index,item)" :style="{background:activeIndex===index?colorObj.menuBg:'',color:activeIndex===index?colorObj.statisticValue:colorObj.glossaryTitle}" v-if="index<6||foldFlag">
                 <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
                 <el-switch
                     v-else
@@ -11,7 +11,7 @@
                 </el-switch>
                 <span>{{item.name}}</span>
             </div>
-            <el-divider :key="index" v-if="index===2||index===4||(index===list.length-1&&foldFlag)" :style="{backgroundColor:colorObj.glossaryBg}"></el-divider>
+            <el-divider :key="index" v-if="index===3||index===5||(index===list.length-1&&foldFlag)" :style="{backgroundColor:colorObj.glossaryBg}"></el-divider>
         </template>
         <a class="flod-btn" @click="foldFlag=!foldFlag">{{foldFlag?'收起':'展开'}}<svg-icon :icon-class="foldFlag?'Up-line':'Down-line'"></svg-icon></a>
     </div>
@@ -31,49 +31,62 @@ export default {
     return {
         list:[
             {
-                icon:'',
+                icon:'Book-open',
+                name:'原文',
+                type: 'original'
+            },
+            {
+                icon:'Doc-add',
                 name:'生词及短语',
-                flag:false
+                type:'newWord'
             },
             {
                 icon:'record',
-                name:'朗读练习'
+                name:'朗读练习',
+                type:'practice'
             },
             {
                 icon:'search-text',
-                name:'文内检索'
+                name:'文内检索',
+                type:'search'
             },
             {
                 icon:'print',
-                name:'打印文章'
+                name:'打印文章',
+                type:'print'
             },
             {
                 icon:'share',
-                name:'分享'
+                name:'分享',
+                type:'share'
             },
             {
                 icon:'list',
-                name:'目录'
+                name:'目录',
+                type:'list'
             },
             {
                 icon:'cloud',
-                name:'词云'
+                name:'词云',
+                type:'cloud'
             },
             {
                 icon:'filtrate',
-                name:'词汇类型'
+                name:'词汇类型',
+                type:'filtrate'
             },
             {
                 icon:'chart',
-                name:'文章信息'
+                name:'文章信息',
+                type:'chart'
             },
             {
-                icon:'',
+                icon:'Notebook-and-pen',
                 name:'显示笔记',
-                flag:false
+                type:'notebook'
             }
         ],
-        activeIndex:null,
+        activeIndex:0,
         foldFlag:false
     }
   },
@@ -85,14 +98,9 @@ export default {
   },
   //方法集合
   methods: {
-    handleChange(index,item){
+    handleChange(e,index,item){
         this.activeIndex = index
-        this.list.forEach(item => {
-            item.flag = false
-        });
-        if(!item.icon){
-            item.flag = true
-        }
+        this.$emit('changeArticleType',item.type,e)
     },
     handleChangeSwitch(value){
         this.switchFlag = value

src/views/bookShelf/components/NewWordList.vue

@@ -4,6 +4,7 @@
             <li v-for="(itemW,indexW) in wordList" :key="indexW" :class="['li-'+colorObj.type]">
                 <svg-icon v-if="itemW.hasVoice&&!voiceSrc||itemW.hasVoice&&activeIndex!==indexW" icon-class="voice" className="icon-voice" @click="handlePlayVoice(itemW,indexW)"></svg-icon>
                 <img v-if="itemW.hasVoice&&voiceSrc&&activeIndex===indexW" :src="voiceSrc" class="icon-voice" />
+                <svg-icon v-if="!itemW.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
                 <div class="word-info">
                     <div class="word-info-top">
                         <b class="word" @click="showWord(itemW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>

src/views/bookShelf/index.vue

@@ -45,9 +45,6 @@
           :key="index+'todayNew'"
           v-infinite-scroll="load"
           infinite-scroll-disabled="disabled"
-          :style="{
-              marginLeft:index==0||index%5==0?'0':'50px',
-            }"
           :class="[item.type===3?'book-item-peruse':'']"
         >
             <template v-if="item.type===3">
@@ -532,7 +529,7 @@ export default {
         }
     }
     .list {
-        margin-top: 28px;
+        margin: 28px -25px 0 -25px;
         display: flex;
         flex-wrap: wrap;
         height: calc(100vh - 256px);
@@ -546,7 +543,7 @@ export default {
             border-radius: 8px;
             overflow: hidden;
             background: #ffffff;
-            margin-bottom: 24px;
+            margin: 0 25px 24px 25px;
             &.book-item-peruse{
                 width: 282px;
                 height: 270px;

src/views/bookStore/Subscribe.vue

@@ -499,22 +499,6 @@ export default {
                         }
                     })
                 })
-                this.sales = res.buy_info.total_buy_count
-                if(this.sales<1000){
-                    this.salesCn = ''
-                }else if(1000<=this.sales&&this.sales<10000){
-                    this.salesCn = this.sales.toString().substring(0,1)+'000+'
-                }else if(10000<=this.sales&&this.sales<100000){
-                    this.salesCn = this.sales.toString().substring(0,1)+'万+'
-                }else if(100000<=this.sales&&this.sales<1000000){
-                    this.salesCn = this.sales.toString().substring(0,1)+'0万+'
-                }else if(1000000<=this.sales&&this.sales<10000000){
-                    this.salesCn = this.sales.toString().substring(0,1)+'00万+'
-                }else if(10000000<=this.sales&&this.sales<100000000){
-                    this.salesCn = this.sales.toString().substring(0,1)+'000万+'
-                }else if(100000000<=this.sales){
-                    this.salesCn = this.sales.toString().substring(0,1)+'亿+'
-                }
             }
         })
         .catch(() => {
@@ -614,6 +598,34 @@ export default {
         })
         // this.paymentShow = true;
     },
+    getTotalSales(){
+        let MethodName = "/ShopServer/Client/ShopHomeQuery/GetGoodsTotalSales";
+        let data = {
+            goods_type: 2
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status === 1){
+                this.sales = res.sale_count
+                if(this.sales<1000){
+                    this.salesCn = ''
+                }else if(1000<=this.sales&&this.sales<10000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'000+'
+                }else if(10000<=this.sales&&this.sales<100000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'万+'
+                }else if(100000<=this.sales&&this.sales<1000000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'0万+'
+                }else if(1000000<=this.sales&&this.sales<10000000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'00万+'
+                }else if(10000000<=this.sales&&this.sales<100000000){
+                    this.salesCn = this.sales.toString().substring(0,1)+'000万+'
+                }else if(100000000<=this.sales){
+                    this.salesCn = this.sales.toString().substring(0,1)+'亿+'
+                }
+            }
+        }).catch(()=>{
+        })
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -634,6 +646,7 @@ export default {
     if(this.$route.query.paywei){
         this.handleOrder()
     }
+    this.getTotalSales()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {