| | |
| | | <template> |
| | | <view class="container"> |
| | | <search-bar :placeholder=placeholder></search-bar> |
| | | <view class="flex justify-between" @click="linkTo('./customerInfo')"> |
| | | <search-bar @confirm="search"></search-bar> |
| | | <view class="flex justify-between"> |
| | | <view class="flex-1 mr-10"> |
| | | <view class="member-list flex align-center" v-for="(item, index) in 15"> |
| | | <text class="first-name" :style="{background: caculateBgcolor(index)}">李</text> |
| | | <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> |
| | | <text>李广</text> |
| | | <text class="ml-10">152****9645</text> |
| | | <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">东莞店</text> |
| | | <text class="iconfont iconarrow-backimg gray"></text> |
| | | <text class="blue">{{item.shopName}}</text> |
| | | <text class="iconfont iconarrow-backimg light-gray"></text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </navigator> |
| | | <no-record :isShow="!list.length"></no-record> |
| | | </view> |
| | | <indexed-list></indexed-list> |
| | | </view> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | placeholder:"客户姓名、手机、卡号、拼音", |
| | | type: 1 ,//1新建订单 2新建服务单 |
| | | colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'], |
| | | filterType: 1, |
| | | queryKey: '', |
| | | list: [] |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | | if(options.type){ |
| | | this.type = options.type; |
| | | } |
| | | this.loadMemberList() |
| | | }, |
| | | methods:{ |
| | | caculateBgcolor(index){ |
| | | return this.colors[index%8]; |
| | | }, |
| | | linkTo(val){ |
| | | uni.navigateTo({ |
| | | url:val |
| | | }) |
| | | search(val){ |
| | | this.queryKey = val; |
| | | this.loadMemberList(); |
| | | }, |
| | | loadMemberList(){ |
| | | uni.showLoading({ |
| | | mask: true, |
| | | title: '加载中' |
| | | }); |
| | | let parma = Object.assign({ |
| | | order: this.order, |
| | | queryKey: this.queryKey, |
| | | sort: this.sort |
| | | }, this.filterKeys) |
| | | this.$httpUtils.request('/api/vip/findVipInfoList', parma, 'POST').then((res) => { |
| | | if(res.status == 200){ |
| | | this.list = res.rows; |
| | | } |
| | | this.$nextTick(function(){ |
| | | uni.hideLoading() |
| | | }) |
| | | }).catch((err) => { |
| | | uni.hideLoading() |
| | | }) |
| | | } |
| | | }, |
| | | filters:{ |
| | | formatName(val){ |
| | | if(!val){ |
| | | return '无' |
| | | } |
| | | val = val.trim(); |
| | | return val.substr(0, 1) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | 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; |
| | |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | color: #FFFFFF; |
| | | font-size: 16px; |
| | | } |
| | | .member-list{ |
| | | font-size: 15px; |
| | | font-size: 14px; |
| | | } |
| | | .member-list-con{ |
| | | padding: 20px 0 20px 5px; |
| | | 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; |