<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="flex-1 flex align-center justify-between member-list-con">
|
<view class="flex flex-v">
|
<text class="mb-10">
|
<text>{{item.vipName}}</text>
|
<text class="vip-level" v-if="item.vipLevel">{{item.vipLevel}}</text>
|
</text>
|
<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>
|
</view>
|
</view>
|
<no-record :isShow="!list.length"></no-record>
|
<view class="footer">
|
<text>已选：{{selectId?1:0}}人</text>
|
<button class="blue-btn btn mr-0" @click="confirm">确定</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import searchBar from '../../components/searchBar/index.vue';
|
export default {
|
components:{
|
searchBar
|
},
|
data() {
|
return {
|
colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
|
queryKey: '',
|
list: [],
|
selectId: '',
|
selectName: ''
|
};
|
},
|
onLoad(options) {
|
if(options.selectId!='null'){
|
this.selectId = options.selectId
|
}
|
this.loadMemberList()
|
},
|
methods:{
|
caculateBgcolor(index){
|
return this.colors[index%8];
|
},
|
search(val){
|
this.queryKey = val;
|
this.loadMemberList();
|
},
|
loadMemberList(){
|
this.$httpUtils.request('/api/vip/findVipInfoList', {
|
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
|
return Object.assign(item, {isCheck: true})
|
}
|
return Object.assign(item, {isCheck: false})
|
});
|
}
|
})
|
},
|
checkOnchange(item){
|
if(!item.isCheck){
|
this.list.forEach((item) => {
|
item.isCheck = false;
|
});
|
item.isCheck = true
|
this.selectId = item.id;
|
this.selectName = item.vipName;
|
}else{
|
item.isCheck = false;
|
this.selectId = '';
|
this.selectName = '';
|
}
|
},
|
confirm(){
|
let pages = getCurrentPages();
|
let prevPage = pages[ pages.length - 2 ];
|
prevPage.$vm.setData && prevPage.$vm.setData({
|
name: this.selectName,
|
id: this.selectId
|
});
|
uni.navigateBack()
|
}
|
},
|
filters:{
|
formatName(val){
|
if(!val){
|
return '无'
|
}
|
val = val.trim();
|
return val.substr(0, 1)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container{
|
padding: 10px 10px 0;
|
}
|
.sort-wrap{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 13px;
|
}
|
.sort-wrap .iconfont{
|
font-size: 14px;
|
padding-left: 4px;
|
}
|
.first-name{
|
display: inline-block;
|
width: 38px;
|
height: 38px;
|
line-height: 38px;
|
margin-right: 10px;
|
border-radius: 50%;
|
text-align: center;
|
color: #FFFFFF;
|
font-size: 16px;
|
}
|
.member-list{
|
font-size: 14px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.member-list-con{
|
padding: 12px 5px 12px 5px;
|
|
}
|
.member-list .iconfont{
|
font-size: 22px;
|
}
|
.member-list .vip-level{
|
border: 1px solid #666;
|
margin-left: 10px;
|
font-size: 12px;
|
border-radius: 12px;
|
padding: 2px 12px;
|
color: #666666;
|
}
|
.footer{
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #FFFFFF;
|
padding: 10px 10px;
|
box-shadow: 0 6px 100px rgba(237,234,244,1);
|
}
|
.footer .btn{
|
border-radius: 20px;
|
line-height: 34px;
|
padding: 0 40px;
|
font-size: 14px;
|
}
|
|
</style>
|
