Merge branch 'main' of https://gitea.cdlsxd.cn/damao/marketingsystem_temp_h5

src/router/index.ts

@@ -31,17 +31,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"),
@@ -72,7 +74,8 @@ router.beforeEach(async (to, from, next) => {
     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";

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;

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 {

src/views/templates/cmsList/index.vue

@@ -1,10 +1,28 @@
 <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">
         <template v-for="(item, index) in (!pageData ? cssData.defaultList : pageData)" :key="index">
@@ -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) {