From 7946c1055ed0cbefaef517c1f6d25cf31319ae4d Mon Sep 17 00:00:00 2001
From: huangzhen <1511700369@qq.com>
Date: Fri, 30 Aug 2024 09:54:51 +0800
Subject: [PATCH] =?UTF-8?q?update=20@=E5=85=B3=E9=97=AD=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=A0=A1=E9=AA=8C=E3=80=81=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                    |  7 ++-
 src/views/pages/comProduct/index.vue   |  3 --
 src/views/templates/cmsList/index.scss | 39 +++++++++++++--
 src/views/templates/cmsList/index.vue  | 66 ++++++++++++++------------
 4 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 5aea280..926aecc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -28,17 +28,19 @@ const routeTemplate = [
     component: () => import('@/views/templates/cmsList/index.vue')
   },
   {
-    // 商品详情模版
+    // 商品详情模版-直充
     path: '/cmsDetail',
     name: 'cmsDetail',
     component: () => import('@/views/templates/cmsDetail/index.vue')
   },
   {
+    // 商品详情模版-红包
     path: '/cmsCash',
     name: 'cmsCash',
     component: () => import('@/views/templates/cmsCash/index.vue')
   },
   {
+    // 商品详情模版-立减金
     path: '/cmsVoucher',
     name: 'cmsVoucher',
     component: () => import('@/views/templates/cmsVoucher/index.vue')
@@ -67,7 +69,8 @@ router.beforeEach(async (to, from, next) => {
     // console.log('---proTransfer-router.beforeEach---', to, from);
     try {
       const key = to.query.key || 'rPBVzOCs0FN4P7jNMqHo5IVfb0oaAyigbfNBmCKnavs=';
-      const res = await LOGIN({ key: key }); // 请求 token
+      // const res = await LOGIN({ key: key }); // 请求 token
+      const res = { data: { Token: '' }, code: 200, message: '' }; // 请求 token
       if (res && res.code === 200) {
         res.data.Token =
           "admingL_q2QjDlD_MdeU11q5ILoeLFEqhbGBtcEptfs-OHzI53vbrgX9GFCh-SB4fSJBGwgSTl.uDPUoyiPjJ2O6e7zUBzExUUXhsdnPxtyLwncYc8.vy9ikZRp-wUba2POZJlTERJxnLbK6DzpQFQTxuYfcNM_yl3Avo7hgCjkS-ot5QgzNiO5TE";
diff --git a/src/views/pages/comProduct/index.vue b/src/views/pages/comProduct/index.vue
index e008819..2269955 100644
--- a/src/views/pages/comProduct/index.vue
+++ b/src/views/pages/comProduct/index.vue
@@ -189,9 +189,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.loading {
-  margin-top: 200px;
-}
 .pageBody {
   width: 375px;
   min-height: 100vh;
diff --git a/src/views/templates/cmsList/index.scss b/src/views/templates/cmsList/index.scss
index f80a9c8..f665e69 100644
--- a/src/views/templates/cmsList/index.scss
+++ b/src/views/templates/cmsList/index.scss
@@ -1,6 +1,3 @@
-.loading {
-  margin-top: 200px;
-}
 .cmsListWrapper {
   width: 375px;
   height: 667px;
@@ -19,12 +16,48 @@
     overflow: hidden;
     border-radius: 5px;
     .carouselBox {
+      width: 100%;
       height: 195px;
       .carouselImg {
         display: block;
         width: 100%;
         height: 100%;
       }
+      .my-swiper {
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        .swiper-wrapper {
+          .swiper-slide {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .swiper-slide-box {
+              width: 80px;
+              height: 80px;
+              background-color: aliceblue;
+              .swiper-slide-image {
+                display: block;
+                width: 50px;
+                height: 50px;
+              }
+            }
+          }
+          .swiper-slide-active {
+            .swiper-slide-box {
+              width: 180px;
+              height: 180px;
+              background-color: aliceblue;
+              .swiper-slide-image {
+                display: block;
+                width: 100px;
+                height: 100px;
+              }
+            }
+          }
+        }
+      }
     }
     .contentList {
       li {
diff --git a/src/views/templates/cmsList/index.vue b/src/views/templates/cmsList/index.vue
index b9b95a9..8ac6b5a 100644
--- a/src/views/templates/cmsList/index.vue
+++ b/src/views/templates/cmsList/index.vue
@@ -1,12 +1,30 @@
 <template>
-  <van-loading class="loading" v-if="loadingStatus" size="24px" color="#0094ff" vertical>加载中...</van-loading>
+  <van-loading class="pageNoneLoading_Vant" v-if="loadingStatus" size="24px" color="#0094ff" vertical>加载中...</van-loading>
   <div v-else class="cmsListWrapper">
     <img @click="jumpBanner" class="bannerTop" :src="cssData.bannerTop[0].url" alt="">
     <div class="content">
       <div v-if="cssData.contentType === 1" class="carouselBox">
-        <img class="carouselImg" :src="cssData.carouselImg" alt="">
+        <img v-if="!pageData" class="carouselImg" :src="cssData.carouselImg" alt="">
+        <swiper
+          v-else
+          :slides-per-view="3"
+          :space-between="10"
+          :loop="true"
+          :centered-slides="true"
+          :initialSlide="initialSlide"
+          @init="onSlideChange"
+          @slideChangeTransitionEnd="onSlideChange"
+          class="my-swiper"
+        >
+          <swiper-slide @click="jumpDetail(item)" class="" v-for="(item, index) in pageData" :key="index">
+            <div class="swiper-slide-box">
+              <img src="" class="swiper-slide-image"  alt=""/>
+              <p>{{ item.goods.name }}</p>
+            </div>
+          </swiper-slide>
+        </swiper>
       </div>
-      <ul  v-if="cssData.contentType === 2" class="contentList">
+      <ul v-if="cssData.contentType === 2" class="contentList">
         <template v-for="(item, index) in (!pageData ? cssData.defaultList : pageData)" :key="index">
           <li v-if="!pageData">
             <img class="defaultListImg" :src="cssData.defaultListImg" alt="">
@@ -29,7 +47,7 @@
         </template>
       </ul>
     </div>
-    <div v-if="cssData.activityDescType === 1" class="btn" :style="{ color: cssData.btnColor, backgroundColor: cssData.btnBgc }">立即兑换</div>
+    <div @click="jumpDetail(pageData[initialSlide])" v-if="cssData.contentType === 1" class="btn" :style="{ color: cssData.btnColor, backgroundColor: cssData.btnBgc }">立即兑换</div>
     <img v-if="cssData.activityDescType === 1 && cssData.bottomImg.length" class="bottomImg" :src="cssData.bottomImg[0].url" alt="">
     <img v-if="cssData.activityDescType === 2 && cssData.floatImg" @click="changePopComStatus" class="floatImg" :src="cssData.floatImg" alt="">
     <div v-if="cssData.activityDescType === 3 && cssData.floatText" class="description-3" v-html="cssData.floatText" />
@@ -40,26 +58,21 @@
       <div v-if="cssData.floatText" class="description-2" v-html="cssData.floatText"></div>
     </div>
   </div>
-<!--  <swiper class="swiperBox" :options="swiperOptions">-->
-<!--    <swiper-slide class="swiper-slide" v-for="image in imgList" :key="image">-->
-<!--      <img :src="image" alt="">-->
-<!--    </swiper-slide>-->
-<!--  </swiper>-->
 </template>
 
 <script lang="ts">
 import "./index.scss";
 import config from "./config";
 import { QUERY, GET_THEME } from "@/router/api";
-
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+// import { Pagination, Autoplay } from 'swiper';
 import 'swiper/swiper-bundle.css';
 
 export default {
   name: 'cmsList',
   components: {
-    // Swiper,
-    // SwiperSlide
+    Swiper,
+    SwiperSlide
   },
   props: {
     comType: {
@@ -75,23 +88,8 @@ export default {
   },
   data() {
     return {
-      imgList: [
-        require('@/views/pages/comProduct/img/imgIcon3_1.png'),
-        require('@/views/pages/comProduct/img/imgIcon3_2.png'),
-        require('@/views/pages/comProduct/img/imgIcon3_3.png'),
-      ],
-      swiperOptions: {
-        // Effects
-        effect: 'coverflow', // 你可以设置为 'slide', 'fade', 'cube', 'coverflow', 'flip', 'zoom' 等
-        // Autoplay
-        autoplay: {
-          delay: 3000,
-          disableOnInteraction: false,
-        },
-        // effect: 'cube', // 异形切换效果
-        // slidesPerView: 3,
-        // autoHeight: true,
-      },
+      // modules: [ Pagination, Autoplay ],
+      initialSlide: 1,
       key: this.$route.query.key || localStorage.getItem("key"),
       loadingStatus: false,
       pageData: null,
@@ -173,6 +171,9 @@ export default {
         showToast(res.message);
       }
     },
+    onSlideChange(swiper: any) {
+      this.initialSlide = swiper.realIndex
+    },
     jumpBanner() {
       if (this.comType === 2) return;
       if (this.cssData.bannerUrl) {
@@ -181,8 +182,13 @@ export default {
     },
     jumpDetail(item: any) {
       if (this.comType === 2) return;
+      const detailPage: any = {
+        '1': '/cmsCash',
+        '2': '/cmsDetail',
+        '3': '/cmsVoucher',
+      }
       let params = {
-        path: '/cmsDetail',
+        path: detailPage[item.goods.type],
         query: { key: this.key, id: item.goods.id }
       }
       if (item.goods.group_id) {