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

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">
-          <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>
+        <log-item :item="item" :index="index" :data="state.info"></log-item>
       </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>