176 lines
3.2 KiB
Vue
176 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="list-header">
|
|
<text class="total">共{{ list.length }}条</text>
|
|
</view>
|
|
<scroll-view class="customer-list" scroll-y>
|
|
<view
|
|
class="customer-card"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@click.stop="$emit('itemClick', item)">
|
|
<view class="customer-header">
|
|
<text class="customer-name-text">{{ item.name }}</text>
|
|
<view class="intent-badge" :class="item.intent === '高' ? 'intent-high' : 'intent-medium'">
|
|
<text>意向{{ item.intent }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="customer-service-info">
|
|
<text>服务人员:{{ item.serviceStaff }} 服务{{ item.serviceCount }}次 上次服务:{{ item.lastService }}</text>
|
|
</view>
|
|
<view class="customer-tags">
|
|
<view
|
|
class="tag-item"
|
|
:class="'tag-' + tag.color"
|
|
v-for="(tag, tagIndex) in item.tags"
|
|
:key="tagIndex">
|
|
<text>{{ tag.text }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="customer-footer" v-if="item.phone || item.budget">
|
|
<text class="customer-phone" v-if="item.phone">{{ item.phone }}</text>
|
|
<text class="customer-budget" v-if="item.budget">{{ item.budget }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CustomerList',
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 32rpx;
|
|
background-color: #FFFFFF;
|
|
border-bottom: 1px solid #F0F0F0;
|
|
}
|
|
|
|
.total {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.customer-list {
|
|
height: calc(100vh - 300rpx);
|
|
background-color: #F5F5F5;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.customer-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.customer-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.customer-name-text {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.intent-badge {
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.intent-high {
|
|
background-color: #E3F2FD;
|
|
}
|
|
|
|
.intent-high text {
|
|
font-size: 24rpx;
|
|
color: #1976D2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.intent-medium {
|
|
background-color: #FFF3E0;
|
|
}
|
|
|
|
.intent-medium text {
|
|
font-size: 24rpx;
|
|
color: #F57C00;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.customer-service-info {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.customer-service-info text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.customer-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20rpx;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.tag-item {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.tag-orange {
|
|
background-color: #FFF3E0;
|
|
}
|
|
|
|
.tag-orange text {
|
|
font-size: 24rpx;
|
|
color: #F57C00;
|
|
}
|
|
|
|
.tag-blue {
|
|
background-color: #E3F2FD;
|
|
}
|
|
|
|
.tag-blue text {
|
|
font-size: 24rpx;
|
|
color: #1976D2;
|
|
}
|
|
|
|
.customer-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 16rpx;
|
|
border-top: 1px solid #F0F0F0;
|
|
}
|
|
|
|
.customer-phone {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.customer-budget {
|
|
font-size: 26rpx;
|
|
color: #1976D2;
|
|
}
|
|
</style>
|
|
|