专辑

src/components/common/BookAllListModule.vue

@@ -3,22 +3,22 @@
     <div class="module">
       <div class="title" v-if="!this.$route.query.from">
         <div class="title-left">
-            <span>
-                {{Bookinfo.name}}
-            </span>
-            <b>{{Bookinfo.numberstr}}</b>
+          <span>
+            {{ Bookinfo.name }}
+          </span>
+          <b>{{ Bookinfo.numberstr }}</b>
         </div>
         <!-- <div class="title-right" v-if="showAll">
             <a class="lookmore" @click="lookmore"><span>查看全部</span><i class="el-icon-arrow-right"></i></a>
         </div> -->
       </div>
-      <div class="peruselist" v-if="Bookinfo.bookType==='jingdu'">
+      <div class="peruselist" v-if="Bookinfo.bookType === 'jingdu'">
         <div
-          v-for="(item,index) in Bookinfo.BookList"
-          :key="index+'todayNew'"
+          v-for="(item, index) in Bookinfo.BookList"
+          :key="index + 'todayNew'"
           :style="{
-              marginLeft:index==0||index%5==0?'0':'50px',
-            }"
+            marginLeft: index == 0 || index % 5 == 0 ? '0' : '50px',
+          }"
         >
           <BookPeruseCard
             :item="item"
@@ -30,13 +30,13 @@
           />
         </div>
       </div>
-      <div class="listlive" v-else-if="Bookinfo.bookType==='ZB'">
+      <div class="listlive" v-else-if="Bookinfo.bookType === 'ZB'">
         <div
-          v-for="(item,index) in Bookinfo.BookList"
-          :key="index+'todayNew'"
+          v-for="(item, index) in Bookinfo.BookList"
+          :key="index + 'todayNew'"
           :style="{
-              marginLeft:index==0||index%4==0?'0':'24px',
-            }"
+            marginLeft: index == 0 || index % 4 == 0 ? '0' : '24px',
+          }"
         >
           <BookLiveCard
             :item="item"
@@ -50,11 +50,11 @@
       </div>
       <div class="list" v-else>
         <div
-          v-for="(item,index) in Bookinfo.BookList"
-          :key="index+'todayNew'"
+          v-for="(item, index) in Bookinfo.BookList"
+          :key="index + 'todayNew'"
           :style="{
-              marginLeft:index==0||index%5==0?'0':'50px',
-            }"
+            marginLeft: index == 0 || index % 5 == 0 ? '0' : '50px',
+          }"
         >
           <BookCard
             :item="item"
@@ -66,7 +66,7 @@
           />
         </div>
       </div>
-      <div class="nodata" v-if="Bookinfo.BookList.length===0">
+      <div class="nodata" v-if="Bookinfo.BookList.length === 0">
         <img src="../../assets/nodata.png" />
         <p>找不到文件</p>
       </div>
@@ -77,35 +77,44 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import BookCard from "./BookCard.vue"
-import BookLiveCard from "./BookLiveCard.vue"
-import BookPeruseCard from "./BookPeruseCard.vue"
+import BookCard from "./BookCard.vue";
+import BookLiveCard from "./BookLiveCard.vue";
+import BookPeruseCard from "./BookPeruseCard.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     BookCard,
     BookLiveCard,
-    BookPeruseCard
+    BookPeruseCard,
   },
-  props: ["Bookinfo","showAll","showPage","LoginNavIndex","userBg","headerBorder","headerBg","previousPage"],
+  props: [
+    "Bookinfo",
+    "showAll",
+    "showPage",
+    "LoginNavIndex",
+    "userBg",
+    "headerBorder",
+    "headerBg",
+    "previousPage",
+  ],
   data() {
     //这里存放数据
     return {
-        typeList: {
-            huakan: {
-                name: '画刊',
-            },
-            baozhi: {
-                name: '报纸',
-            },
-            xiti: {
-                name: '练习册',
-            },
-            kecheng: {
-                name: '课程',
-            },
+      typeList: {
+        huakan: {
+          name: "画刊",
         },
-    }
+        baozhi: {
+          name: "报纸",
+        },
+        xiti: {
+          name: "练习册",
+        },
+        kecheng: {
+          name: "课程",
+        },
+      },
+    };
   },
   //计算属性 类似于data概念
   computed: {},
@@ -114,32 +123,29 @@ export default {
   //方法集合
   methods: {
     // 查看全部
-    lookmore(){
-        this.$emit("changeStudy",this.Bookinfo.study)
+    lookmore() {
+      this.$emit("changeStudy", this.Bookinfo.study);
     },
   },
   //生命周期 - 创建完成（可以访问当前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类 */
@@ -149,26 +155,26 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    &-left{
-        display: flex;
-        align-items: center;
-        span{
-            font-weight: 500;
-            font-size: 24px;
-            line-height: 32px;
-            color: #1F2C5C;
-        }
-        b{
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 32px;
-            color: #929CA8;
-            margin-left: 16px;
-        }
+    &-left {
+      display: flex;
+      align-items: center;
+      span {
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 32px;
+        color: #1f2c5c;
+      }
+      b {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 32px;
+        color: #929ca8;
+        margin-left: 16px;
+      }
     }
-    &-right{
-        display: flex;
-        align-items: center;
+    &-right {
+      display: flex;
+      align-items: center;
     }
     div.title-button {
       width: 48px;
@@ -185,22 +191,24 @@ export default {
         cursor: pointer;
       }
     }
-    .lookmore{
-        display: flex;
-        align-items: center;
-        margin-left: 24px;
-        font-weight: 400;
-        font-size: 16px;
+    .lookmore {
+      display: flex;
+      align-items: center;
+      margin-left: 24px;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      .el-icon-arrow-right {
+        margin-left: 4px;
+        color: #c1c5cd;
+        height: 24px;
         line-height: 24px;
-        .el-icon-arrow-right{
-            margin-left: 4px;
-            color: #C1C5CD;
-            height: 24px;
-            line-height: 24px;
-        }
+      }
     }
   }
-  .list,.listlive,.peruselist {
+  .list,
+  .listlive,
+  .peruselist {
     margin-top: 24px;
     display: flex;
     flex-wrap: wrap;
@@ -210,20 +218,20 @@ export default {
       overflow: hidden;
       background: #ffffff;
       margin-bottom: 40px;
-      &:hover{
-        box-shadow:  0px 0px 30px rgba(0,0,0,0.1);
+      &:hover {
+        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
       }
     }
   }
-  .listlive{
-    >div{
-        width: 282px;
+  .listlive {
+    > div {
+      width: 282px;
     }
   }
-  .peruselist{
-    >div{
-        // height: 200px;
+  .peruselist {
+    > div {
+      // height: 200px;
     }
   }
 }
-</style>
+</style>

src/components/common/BookCard.vue

@@ -130,9 +130,15 @@ export default {
         2: {
           type: "baozhi",
         },
+        3: {
+          type: "jingdu",
+        },
         4: {
           type: "huakan",
         },
+        20: {
+          type: "zhuanji",
+        },
       },
     };
   },
@@ -189,17 +195,27 @@ export default {
           })
           .catch(() => {});
       }
-
-      this.$router.push({
-        path: "/bookItem",
-        query: {
-          headerConfig: encodeURIComponent(url),
-          isBuy: this.isBuy,
-          cardType:
-            this.item.course_type || this.goodsTypeList[this.item.type].type,
-          id: this.item.id,
-        },
-      });
+      if (this.item.type === 3) {
+        this.$router.push({
+          path: "/bookPeruseItem",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            cardType: "jingdu",
+            id: this.item.goods_id,
+          },
+        });
+      } else {
+        this.$router.push({
+          path: "/bookItem",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            isBuy: this.isBuy,
+            cardType:
+              this.item.course_type || this.goodsTypeList[this.item.type].type,
+            id: this.item.goods_id || this.item.id,
+          },
+        });
+      }
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/common/BookListModule.vue

@@ -42,7 +42,9 @@
         </template>
         <div
           class="item-box"
-          :class="[name === 'kecheng' ? 'item-box-list' : '']"
+          :class="[
+            name === 'kecheng' || name === 'zhuanji' ? 'item-box-list' : '',
+          ]"
         >
           <template v-if="name === 'jingdu'">
             <BookPeruseCard
@@ -116,6 +118,9 @@ export default {
         jingdu: {
           name: "精读课堂",
         },
+        zhuanji: {
+          name: "专辑",
+        },
       },
     };
   },

src/icons/svg/zhuanji.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0082 3C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082ZM20 5H4V19H20V5ZM18 15V17H6V15H18ZM12 7V13H6V7H12ZM18 11V13H14V11H18ZM10 9H8V11H10V9ZM18 7V9H14V7H18Z" fill="currentColor" fill-opacity="0.88"/>
+</svg>

src/views/bookShelf/bookItem.vue

@@ -10,7 +10,8 @@
     <div class="navBar" v-if="info">
       <div class="navBar-left">
         <a class="goback" @click="$router.go(-1)"
-          ><i class="el-icon-arrow-left"></i>{{ info.study_phase_name }}版</a
+          ><i class="el-icon-arrow-left"></i
+          >{{ info.study_phase_name ? info.study_phase_name + "版" : "" }}</a
         >
         <div class="border"></div>
         <p>{{ info.name || info.iss_name }}</p>
@@ -61,8 +62,10 @@
               <span>优惠价</span>
               <span class="OPPOSans"
                 >￥{{
-                  info.hasOwnProperty("price_discount") ||
-                  info.hasOwnProperty("iss_price_sell")
+                  info.price_discount_content_item_total
+                    ? info.price_discount_content_item_total
+                    : info.hasOwnProperty("price_discount") ||
+                      info.hasOwnProperty("iss_price_sell")
                     ? info.price_discount || info.iss_price_sell
                     : info.price || info.iss_price_org | cutMoneyFiter
                 }}</span
@@ -73,9 +76,15 @@
                   (info.hasOwnProperty('price_discount') &&
                     info.price_discount !== info.price) ||
                   (info.hasOwnProperty('iss_price_sell') &&
-                    info.iss_price_sell !== info.iss_price_org)
+                    info.iss_price_sell !== info.iss_price_org) ||
+                  info.price_discount_content_item_total !==
+                    info.price_content_item_total
                 "
-                >￥{{ info.price || info.iss_price_org | cutMoneyFiter }}</span
+                >￥{{
+                  info.price_content_item_total ||
+                  info.price ||
+                  info.iss_price_org | cutMoneyFiter
+                }}</span
               >
             </div>
             <span class="sales-right" v-if="sales >= 1000"
@@ -162,17 +171,60 @@
               <span>{{ info.study_phase_name }}</span>
             </div>
           </div>
+          <div class="info-box" v-if="bookType === 'zhuanji'">
+            <div class="info-item">
+              <label>出版社</label>
+              <span>{{
+                info.vendor_name ? info.vendor_name : "中国日报社"
+              }}</span>
+            </div>
+
+            <div class="info-item">
+              <label>学段</label>
+              <span>{{ info.study_phase_name }}</span>
+            </div>
+            <!-- <div class="info-item">
+                        <label>字数</label>
+                        <span>78291</span>
+                    </div> -->
+            <div class="info-item">
+              <label>发行时间</label>
+              <span>{{ info.release_date }}</span>
+            </div>
+            <div class="info-item">
+              <label>语种</label>
+              <span>中英双语</span>
+            </div>
+            <div class="info-item" style="width: 100%">
+              <label>期数</label>
+              <span>{{ itemContentStr }} </span>
+            </div>
+            <!-- <div class="info-item">
+                        <label>版本</label>
+                        <span>基础版</span>
+                    </div> -->
+          </div>
           <div class="btn-box">
-            <a class="continue" v-if="isBuy === 'true'" @click="handleLink"
-              >继续学习</a
-            >
-            <template v-else>
+            <template v-if="bookType === 'zhuanji' && isBuy === 'false'">
               <a
                 class="el-button"
                 @click="handleChangeWay('wei')"
                 :loading="createOrderLoading"
                 >立即购买</a
               >
+            </template>
+            <template v-else>
+              <a class="continue" v-if="isBuy === 'true'" @click="handleLink"
+                >继续学习</a
+              >
+              <template v-else>
+                <a
+                  class="el-button"
+                  @click="handleChangeWay('wei')"
+                  :loading="createOrderLoading"
+                  >立即购买</a
+                >
+              </template>
               <!-- <a class="upgrade" @click="handleChangeWay('dui')">使用兑换码</a> -->
               <a
                 class="upgrade"
@@ -234,6 +286,14 @@
           >
           </course-list>
         </el-tab-pane>
+        <el-tab-pane label="内容" v-if="bookType === 'zhuanji'">
+          <BookCard
+            :item="item"
+            class="item"
+            v-for="(item, index) in itemList"
+            :key="index + 'todayNew'"
+          />
+        </el-tab-pane>
       </el-tabs>
       <div class="banner-box-close" v-if="bannerFlag">
         <a v-if="1 == 2" href="#" target="_blank">
@@ -632,12 +692,33 @@ export default {
       issueChnList: [],
       order_amount: null,
       createOrderLoading: false,
+      studyObj: {
+        1: "学前",
+        11: "小学",
+        20: "初中",
+        21: "初一",
+        22: "初二",
+        23: "初三",
+        30: "高中",
+        31: "高一",
+        32: "高二",
+        33: "高三",
+        100: "全学段",
+      },
+      itemList: [],
+      itemContentStr: "",
     };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {},
+  watch: {
+    $route(to, from) {
+      if (to.query.id) {
+        window.location.reload();
+      }
+    },
+  },
   //方法集合
   methods: {
     // 分享
@@ -691,6 +772,11 @@ export default {
         data = {
           id: this.id,
         };
+      } else if (this.bookType === "zhuanji") {
+        MethodName = "/ShopServer/Client/AlbumQuery/GetAlbumInfo";
+        data = {
+          id: this.id,
+        };
       }
       getLogin(MethodName, data)
         .then((res) => {
@@ -708,6 +794,9 @@ export default {
             ) {
               this.info = res.data;
               this.issueChnList = res.data.chn_art_data;
+            } else if (this.bookType === "zhuanji") {
+              this.info = res.album;
+              this.info.study_phase_name = this.studyObj[res.album.study_phase];
             }
           }
         })
@@ -721,6 +810,8 @@ export default {
               ? 2
               : this.bookType === "huakan"
               ? 4
+              : this.bookType === "zhuanji"
+              ? 20
               : null,
           goods_id: this.id,
         })
@@ -836,6 +927,8 @@ export default {
             ? 2
             : this.bookType === "huakan"
             ? 4
+            : this.bookType === "zhuanji"
+            ? 20
             : null,
         goods_id_list: [this.id],
         pay_type:
@@ -876,7 +969,7 @@ export default {
         this.headerBorder +
         "&&&" +
         this.headerBg;
-      if (this.bookType === "baozhi") {
+      if (this.bookType === "baozhi" || this.info.goods_type === 2) {
         let articleId = "";
         if (this.info.last_read_art_id) {
           articleId = this.info.last_read_art_id;
@@ -912,7 +1005,24 @@ export default {
             iss_id: this.$route.query.id,
           },
         });
-      } else if (this.bookType === "huakan") {
+      } else if (this.bookType === "huakan" || this.info.goods_type === 4) {
+        this.$router.push({
+          path: "/magazineDetail",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            iss_id: this.$route.query.id,
+          },
+        });
+      } else if (this.info.goods_type === 3) {
+        this.$router.push({
+          path: "/bookPeruseItem",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            cardType: "jingdu",
+            id: this.$route.query.id,
+          },
+        });
+      } else if (this.bookType === "huakan" || this.info.goods_type === 4) {
         this.$router.push({
           path: "/magazineDetail",
           query: {
@@ -943,6 +1053,29 @@ export default {
         },
       });
     },
+    // 专辑列表
+    getIssList() {
+      let MethodName =
+        "/ShopServer/Client/AlbumQuery/PageQueryAlbumContentItemList";
+      let data = {
+        album_id: this.id,
+        page_capacity: 50,
+        cur_page: 1,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          if (res.status === 1) {
+            res.content_item_list.forEach((item) => {
+              item.type = item.goods_type;
+            });
+            this.itemList = res.content_item_list;
+            this.itemContentStr = res.content_item_list
+              .map((item) => item.name)
+              .join(", ");
+          }
+        })
+        .catch(() => {});
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -958,6 +1091,9 @@ export default {
     if (this.$route.query.paywei) {
       this.handleOrder();
     }
+    if (this.bookType === "zhuanji") {
+      this.getIssList();
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -1231,6 +1367,21 @@ export default {
     text-decoration: line-through;
   }
 }
+.item {
+  width: 200px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #ffffff;
+  &:hover {
+    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
+  }
+}
+:deep .el-tab-pane {
+  display: flex;
+  gap: 24px 36px;
+  flex-flow: wrap;
+}
 </style>
 <style lang="scss">
 .bookItem {

src/views/bookStore/all.vue

@@ -116,7 +116,7 @@
               </li>
             </ul>
           </div>
-          <div class="filt-item">
+          <!-- <div class="filt-item">
             <label>类型</label>
             <ul>
               <li
@@ -132,7 +132,7 @@
                 {{ itemt.label }}
               </li>
             </ul>
-          </div>
+          </div> -->
         </template>
         <template v-else-if="itemType === 'huakan'">
           <div class="filt-item">
@@ -161,7 +161,7 @@
                         </li>
                     </ul>
                 </div> -->
-          <div class="filt-item">
+          <!-- <div class="filt-item">
             <label>类型</label>
             <ul>
               <li
@@ -177,7 +177,7 @@
                 {{ itemt.label }}
               </li>
             </ul>
-          </div>
+          </div> -->
         </template>
         <template v-if="itemType === 'jingdu'">
           <div class="filt-item" v-if="!this.$route.query.from">
@@ -226,6 +226,46 @@
             </ul>
           </div>
         </template>
+        <template v-if="itemType === 'zhuanji'">
+          <div class="filt-item">
+            <label>年份</label>
+            <ul>
+              <li
+                :class="[itemy.value === zhuanjiForm.yearValue ? 'active' : '']"
+                v-for="(itemy, indexy) in yearList"
+                :key="indexy"
+                @click="handleClick('zhuanjiForm', 'yearValue', itemy.value)"
+              >
+                <i
+                  v-if="itemy.value === zhuanjiForm.yearValue"
+                  class="el-icon-success"
+                ></i>
+                {{ itemy.label }}
+              </li>
+            </ul>
+          </div>
+          <div class="filt-item">
+            <label>学段</label>
+            <ul>
+              <li
+                :class="[
+                  items.study_phase === zhuanjiForm.studyValue ? 'active' : '',
+                ]"
+                v-for="(items, indexs) in studyList"
+                :key="indexs"
+                @click="
+                  handleClick('zhuanjiForm', 'studyValue', items.study_phase)
+                "
+              >
+                <i
+                  v-if="items.study_phase === zhuanjiForm.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">
@@ -449,6 +489,16 @@ export default {
           ? window.localStorage.getItem("jingduFormcategoryValue")
           : "",
       },
+      zhuanjiForm: {
+        studyValue: this.$route.query.from
+          ? this.$route.query.from * 1
+          : window.localStorage.getItem("zhuanjiFormstudyValue")
+          ? window.localStorage.getItem("zhuanjiFormstudyValue") * 1
+          : 11,
+        yearValue: window.localStorage.getItem("zhuanjiFormyearValue")
+          ? window.localStorage.getItem("zhuanjiFormyearValue") * 1
+          : -1,
+      },
       currentPage: 1, // 当前页码
       page_capacity: 10, // 每页条数
       currentPages: 1,
@@ -650,6 +700,28 @@ export default {
             })
             .catch(() => {});
         }
+      } else if (this.itemType === "zhuanji") {
+        MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryAlbumList";
+        data.year_label = this.zhuanjiForm.yearValue;
+        data.study_phase = this.zhuanjiForm.studyValue;
+        getLogin(MethodName, data)
+          .then((res) => {
+            if (res.status === 1) {
+              res.album_list.forEach((item) => {
+                item.course_type = "zhuanji";
+                item.type = 20;
+              });
+              this.Bookinfo = {
+                name: "专辑",
+                number: res.total_count,
+                numberstr: "共" + res.total_count + "期",
+                study: this.zhuanjiForm.studyValue,
+                BookList: res.album_list,
+                bookType: "zhuanji",
+              };
+            }
+          })
+          .catch(() => {});
       }
     },
     handleSizeChange(val, type, page) {

src/views/bookStore/index.vue

@@ -91,6 +91,16 @@
         :previousPage="'课程'"
         v-if="LBCourseList.length > 0"
       />
+      <BookListModule
+        name="zhuanji"
+        :list="zhuanjiList"
+        :headerBg="'#00ADEF'"
+        :headerBorder="'#5C5C5C'"
+        :userBg="'rgba(0, 0, 0, 0.24)'"
+        :LoginNavIndex="0"
+        :previousPage="'专辑'"
+        v-if="zhuanjiList.length > 0"
+      />
       <div class="banner-box-close" v-if="bannerFlag">
         <a v-if="1 == 2" href="#" target="_blank">
           <img class="banner-item" src="../../assets/banner2.png" />
@@ -194,6 +204,26 @@ export default {
           skeleton: true,
         },
       ],
+      zhuanjiList: [
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+        {
+          skeleton: true,
+        },
+      ], // 专辑列表
       bannerFlag: true, // 是否展示广告
     };
   },
@@ -273,6 +303,24 @@ export default {
         })
         .catch(() => {});
     },
+    // 专辑列表
+    getZhuanjiList() {
+      let MethodName = "/ShopServer/Client/ShopHomeQuery/QueryAlbumList";
+      let data = {
+        top_n: 12,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          if (res.status === 1) {
+            res.album_list.forEach((item) => {
+              item.course_type = "zhuanji";
+              item.type = 20;
+            });
+            this.zhuanjiList = res.album_list;
+          }
+        })
+        .catch(() => {});
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -280,6 +328,7 @@ export default {
     this.getIssueList();
     this.getHuakanList();
     this.getPeruseList();
+    this.getZhuanjiList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},