ll

liukangdong

2024-12-03 35ed9cd31d7b675082425361a9f08bec40aa1292

 h5/pages/polling/task.vue

@@ -1,130 +1,196 @@
<template>

   <view class="main_app">

<!--       <view class="head_wrap">

      <!--       <view class="head_wrap">

         <view class="search_wrap">

            <image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>

            <input v-model="param.keyword" @confirm="getList()" type="text" placeholder="搜索楼宇/房间名称" placeholder-class="placeholder9" />

         </view>

      </view> -->
      <!--  -->
      <view class="tabs">
         <view class="tab" :class="{active: activeTab == 0}" @click="tabsClick(0)">
            <text>待处理</text>
            <text class="border"></text>
         </view>
         <view class="tab" :class="{active: activeTab == 1}" @click="tabsClick(1)">
            <text>已处理</text>
            <text class="border"></text>
         </view>
         <view class="tab" @click="allClick">
            <view class="name">
               <image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>
               <image v-else class="icon" src="@/static/check.png" mode=""></image>
               <text>查看全部</text>
            </view>
            <text class="border"></text>
         </view>
      </view> -->

      <!--  -->

      <view class="tabs">

         <view class="tab" :class="{active: param.queryStatus == '0,1'}" @click="tabsClick('0,1')">

            <text>待处理</text>

            <text class="border"></text>

         </view>

         <view class="tab" :class="{active: param.queryStatus == 3}" @click="tabsClick(3)">

            <text>已处理</text>

            <text class="border"></text>

         </view>

         <view class="tab" @click="allClick">

            <view class="name">

               <image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>

               <image v-else class="icon" src="@/static/check.png" mode=""></image>

               <text>查看全部</text>

            </view>

            <text class="border"></text>

         </view>

      </view>

      <!--  -->

      <view class="list">

         <view class="item" v-for="item in 10" @click="itemClick(item)">

            <image v-if="item.stats == 1" src="@/static/side/xunjianed.png" class="icon"></image>
            <image v-else src="@/static/side/xunjian.png" class="icon"></image>

            <view class="content">

               <view class="name_wrap line">

                  <view class="name">巡检酒啊</view>

                  <view class="status">待开始</view>

               </view>

               <view class="line">任务日期：xxx</view>

               <view class="line">执行时间：121212</view>
               <view class="line">
                  <view>完成情况：121212</view>
                  <view class="btn">
                     <image src="@/static/side/ic_saoma@2x.png" class="saoma" mode=""></image>
                     <view>扫码巡检</view>
                  </view>
      <scroll-view scroll-y="true" class="scroll_Y" @scrolltolower="scrolltolower">

         <view class="list">

            <view class="item" v-for="item in list" @click="itemClick(item)">

               <image v-if="item.status == 0 || item.status == 1" src="@/static/side/xunjianed.png" class="icon"></image>

               <image v-else src="@/static/side/xunjian.png" class="icon"></image>

               <view class="content">

                  <view class="name_wrap line">

                     <view class="name">{{item.planTitle}}</view>

                     <view class="status" :class="{

                        green: item.status == 1,

                        red: item.status == 2,

                        gray: item.status == 3 || item.status == 4

                     }">{{statusM[item.status]}}</view>

                  </view>

                  <view class="line" v-if="item.startDate">任务日期：{{ item.startDate.slice(0, 11) }}</view>

                  <view class="line">执行时间：{{ item.startDate.slice(11, 16) }} 至 {{ item.endDate.slice(11, 16) }}</view>

                  <view class="line">

                     <view>完成情况：{{item.finishNum || 0}}/{{item.patrolNum}}</view>

                     <view class="btn">

                        <image src="@/static/side/ic_saoma@2x.png" class="saoma" mode=""></image>

                        <view>扫码巡检</view>

                     </view>

                  </view>

               </view>

            </view>

         </view>

      </view>

      </scroll-view>



      <!--  -->

   </view>

</template>



<script>

   import {

      ywPatrolTaskPost

   } from '@/api'

   export default {

      data() {

         return {

            param: {},
            activeTab: 0,
            selectAll: false

            param: {

               queryStatus: '0,1'

            },

            list: [],

            activeTab: 0,

            selectAll: false,

            page: 1,



            statusM: {

               0: '待开始',

               1: '进行中',

               2: '已超期',

               3: '已完成',

               4: '已取消',

            }

         };

      },

      methods: {

         tabsClick(val) {
            this.activeTab = val
         },
         allClick() {
            this.selectAll = !this.selectAll
         },
         itemClick() {
            uni.navigateTo({
               url: '/pages/polling/detail'
            })
         },
         getList() {
            console.log('---');
      onLoad() {

         this.getList()

      },

      methods: {
         scrolltolower() {
            const {
               total,
               list
            } = this
            if (list.length < total) {
               this.page = this.page + 1
               this.getList()
            } else {
               this.showToast('暂无更多数据')
            }
         },

         tabsClick(val) {

            this.param.queryStatus = val

            this.page = 1

            this.list = []

            this.getList()

         },

         allClick() {

            this.selectAll = !this.selectAll

            this.list = []

            this.page = 1

            this.getList()

         },

         itemClick(item) {

            uni.navigateTo({

               url: '/pages/polling/detail?id=' + item.id

            })

         },

         getList() {

            const {

               page,

               param,

               selectAll

            } = this

            ywPatrolTaskPost({

               model: {

                  ...param,

                  dealUserId: selectAll ? '' : uni.getStorageSync('userInfo').id,

               },

               page,

               capacity: 10

            }).then(res => {

               this.list = [...this.list, ...res.data.records]

               this.total = res.data.total

            })

         }

      }

   }

</script>



<style lang="scss" scoped>
   .main_app{
      padding: 0 30rpx;
   }
   .tabs{
      display: flex;
      width: 750rpx;
      margin: 12rpx -30rpx 0;
      border-bottom: 1rpx solid #E5E5E5;
      .tab{
         font-size: 30rpx;
         color: #666666;
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-end;
         height: 88rpx;
         .name{
            display: flex;
            align-items: center;
         }
         .icon{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
         }
         .border{
            width: 54rpx;
            height: 6rpx;
            background-color: #fff;
            border-radius: 3rpx;
            margin-top: 24rpx;
         }
      }
      .active{
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         .border{
            background-color: $primaryColor;
         }
			
      }
		
<style lang="scss" scoped>

   .main_app {

      padding: 0 30rpx;

   }



   .tabs {

      display: flex;

      width: 750rpx;

      margin: 12rpx -30rpx 0;

      border-bottom: 1rpx solid #E5E5E5;



      .tab {

         font-size: 30rpx;

         color: #666666;

         flex: 1;

         display: flex;

         flex-direction: column;

         align-items: center;

         justify-content: flex-end;

         height: 88rpx;



         .name {

            display: flex;

            align-items: center;

         }



         .icon {

            width: 28rpx;

            height: 28rpx;

            margin-right: 10rpx;

         }



         .border {

            width: 54rpx;

            height: 6rpx;

            background-color: #fff;

            border-radius: 3rpx;

            margin-top: 24rpx;

         }

      }



      .active {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;



         .border {

            background-color: $primaryColor;

         }



      }



   }



   .head_wrap {

      display: flex;

      align-items: center;

@@ -137,9 +203,11 @@
         background: #F7F7F7;

         border-radius: 38rpx;

         padding-left: 30rpx;

         input{
            flex: 1;


         input {

            flex: 1;

         }



         .search {

            width: 28rpx;

            height: 28rpx;

@@ -148,64 +216,86 @@


   }



   .scroll_Y {

      height: calc(100vh - 230rpx);

   }



   .list {

      .item {

         display: flex;

         // height: 290rpx;
         padding: 30rpx 0;
         // height: 290rpx;

         padding: 30rpx 0;

         border-bottom: 2rpx solid #E5E5E5;

         &:nth-last-child(1){
            border: none;
         }

         .icon {

            width: 80rpx;

            height: 80rpx;
            height: 80rpx;

            margin-right: 24rpx;

         }



         .content {

            flex: 1;
            color: #666666;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .line{
               margin-bottom: 20rpx;
               display: flex;
               justify-content: space-between;
               align-items: center;
               .btn{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 180rpx;
                  height: 60rpx;
                  background: $primaryColor;
                  color: #fff;
                  font-size: 26rpx;
                  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,104,255,0.3);
                  border-radius: 30rpx;
                  .saoma{
                     width: 28rpx;
                     height: 28rpx;
                     margin-right: 8rpx;
                  }
               }
               &:nth-last-child(1){
                  margin-bottom: 0;
               }
            }
            .name_wrap{
               display: flex;
               justify-content: space-between;
               align-items: center;
               .name{
                  display: flex;
                  align-items: flex-end;
                  font-weight: 600;
                  font-size: 34rpx;
                  color: #222222;
               }
               .status{
                  color: $primaryColor;
               }
            flex: 1;

            color: #666666;

            display: flex;

            flex-direction: column;

            justify-content: space-between;



            .line {

               margin-bottom: 20rpx;

               display: flex;

               justify-content: space-between;

               align-items: center;



               .btn {

                  display: flex;

                  align-items: center;

                  justify-content: center;

                  width: 180rpx;

                  height: 60rpx;

                  background: $primaryColor;

                  color: #fff;

                  font-size: 26rpx;

                  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 104, 255, 0.3);

                  border-radius: 30rpx;



                  .saoma {

                     width: 28rpx;

                     height: 28rpx;

                     margin-right: 8rpx;

                  }

               }



               &:nth-last-child(1) {

                  margin-bottom: 0;

               }

            }



            .name_wrap {

               display: flex;

               justify-content: space-between;

               align-items: center;



               .name {

                  display: flex;

                  align-items: flex-end;

                  font-weight: 600;

                  font-size: 34rpx;

                  color: #222222;

               }



               .status {

                  color: $primaryColor;

               }



               .green {

                  color: #0ADE79;

               }



               .gray {

                  color: #999999;

               }

            }

         }

      }