6/16,同步

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

@@ -1,6 +1,6 @@
 <template>
   <view class="page_padding">
-    <view class="detailsbox flex flex-col overflow-hidden">
+    <view class="detailsbox">
       <!-- 状态筛选标签 -->
       <TabsComponents
         :showBottomLine="false"
@@ -8,9 +8,9 @@
         :tabslist="statusTabs"
         @update="switchStatus"
       ></TabsComponents>
-      <view class="detail_list flex flex-1 overflow-auto">
+      <view class="detail_list">
         <scroll-view
-          style="height: 100%; flex: 1"
+          style="flex: 1"
           scroll-y="true"
           lower-threshold="160"
           v-if="list.length > 0"
@@ -100,9 +100,7 @@ const switchStatus = value => {
   list.value = []
   init()
 }
-//
-
-const total = ref(0) //
+const total = ref(0) // 总量
 const isLoading = ref(false) // 加载锁
 const hasMore = ref(true) // 是否还有更多数据
 const list = ref([])
@@ -153,7 +151,7 @@ function handleComplaint(id) {
 }
 
 function scrolltolower() {
-  // 必须加这两个判断！
+  console.log('触发')
   if (isLoading.value || !hasMore.value) {
     return
   }
@@ -167,13 +165,18 @@ function scrolltolower() {
   background: #f9f9f9;
 }
 .detailsbox {
+  height: 100%;
   flex: 1;
   background: #f9f9f9;
   padding: 20rpx 40rpx;
-  justify-content: flex-start;
-  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   .detail_list {
     margin-top: 20rpx;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
     .item {
       background: #ffffff;
       border-radius: 16rpx;

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>