报修图片预览 列表样式修改

project.private.config.json

@@ -1,5 +1,5 @@
 {
-    "libVersion": "3.7.12",
+    "libVersion": "3.8.9",
     "projectname": "epmet-apartment-mp",
     "setting": {
         "urlCheck": false,

subpages/mine/eventList/eventList.js

@@ -38,6 +38,12 @@ Page({
             }
         })
     },
+    previewImage(e){
+        wx.previewImage({
+          urls: e.currentTarget.dataset.item.map(item=>item.url),
+          current: e.currentTarget.dataset.itemc
+        })
+    },
     /**
      * 生命周期函数--监听页面加载
      */

subpages/mine/eventList/eventList.wxml

@@ -7,13 +7,13 @@
     </view>
     <view class="bg-gary mt-24">
         <view class="m-top-16 flex items-center ">
-            <view class="label  mr-30">问题描述</view>
+            <view class="label minWidth">问题描述</view>
             <view class="value">{{item.faultDescribe}}</view>
         </view>
         <view class="m-top-16 flex items-center">
-            <view class="label  mr-30">图片</view>
+            <view class=" gray mr-30">图片</view>
             <view class="flex flex-sa">
-            <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.images}}" wx:for-item="itemC" wx:if="{{itemC.type != 'video'}}"/>
+                <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.images}}" wx:for-item="itemC" wx:if="{{itemC.type != 'video'}}" class="mr-10" bind:tap="previewImage" wx:for-index="indexC" data-item="{{item.images}}" data-itemC="{{itemC.url}}" />
                 <!-- <video src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" wx:if="{{itemC.type === 'video'}}" wx:for="{{item.images}}" wx:for-item="itemC" /> -->
             </view>
         </view>
@@ -27,12 +27,17 @@
             <view class="mr-30">处理状态</view>
             <view class="value" style="color:{{item.state === '待处理'?'#ff9f00':''}}">{{item.state}}</view>
         </view>
-    <view wx:if="{{item.handleImages.length != 0}}">
+        <view wx:if="{{item.handleImages.length != 0}}" class="pl-16 m-top-16">
-        <view>图片视频</view>
+            <view class="m-top-16 flex items-center">
-        <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.handleImages}}" wx:for-item="itemC" />
+                <view class=" mr-30">图片</view>
+                <view class="flex flex-sa">
+                    <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.handleImages}}" wx:for-item="itemC" wx:if="{{itemC.type != 'video'}}" class="mr-10" bind:tap="previewImage" wx:for-index="indexC" data-item="{{item.handleImages}}" data-itemC="{{itemC.url}}" class="mr-10" />
+                    <!-- <video src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" wx:if="{{itemC.type === 'video'}}" wx:for="{{item.images}}" wx:for-item="itemC" /> -->
+                </view>
+            </view>
         </view>
-    <view wx:if="{{item.handleDescribe}}">
+        <view wx:if="{{item.handleDescribe}}" class="pl-16 m-top-16 flex">
-        <view>处理说明</view>
+            <view  class="minWidth">处理说明</view>
             <view class="value">{{item.handleDescribe}}</view>
         </view>
     </view>

subpages/mine/eventList/eventList.wxss

@@ -2,7 +2,7 @@ page{
     background-color: #f8f8f8;
 }
 .card{
-    margin: 8rpx auto;
+    margin: 10rpx auto;
     width: calc(100% - 40rpx);
 }
 .label{
@@ -14,3 +14,6 @@ page{
     border-radius: 20rpx;
     padding:24rpx 32rpx ;
 }
+.minWidth{
+    min-width: 150rpx;
+}

subpages/mine/repairList/repairList.js

@@ -98,5 +98,12 @@ Page({
      */
     onShareAppMessage() {
 
-    }
+    },
+    previewImage(e){
+        console.log(e);
+        wx.previewImage({
+          current: e.currentTarget.dataset.itemc,
+          urls: e.currentTarget.dataset.item.map(item=>item.url)
+        })
+    },
 })

subpages/mine/repairList/repairList.wxml

@@ -7,22 +7,22 @@
     </view>
     <view class="bg-gary mt-24">
         <view class="m-top-16 flex items-center">
-            <view class="label  mr-30">报修物品</view>
+            <view class="label minWidth">报修物品</view>
             <view class="value">{{item.repairItem}}</view>
         </view>
         <view class="m-top-16 flex items-center">
-            <view class="label  mr-30">故障问题</view>
+            <view class="label minWidth">故障问题</view>
             <view class="value">{{item.faultDescribe}}</view>
         </view>
         <view class="m-top-16 flex items-center">
             <view class="label  mr-30">图片</view>
            <view class="flex flex-sa">
-            <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.images}}" wx:for-item="itemC" wx:if="{{itemC.type != 'video'}}"/>
+            <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.images}}" wx:for-item="itemC" wx:if="{{itemC.type != 'video'}}" class="mr-10" bind:tap="previewImage" wx:for-index="indexC" data-item="{{item.images}}" data-itemC="{{itemC.url}}"/>
             <!-- <video src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" wx:if="{{itemC.type === 'video'}}" wx:for="{{item.images}}" wx:for-item="itemC" /> -->
            </view>
         </view>
         <view class="m-top-16 flex items-center">
-            <view class="label  mr-30">提报时间</view>
+            <view class="label minWidth">提报时间</view>
             <view class="value">{{item.createTime}}</view>
         </view>
     </view>
@@ -31,12 +31,17 @@
         <view class="mr-30">处理状态</view>
         <view class="value" style="color:{{item.state === '待处理'?'#ff9f00':''}}" >{{item.state}}</view>
     </view>
-    <view wx:if="{{item.handleImages.length != 0}}">
+    <view wx:if="{{item.handleImages.length != 0}}" class="pl-16 m-top-16">
-        <view>图片视频</view>
+        <view class="m-top-16 flex items-center">
-        <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.handleImages}}" wx:for-item="itemC" />
+            <view class="mr-30">图片</view>
+           <view class="flex flex-sa">
+            <image src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" mode="" wx:for="{{item.handleImages}}" wx:for-item="itemC" wx:if="{{itemC.type != 'video'}}" class="mr-10" bind:tap="previewImage" wx:for-index="indexC" data-item="{{item.handleImages}}" data-itemC="{{itemC.url}}" class="mr-10"/>
+            <!-- <video src="{{itemC.url}}" style="width: 140rpx;height: 140rpx;" wx:if="{{itemC.type === 'video'}}" wx:for="{{item.images}}" wx:for-item="itemC" /> -->
+           </view>
+        </view>
     </view>
-    <view wx:if="{{item.handleDescribe}}">
+    <view wx:if="{{item.handleDescribe}}" class="pl-16 m-top-16 flex">
-        <view>处理说明</view>
+        <view class="minWidth">处理说明</view>
         <view class="value">{{item.handleDescribe}}</view>
     </view>
   </view>

subpages/mine/repairList/repairList.wxss

@@ -4,7 +4,7 @@ page{
     background-color: #f8f8f8;
 }
 .card{
-    margin: 8rpx auto;
+    margin: 10rpx auto;
     width: calc(100% - 40rpx);
 }
 .label{
@@ -16,3 +16,6 @@ page{
     border-radius: 20rpx;
     padding:24rpx 32rpx ;
 }
+.minWidth{
+    min-width: 150rpx;
+}