修复bug

src/components/Tags/goods-list.vue

@@ -11,7 +11,8 @@
       <div class="swiper-container" id="goodlist">
         <ul class="swiper-wrapper">
           <li class="swiper-slide" v-for="(i, index) in tagclick.data.products" :key="index">
-            <div :style="{ backgroundImage: `url(${i.pic})` }" class="img"></div>
+            <viewimg :list="i.pics" :keyid="`viewimg_${index+1}`"/>
+            
             <div class="info">
               <p>{{ i.name }}</p>
               <div v-if="i.skus">
@@ -20,7 +21,7 @@
               </div>
               <ul>
                 <li>
-                  <span>规格：</span>
+                  <span>規格：</span>
                   <ul>
                     <li @click.stop="onClickSku(item)" :class="{ active: item.id == i.currentSku.id }" v-for="(item, idx) in i.skus" :key="idx">
                       <span v-if="item.properties[0]">
@@ -30,7 +31,7 @@
                   </ul>
                 </li>
                 <li>
-                  <span>数量：</span>
+                  <span>數量：</span>
                   <div class="number">
                     <ui-icon
                       @click="
@@ -73,6 +74,8 @@ import { useStore } from "vuex";
 import * as apis from "@/apis/index.js";
 import { Loading,Dialog } from "@/global_components/";
 import browser from "@/utils/browser";
+import viewimg from "@/views/viewimg";
+
 
 // get_product_info
 const store = useStore();
@@ -236,12 +239,8 @@ onMounted(() => {
         overflow: hidden;
         background: #fff;
         padding-bottom: 14px;
-        .img {
-          height: 34vh;
-          width: 100%;
-          background-size: auto 100%;
-          background-position: center;
-        }
+        
+      
         .info {
           font-size: 14px;
           color: #131d34;

src/views/viewimg.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="imgcon">
+    <div class="swiper-container" :class="keyid" >
+    <ul  class="swiper-wrapper imgul">
+      <li  class="swiper-slide img" v-for="(pic, picii) in list" :key="picii" :style="{ backgroundImage: `url(${pic})` }"></li>
+    </ul>
+    <ul class="pagination">
+      <li :class="{active:picii==current}" v-for="(pic, picii) in list" :key="picii"></li>
+    </ul>
+  </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, defineEmits, computed, onMounted, nextTick, defineProps } from "vue";
+
+const current = ref(0)
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: [],
+  },
+  keyid:{
+    type: String,
+    default: 'keyid',
+  }
+});
+const initScroll = () => {
+  nextTick(() => {
+    let t = setTimeout(() => {
+      clearTimeout(t);
+      console.log(props.keyid);
+      new Swiper(`.${props.keyid}`, {
+        on: {
+          touchMove(swiper, e) {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          slideChange() {
+            current.value = this.activeIndex;
+          },
+        },
+      });
+    }, 100);
+  });
+};
+
+onMounted(() => {
+  initScroll();
+});
+</script>
+
+<style lang="scss" scoped>
+.imgcon{
+    min-height: 34vh;
+
+.swiper-container {
+  position: relative;
+  .imgul {
+    .img {
+      height: 34vh;
+      width: 100%;
+      background-size: auto 100%;
+      background-position: center;
+    }
+  }
+
+  .pagination{
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    z-index: 99;
+    >li{
+      width: 8px;
+      height: 8px;
+      margin: 0 4px;
+      display: inline-block;
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.2);
+      &.active{
+      background-color: var(--editor-main-color);
+
+      }
+    }
+  }
+}
+}
+</style>