|
@@ -0,0 +1,195 @@
|
|
|
+<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="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="index" @click="viewDetail(item)">
|
|
|
+ <view class="item-info uni-col-10">
|
|
|
+ <view class="item-name" v-if="item.customer">
|
|
|
+ <text>{{item.customer.customerName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="arrow" v-if="item.targetSn == 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'
|
|
|
+ import { queryCustomerPage } from '@/api/verify.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,
|
|
|
+ allCustomerFlag: 1
|
|
|
+ }
|
|
|
+ _this.status = 'loading'
|
|
|
+ queryCustomerPage(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 || []
|
|
|
+ let obj={}
|
|
|
+ obj.targetSn = ''
|
|
|
+ obj.customer={
|
|
|
+ customerSn: '',
|
|
|
+ customerName: '全部客户'
|
|
|
+ }
|
|
|
+ _this.shelfList.unshift(obj)
|
|
|
+ }
|
|
|
+ _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){
|
|
|
+ uni.$emit('chooseShelfOk',item.customer)
|
|
|
+ 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>
|