查看图片

src/views/mall/components/details/comment-item.vue

@@ -25,19 +25,9 @@
       <div class="content"> {{ item.content }} </div>
       <div class="ss-m-t-24" v-if="item.picUrls?.length">
         <div class="scroll-box">
-          <div class="ss-flex">
-            <div v-for="(picUrl, index) in item.picUrls" :key="picUrl" class="ss-m-r-10">
-              <v-img :src="picUrl" :aspect-ratio="1" :current="index" style="border-radius: 8px;"></v-img>
-              <!-- <su-image
-                class="content-img"
-                isPreview
-                :previewList="item.picUrls"
-                :current="index"
-                :src="picUrl"
-                :height="120"
-                :width="120"
-                mode="aspectFill"
-              /> -->
+          <div class="d-flex">
+            <div v-for="(picUrl, index) in item.picUrls" :key="picUrl" class="mr-3" style="height: 100px; width: 100px;">
+              <v-img v-if="checkIsImage(picUrl)" :src="picUrl" :aspect-ratio="1" style="cursor: pointer;" @click="handleClick(index)"></v-img>
             </div>
           </div>
         </div>
@@ -49,16 +39,27 @@
       </div>
     </div>
   </div>
+  <PreviewImg v-if="showPreview" :current="current" :list="item.picUrls" @close="showPreview = !showPreview"></PreviewImg>
 </template>
 
 <script setup>
 import { getUserAvatar } from '@/utils/avatar'
-  const props = defineProps({
-    item: {
-      type: Object,
-      default() {},
-    },
-  });
+import { checkIsImage } from '@/utils'
+import { ref } from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    default() {},
+  }
+})
+
+// 预览
+const showPreview = ref(false)
+const current = ref(0)
+const handleClick = (index) => {
+  showPreview.value = !showPreview.value
+  current.value = index
+}
 </script>
 
 <style lang="scss" scoped>