gx

queenwuli

2021-01-15 4b80c98ef5fda8d6358778f2efe8bb35cb20ccf9

 hive-app/pages/member/selectCustomer.vue

@@ -1,8 +1,11 @@
<template>
   <view class="container">
      <search-bar @confirm="search"></search-bar>
      <view class="member-list flex align-center" v-for="(item, index) in list">
         <text class="first-name" :style="{background: caculateBgcolor(index)}">{{item.vipName | formatName}}</text>
      <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>
            <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">
            <view class="flex flex-v">
               <text class="mb-10">
@@ -12,13 +15,12 @@
               <text class="font-13 gray">{{$utils.encryptAccount(item.phone)}}</text>
            </view>
            <text class="iconfont" 
               :class="item.isCheck?'iconxuanzhong blue':'iconweixuanzhong gray'" 
               @click="checkOnchange(item)"></text>
               :class="item.isCheck?'iconxuanzhong blue':'iconweixuanzhong gray'" ></text>
         </view>
      </view>
      <no-record :isShow="!list.length"></no-record>
      <view class="footer">
         <text>已选：{{selectId?1:0}}人</text>
         <text>已选：{{selectItems.length?selectItems.length:0}}人</text>
         <button class="blue-btn btn mr-0" @click="confirm">确定</button>
      </view>
   </view>
@@ -35,13 +37,18 @@
            colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
            queryKey: '',
            list: [],
            selectId: '',
            selectName: ''
            selectIds: '',
            selectItems: [],
            multiSelect: false, //单选/多选，默认多选
         };
      },
      onLoad(options) {
         // 选中的id，逗号分隔
         if(options.selectId!='null'){
            this.selectId = options.selectId
            this.selectIds = options.selectId
         }
         if(options.multiSelect){
            this.multiSelect = new Boolean(options.multiSelect);
         }
         this.loadMemberList()
      },
@@ -56,11 +63,16 @@
         loadMemberList(){
            this.$httpUtils.request('/api/vip/findVipInfoList', {
               queryKey: this.queryKey
            }, 'POST').then((res) => {
            }, 'POST', {isShowLoad: true}).then((res) => {
               if(res.status == 200){
                  this.list = res.rows.map((item) => {
                     if(this.selectId && this.selectId == item.id){
                        this.selectName = item.vipName
                     let index = this.selectItems.findIndex((op) => {
                        return op.id == item.id
                     });
                     if(this.selectIds && this.selectIds.indexOf(item.id) > -1){
                        if(index == -1){
                           this.selectItems.push(item);
                        }
                        return Object.assign(item, {isCheck: true})
                     }
                     return Object.assign(item, {isCheck: false})
@@ -69,26 +81,42 @@
            })
         },
         checkOnchange(item){
            if(this.multiSelect){
               this.multiChange(item)
            }else{
               this.singChange(item)
            }
         },
         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()
         }
      },
@@ -106,7 +134,7 @@

<style scoped>
   .container{
      padding: 10px 10px 0;
      padding: 10px 10px 64px;
   }
   .sort-wrap{
      display: flex;
@@ -117,6 +145,12 @@
   .sort-wrap .iconfont{
      font-size: 14px;
      padding-left: 4px;
   }
   .avatar{
      display: inline-block;
      width: 38px;
      height: 38px;
      border-radius: 50%;
   }
   .first-name{
      display: inline-block;
@@ -162,7 +196,7 @@
   }
   .footer .btn{
       border-radius: 20px;
       line-height: 34px;
       line-height: 36px;
       padding: 0 40px;
       font-size: 14px;
   }