学年期号

src/views/bookStore/Subscribe.vue

@@ -33,18 +33,7 @@
           height="414px"
         >
           <!-- <el-carousel-item v-for="(item1, index) in data.imgList" :key="index"> -->
-          <el-image
-            class="image"
-            :src="
-              bookType === 'jingdu'
-                ? require('../../assets/cover-order-jingdu.png')
-                : bookType === 'huakan'
-                ? require('../../assets/cover-order-huakan.png')
-                : require('../../assets/cover-order-' + studyType + '.png')
-            "
-            :fit="'contain'"
-          >
-          </el-image>
+          <el-image class="image" :src="coverSrc" :fit="'contain'"> </el-image>
           <!-- </el-carousel-item> -->
         </el-carousel>
         <div class="book-info-right" v-loading="loading">
@@ -217,7 +206,9 @@
                       ></a>
                     </div> -->
                     <span class="tips"
-                      >说明：蓝色期号为未发行内容，黑色为已发行内容</span
+                      >说明：蓝色期号为未发行内容，黑色为已发行内容。{{
+                        tips
+                      }}</span
                     >
                   </div>
                   <div class="custom-box-bottom-box">
@@ -233,7 +224,7 @@
                         v-for="(itemc, indexc) in itemi.issue_no_list"
                         :key="indexc"
                         :style="{
-                          width: itemc.width ? itemc.width * 52 + 'px' : '',
+                          width: itemc.width ? itemc.width * 65 + 'px' : '',
                           borderRight: itemc.farRight ? 'none !important' : '',
                           borderBottom: itemc.farBottom
                             ? 'none !important'
@@ -248,7 +239,9 @@
                       >
                         <el-tooltip placement="bottom">
                           <div slot="content">
-                            第 {{ itemc.issue_no }} 期<br />
+                            第
+                            {{ itemc.issue_no + "-" + itemc.school_year_no }}
+                            期<br />
                             出版日期：{{ itemc.shelve_date }}
                           </div>
                           <el-button
@@ -259,7 +252,9 @@
                                   ? '#00adef'
                                   : '',
                             }"
-                            >{{ itemc.issue_no }}</el-button
+                            >{{
+                              itemc.issue_no + "-" + itemc.school_year_no
+                            }}</el-button
                           >
                         </el-tooltip>
                       </li>
@@ -297,6 +292,13 @@
                           label="期"
                           width="112"
                         >
+                          <template slot-scope="scope">
+                            {{
+                              scope.row.issue_no +
+                              "-" +
+                              scope.row.school_year_no
+                            }}
+                          </template>
                         </el-table-column>
                         <el-table-column
                           property="shelve_date"
@@ -673,6 +675,9 @@ export default {
       createOrderLoading: false,
       valid_period_id: null,
       totalLength: 0,
+      tips: "",
+      coverObj: [], // 存放选中期数的封面图
+      coverSrc: "", // 显示的封面图
     };
   },
   //计算属性 类似于data概念
@@ -715,6 +720,7 @@ export default {
       this.loading = true;
       if (flag) {
       }
+      this.tips = "";
       if (this.bookType === "baozhi") {
         if (this.orderTotalNumber !== -1) {
           let MethodName =
@@ -741,6 +747,18 @@ export default {
                 this.orderTable = res.issue_no_list;
                 res.issue_no_school_year_list.forEach((item) => {
                   item.issue_no_list.forEach((items, indexs) => {
+                    if (!this.tips) {
+                      this.tips =
+                        "例如" +
+                        items.issue_no +
+                        "-" +
+                        items.school_year_no +
+                        "," +
+                        items.issue_no +
+                        "为总期号，" +
+                        items.school_year_no +
+                        "为学年期号";
+                    }
                     const regex = /[\u4e00-\u9fa5]/g;
                     if (regex.test(items.issue_no)) {
                       items.width = Math.ceil(items.issue_no.length / 3);
@@ -802,6 +820,18 @@ export default {
                 this.orderTable = res.issue_no_list;
                 res.issue_no_school_year_list.forEach((item) => {
                   item.issue_no_list.forEach((items, indexs) => {
+                    if (!this.tips) {
+                      this.tips =
+                        "例如" +
+                        items.issue_no +
+                        "-" +
+                        items.school_year_no +
+                        "," +
+                        items.issue_no +
+                        "为总期号，" +
+                        items.school_year_no +
+                        "为学年期号";
+                    }
                     const regex = /[\u4e00-\u9fa5]/g;
                     if (regex.test(items.issue_no)) {
                       items.width = Math.ceil(items.issue_no.length / 3);
@@ -938,16 +968,24 @@ export default {
           this.customOrderNumberList.indexOf(item.issue_no),
           1
         );
+        this.coverObj.splice(
+          this.customOrderNumberList.indexOf(item.cover_image_url),
+          1
+        );
       } else {
         this.customOrderNumberList.push(item.issue_no);
         this.orderTable.push(item);
+        this.coverObj.push(item.cover_image_url);
       }
       this.handleOrderPrice();
+      this.handleCoverSrc();
     },
     async changeStudy(item) {
       this.studyType = item.study_phase;
       this.studyTypeName = item.study_phase_name;
       this.customOrderNumberList = [];
+      this.coverObj = [];
+      this.handleCoverSrc();
       await this.handleIssueLength();
     },
     changeOrderNumber(item, flag) {
@@ -1081,9 +1119,34 @@ export default {
         })
         .catch(() => {});
     },
+    // 计算封面图
+    handleCoverSrc() {
+      this.coverSrc = "";
+      if (this.coverObj.length === 0) {
+        this.coverSrc =
+          this.bookType === "jingdu"
+            ? require("../../assets/cover-order-jingdu.png")
+            : this.bookType === "huakan"
+            ? require("../../assets/cover-order-huakan.png")
+            : require("../../assets/cover-order-" + this.studyType + ".png");
+      } else {
+        let lastValue = this.coverObj[this.coverObj.length - 1];
+        if (lastValue) {
+          this.coverSrc = lastValue;
+        } else {
+          this.coverSrc =
+            this.bookType === "jingdu"
+              ? require("../../assets/cover-order-jingdu.png")
+              : this.bookType === "huakan"
+              ? require("../../assets/cover-order-huakan.png")
+              : require("../../assets/cover-order-" + this.studyType + ".png");
+        }
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
+    this.handleCoverSrc();
     if (this.config) {
       let arr = this.config.split("&&&");
       this.LoginNavIndex = arr[0] * 1;
@@ -1497,7 +1560,7 @@ export default {
   }
 }
 .custom-box {
-  width: 538px;
+  width: 604px;
   border: 1px solid #e5e6eb;
   background: #fff;
   margin: 4px 0 8px 0;
@@ -1542,11 +1605,11 @@ export default {
       padding: 0 5px;
     }
     li {
-      padding: 8px !important;
+      padding: 8px 0 !important;
       margin: 0 !important;
       background: #ffffff !important;
       border: none !important;
-      min-width: 52px;
+      min-width: 65px;
       height: 36px;
       text-align: center;
       border-right: 0.5px solid #e5e6eb !important;

src/views/bookStore/all.vue

@@ -7,18 +7,25 @@
       :LoginNavIndex="this.$route.query.from ? 0 : 1"
     />
     <div class="banner">
-      <el-image
-        class="image"
-        :src="require('../../assets/banner3.png')"
-        :fit="'cover'"
-        style="
-          width: 1200px;
-          height: 308px;
-          margin: 0 auto;
-          border-radius: 16px;
-        "
+      <el-carousel
+        :interval="4000"
+        height="308px"
+        trigger="click"
+        indicator-position="outside"
       >
-      </el-image>
+        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+          <a target="_blank" :href="item.src">
+            <el-image
+              class="image"
+              :src="item.img"
+              :fit="'cover'"
+              width="1200px"
+              height="308px"
+            >
+            </el-image>
+          </a>
+        </el-carousel-item>
+      </el-carousel>
     </div>
     <div class="filt-box">
       <div class="filt-inner">
@@ -324,10 +331,12 @@
 import Header from "../../components/Header.vue";
 import BookListModule from "@/components/common/BookAllListModule.vue";
 import { getLogin } from "@/api/ajax";
+import carousel from "@/components/carousel/src/main";
+import carouselItem from "@/components/carousel/src/item";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, BookListModule },
+  components: { Header, BookListModule, carousel, carouselItem },
   props: {},
   data() {
     //这里存放数据
@@ -535,6 +544,16 @@ export default {
           study_phase_name: "初三",
         },
       ],
+      bannerList: [
+        {
+          img: require("../../assets/banner6.jpg"),
+          src: "https://shop17369372.m.youzan.com/wscgoods/detail/3nliww3ksfrx0gd?scan=1&activity=none&from=kdt&qr=directgoods_3870306575&shopAutoEnter=1",
+        },
+        {
+          img: require("../../assets/banner3.png"),
+          src: "https://shop17369372.m.youzan.com/wscgoods/detail/2fz006hcmnz6cip?scan=1&activity=none&from=kdt&qr=directgoods_3898048453&shopAutoEnter=1",
+        },
+      ], // banner图列表
     };
   },
   //计算属性 类似于data概念
@@ -898,7 +917,7 @@ export default {
   padding-bottom: 50px;
   .banner {
     width: 100%;
-    margin-bottom: 40px;
+    // margin-bottom: 40px;
     font-size: 0;
     padding-top: 32px;
     background: linear-gradient(180deg, #00adef 0%, rgba(0, 173, 239, 0) 100%);
@@ -906,9 +925,10 @@ export default {
       max-width: 100%;
     }
     .image {
-      width: 100%;
-      height: 100%;
+      width: 1200px;
+      height: 308px;
       display: block;
+      margin: 0 auto;
     }
   }
   .filt-box {