gx

queenwuli

2021-01-25 c4246ca910f28014efaace64ebf92f47a673a9cf

 hive-app/pages/member/selectCustomer.vue

@@ -3,7 +3,7 @@
      <search-bar @confirm="search"></search-bar>
      <view class="member-list flex align-center" v-for="(item, index) in list" @click="checkOnchange(item)">
         <template>
            <image v-if="item.photo" src="item.photo" class="avatar"></image>
            <image v-if="item.photo" :src="item.photo" class="avatar"></image>
            <text v-else class="first-name" :style="{background: caculateBgcolor(index)}">{{item.vipName | formatName}}</text>
         </template>
         <view class="flex-1 flex align-center justify-between member-list-con">
@@ -19,8 +19,11 @@
         </view>
      </view>
      <no-record :isShow="!list.length"></no-record>
      <view v-if="list.length">
         <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
      </view>
      <view class="footer">
         <text>已选：{{selectId?1:0}}人</text>
         <text>已选：{{selectIds?selectIds.split(',').length:0}}人</text>
         <button class="blue-btn btn mr-0" @click="confirm">确定</button>
      </view>
   </view>
@@ -28,8 +31,10 @@

<script>
   import searchBar from '../../components/searchBar/index.vue';
   import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
   export default {
      components:{
         uniLoadMore,
         searchBar
      },
      data() {
@@ -37,60 +42,119 @@
            colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
            queryKey: '',
            list: [],
            selectId: '',
            selectName: ''
            selectIds: '',
            selectItems: [],
            multiSelect: false, //单选/多选，默认多选
            loadStatus: 'more',
            pageNum: 1
         };
      },
      onLoad(options) {
         // 选中的id，逗号分隔
         if(options.selectId!='null'){
            this.selectId = options.selectId
            this.selectIds = options.selectId
         }
         if(options.multiSelect){
            this.multiSelect = new Boolean(options.multiSelect);
         }
      },
      onShow() {
         this.loadMemberList()
      },
      onReachBottom(){
         this.loadMemberList()
      },
      methods:{
         reloadData(){
            this.list = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadMemberList();
         },
         caculateBgcolor(index){
            return this.colors[index%8];
         },
         search(val){
            this.queryKey = val;
            this.loadMemberList();
            this.reloadData();
         },
         loadMemberList(){
            if(this.loadStatus!=='more'){
               return;
            }
            let selectedArr = this.selectIds?this.selectIds.split(','):[];
            this.$httpUtils.request('/api/vip/findVipInfoList', {
               pageNum: this.pageNum,
               pageSize: 15,
               queryKey: this.queryKey
            }, 'POST').then((res) => {
               if(res.status == 200){
                  this.list = res.rows.map((item) => {
                     if(this.selectId && this.selectId == item.id){
                        this.selectName = item.vipName
                  let result = res.rows;
                  if(result.length < 15){
                     this.loadStatus = 'noMore';
                  } else {
                     this.pageNum ++ ;
                     this.loadStatus = 'more';
                  }
						
                  result = result.map((item) => {
                     let index = this.selectItems.findIndex((op) => {
                        return op.id == item.id
                     });
                     if(this.selectIds && selectedArr.includes(item.id.toString())){
                        if(index == -1){
                           this.selectItems.push(item);
                        }
                        return Object.assign(item, {isCheck: true})
                     }
                     return Object.assign(item, {isCheck: false})
                  });
                  this.list = this.list.concat(result);
               }
            })
         },
         checkOnchange(item){
            if(this.multiSelect){
               this.multiChange(item)
            }else{
               this.singChange(item)
            }
            let selectedArr = this.selectItems.map((item) => {
               return item.id;
            })
            this.selectIds = selectedArr.length?selectedArr.join(','):'';
         },
         singChange(item){
            if(!item.isCheck){
               this.list.forEach((item) => {
                  item.isCheck = false;
               this.list.forEach((op) => {
                  op.isCheck = false;
               });
               item.isCheck = true
               this.selectId = item.id;
               this.selectName = item.vipName;
               item.isCheck = true;
               this.selectItems = [item];
            }else{
               item.isCheck = false;
               this.selectId = '';
               this.selectName = '';
               this.selectItems = [];
            }
				
         },
         multiChange(item){
            let index = this.selectItems.findIndex((op) => {
               return op.id == item.id
            });
            if(!item.isCheck){
               item.isCheck = true;
               this.selectItems.push(item);
            }else{
               item.isCheck = false;
               this.selectItems.splice(index,1);
            }
         },
         confirm(){
            let pages = getCurrentPages(); 
            let prevPage = pages[ pages.length - 2 ];  
            prevPage.$vm.setData && prevPage.$vm.setData({
               name: this.selectName,
               id: this.selectId
            });
            let prevPage = pages[ pages.length - 2 ]; 
            if(this.selectItems.length){
               prevPage.$vm.setData && prevPage.$vm.setData(this.selectItems);
            }
            uni.navigateBack()
         }
      },
@@ -170,7 +234,7 @@
   }
   .footer .btn{
       border-radius: 20px;
       line-height: 34px;
       line-height: 36px;
       padding: 0 40px;
       font-size: 14px;
   }