fx:售后进度页面、全部评价页面图片添加预览模式

pages/goods/comment/list.vue

@@ -9,28 +9,7 @@
     ></su-tabs>
     <view class="ss-m-t-20">
       <view class="list-item" v-for="item in state.pagination.data" :key="item">
-        <view class="ss-flex ss-row-between">
+        <comment-item :item="item"></comment-item>
-          <view class="ss-flex">
-            <image class="avatar" :src="sheep.$url.static(item.user_avatar)" />
-            <view class="ss-m-l-20 ss-m-r-24 nickname">{{ item.user_nickname }}</view>
-            <view><uni-rate :readonly="true" size="16" :value="item.level" /></view>
-          </view>
-          <view class="create-time">{{ item.create_time?.substring(0, 11) }}</view>
-        </view>
-        <view class="ss-m-t-20 content-title">{{ item.content }}</view>
-        <view class="ss-m-t-40" v-if="item.images?.length">
-          <scroll-view class="scroll-box" scroll-x scroll-anchoring enable-flex>
-            <view class="ss-flex">
-              <view v-for="i in item.images" :key="i" class="ss-m-r-20"
-                ><image class="content-img" :src="sheep.$url.static(i)" />
-              </view>
-            </view>
-          </scroll-view>
-        </view>
-        <!-- <view class="ss-flex ss-row-right">
-          <text class="cicon-info-o"></text>
-          <view class="ss-m-l-8 foot-title">举报</view>
-        </view> -->
       </view>
     </view>
     <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
@@ -50,6 +29,7 @@
   import { onLoad, onReachBottom } from '@dcloudio/uni-app';
   import { computed, reactive } from 'vue';
   import _ from 'lodash';
+  import commentItem from '../components/detail/comment-item.vue';
   const state = reactive({
     list: [],
     type: [],
@@ -62,6 +42,7 @@
     },
     commentId: 0,
     code: 'all',
+    commentImages: [],
   });
   // 切换选项卡
   function onTabsChange(e) {
@@ -98,6 +79,11 @@
       } else {
         state.pagination = res.data;
       }
+      state.pagination.data.forEach((item) => {
+        item.images.forEach((image) => {
+          state.commentImages.push(sheep.$url.cdn(image));
+        });
+      });
       if (state.pagination.current_page < state.pagination.last_page) {
         state.loadStatus = 'more';
       } else {

pages/order/aftersale/log-item.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
+    <text class="cicon-title" :class="index === 0 ? 'activity-color' : ''"></text>
+    <view v-if="data.length - 1 != index" class="line"></view>
+  </view>
+  <view>
+    <view class="text">{{ item.log_type_text }}</view>
+    <su-parse class="richtext" :content="item.content"></su-parse>
+    <view class="" v-if="item.images?.length">
+      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+        <view class="ss-flex">
+          <view v-for="i in item.images" :key="i" class="ss-m-r-20">
+            <su-image
+              class="content-img"
+              isPreview
+              :previewList="state.commentImages"
+              :current="index"
+              :src="i"
+              :height="120"
+              :width="120"
+              mode="aspectFit"
+            ></su-image>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="date">{{ item.create_time }}</view>
+  </view>
+</template>
+<script setup>
+  import sheep from '@/sheep';
+  import { reactive } from 'vue';
+  const props = defineProps({
+    item: {
+      type: Object,
+      default() {},
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+    data: {
+      type: Object,
+      default() {},
+    },
+  });
+  const state = reactive({
+    commentImages: [],
+  });
+  props.item.images?.forEach((i) => {
+    state.commentImages.push(sheep.$url.cdn(i));
+  });
+</script>
+<style lang="scss" scoped>
+  .log-icon {
+    height: inherit;
+    .cicon-title {
+      font-size: 30rpx;
+      color: #dfdfdf;
+    }
+    .activity-color {
+      color: #60bd45;
+    }
+    .line {
+      width: 1px;
+      height: 100%;
+      background: #dfdfdf;
+    }
+  }
+  .text {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #333333;
+  }
+  .richtext {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #999999;
+    margin: 20rpx 0 0 0;
+  }
+  .content-img {
+    margin-top: 20rpx;
+    width: 200rpx;
+    height: 200rpx;
+  }
+  .date {
+    margin-top: 20rpx;
+    font-size: 24rpx;
+    font-family: OPPOSANS;
+    font-weight: 400;
+    color: #999999;
+    margin-bottom: 40rpx;
+  }
+</style>

pages/order/aftersale/log.vue

@@ -3,24 +3,7 @@
   <s-layout title="售后进度">
     <view class="log-box">
       <view class="log-content-box ss-flex" v-for="(item, index) in state.info" :key="item.title">
-        <view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
+        <log-item :item="item" :index="index" :data="state.info"></log-item>
-          <text class="cicon-title" :class="index === 0 ? 'activity-color' : ''"></text>
-          <view v-if="state.info.length - 1 != index" class="line"></view>
-        </view>
-        <view>
-          <view class="text">{{ item.log_type_text }}</view>
-          <su-parse class="richtext" :content="item.content"></su-parse>
-          <view class="" v-if="item.images?.length">
-            <scroll-view class="scroll-box" scroll-x scroll-anchoring>
-              <view class="ss-flex">
-                <view v-for="i in item.images" :key="i" class="ss-m-r-20"
-                  ><image class="content-img" :src="sheep.$url.static(i)" />
-                </view>
-              </view>
-            </scroll-view>
-          </view>
-          <view class="date">{{ item.create_time }}</view>
-        </view>
       </view>
     </view>
   </s-layout>
@@ -30,6 +13,7 @@
   import sheep from '@/sheep';
   import { onLoad } from '@dcloudio/uni-app';
   import { computed, reactive } from 'vue';
+  import logItem from './log-item.vue';
 
   const state = reactive({
     active: 1,
@@ -69,44 +53,5 @@
     .log-content-box {
       align-items: stretch;
     }
-    .log-icon {
-      height: inherit;
-      .cicon-title {
-        font-size: 30rpx;
-        color: #dfdfdf;
-      }
-      .activity-color {
-        color: #60bd45;
-      }
-      .line {
-        width: 1px;
-        height: 100%;
-        background: #dfdfdf;
-      }
-    }
-    .text {
-      font-size: 28rpx;
-      font-weight: 500;
-      color: #333333;
-    }
-    .richtext {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #999999;
-      margin: 20rpx 0 0 0;
-    }
-    .content-img {
-      margin-top: 20rpx;
-      width: 200rpx;
-      height: 200rpx;
-    }
-    .date {
-      margin-top: 20rpx;
-      font-size: 24rpx;
-      font-family: OPPOSANS;
-      font-weight: 400;
-      color: #999999;
-      margin-bottom: 40rpx;
-    }
   }
 </style>