文章图片set

src/views/bookShelf/articleDetail.vue

@@ -1503,7 +1503,8 @@ export default {
                       });
                   }
                 });
-                this.articleImg[pno] = imgArr;
+                this.$set(this.articleImg, pno, imgArr);
+                // this.articleImg[pno] = imgArr;
               }
             });
             setTimeout(() => {

src/views/bookShelf/components/MenuRight.vue

@@ -1,23 +1,39 @@
 <template>
-    <div class="menu-box">
-        <template v-for="(item,index) in list">
-            <template v-if="!(item.type==='list'&&!$route.query.iss_id)">
-                <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
-                        v-model="item.flag"
-                        active-color="#175DFF"
-                        inactive-color="#D0D3D9">
-                    </el-switch>
-                    <span>{{item.name}}</span>
-                </div>
-            </template>
-            <el-divider :key="index" v-if="index===4||index===6||index===0" :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>
-    
+  <div class="menu-box">
+    <template v-for="(item, index) in list">
+      <template v-if="!(item.type === 'list' && !$route.query.iss_id)">
+        <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
+            v-model="item.flag"
+            active-color="#175DFF"
+            inactive-color="#D0D3D9"
+          >
+          </el-switch>
+          <span>{{ item.name }}</span>
+        </div>
+      </template>
+      <el-divider
+        :key="index"
+        v-if="index === 4 || index === 6 || index === 0"
+        :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>
 </template>
 
 <script>
@@ -31,166 +47,161 @@ export default {
   data() {
     //这里存放数据
     return {
-        list:[
-            {
-                icon:'list',
-                name:'目录',
-                type:'list'
-            },
-            {
-                icon:'Book-open',
-                name:'原文',
-                type: 'original'
-            },
-            {
-                icon:'Doc-add',
-                name:'生词及短语',
-                type:'newWord'
-            },
-            {
-                icon:'record',
-                name:'朗读练习',
-                type:'practice'
-            },
-            {
-                icon:'search-text',
-                name:'文内检索',
-                type:'search'
-            },
-            {
-                icon:'print',
-                name:'打印文章',
-                type:'print'
-            },
-            {
-                icon:'share',
-                name:'分享',
-                type:'share'
-            },
-            {
-                icon:'cloud',
-                name:'词云',
-                type:'cloud'
-            },
-            {
-                icon:'filtrate',
-                name:'词汇类型',
-                type:'filtrate'
-            },
-            {
-                icon:'chart',
-                name:'文章信息',
-                type:'chart'
-            },
-            {
-                icon:'Notebook-and-pen',
-                name:'显示笔记',
-                type:'notebook'
-            }
-        ],
-        activeIndex:1,
-        foldFlag:true
-    }
+      list: [
+        {
+          icon: "list",
+          name: "目录",
+          type: "list",
+        },
+        {
+          icon: "Book-open",
+          name: "原文",
+          type: "original",
+        },
+        {
+          icon: "Doc-add",
+          name: "生词及短语",
+          type: "newWord",
+        },
+        {
+          icon: "record",
+          name: "朗读练习",
+          type: "practice",
+        },
+        {
+          icon: "search-text",
+          name: "文内检索",
+          type: "search",
+        },
+        {
+          icon: "print",
+          name: "打印/下载",
+          type: "print",
+        },
+        {
+          icon: "share",
+          name: "分享",
+          type: "share",
+        },
+        {
+          icon: "cloud",
+          name: "词云",
+          type: "cloud",
+        },
+        {
+          icon: "filtrate",
+          name: "词汇类型",
+          type: "filtrate",
+        },
+        {
+          icon: "chart",
+          name: "文章信息",
+          type: "chart",
+        },
+        {
+          icon: "Notebook-and-pen",
+          name: "显示笔记",
+          type: "notebook",
+        },
+      ],
+      activeIndex: 1,
+      foldFlag: true,
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
-    handleChange(e,index,item){
-        this.activeIndex = index
-        this.$emit('changeArticleType',item.type,e)
+    handleChange(e, index, item) {
+      this.activeIndex = index;
+      this.$emit("changeArticleType", item.type, e);
+    },
+    handleChangeSwitch(value) {
+      this.switchFlag = value;
+      if (!this.switchFlag) this.activeIndex = null;
     },
-    handleChangeSwitch(value){
-        this.switchFlag = value
-        if(!this.switchFlag) this.activeIndex = null
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.menu-box{
-    .menu-item{
-        margin: 1px 0;
-        cursor: pointer;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 22px;
-        color: #2F3742;
-        padding: 0 8px;
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        height: 32px;
-        .svg-icon{
-            width: 32px;
-            height: 32px;
-            padding: 8px;
-        }
-        .el-switch{
-            width: 28px;
-            height: 16px;
-            line-height: 16px;
-            margin: 0 6px;
-        }
-        span{
-            margin-left: 8px;
-        }
+.menu-box {
+  .menu-item {
+    margin: 1px 0;
+    cursor: pointer;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #2f3742;
+    padding: 0 8px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    .svg-icon {
+      width: 32px;
+      height: 32px;
+      padding: 8px;
+    }
+    .el-switch {
+      width: 28px;
+      height: 16px;
+      line-height: 16px;
+      margin: 0 6px;
     }
-    .flod-btn{
-        display: block;
-        width: 168px;
-        height: 28px;
-        text-align: center;
-        font-size: 12px;
-        line-height: 28px;
-        color: #99A29E;
-        .svg-icon{
-            margin-left: 4px;
-        }
+    span {
+      margin-left: 8px;
     }
+  }
+  .flod-btn {
+    display: block;
+    width: 168px;
+    height: 28px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 28px;
+    color: #99a29e;
+    .svg-icon {
+      margin-left: 4px;
+    }
+  }
 }
 </style>
 <style lang="scss">
-.menu-box{
-    .el-switch__core{
-        height: 16px;
-    }
-    .el-switch__core:after{
-        width: 12px;
-        height: 12px;
-    }
-    .el-switch.is-checked .el-switch__core::after{
-        margin-left: -14px;
-    }
-    .el-divider{
-        margin: 0 auto;
-        width: 128px;
-    }
+.menu-box {
+  .el-switch__core {
+    height: 16px;
+  }
+  .el-switch__core:after {
+    width: 12px;
+    height: 12px;
+  }
+  .el-switch.is-checked .el-switch__core::after {
+    margin-left: -14px;
+  }
+  .el-divider {
+    margin: 0 auto;
+    width: 128px;
+  }
 }
-</style>
+</style>

src/views/bookShelf/components/Payment.vue

@@ -110,6 +110,7 @@ export default {
       loading: false,
       payAmount: this.order_amount ? this.order_amount : null,
       showToPage: false, // 多条兑换码跳转去个人中心
+      messageSuccess: null,
     };
   },
   //计算属性 类似于data概念
@@ -233,7 +234,14 @@ export default {
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {
           if (res.is_success === "true") {
-            this.$message.success("支付成功");
+            this.messageSuccess = this.$message({
+              type: "success",
+              showClose: true,
+              dangerouslyUseHTMLString: true,
+              offset: 200,
+              message:
+                "您已购买成功，点击【<a style='text-decoration: underline;' onclick=handleToShlef()>书架</a>】跳转查看。",
+            });
             clearInterval(this.timer);
             if (this.$emit("handleSuccess")) {
               this.$emit("handleSuccess");
@@ -244,6 +252,10 @@ export default {
         }
       });
     },
+    handleToShlef() {
+      this.messageSuccess.close();
+      this.$router.push({ path: "/bookShelf" });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -259,6 +271,7 @@ export default {
         this.getOrderStatus();
       }, 5000);
     }
+    window.handleToShlef = this.handleToShlef;
   },
   //生命周期-创建之前
   beforeCreated() {},