6/16,同步

wuye-manager-uniapp/pageSubPack/complaint/Details_handle.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="page_padding">
-    <view class="Details_handelbox h-full flex-1">
+    <view class="Details_handelbox h-full flex-1 flex flex-col">
       <view class="items top flex items-center justify-between">
         <view class="title flex items-center">
           <view class="line"></view>
@@ -61,6 +61,7 @@
               :key="index"
               :src="item"
               class="img"
+              @tap="handlePrivew(showImages, index)"
               mode="scaleToFill"
             ></image>
           </view>
@@ -84,17 +85,6 @@ import { onMounted, ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import { getComplainMain } from '@/api/complain.js'
 
-const info = ref({
-  status: 0, //0待解决 1已完成
-  imgs: [
-    'https://picsum.photos/61',
-    'https://picsum.photos/61',
-    'https://picsum.photos/61',
-    'https://picsum.photos/61',
-    'https://picsum.photos/61'
-  ]
-})
-
 /** 投诉详情id */
 const complainId = ref('')
 /** 投诉详情内容 */
@@ -126,10 +116,12 @@ function init() {
   if (complainId.value) {
     getComplainMain(complainId.value).then(res => {
       complainInfo.value = res.data
-      showImages.value = res.data.problemImageUrl
-        .split(',')
-        .filter(item => item.includes('http'))
-        .map(item => item.split('?')[0])
+      if (res.data.problemImageUrl) {
+        showImages.value = res.data.problemImageUrl
+          .split(',')
+          .filter(item => item.includes('http'))
+          .map(item => item && item.split('?')[0])
+      }
     })
   }
 }
@@ -144,6 +136,15 @@ function handleSelecthouse() {
     })
   }
 }
+
+/** 预览图片 */
+function handlePrivew(items, index) {
+  if (items.length <= 0) return
+  uni.previewImage({
+    current: index,
+    urls: items
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -151,8 +152,12 @@ function handleSelecthouse() {
   padding: 30rpx 40rpx;
   padding-bottom: 0;
   position: relative;
+  overflow: hidden;
+  overflow-y: auto;
   .items {
-    height: 100rpx;
+    height: 80rpx;
+    min-height: 80rpx;
+    flex-shrink: 0;
     &.top {
       border-bottom: 1rpx solid #ccc;
     }
@@ -190,6 +195,10 @@ function handleSelecthouse() {
   }
 
   .list {
+    flex: 1;
+    flex-shrink: 0;
+
+    padding-bottom: 30rpx;
     .item {
       border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
       display: flex;
@@ -253,10 +262,10 @@ function handleSelecthouse() {
     background: #4d5dfa;
     border-radius: 8rpx 8rpx 8rpx 8rpx;
 
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    // position: absolute;
+    // bottom: 0;
+    // left: 50%;
+    // transform: translateX(-50%);
   }
 }
 </style>