<template>
|
<view class="container">
|
<search-bar placeholder="客户姓名、手机、卡号、拼音"></search-bar>
|
<view class="flex justify-between">
|
<navigator :url="'./customerInfo?type='+type" hover-class="none" 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>
|
<view class="flex-1 flex align-center justify-between member-list-con">
|
<view>
|
<text>李广</text>
|
<text class="ml-10">152****9645</text>
|
</view>
|
<view>
|
<text class="blue">东莞店</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
</view>
|
</view>
|
</navigator>
|
<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']
|
};
|
},
|
onLoad(options) {
|
if(options.type){
|
this.type = options.type;
|
}
|
},
|
methods:{
|
caculateBgcolor(index){
|
return this.colors[index%8];
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container{
|
padding: 10px 10px 0;
|
}
|
.sort-wrap{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 14px;
|
}
|
.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;
|
}
|
.member-list{
|
font-size: 15px;
|
}
|
.member-list-con{
|
padding: 20px 0 20px 5px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.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>
|
