新增走访任务页面，场所任务跳转， 调整部分样式

Lou

2024-01-12 2de7b174c8048aa19a47033f89a5b0693bf20928

 subPackage/task/workLogList.vue

@@ -1,8 +1,241 @@
<template>
   <view>
      <u-sticky>
         <view class="bgc-ff">
            <view class="tab">
               <u-tabs :list="tabList" :current="tabIndex" @click="changeTab" :inactiveStyle="{color:'#999999'}"
                  :activeStyle="{color:'#017BFC'}" :scrollable="false">

               </u-tabs>
               <view class="search flex j-c-s-b a-i-c">
                  <view class="tab-filter flex j-c-c a-i-c" @click="showDateModal">
                     <text class="f-28">时间筛选</text>
                     <u-icon name="arrow-down"></u-icon>
                  </view>
                  <u-search placeholder="请输入需要查询信息的名称" v-model="keyWord" :clearabled="true" :showAction="true"
                     :animation="true" @search="searchConfirm" @clear="clearConfirm"></u-search>
               </view>
            </view>
         </view>
      </u-sticky>

      <view class="list">
         <view class="list-item bgc-ff mb-20" v-for="(i,k) in list" :key="k">
            <view class="item-title flex a-i-c j-c-s-b mb-20">
               <text class="f-32 fw">{{i.name}}</text>
               <u-tag v-if="i.status == 1" text="待处理" type="warning" plain plainFill></u-tag>
               <u-tag v-if="i.status == 2" text="已处理" type="success" plain plainFill></u-tag>
            </view>
            <view class="item-row flex a-i-c j-c-s-b">
               <text class="f-28">时间</text>
               <text class="f-28 c-66">{{i.createTime}}</text>
            </view>

            <view class="item-row flex a-i-c j-c-s-b">
               <text class="f-28">电话</text>
               <text class="f-28 c-66">{{i.phone}}</text>
            </view>

            <view class="item-row flex a-i-c j-c-s-b">
               <text class="f-28">地址</text>
               <text class="address f-28 c-66">{{i.address || ""}}</text>
            </view>
         </view>
      </view>
      <u-toast ref="uToast"></u-toast>
      <u-loadmore :status="loadingStatus" loadmoreText="开始加载" loadingText="数据加载中" nomoreText="没有更多了" line />

      <date-range-modal ref="dateRane" @comfirm="handleComfirmDate" @rest="handleRestDate" />
   </view>
</template>

<script>
   import {
      getWorkLogList
   } from "@/api/workLog/workLog.js"
   import dateRangeModal from '@/components/dateRangeModal/modal.vue';
   export default {
      components: {
         dateRangeModal
      },
      data() {
         return {
            tabList: [{
                  name: "全部",
                  status: "",
               },
               {
                  name: "待处理",
                  status: 1
               },
               {
                  name: "已处理",
                  status: 2
               }
            ],
            tabIndex: 0,
            currentStatus: "",
            list: [],
            loadingStatus: 'nomore',
            currentPage: 1,
            frequency: '',
            reportType: "",
            selectDate: [],
            houseCode: "",
            keyword: ""
         }
      },

      onLoad(option) {
         this.getList()
      },
      onReachBottom() {
         this.currentPage++
         this.getList()
      },

      methods: {


         searchConfirm() {
            this.resetParams()
            this.getList()
         },
         clearConfirm() {
            this.keyWord = ''
            this.searchConfirm()
         },
         changeTab(e) {
            this.tabIndex = e.index;
            this.currentStatus = e.status;
            this.resetParams();
            this.getList();
         },
         resetParams() {
            this.list = [];
            this.currentPage = 1;
         },
         getList() {
            this.$nextTick(() => {
               this.loadingStatus = 'loadingmore'
               this.$refs.uToast.show({
                  type: 'loading',
                  message: '正在加载',
                  duration: 9999999
               })
            })
            let params = {
               page: this.currentPage,
               size: 20,
               status: this.currentStatus,
               frequency: this.frequency
            }
            if (this.selectDate.length) {
               params.startTime = this.selectDate[0]
               params.endTime = this.selectDate[1]
            }
            if (this.houseCode) {
               params.houseCode = this.houseCode;
            }

            if (this.reportType) {
               params.reportType = this.reportType
            }
            if (this.keyword) {
               params.name = this.keyword;
            }

            getWorkLogList(params).then(res => {
               if (res.code != 200) {
                  uni.showToast({
                     title: '数据请求失败',
                     icon: 'error'
                  })
                  return
               }
               let records = res.data.records;
               this.list = [...this.list, ...records]
               this.$nextTick(() => {
                  this.$refs.uToast.isShow = false
               })
               this.loadingStatus = 'nomore'
            })
         },
         navTo(name, id, type) {

            if (type == 1) {
               this.$u.func.globalNavigator(`bailReportDetail?id=${id}`)
            } else if (type == 2) {
               this.$u.func.globalNavigator(`hotelReportDetail?id=${id}`)
            } else if (type == 3 || type == 4 || type == 5) {
               this.$u.func.globalNavigator(`labelReportDetail?id=${id}`)
            } else if (type == 6) {
               this.$u.func.globalNavigator(`schoolReportDetail?id=${id}`)
            }
         },

         showDateModal() {
            this.$refs.dateRane.open();
         },

         handleRestDate() {
            this.selectDate = [];
            this.resetParams();
            this.getList()
         },
         handleComfirmDate(val) {
            this.selectDate = val;
            this.resetParams();
            this.getList()
         }

      }
   }
</script>

<style>
<style lang="scss">
   page {
      background-color: #F5F5F5;
   }



   .tab {
      // width: 100%;

   }

   .search {
      padding: 20rpx 20rpx;
   }

   // .tab /deep/.u-tabs__wrapper__nav__item {
   //    flex: 1;
   // }
   .tab-filter {
      padding: 0 20rpx;
   }

   .list {
      margin: 20rpx 30rpx 0;
   }

   .list-item {
      padding: 0 30rpx 20rpx;
      border-radius: 8rpx;

      .item-title {
         padding: 30rpx 0;
         border-bottom: 1px solid #F5F5F5;
      }

      .item-row {
         padding: 10rpx 0;

         .address {
            width: 65%;
            text-align: right;
         }
      }
   }
</style>