13404089107
2025-02-25 3f34d376d35e0fefa3432b0203417a6f90ed3444
H5/pages/list/list.vue
@@ -2,35 +2,54 @@
   <view class="content">
      <view class="bgColor2 h-96 flex a-center fs-27  j-between txt-center shadow1 font-w400 color1"
         style="position: sticky;top: 0;">
         <view class="flex1 relative" :class="true && 'color2 font-bold'">
         <view @click="changeType('')" class="flex1 relative" :class="searchParams.type == '' && 'color2 font-bold'">
            <view class="relative zIndex1000">
               全部
            </view>
            <view class="bgColor1">
            <view v-if="searchParams.type == ''" class="bgColor1"></view>
         </view>
         <view @click="changeType('0')" class="flex1 relative" :class="searchParams.type == '0' && 'color2 font-bold'">
            <view class="relative zIndex1000">
               上报待审核
            </view>
            <view v-if="searchParams.type == '0'" class="bgColor1"></view>
         </view>
         <view class="flex1">
            上报待审核
         <view @click="changeType('1')" class="flex1 relative" :class="searchParams.type == '1' && 'color2 font-bold'">
            <view class="relative zIndex1000">
               正在办理
            </view>
            <view v-if="searchParams.type == '1'" class="bgColor1"></view>
         </view>
         <view class="flex1">
            正在办理
         </view>
         <view class="flex1">
            办结
         <view @click="changeType('2')" class="flex1 relative" :class="searchParams.type == '2' && 'color2 font-bold'">
            <view class="relative zIndex1000">
               办结
            </view>
            <view v-if="searchParams.type == '2'" class="bgColor1"></view>
         </view>
      </view>
      <view class="pl-31 pr-31">
      <view v-if="list.length == 0 && status == 'noMore'" class="mt-200">
         <image src="../../static/空空如也@2x.png" mode="widthFix" class="w100"></image>
         <view class="txt-center mt-94 fs-27 color9">
            暂无数据
         </view>
      </view>
      <view v-else class="pl-31 pr-31">
         <view class="mt-31 br-19 bgColor3 shadow2 oh pb-31" v-for="(item,index) in list" :key="item.id">
            <view class="pt-21 pl-27 pr-27 flex a-center j-between fs-27 font-bold">
               <view class="">
                  诉求号:{{ item.serialNumber || '' }}
               </view>
               <view class="color3">
               <view class="color3 flex a-center">
                  <view v-if="status == '2'" class="fs-23 font-w500 flex a-center pl-10 pr-12 mr-17 bgColor7 h-50 br-8 color8">
                     <view class="w-27 h-27 color3 bgColor2 txt-center br-18 fs-20 flex a-center j-center mr-17">
                        i
                     </view>
                     已超时{{ item.overTimeDays }}天
                  </view>
                  {{ statusObj[item.status] }}
               </view>
            </view>
            <view class="mt-40 fs-23 pl-40 pr-40">
            <view v-if="['5','6'].includes(item.status)" class="mt-40 fs-23 pl-40 pr-40">
               <view class="flex j-between a-center">
                  <view class="color4">
                     上报人:<text class="color5">{{ item.reporter || '' }}</text>
@@ -47,7 +66,7 @@
            </view>
            <view class="mt-27 ml-40 mr-40 br-19 bgColor4 pt-34 pb-34 fs-27 pl-27 pr-27 flex a-center j-between">
               <text>{{ item.location || '' }}</text>
               <image src="../../static/location.png" mode="aspectFill" class="w-31 h-31 ml-10 shrink0"></image>
               <image src="../../static/position@2x.png" mode="aspectFill" class="w-31 h-31 ml-10 shrink0"></image>
            </view>
            <view class="ml-40 mr-40 mt-31 flex j-between a-center fs-27 txt-center">
               <view class="">
@@ -75,7 +94,7 @@
                  </view>
               </view>
            </view>
            <view class="fs-27 mt-31 ml-40 mr-40">
            <view v-if="item.status != '3'" class="fs-27 mt-31 ml-40 mr-40">
               <view class="">
                  问题描述
               </view>
@@ -83,12 +102,12 @@
                  {{ item.descriptionContent || '' }}
               </view>
            </view>
            <view class="fs-27 mt-31 ml-40">
            <view v-if="item.status != '3' && item.images" class="fs-27 mt-31 ml-40">
               <view class="">
                  描述图片
               </view>
               <view class="mt-19 flex wrap a-center">
                  <image v-for="(item1,index) in item.images" :key="index" :src="item1"
                  <image v-for="(item1,index) in item.images" :key="index" :src="item1" @click="previewImage(item.images,index)"
                     class="br-19 w-142 h-154 mr-13 mb-10 shrink0" mode="aspectFill"></image>
               </view>
            </view>
@@ -98,18 +117,18 @@
               <view class="txt-center fs-23 mt-27 color6">
                  创建时间:{{ item.createTime | formatTime }}
               </view>
               <view class="flex a-center j-center fs-23 mt-29 txt-center">
                  <view class="h-58 lh-58 bgColor5 w-192 br-29 color7">
               <view v-if="!['3','5'].includes(item.status)" class="flex a-center j-center fs-23 mt-29 txt-center">
                  <view @click="addProgress(item.id)" class="h-58 lh-58 bgColor5 w-192 br-29 color7">
                     添加办理进度
                  </view>
                  <view class="ml-38 h-58 lh-58 bgColor6 w-192 br-29 color8">
                  <view @click="addResult(item.id)" class="ml-38 h-58 lh-58 bgColor6 w-192 br-29 color8">
                     办理结果录入
                  </view>
               </view>
            </view>
         </view>
      </view>
      <view class="safe-b pt-20"></view>
   </view>
</template>
@@ -126,7 +145,7 @@
            searchParams: {
               pageNum: 1,
               pageSize: 10,
               type: 0
               type: '',//全部:不传,上报待审核:0,正在办理:1, 办结:2
            },
            list:[],
            status: 'loadMore',
@@ -143,14 +162,26 @@
         }
      },
      onReachBottom() {
         if (this.status == 'loadMore') {
            this.searchParams.pageNum += 1
            this.fetchList(this.searchParams,(e)=>{
               this.list = [...this.list,...e.records]
               if (this.list.length == e.total) {
                  this.status = 'noMore'
               } else {
                  this.status = 'loadMore'
               }
            })
         }
      },
      filters: {
         formatTime(val) {
            if (!val) return ''
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
         }
      },
      onShow() {
         this.searchParams.pageNum = 1
         this.fetchList(this.searchParams,(e)=>{
            this.list = e.records || []
            if (this.list.length == e.total) {
@@ -167,19 +198,56 @@
            getList(params).then(res=>{
               if (res.code == 200) {
                  res.data.records.map(item=>{
                     item.images = item.images.split(',')
                     if (item.images) {
                        item.images = item.images.split(',')
                     }
                  })
                  callback(res.data)
               }
            })
         }
         },
         // 添加办理进度
         addProgress(id) {
            uni.navigateTo({
               url:`/pages/progress/progress?id=${id}`
            })
         },
         // 办理结果录入
         addResult(id) {
            uni.navigateTo({
               url:`/pages/result-entry/index?id=${id}`
            })
         },
         // 切换状态筛选
         changeType(type) {
            this.searchParams = {
               pageNum: 1,
               pageSize: 10,
               type,//全部:不传,上报待审核:0,正在办理:1, 办结:2
            }
            this.fetchList(this.searchParams,(e)=>{
               this.list = e.records || []
               if (this.list.length == e.total) {
                  this.status = 'noMore'
               } else {
                  this.status = 'loadMore'
               }
            })
         },
         // 预览图片
         previewImage(list,index) {
            uni.previewImage({
               urls: list,
               current: index,
            });
         },
      }
   }
</script>
<style scoped lang="scss">
   .content {
      min-height: 100vh;
      height: 100%;
      background-color: #f7f7f7;
   }
@@ -235,6 +303,10 @@
   .color8 {
      color: #fff;
   }
   .color9 {
      color: #999999;
   }
   .bgColor1 {
      background: linear-gradient(270deg, #FFB318 0%, #FF330D 100%);
@@ -267,6 +339,10 @@
   .bgColor6 {
      background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
   }
   .bgColor7 {
      background: #FF4948;
   }
   .border1 {
      border-top: 2rpx solid #EDEEEF;