浅念
113 lines
2.9 KiB
Vue
113 lines
2.9 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="contents" v-for="(item, index) in list" :key="index" @click="handleItemClick(item)">
|
|
<view class="top">
|
|
<view class="">{{item.created_at}}</view>
|
|
<view class="right">
|
|
<text class="medal" :style="{color:(item.magnitude == 0 ?'#F5AB00' : item.magnitude == 1 ?'#8495B8': '#9B7200')}">{{item.magnitude_txt}}</text>
|
|
<text class="tag" :style="{background:(item.follow == 0 ?'#3471FF' : item.follow == 1 ?'#27C89C': '#FF4040')}">{{item.follow_txt}}</text>
|
|
<!-- <text class="tag" :style="{background:(item.follow == 0 ?'#3471FF' : item.follow == 1 ?'#27C89C': '#FF4040')}">{{$t('followup')}}</text> -->
|
|
</view>
|
|
</view>
|
|
<u-line margin="20rpx 0px"></u-line>
|
|
<view class="cont">
|
|
<view class="title">
|
|
<view class=""><text class="name">{{item.contacts}}</text><text class="phone">{{item.phone}}</text></view>
|
|
<view class="ststus">{{item.grade_txt}}</view>
|
|
</view>
|
|
<view class="info"><text class="sex">{{item.sex_txt}}</text> | <text class="addr">{{item.country_name}}</text><text class="type">{{item.car_type_name}}</text>
|
|
</view>
|
|
<view class="desc">{{item.describe}}</view>
|
|
<!-- <slot name="footer">
|
|
<text></text>
|
|
</slot> -->
|
|
<!-- <slot name="footertab">
|
|
<view class="desc1">
|
|
<view class="" @click="phoneClick(item)"><image src="/static/image/customer/phone.png" mode=""></image> 呼叫</view>
|
|
<view class="" @click="editClick(item)"><image src="/static/image/customer/edit.png" mode=""></image> 跟进</view>
|
|
<view class="" @click="delClick(item)"><image src="/static/image/customer/trash.png" mode=""></image> 删除</view>
|
|
</view>
|
|
</slot> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "index",
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
},
|
|
methods:{
|
|
handleItemClick(item) {
|
|
this.$emit('click', item);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.contents{
|
|
background-color: #FFFFFF;
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
.top{
|
|
padding: 10px 15px 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.tag{
|
|
color: white;
|
|
border-radius: 20px 0px 0px 20px;
|
|
padding: 3px 10px;
|
|
margin-right: -15px;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
align-items: center;
|
|
.medal{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.cont{
|
|
padding: 0px 15px 10px;
|
|
font-size: 24rpx;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #222222;
|
|
.name{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
.phone{
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.ststus{
|
|
color: #666666;
|
|
}
|
|
.info,.desc{
|
|
color: #78758E;
|
|
line-height: 26px;
|
|
}
|
|
.sex{
|
|
margin-right: 5px;
|
|
}
|
|
.addr{
|
|
margin-left: 5px;
|
|
}
|
|
.type{
|
|
margin-left: 5px;
|
|
color: #3471FF;
|
|
}
|
|
}
|
|
}
|
|
</style> |