<template>
|
<view class="container">
|
<search-bar @confirm="search"></search-bar>
|
<view class="flex justify-between">
|
<view class="flex-1 mr-10">
|
<navigator class="member-list flex align-center"
|
:url="'./customerInfo?type='+type+'&id='+item.id"
|
hover-class="none"
|
v-for="(item, index) in list">
|
<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">
|
<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>
|
<view>
|
<text class="blue">{{item.shopName}}</text>
|
<text class="iconfont iconarrow-backimg light-gray"></text>
|
</view>
|
</view>
|
</navigator>
|
<no-record :isShow="!list.length"></no-record>
|
</view>
|
<indexed-list></indexed-list>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import searchBar from '../../components/searchBar/index.vue';
|
import indexedList from '../../components/indexedList/index.vue';
|
export default {
|
components:{
|
searchBar,
|
indexedList
|
},
|
data() {
|
return {
|
type: 1 ,//1新建订单 2新建服务单
|
colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
|
queryKey: '',
|
list: []
|
};
|
},
|
onLoad(options) {
|
if(options.type){
|
this.type = options.type;
|
}
|
this.loadMemberList()
|
},
|
methods:{
|
caculateBgcolor(index){
|
return this.colors[index%8];
|
},
|
search(val){
|
this.queryKey = val;
|
this.loadMemberList();
|
},
|
loadMemberList(){
|
let parma = Object.assign({
|
order: this.order,
|
queryKey: this.queryKey,
|
sort: this.sort
|
}, this.filterKeys)
|
this.$httpUtils.request('/api/vip/findVipInfoList', parma, 'POST', {isShowLoad: true}).then((res) => {
|
if(res.status == 200){
|
this.list = res.rows;
|
}
|
})
|
}
|
},
|
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;
|
}
|
.avatar{
|
display: inline-block;
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
}
|
.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;
|
}
|
.member-list-con{
|
padding: 15px 0 15px 5px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.member-list .vip-level{
|
border: 1px solid #666;
|
margin-left: 10px;
|
font-size: 12px;
|
border-radius: 12px;
|
padding: 2px 12px;
|
color: #666666;
|
}
|
.quick-entry{
|
position: fixed;
|
bottom: 80px;
|
right: 15px;
|
width: 50px;
|
height: 50px;
|
line-height: 50px;
|
text-align: center;
|
border-radius: 50%;
|
background: #518EFF;
|
color: #FFFFFF;
|
box-shadow: 4px 4px 5px #ddd;
|
}
|
.quick-entry .iconfont{
|
font-size: 24px;
|
}
|
</style>
|
