照片墙

pages/workOrder/modules/nodes.vue

@@ -11,11 +11,20 @@
             </view>
             <node v-if="!prefix && item.child.length" :nodes="item.child"
                 :prefix="(prefix ? prefix + '-' : '') + item.rowindex" />
-            <view v-else class="stuta">
-                <view class="tag" style="background-color: #E64D55;" v-if="item.status == '0'">未完成</view>
-                <view class="tag" style="background-color: #06A971;" v-if="item.status == '1'">已完成</view>
-                <view class="tag" style="background-color: #70B603;" v-if="item.status == '2'">进行中</view>
-            </view>
+
+            <block v-else>
+                <view class="images" v-if="item.attinfos.length">
+                    <view class="image" hover-class="navigator-hover" v-for="(img, index) in item.attinfos"
+                        :key="img.attachmentid" @click.stop="preview(index, item.attinfos)">
+                        <up-image :show-loading="true" :src="$Http.getSpecifiedImage(img)" width="80px" height="80px" />
+                    </view>
+                </view>
+                <view class="stuta">
+                    <view class="tag" style="background-color: #E64D55;" v-if="item.status == '0'">未完成</view>
+                    <view class="tag" style="background-color: #06A971;" v-if="item.status == '1'">已完成</view>
+                    <view class="tag" style="background-color: #70B603;" v-if="item.status == '2'">进行中</view>
+                </view>
+            </block>
         </view>
     </view>
 </template>
@@ -48,6 +57,20 @@ function toWork(item) {
         url: '/pages/workOrder/work',
     })
 }
+
+function preview(index, imgs) {
+    wx.previewImage({
+        urls: imgs.filter(v => isImage(v.postfix)).map(item => item.url),
+        current: imgs[index].url,
+
+    })
+}
+function isImage(postfix) {
+    const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+    return imageTypes.includes(postfix.toLowerCase());
+}
+
+
 </script>
 
 <style lang="scss" scoped>
@@ -78,6 +101,16 @@ function toWork(item) {
             color: #fff;
         }
     }
+
+    .images {
+        display: flex;
+        flex-wrap: wrap;
+
+        .image {
+            margin-top: 20rpx;
+            margin-right: 20rpx;
+        }
+    }
 }