ll

liukangdong

2024-11-30 f956955c38a67f968977b7d784ff016ab5b17223

 h5/pages/workOrder/list.vue

@@ -3,43 +3,44 @@
      <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" />

            <input v-model="param.roomName" @confirm="handleQuery" type="text" placeholder="搜索楼宇/房间名称"

               placeholder-class="placeholder9" />

         </view>

      </view>
      <!--  -->
      <view class="tabs">
         <view class="tab" :class="{active: activeTab == -1}" @click="tabsClick(-1)">
            <text>待处理</text>
            <text class="border"></text>
         </view>
         <view class="tab" :class="{active: activeTab == 2}" @click="tabsClick(2)">
            <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: activeTab == -1}" @click="tabsClick(-1)">

            <text>待处理</text>

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

         </view>

         <view class="tab" :class="{active: activeTab == 2}" @click="tabsClick(2)">

            <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 list" @click="itemClick(item)">

            <image v-if="item.stats == 1" src="@/static/side/workordered.png" class="icon"></image>
            <image v-if="item.dealStatus == 0" src="@/static/side/workordered.png" class="icon"></image>

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

            <view class="content">

               <view class="name_wrap line">

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

                  <view class="status gray" v-if="item.dealStatus == 2">已处理</view>
                  <view class="status" v-if="item.dealStatus == 0">待处理</view>
                  <view class="name">{{item.buildingName}}/{{item.roomNum || item.floorName}}</view>

                  <view class="status gray" v-if="item.dealStatus == 2">已处理</view>

                  <view class="status" v-if="item.dealStatus == 0">待处理</view>

                  <view class="status" v-if="item.dealStatus == 1">待处理</view>

               </view>

               <view class="line">位置类型：{{item.areaType == '0' ? '室内装修' : '公共区域'}}</view>
               <view class="line">工单分类：{{item.categoryName}}</view>
               <view class="line">上报时间：{{item.createDate}}</view>
               <view class="line">位置类型：{{item.areaType == '0' ? '室内装修' : '公共区域'}}</view>

               <view class="line">工单分类：{{item.categoryName}}</view>

               <view class="line">上报时间：{{item.createDate}}</view>

               <view class="line">上门时间：{{item.getDate}}</view>

            </view>

         </view>

@@ -48,101 +49,136 @@
   </view>

</template>



<script>
   import { ywWorkorder } from '@/api'

<script>

   import {

      ywWorkorder

   } from '@/api'

   export default {

      data() {

         return {

            param: {},
            activeTab: -1,
            selectAll: false,
				
            list: [],
            total: 0,
            param: {},

            activeTab: -1,

            selectAll: false,



            list: [],

            total: 0,

            page: 1,

         };

      },
      onShow() {	
         this.getList()
      },
      onReachBottom() {
			
      },

      onShow() {

         this.getList()

      },

      onReachBottom() {

         const {total,list} = this

         if (list.length < total) {

            this.page = this.page + 1

            this.getList()

         } else {

            this.showToast('暂无更多数据')

         }

      },

      methods: {

         tabsClick(val) {
            this.activeTab = val
         tabsClick(val) {

            this.activeTab = val

            this.list = []

            this.page = 1

            this, getList()

         },

         allClick() {

            this.selectAll = !this.selectAll

            this.list = []

            this.page = 1

            this.getList()

         },

         itemClick(item) {

            uni.navigateTo({

               url: `/pages/workOrder/detail?id=${item.id}`

            })

         },
         handleQuery() {
            this.list = []
            this.page = 1
            this,getList()
         },
         allClick() {
            this.selectAll = !this.selectAll
         },
         itemClick(item) {
            uni.navigateTo({
               url: `/pages/workOrder/detail?id=${item.id}`
            })
         },
         getList() {
            const { page, total, list, activeTab } = this
            ywWorkorder({
               page,
               capacity: 10,
               model: {  }
            }).then(res => {
               this.list = res.data.records || []
            })
            this.getList()
         },

         getList() {

            const {

               page,

               total,

               list,

               activeTab,

               param,
               selectAll

            } = this

            ywWorkorder({

               page,

               capacity: 10,

               model: {

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

               }

            }).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;

@@ -155,9 +191,11 @@
         background: #F7F7F7;

         border-radius: 38rpx;

         padding-left: 30rpx;

         input{
            flex: 1;


         input {

            flex: 1;

         }



         .search {

            width: 28rpx;

            height: 28rpx;

@@ -169,44 +207,51 @@
   .list {

      .item {

         display: flex;

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

         padding: 30rpx 0;

         border-bottom: 2rpx solid #E5E5E5;



         .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;
               &: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;
               }
               .gray{
                  color: #999999;
               }
            flex: 1;

            color: #666666;

            display: flex;

            flex-direction: column;

            justify-content: space-between;



            .line {

               margin-bottom: 20rpx;



               &: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;

               }



               .gray {

                  color: #999999;

               }

            }

         }

      }