From 17581c366bbcf7629bf0a0765176c4470cdc0fc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98Aos=E2=80=99?= <9068149@qq.com>
Date: Tue, 28 Mar 2023 16:47:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  48 ++++++++
 src/App.vue                                   |  20 +++-
 .../componentscom/graphicnavigation/index.vue |   9 +-
 .../componentscom/magiccube/index.vue         |  51 ++++++---
 .../componentscom/pictureads/index.vue        | 106 ++++++++----------
 src/components/componentscom/tabBar/index.vue |  21 ++--
 6 files changed, 168 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4cbe094..2491062 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3520,6 +3520,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6691,6 +6701,13 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -9345,6 +9362,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -17306,6 +17330,16 @@
       "dev": true,
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -19892,6 +19926,13 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -21969,6 +22010,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
diff --git a/src/App.vue b/src/App.vue
index 85c6849..a7af921 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,11 +9,12 @@ export default {
   provide() {
     return {
       reload: this.reload,
+      productJump: this.productJump
     }
   },
   data() {
     return {
-      isRouterAlive: true,
+      isRouterAlive: true
     }
   },
   methods: {
@@ -24,6 +25,21 @@ export default {
         this.isRouterAlive = true
       })
     },
+    // 跳转事件
+    productJump(res) {
+      if (res.http) {
+        switch (res.linktype) {
+          case '10': // 内部链接
+            this.$router.push({
+              path: res.http.externalLink
+            })
+            break
+          case '11': // 外部链接
+            window.location.href = res.http.externalLink
+            break
+        }
+      }
+    }
   },
   mounted() {
     // 判断是否为移动端
@@ -39,7 +55,7 @@ export default {
         html.style = 'font-size: 37.5px;width: 375px; margin: 0 auto;'
       }
     }
-  },
+  }
 }
 </script>
 <style lang="less">
diff --git a/src/components/componentscom/graphicnavigation/index.vue b/src/components/componentscom/graphicnavigation/index.vue
index af071bf..4c5e148 100644
--- a/src/components/componentscom/graphicnavigation/index.vue
+++ b/src/components/componentscom/graphicnavigation/index.vue
@@ -52,6 +52,7 @@
       <!-- 导航 -->
       <div
         class="navigationList"
+        @click="goHttp(item)"
         v-for="(item, index) in datas.imageList"
         :key="index"
         :style="{
@@ -88,12 +89,18 @@
 <script>
 export default {
   name: 'graphicnavigation',
+  inject: ['productJump'],
   props: {
     datas: Object,
   },
   created(){
     console.log(this.datas,'--------graphicnavigation')
-  }
+  },
+  methods: {
+    goHttp(res) {
+      this.productJump(res)
+    },
+  },
 }
 </script>
 
diff --git a/src/components/componentscom/magiccube/index.vue b/src/components/componentscom/magiccube/index.vue
index 148fb4f..c9e9cb5 100644
--- a/src/components/componentscom/magiccube/index.vue
+++ b/src/components/componentscom/magiccube/index.vue
@@ -3,7 +3,7 @@
     class="magiccube"
     :style="{
       'padding-left': datas.pageMargin + 'px',
-      'padding-right': datas.pageMargin + 'px',
+      'padding-right': datas.pageMargin + 'px'
     }"
   >
     <img
@@ -26,6 +26,7 @@
       >
         <img
           draggable="false"
+          @click="goHttp(datas.imageList[index - 1])"
           :src="datas.imageList[index - 1].src"
           alt=""
           :style="{ padding: datas.imgMargin / 2 + 'px' }"
@@ -44,11 +45,16 @@
         class="rubiksCubeType1 rubiksCubeType"
         :style="{
           margin: datas.imgMargin / 10 + '%',
-          width: 33.33 + '%',
+          width: 33.33 + '%'
         }"
       >
-      <!--    width: 33 - datas.imgMargin / 10 + '%', -->
-        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
+        <!-- width: 33 - datas.imgMargin / 10 + '%', -->
+        <img
+          draggable="false"
+          @click="goHttp(datas.imageList[index - 1])"
+          :src="datas.imageList[index - 1].src"
+          alt=""
+        />
       </div>
     </section>
 
@@ -63,10 +69,15 @@
         class="rubiksCubeType2 rubiksCubeType"
         :style="{
           margin: datas.imgMargin / 10 + '%',
-          width: 25 - datas.imgMargin / 10 + '%',
+          width: 25 - datas.imgMargin / 10 + '%'
         }"
       >
-        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
+        <img
+          draggable="false"
+          @click="goHttp(datas.imageList[index - 1])"
+           :src="datas.imageList[index - 1].src"
+          alt=""
+        />
       </div>
     </section>
 
@@ -82,6 +93,7 @@
       >
         <img
           draggable="false"
+          @click="goHttp(datas.imageList[index - 1])"
           :src="datas.imageList[index - 1].src"
           alt=""
           :style="{ padding: datas.imgMargin + 'px' }"
@@ -97,6 +109,7 @@
       <div class="rubiksCubeType hw" style="padding-top: 100%">
         <img
           draggable="false"
+          @click="goHttp(datas.imageList[0])"
           :src="datas.imageList[0].src"
           alt=""
           style="height:300px"
@@ -108,10 +121,11 @@
           class=" hw imgone"
           v-for="index in 2"
           :key="index"
-          style="padding-top: 150px;height:150px"
+          style="padding-top: 150px"
         >
           <img
             draggable="false"
+            @click="goHttp(datas.imageList[index])"
             :src="datas.imageList[index].src"
             alt=""
             style="height:150px"
@@ -129,6 +143,7 @@
       <div class="rubiksCubeType hw" style="display: block; padding-top: 50%">
         <img
           draggable="false"
+          @click="goHttp(datas.imageList[0])"
           :src="datas.imageList[0].src"
           alt=""
           :style="{ 'padding-bottom': datas.imgMargin + 'px' }"
@@ -143,6 +158,7 @@
         >
           <img
             draggable="false"
+            @click="goHttp(datas.imageList[index])"
             :src="datas.imageList[index].src"
             alt=""
             :style="{ padding: datas.imgMargin + 'px' }"
@@ -160,6 +176,7 @@
       <div class="rubiksCubeType hw" style="padding-top: 100%">
         <img
           draggable="false"
+          @click="goHttp(datas.imageList[0])"
           :src="datas.imageList[0].src"
           alt=""
           style="height:300px"
@@ -171,11 +188,12 @@
         <div class="rubiksCubeType hw" style="padding-top: 150px">
           <img
             draggable="false"
+            @click="goHttp(datas.imageList[1])"
             :src="datas.imageList[1].src"
             alt=""
             :style="{
               'padding-bottom': datas.imgMargin + 'px',
-              'padding-left': datas.imgMargin + 'px',
+              'padding-left': datas.imgMargin + 'px'
             }"
           />
         </div>
@@ -193,12 +211,13 @@
           >
             <img
               draggable="false"
+              @click="goHttp(datas.imageList[index + 1])"
               :src="datas.imageList[index + 1].src"
               alt=""
               style="height:150px"
               :style="{
                 'padding-left': datas.imgMargin + 'px',
-                'padding-top': datas.imgMargin + 'px',
+                'padding-top': datas.imgMargin + 'px'
               }"
             />
           </div>
@@ -214,8 +233,14 @@
 <script>
 export default {
   name: 'magiccube',
+  inject: ['productJump'],
   props: {
-    datas: Object,
+    datas: Object
+  },
+  methods: {
+    goHttp(res) {
+      this.productJump(res)
+    }
   },
   computed: {
     showimageList() {
@@ -248,8 +273,8 @@ export default {
         return false
 
       return true
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -322,7 +347,6 @@ export default {
       cursor: pointer;
       &.rubiksCubeType0 {
         width: 50%;
-        // height: 200px;
         &:first-of-type {
           img {
             padding-left: 0 !important;
@@ -339,7 +363,6 @@ export default {
         }
         img {
           width: 100%;
-          // height: 200px;
           display: block;
         }
       }
diff --git a/src/components/componentscom/pictureads/index.vue b/src/components/componentscom/pictureads/index.vue
index ad01b2c..35e9f49 100644
--- a/src/components/componentscom/pictureads/index.vue
+++ b/src/components/componentscom/pictureads/index.vue
@@ -1,66 +1,71 @@
 <template>
   <div class="pictureads">
     <!-- 无图片 -->
-    <div class="upload" v-if="!imageList[0]">
+    <div class="upload" v-if="!datas.imageList[0]">
       <i class="iconfont icon-lunbotu"></i>
     </div>
 
     <!-- 一行一个 -->
     <div
-      v-if="imageList[0] && swiperType === 0"
+      v-if="datas.imageList[0] && datas.swiperType === 0"
       class="type0"
       :style="{
         'padding-left': datas.pageMargin + 'px',
         'padding-right': datas.pageMargin + 'px',
       }"
+      ref="swiper"
     >
       <div
-        v-for="(item, index) in imageList"
+        v-for="(item, index) in datas.imageList"
         :key="index"
         class="imgLis"
         :style="{ 'margin-bottom': datas.imageMargin + 'px' }"
+        ref="swiper"
       >
         <!-- 图片 -->
         <img
           :src="item.src"
           draggable="false"
           :style="{ 'border-radius': datas.borderRadius + 'px' }"
+          @click="goHttp(item)"
         />
         <!-- 图片标题 -->
-        <p class="title" v-show="item.text ? true : false">{{ item.text }}</p>
+        <p class="title" v-if="item.text ? true : false">{{ item.text }}</p>
       </div>
     </div>
 
     <!-- 轮播组件 -->
     <div
-      class="swiper-container"
+      :class="swiperM"
       v-if="
-        (imageList[0] && swiperType === 1) ||
-        swiperType === 2 ||
-        swiperType === 3
+        (datas.imageList[0] && datas.swiperType === 1) ||
+        datas.swiperType === 2 ||
+        datas.swiperType === 3
       "
+      ref="swiper"
     >
       <div
         :class="
-          swiperType === 3 && imageList[0]
+          datas.swiperType === 3 && datas.imageList[0]
             ? 'type3 type1 swiper-wrapper type3H'
             : 'swiper-wrapper type1'
         "
       >
         <div
           class="swiper-slide"
-          v-for="(item, index) in imageList"
+          v-for="(item, index) in datas.imageList"
           :key="index"
+          ref="swiper"
         >
           <!-- 图片 -->
           <img
             :src="item.src"
-            alt=""
+            alt
             draggable="false"
             :style="{ 'border-radius': datas.borderRadius + 'px' }"
           />
           <!-- 图片标题 -->
-          <p class="title" v-show="item.text ? true : false">{{ item.text }}</p>
+          <p class="title" v-if="item.text ? true : false">{{ item.text }}</p>
         </div>
       </div>
 
@@ -82,56 +87,30 @@ export default {
   props: {
     datas: Object,
   },
+  inject: ['productJump'],
   data() {
     return {
       mySwiper: null,
+      swiperM: 'swiper-container',
     }
   },
-  computed: {
-    /* 类型切换 */
-    swiperType() {
-      console.log(this.datas.swiperType, '----------------轮播类型')
-      this.addSwiper()
-      return this.datas.swiperType
-    },
-    /* 图片删除或者增加 */
-    imageList() {
-      this.addSwiper()
-      console.log(this.datas.imageList.length, '-------轮播数量')
-      return this.datas.imageList
-    },
-    /* 分页器类型切换 */
-    pagingType() {
-      this.addSwiper()
-      return this.datas.pagingType
-    },
-    /* 一行个数 */
-    rowindividual() {
-      this.addSwiper()
-      if (this.datas.swiperType === 1) {
-        return 1
-      } else {
-        return this.datas.rowindividual
-      }
-    },
-    /* 图片间距 */
-    imageMargin() {
-      this.addSwiper()
-      if (this.datas.swiperType === 1) {
-        return 0
-      } else {
-        return this.datas.imageMargin
-      }
-    },
+  created(){
+    console.log(this.datas,'-------pictureads')
   },
-  watch: {
-    pagingType() {},
-    rowindividual() {},
-    imageMargin() {},
+  mounted() {
+    this.addSwiper()
+    this.swiperM =
+      this.swiperM +
+      Math.floor(Math.random() * 1000) +
+      Math.floor(Math.random() * 1000)
   },
   methods: {
+    goHttp(res) {
+      this.productJump(res)
+    },
     /* 创建轮播对象 */
     addSwiper() {
+      let _this = this
       this.$nextTick(() => {
         if (this.datas.swiperType !== 0 && this.datas.imageList[0]) {
           if (this.mySwiper instanceof Array) {
@@ -142,25 +121,30 @@ export default {
             // 每次重新创建swiper前都要销毁之前存在的轮播   不然轮播会重复
             this.mySwiper.destroy()
           }
-
-          let params = {
+          const params = {
             loop: true,
             autoplay: true,
+            preventClicks: true,
+            preventClicksPropagation: true,
             pagination: {
               el: '.swiper-pagination',
-              type: this.pagingType,
+              type: this.datas.pagingType,
+            },
+            on: {
+              click: function () {
+                let realIndex = this.realIndex
+                _this.goHttp(_this.datas.imageList[realIndex])
+              },
             },
           }
-
-          if (this.datas.swiperType === 1 || this.datas.swiperType === 2) {
-            params.slidesPerView = this.rowindividual
-            params.spaceBetween = this.imageMargin
+          if (this.datas.swiperType === 2) {
+            params.slidesPerView = this.datas.rowindividual
+            params.spaceBetween = this.datas.imageMargin
           } else if (this.datas.swiperType === 3) {
             params.slidesPerView = 1.3
             params.centeredSlides = true
           }
-
-          this.mySwiper = new Swiper('.swiper-container', params)
+          this.mySwiper = new Swiper('.' + this.swiperM, params)
         } else {
           if (this.mySwiper instanceof Array) {
             this.mySwiper.forEach((element) => {
diff --git a/src/components/componentscom/tabBar/index.vue b/src/components/componentscom/tabBar/index.vue
index 463ffe2..835b6e8 100644
--- a/src/components/componentscom/tabBar/index.vue
+++ b/src/components/componentscom/tabBar/index.vue
@@ -2,19 +2,19 @@
   <div class="tabBar">
     <div v-if="datas.iconList.length !== 0" class="tabbar">
       <van-tabbar
-      route
         v-model="active"
         :placeholder="true"
         :border="datas.isShowBorder"
         :active-color="datas.activeColor"
         :inactive-color="datas.inactiveColor"
+        @change="changeTab"
+        replace="true"
       >
         <van-tabbar-item 
           v-for="(item, index) in datas.iconList"
           :key="index"
           :name="item.iconName"
           :dot="item.isDot"
-          :to="item.http.externalLink"
         >
           <span>{{ item.iconText }}</span>
           <template #icon="props">
@@ -48,6 +48,7 @@
 <script>
 export default {
   name: 'tabBar',
+  inject: ['productJump'],
   props: {
     datas: Object
   },
@@ -59,22 +60,24 @@ export default {
 
   created() {
     console.log(this.datas, '--------------tabbar data  created')
-    document.querySelector('.phone-container').style.cssText =
-      'padding-bottom: 50px'
   },
 
   mounted() {},
 
-  methods: {},
+  methods: {
+    changeTab(index) {
+      if (this.datas.iconList.length !== 0) {
+        console.log(this.datas.iconList[index], '-----------changeTab datas')
+        this.productJump(this.datas.iconList[index])
+      }
+    },
+  },
 
   computed: {},
 
   watch: {},
 
-  beforeDestroy() {
-    document.querySelector('.phone-container').style.cssText =
-      'padding-bottom: 0px'
-  }
+  beforeDestroy() {}
 }
 </script>