首页扫码逻辑修改，楼栋、楼盘列表修改，场所采集标签选择组件编写

Lou

2023-12-20 fe77767115b4c1e30909757384d69dc6aee4c0dc

 pages/user/test.vue

@@ -1,341 +1,97 @@
<template>
   <view class="">
      <z-paging ref="paging" v-model="tenantList" @query="queryList" loading-more-no-more-text="没有更多了"
         @onRefresh="refreshList">
         <view class="header bgc-ff" slot="top">
            <!-- <view class="filter-box">
            <chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex'
               @onSelected='handleSelect'></chenchuang-CCDropDownFilter>
         </view> -->
            <view class="tabs">
               <u-tabs :list="tabsList" :current="tabIndex" @click="tabClick" :inactiveStyle="{color:'#999999'}"
                  :activeStyle="{color:'#017BFC'}"></u-tabs>
      <view class="cell  flex j-c-s-b a-i-c  bgc-ff"   @click="isShow = true">
         <text class="f-28">选择标签</text>
         <u-icon name="arrow-right"></u-icon>
      </view>
		
		
      <u-popup :show="isShow" @close="isShow = false"   :safeAreaInsetTop="true"  mode="bottom"  :closeable="true"  round="12">
          <view class="popup-title fw f-30">标签选择</view>
			
         <view class="popup-list flex a-i-c">
            <scroll-view scroll-y="true"  class="scroll">
            <view class="popup-box bgc-f4">
               <view :class="['box-item','f-28',index == fIndex?'bgc-ff':'']"  v-for="(item,index)  in  categoryList"   :key="index"  @click="handleSelect(item,index)">
                  {{item.categoryName}}
               </view>
            </view>
            <view class="search-box">
               <u-search placeholder="请输入租户名" v-model="keyword" :clearabled="true" :showAction="true"
                  :animation="true" @search="search" @clear="clear" @custom="search"></u-search>
            </scroll-view>
            <scroll-view scroll-y="true"  class="scroll">
            <view class="popup-box">
               <view :class="['box-item','f-28',item.isSelect?'c-main fw':'']"  v-for="(item,index)  in  childList"   :key="index"  @click="handleSelectChild(item,index)">
                  {{item.categoryName}}
               </view>
            </view>
            </scroll-view>
         </view>

         <view class="content">
            <!-- <view class="row flex  j-c-s-b a-i-c" v-if="tenantList.length">
            <view v-for="(item,index) in statistics" :key="index" class="row-item bgc-ff flex a-i-c">
               <view v-if="item.term =='shortTerm' " class="dot bgc-orange"></view>
               <view v-if="item.term =='middleTerm' " class="dot bgc-main"></view>
               <view v-if="item.term =='longTerm' " class="dot bgc-green"></view>
               <text class="f-24">{{formatTerm(item.term)}}{{item.total}}户 ({{item.personNum}})人</text>
            </view>
         </view> -->

            <view class="list bgc-ff" v-for="(records,index) in tenantList" :key="index">
               <view class="flex j-c-s-b a-i-c">
                  <view class="flex a-i-c">
                     <text class="f-32 mr-50">{{ records.tenantName }}</text>
                     <view class="flex a-i-c">
                        <u-icon name="phone-fill" color="#017BFC"></u-icon>
                        <text class="f-28 ml-10">{{ records.phone || '未填写' }}</text>
                     </view>
                  </view>
                  <u-tag :text="showStatus(records.auditStatus)" type="success" plain plainFill></u-tag>
               </view>
               <view class="list-address f-28 c-99">
                  {{ records.houseName }}
               </view>
               <view class="list-action flex ">
                  <view class="action-item" @click="tenantManage(records)">
                     <u-icon name="/static/icon/list-02.png" width="40rpx" height="40rpx"></u-icon>
                     <text class="f-28 c-main ml-10">租客管理</text>
                  </view>
                  <view class="action-item">
                     <u-icon name="/static/icon/list-01.png" width="40rpx" height="40rpx"></u-icon>
                     <text class="f-28 c-main ml-10">走访日志</text>
                  </view>
               </view>
            </view>
         </view>
         <u-toast ref="uToast"></u-toast>
         <!-- <u-loadmore :status="loadingStatus" loadmoreText="开始加载" loadingText="数据加载中" nomoreText="已经到底了" line />-->
      </z-paging>
			
       </u-popup>
		
   </view>
</template>

<script>
   import {
      getRentalHouseContent,
      getStatistics
   } from '@/api/houseRental/houseRental.js'
    getLabelCate
   } from "@/api/label/categoryLabel.js";
   export default {
      data() {
         return {

            tabsList: [{
                  name: '全部',
                  value: ''
               },
               {
                  name: '待确认',
                  value: '0'
               },
               {
                  name: '已确认',
                  value: '1'
               },
               {
                  name: '未到期',
                  value: '10'
               },
               {
                  name: '即将到期',
                  value: '20'
               },
               {
                  name: '已到期',
                  value: '30'
               }
            ],


            filterData: [
               [{
                     name: '全部',
                     value: ''
                  },
                  {
                     name: '待确认',
                     value: '0'
                  },
                  {
                     name: '已确认',
                     value: '1'
                  },
                  // {
                  //    name: '审核不通过',
                  //    value: '2'
                  // },
                  {
                     name: '未到期',
                     value: '10'
                  },
                  {
                     name: '即将到期',
                     value: '20'
                  },
                  {
                     name: '已到期',
                     value: '30'
                  }
               ],
               [{
                     name: '楼层',
                     value: ''
                  },
                  {
                     name: '1楼',
                     value: '1'
                  },
                  {
                     name: '2楼',
                     value: '2'
                  },
                  {
                     name: '3楼',
                     value: '3'
                  }
               ]
            ],
            defaultIndex: [0, 0],
            keyword: "",
            statistics: [],
            tenantList: [],
            loadingStatus: 'nomore',
            pagingParams: {
               current: 1,
               size: 10
            },
            selectParams: {},
            tenantStatus: [{
                  name: '未到期',
                  value: 0
               },
               {
                  name: '已到期',
                  value: 1
               },
               {
                  name: '已终止',
                  value: 2
               },
            ],
            tabIndex: 0
           isShow:false,
              categoryList:[],
           childList:[],
           fIndex:0,
           cId:null,
           showLabelList:[]
         }
      },
      computed: {
         formatTerm() {
            return (term => {
               if (term == 'longTerm') {
                  return "长期"
               } else if (term == 'middleTerm') {
                  return "中期"
               } else if (term == 'shortTerm') {
                  return "短期"
               }
            })
         }
      },
		
      onLoad() {
         this.currentRole = uni.getStorageSync('activeRole')
         // this.getStatistics()
         this.getCategory(1);
         getLabelCate().then(res=>{
            console.log(res)
         })
      },
      onShow() {
         this.tenantList = []
         // this.getRentalHouseInfo()
      },
      // onReachBottom() {
      //    this.pagingParams.current++
      //    this.getRentalHouseInfo()
      // },
	
      methods: {
            refreshList(){
               this.keyword = "";
               this.$refs.paging.reload();
            },
         queryList(pageNo, pageSize) {
            getRentalHouseContent({
               tenantName: this.keyword,
                  current: pageNo,
                  size: pageSize
               }

            ).then(res => {
               console.log(res);
               this.$refs.paging.complete(res.data.records);
            })
         },

         showStatus(status) {
            for (let i of this.tabsList) {
               if (i.value == status) {
                  return i.name
               }
            }
         },

         handleSelect(res) {
            const [auditStatus, floor] = res
            this.resetParams()
            let params = {}
            if (auditStatus[0].value !== '') {
               params = {
                  auditStatus: auditStatus[0].value
               }
            }
            if (floor[0].value !== '') {
               params = {
                  ...params,
                  floor: floor[0].value
               }
            }
            this.selectParams = params
            this.getRentalHouseInfo()
            this.getStatistics(auditStatus[0].value)
            // 回到顶部，避免触发触底加载
            uni.pageScrollTo({
               scrollTop: 0, // 滚动到页面的目标位置（单位px）
            });
         },


         tabClick(item) {
            this.tabIndex = item.index;
            this.pagingParams.current = 1;
            this.pagingParams.auditStatus = item.value;
            this.tenantList = []
            this.getRentalHouseInfo()
            // this.getStatistics(item.value)
         },


         getStatistics(auditStatus = '') {
            const {
               roleName
            } = this.currentRole
            let params = {
               roleName
            }
            if (auditStatus) {
               params = {
                  auditStatus,
                  roleName
               }
            }
            getStatistics(params).then(res => {
               this.statistics = res.data
            })
         },
         findObjValue(value, obj) {
            const res = obj.find(item => {
               return item.value == value
            })
            return res.name
         },
         async getRentalHouseInfo(params = {}) {
            this.$nextTick(() => {
               this.loadingStatus = 'loadmore'
               this.$refs.uToast.show({
                  type: 'loading',
                  message: '正在加载',
                  duration: 9999999
               })
            })
            const {
               roleName
            } = this.currentRole
            const {
               code,
               data: {
                  records
               }
            } = await getRentalHouseContent({
               tenantName: this.keyword,
               ...this.pagingParams,
               roleName,
               ...this.selectParams
            })
            if (code !== 200) {
               uni.showToast({
                  title: "数据请求错误",
                  icon: "error"
               })
               return
            }
            this.tenantList = [...this.tenantList, ...records]
            this.$nextTick(() => {
               this.$refs.uToast.isShow = false
            })
            this.loadingStatus = 'nomore'
         },
         search() {
            this.resetParams()
            this.getRentalHouseInfo()
         },
         clear() {
            this.keyword = ''
            this.resetParams()
            this.search()
         },
         tenantManage({
            houseCode,
            id
         }) {
            this.$u.func.globalNavigator(`/subPackage/bs/views/rentDetail?houseCode=${houseCode}&id=${id}`)
         },
         resetParams() {
            this.tenantList = []
            this.pagingParams = {
               current: 1,
               size: 10
            }
         }
              getCategory(level,id){
              let params = {
                 level
              }
              if(level == 2){
                 params.parentNo = id;
              }
              getLabelCate(params).then(res=>{
                 if(res.code == 200){
                    if(level == 2){
                       let data = res.data;
                       for(let i of data){
                          i.isSelect = false;
                       }
                       this.childList = data;
                    }else {
							 
                       this.categoryList = res.data;
                    }
                 }
              })
           },
           handleSelect(item,index){
              this.fIndex = index;
              this.getCategory(2,item.categoryNo);
           },
           handleSelectChild(item,index){
              // this.cId = item.id;
				  
				  
              this.childList[index].isSelect = !this.childList[index].isSelect
				  
				 
				  
				  
				  
           }
      }
   }
</script>
@@ -344,92 +100,35 @@
   page {
      background-color: #F5F5F5;
   }

   .header {
      width: 100%;
      // position: fixed;
      /*#ifdef H5*/
      top: 88rpx;
      /*#endif*/
      /*#ifdef MP-WEIXIN*/
      top: 0;
      /*#endif*/
      left: 0;
      // z-index: 10;
   .cell{
      padding:20rpx;
   }

   .filter-box {
      width: 100%;
      height: 100rpx;

   .popup-title{
      padding: 20rpx 0;
      text-align: center;
   }

   .search-box {
      padding: 20rpx 24rpx 30rpx;
   .scroll{
      height:700rpx;
   }

   .content {
      width: 100%;
      margin-top: 220rpx;
      padding: 0 30rpx;
      box-sizing: border-box;

      .row {
   .scroll:first-child{
      width:40%;
   }
   .scroll:last-child{
      width:60%;
   }
   .popup-list{
      width:100%;
      height:700rpx;
      .bgc-f4{
         background-color:#f4f4f4;
      }
      .popup-box{
         width: 100%;
         padding: 20rpx 0;
      }

      .row-item {
         width: calc(100% / 3 - 10rpx);
         height: 46rpx;
         border-radius: 30rpx;
         padding: 0 20rpx;
         box-sizing: border-box;
      }

      .dot {
         width: 10rpx;
         height: 10rpx;
         border-radius: 50%;
         margin-right: 18rpx;
      }

      .bgc-green {
         background-color: #30D17C;
      }

      .bgc-orange {
         background-color: #FFAC3D;
      }

      .list {
         width: 100%;
         padding: 30rpx 30rpx 0;
         box-sizing: border-box;
         margin-bottom: 20rpx;
         border-radius: 8rpx;

         .list-address {
            padding: 30rpx 0;
         }

         .list-action {
            padding: 22rpx 0 30rpx;
            border-top: 1px solid #F5F5F5;
         }

         .action-item {
            display: flex;
            flex: 1;
            justify-content: center;
         }

         .action-item:first-child {
            border-right: 1px solid #DBDBDB;
         }

         .mr-50 {
            margin-right: 50rpx;
         height:700rpx;
         .box-item{
            width:100%;
            padding:30rpx;
            box-sizing: border-box;
         }
      }
   }