<template> <view class="moreShelfPart flex flex_column"> <view class="moreShelfPart-search"> <u-search placeholder="请输入客户名称搜索" v-model="customerName" :show-action="isGobleSearch" @input="change" @focus="isGobleSearch=true" @blur="isGobleSearch=false" @custom="search" @search="search" @clear="$delayDel(clearSearch)" :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', 'padding': '12upx 0'}"> </u-search> </view> <view class="moreShelfPart-body"> <scroll-view class="nav-right" scroll-y @scrolltolower="onreachBottom"> <view class="nav-right-item" v-for="(item, index) in shelfList" :key="item.id" @click="viewDetail(item)"> <view class="item-info uni-col-10"> <view class="item-name"> <text>{{item.customerName}}</text> </view> </view> <view class="arrow" v-if="item.customerSn == checkedSn"> <u-icon name="checkbox-mark" color="#3dc50b" size="28"></u-icon> </view> </view> <view v-if="shelfList&&shelfList.length==0"> <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty> </view> <view style="padding: 20upx;" v-else> <u-loadmore :status="status" /> </view> </scroll-view> </view> </view> </template> <script> import { customerList } from '@/api/customer.js' export default { data() { return { customerName: '', isGobleSearch: false, shelfList: [], pageNo:1, pageSize: 30, total: 0, // 列表总数 noDataText: '暂无客户', status: 'loading', vinstatus: 'loading', checkedSn: null } }, onLoad(opts) { this.checkedSn = opts.customerSn this.getShelfList() }, methods: { clearSearch(){ this.customerName = '' this.search() }, change(v){ if(v==''){ this.clearSearch() } }, search(){ this.pageNo = 1 this.shelfList = [] this.getShelfList() }, // 获取客户列表 getShelfList(){ const _this = this let params = { pageNo: this.pageNo, pageSize: this.pageSize, customerName: this.customerName, dealerFlag: 0, enabledFlag : 1 //1启用客户 0 禁用用户 } _this.status = 'loading' customerList(params).then(res => { uni.hideLoading() if(res.status == 200){ let list = res.data.list if (list && list.length){ // 分页 拼接数据 if(_this.pageNo>1){ _this.shelfList = _this.shelfList.concat(res.data.list || []) }else{ _this.shelfList = res.data.list || [] _this.shelfList.unshift({ customerSn: '', customerName: '全部客户' }) } _this.total = res.data.count if (_this.shelfList.length == res.data.count) { _this.status = 'nomore' } else { _this.status = 'loadmore' } } else { _this.shelfList = list || [] _this.total = 0 _this.status = 'nomore' } _this.noDataText = '暂无客户' }else{ _this.status = 'loadmore' _this.shelfList = [] _this.total = 0 _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } }) }, // 加载更多 onreachBottom () { if(this.shelfList.length < this.total ){ if(this.isGobleSearch&&this.customerName==''){ return } this.pageNo++ this.getShelfList() }else{ this.status = "nomore" } }, viewDetail(item){ console.log('111111',item) uni.$emit('chooseShelfOk',item) uni.navigateBack() } } } </script> <style lang="less"> .moreShelfPart{ width: 100%; height: 100vh; padding: 0; .moreShelfPart-search{ padding: 20rpx; background-color: #FFFFFF; } .moreShelfPart-body{ flex-grow: 1; background-color: #fff; } .nav-right{ padding: 0 0; height: calc(100vh - 110rpx); box-sizing: border-box; .nav-right-item{ padding:20upx; border-bottom: 2rpx solid #f5f5f5; display: flex; align-items: center; &:active{ background: #f8f8f8; } .arrow{ text-align: right; padding-left: 20rpx; } .item-info{ .item-name{ font-size: 30upx; display: flex; align-items: center; } .item-detail{ margin-top: 10rpx; .item-detail-text{ font-size: 30upx; color: #9DA8B5; word-break: break-all; } } } } } } </style>