You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
3.0 KiB
62 lines
3.0 KiB
<template>
|
|
<ul class="ant-timeline" v-if="list && list.length" :style="{paddingTop: list.length == 1 ? '24px' : '10px'}" >
|
|
<li class="ant-timeline-item" :style="{padding: list.length > 1 ? '0 0 10px' : '0px'}" v-if="list.length >= 1">
|
|
<div class="ant-timeline-item-tail" v-if="list.length > 1"></div>
|
|
<div class="ant-timeline-item-head ant-timeline-item-head-blue"><!----></div>
|
|
<div class="ant-timeline-item-content">
|
|
<div class="flex-row-center-start">
|
|
<span style="color: rgb(153, 153, 153);">{{list[0].createTime}}</span>
|
|
<span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[0].operatorName}}</span>
|
|
<span style="color: #333;" v-if="list[0].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[0].datingClueFollowStage)?.label}}</span>
|
|
<span style="color: #faa19d;margin-left: 16px;" v-if="list[0].remark">{{list[0].remark}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="ant-timeline-item" :style="{padding: list.length > 2 ? '0 0 10px' : '0px'}" v-if="list.length >= 2">
|
|
<div class="ant-timeline-item-tail" v-if="list.length > 2"></div>
|
|
<div class="ant-timeline-item-head ant-timeline-item-head-blue"><!----></div>
|
|
<div class="ant-timeline-item-content">
|
|
<div class="flex-row-center-start">
|
|
<span style="color: rgb(153, 153, 153);">{{list[1].createTime}}</span>
|
|
<span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[1].operatorName}}</span>
|
|
<span style="color: #333;" v-if="list[1].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[1].datingClueFollowStage)?.label}}</span>
|
|
<span style="color: #faa19d;margin-left: 16px;" v-if="list[1].remark">{{list[1].remark}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="ant-timeline-item" style="padding: 0px;" v-if="list.length >= 3">
|
|
<div class="ant-timeline-item-head ant-timeline-item-head-blue"><!----></div>
|
|
<div class="ant-timeline-item-content">
|
|
<div class="flex-row-center-start">
|
|
<span style="color: rgb(153, 153, 153);">{{list[2].createTime}}</span>
|
|
<span style="color: rgb(51, 51, 51);margin-left: 10px;">{{list[2].operatorName}}</span>
|
|
<span style="color: #333;" v-if="list[2].datingClueFollowStage">-{{followStageList.find((find) => find.value === list[2].datingClueFollowStage)?.label}}</span>
|
|
<span style="color: #faa19d;margin-left: 16px;" v-if="list[2].remark">{{list[2].remark}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="flex-row-center-center" style="padding: 8px;" v-else>
|
|
<span style="color: #999;">暂无数据</span>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { followStageList } from '/@/enums/customerEnum'
|
|
export default {
|
|
name: 'Timeline',
|
|
props: {
|
|
list: { // 时间轴内容数组
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
followStageList
|
|
};
|
|
},
|
|
}
|
|
</script>
|
|
|