liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

提交客户详情也买你

newStyle
wangshuai 2 years ago
parent
ebce62e8df
commit
4f4de228e0
1 changed files with 427 additions and 213 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +427
    -213
      src/views/Customer/CustomerDetail.vue

+ 427
- 213
src/views/Customer/CustomerDetail.vue View File

@@ -54,95 +54,223 @@
</el-menu>
<!-- 历史记录 -->
<template v-if="activeIndex == 1">
<div class="activeIndex1">
<div class="select">
<div v-for="(data, index) in selectList" :key="index" @click="selectTap(data, index)" class="s-items" :class="{act: index == activeindex1act}">{{ data.title }}</div>
<div class="activeIndex1">
<div class="select">
<div
v-for="(data, index) in selectList"
:key="index"
@click="selectTap(data, index)"
class="s-items"
:class="{act: index == activeindex1act}"
>{{ data.title }}</div>
</div>
<!-- 历史记录列表 -->
<div class="activeList">
<div class="a-items">
<div class="a-lside">A</div>
<div class="a-rside">
<div class="a-top">
<span class="a-name">李佳佳</span>
<span class="tag">首次到访</span>
<span class="line">&nbsp;|&nbsp;</span>
<span class="tag">未标注</span>
</div>
<div class="a-time">2022-05-20 18:00:00</div>
<div class="a-type">
<span class="time">录音时长：90分钟</span>
<span class="percent">执行率：86%</span>
<span class="getcent">质检得分：75</span>
</div>
</div>
<!-- 历史记录列表 -->
<div class="activeList">
<div class="a-items">
<div class="a-lside">
A
</div>
<div class="a-rside">
<div class="a-top">
<span class="a-name">李佳佳</span>
<span class="tag">首次到访</span>
<span class="line">&nbsp;|&nbsp;</span>
<span class="tag">未标注</span>
</div>
<div class="a-time">2022-05-20 18:00:00</div>
<div class="a-type">
<span class="time">录音时长：90分钟</span>
<span class="percent">执行率：86%</span>
<span class="getcent">质检得分：75</span>
</div>
</div>
<div class="details-box">
<div class="details">查看详情</div>
</div>
</div>
<div class="details-box">
<div class="details">查看详情</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="activeIndex == 2">
<div class="activeIndex2">
<div class="baseInfo">
<img class="base-img" src="/img/base.png" alt="">
基本信息
</div>
<div class="activeIndex2">
<div class="baseInfo">
<img class="base-img" src="/img/base.png" alt />
基本信息
</div>

<div class="base-items">
<div class="b-lside">客户姓名</div>
<div class="b-rside">刘佳</div>
</div>
<div class="base-items">
<div class="b-lside">客户姓名</div>
<div class="b-rside">刘佳</div>
</div>

<div class="base-items">
<div class="b-lside">性别</div>
<div class="b-rside">女</div>
</div>
<div class="base-items">
<div class="b-lside">性别</div>
<div class="b-rside">女</div>
</div>

<div class="base-items">
<div class="b-lside">手机</div>
<div class="b-rside">17551333886</div>
</div>
<div class="base-items">
<div class="b-lside">手机</div>
<div class="b-rside">17551333886</div>
</div>

<div class="base-items">
<div class="b-lside">微信账号</div>
<div class="b-rside">-</div>
</div>
<div class="base-items">
<div class="b-lside">客户等级</div>
<div class="b-rside">A级</div>
</div>
<div class="base-items">
<div class="b-lside">客户来源</div>
<div class="b-rside">其他</div>
<div class="base-items">
<div class="b-lside">微信账号</div>
<div class="b-rside">-</div>
</div>

<div class="base-items">
<div class="b-lside">客户等级</div>
<div class="b-rside">A级</div>
</div>

<div class="base-items">
<div class="b-lside">客户来源</div>
<div class="b-rside">其他</div>
</div>

<div class="base-items">
<div class="b-lside">资讯业务</div>
<div class="b-rside">一期住宅 二期住宅</div>
</div>

<div class="base-items">
<div class="b-lside">添加人</div>
<div class="b-rside">访客登记</div>
</div>

<div class="base-items">
<div class="b-lside">添加时间</div>
<div class="b-rside">-</div>
</div>

<div class="base-items">
<div class="b-lside">备注</div>
<div class="b-rside">-</div>
</div>
</div>
</template>
<template v-if="activeIndex == 3">
<div class="activeIndex2">
<div style="height: 8px;"></div>
<div class="base-items">
<div class="b-lside">置业需求</div>
<div class="b-rside">投资、养老</div>
</div>

<div class="base-items">
<div class="b-lside">意向面积</div>
<div class="b-rside">90～100、120～140</div>
</div>

<div class="base-items">
<div class="b-lside">预算</div>
<div class="b-rside">100～160万</div>
</div>

<div class="base-items">
<div class="b-lside">关注点</div>
<div class="b-rside">学校</div>
</div>

<div class="base-items">
<div class="b-lside">认知途径</div>
<div class="b-rside">广告</div>
</div>
</div>
</template>
<template v-if="activeIndex == 4">
<!-- 执行总览 -->
<div class="all-screen">
<div class="tops">
<div class="tops-title">执行总览</div>
<div class="p-box">
<div class="items" style="margin-left: 144px;">
<span class="p-i-titles">3</span>
<span style="margin-top: 6px;">到访次数</span>
</div>
<div class="items" style="margin-left: 200px;">
<div class="circle">
<el-progress :width="56" color="#4FC78F" type="circle" :percentage="0"></el-progress>
</div>
<span style="margin-top: 6px;">销讲执行率</span>
</div>
<div class="items" style="margin-left: 200px;">
<span class="p-i-titles">3155</span>
<span style="margin-top: 6px;">接待时长(分)</span>
</div>
</div>
<div class="base-items">
<div class="b-lside">资讯业务</div>
<div class="b-rside">一期住宅 二期住宅</div>
</div>
<!-- 指标内容 -->
<div class="contents">
<div class="head">
<span style="margin-left: 96px;">指标</span>
<span style="margin-left: 582px;">执行</span>
</div>
<div class="base-items">
<div class="b-lside">添加人</div>
<div class="b-rside">访客登记</div>
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="区位介绍" name="1">
<template slot="title">
区位介绍
<el-progress
style="margin: 0 153px 0 80px;width: 363px;"
color="#4FC78F"
:stroke-width="16"
:percentage="70"
></el-progress>
</template>
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="品牌介绍" name="2">
<template slot="title">
品牌介绍
<el-progress
style="margin: 0 153px 0 80px;width: 363px;"
color="#4FC78F"
:stroke-width="16"
:percentage="70"
></el-progress>
</template>
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
</el-collapse>
<div style="height: 54px;"></div>
</div>
</div>
</template>

<template v-if="activeIndex == 5">
<div class="all-screen">
<div class="tops">
<div class="tops-title">执行总览</div>
<div class="p-box">
<div class="items" style="margin-left: 144px;">
<span class="p-i-titles">3</span>
<span style="margin-top: 6px;">到访次数</span>
</div>
<div class="items" style="margin-left: 200px;">
<div class="circle">
<el-progress :width="56" color="#E51B1B" type="circle" :percentage="50"></el-progress>
</div>
<span style="margin-top: 6px;">销讲执行率</span>
</div>
<div class="items" style="margin-left: 200px;">
<span class="p-i-titles">3155</span>
<span style="margin-top: 6px;">接待时长(分)</span>
</div>
</div>
<div class="base-items">
<div class="b-lside">添加时间</div>
<div class="b-rside">-</div>
</div>
<!-- 列表 -->
<div class="p-content">
<div class="p-items">
<span class="p-i-lside">红包</span>
<span class="p-i-rside">1次</span>
</div>
<div class="base-items">
<div class="b-lside">备注</div>
<div class="b-rside">-</div>
<div class="p-items">
<span class="p-i-lside">收红包</span>
<span class="p-i-rside">1次</span>
</div>

</div>
</div>
</template>
</div>
</div>
@@ -154,37 +282,38 @@ export default {
return {
activeIndex: "1", // 大的tab
activeindex1act: 0, // 筛选条件下标
selectList: [ // 选中
{
title: '全部',
id: '',
},
{
title: '接待记录',
id: '1',
},
{
title: '通话记录',
id: '2',
},
{
title: '跟进记录',
id: '3',
},
]
selectList: [
// 选中
{
title: "全部",
id: ""
},
{
title: "接待记录",
id: "1"
},
{
title: "通话记录",
id: "2"
},
{
title: "跟进记录",
id: "3"
}
],
activeName: 1 // 折叠面板选中项
};
},
methods: {
// 历史记录筛选
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex = key
this.activeIndex = key;
},
// 筛选历史记录类型
selectTap(data, index) {
this.activeindex1act = index

this.activeindex1act = index;
}
}
};
@@ -194,6 +323,7 @@ export default {
.mainBox {
padding: 0 28px;
width: 100%;
min-width: 1200px;
min-height: 100%;
display: flex;
flex-direction: column;
@@ -293,150 +423,234 @@ export default {
background: #fff;
flex-grow: 1;


.activeIndex1 {
.select {
width: 100%;
height: 56px;
.select {
width: 100%;
height: 56px;
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;

.s-items {
padding: 2px 8px;
margin-right: 40px;
font-size: 14px;
cursor: pointer;
border: 1px solid #fff;
}

.act {
border-color: #2671e2;
color: #2671e2;
}
}

.activeList {
.a-items {
padding: 16px 0;
width: 100%;
height: 118px;
display: flex;
border-bottom: 1px solid #e0e0e0;

.a-lside {
margin-right: 12px;
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #E0E0E0;
border-radius: 50%;
border: 1px solid #e0e0e0;
}

.a-rside {
flex-grow: 1;

.a-top {
height: 36px;
display: flex;
align-items: center;

.s-items {
padding: 2px 8px;
margin-right: 40px;
.a-name {
margin-right: 24px;
font-size: 16px;
}

.tag {
font-size: 14px;
cursor: pointer;
border: 1px solid #fff;
}
}

.act {
border-color: #2671E2;
color: #2671E2;
.a-time {
margin-top: 4px;
font-size: 14px;
}
}

.activeList {
.a-items {
padding: 16px 0;
width: 100%;
height: 118px;
display: flex;
border-bottom: 1px solid #E0E0E0;
.a-lside {
margin-right: 12px;
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid #E0E0E0;
}

.a-rside {
flex-grow: 1;

.a-top {
height: 36px;
display: flex;
align-items: center;

.a-name {
margin-right: 24px;
font-size: 16px;
}

.tag {
font-size: 14px;
}
}

.a-time {
margin-top: 4px;
font-size: 14px;
}

.a-type {
margin-top: 6px;
display: flex;
align-items: center;
font-size: 14px;
.time {
margin-right: 32px;
}

.percent {
margin-right: 27px;
}
}
}

.details-box {
margin-right: 80px;
height: 100%;
display: flex;
align-items: center;

.details {
width: 82px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #2671E2;
border-radius: 2px;
font-size: 14px;
cursor: pointer;
}
}
.a-type {
margin-top: 6px;
display: flex;
align-items: center;
font-size: 14px;

.time {
margin-right: 32px;
}

.percent {
margin-right: 27px;
}
}
}

.details-box {
margin-right: 80px;
height: 100%;
display: flex;
align-items: center;

.details {
width: 82px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #2671e2;
border-radius: 2px;
font-size: 14px;
cursor: pointer;
}
}
}
}
}

.activeIndex2 {
width: 100%;
display: flex;
flex-direction: column;

.baseInfo {
padding: 16px 0 8px 0;
display: flex;
align-items: center;

.base-img {
margin-right: 2px;
width: 14px;
height: 16px;
}
}

.base-items {
padding: 8px 0;
width: 100%;
display: flex;
flex-direction: column;
.baseInfo {
padding: 16px 0 8px 0;
display: flex;
align-items: center;
align-items: center;

.base-img {
margin-right: 2px;
width: 14px;
height: 16px;
}
.b-lside {
width: 96px;
flex-shrink: 0;
color: #585858;
}

.base-items {
padding: 8px 0;
width: 100%;
display: flex;
align-items: center;
.b-rside {
flex-grow: 1;
}
}
}

.b-lside {
width: 96px;
flex-shrink: 0;
color: #585858;
}
.all-screen {
width: 100%;
display: flex;
flex-direction: column;

.b-rside {
flex-grow: 1;
.tops {
margin: 16px 0;
padding: 16px 20px 0;
width: 100%;
height: 154px;
border: 1px solid #e0e0e0;

.tops-title {
font-size: 16px;
}

.p-box {
margin-top: 16px;
display: flex;
align-items: flex-end;

.items {
display: flex;
flex-direction: column;
.circle {
display: flex;
justify-content: center;
}
.p-i-titles {
text-align: center;
}
}
}
}

.p-content {
margin-top: -16px;
border: 1px solid #E0E0E0;
border-top: none;

.p-items {
padding: 0 0 0 80px;
width: 100%;
height: 58px;
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;

.p-i-lside {
width: 43%;
flex-shrink: 0;
font-size: 16px;
}
.p-i-rside {
padding: 2px 23px;
color: #E51B1B;
background: rgba($color: #E51B1B, $alpha: .1);
}
}
}

.contents {
border: 1px solid #e0e0e0;

.head {
height: 54px;
display: flex;
align-items: center;
}
}
}
}
}


.el-menu-demo {
border-bottom: 1px solid #E0E0E0 !important;
border-bottom: 1px solid #e0e0e0 !important;
}
</style>

<style lang="scss">
.el-collapse-item__header {
padding: 0 0 0 80px;
background-color: #f8f8f8;
border-bottom-color: #e0e0e0;
}
.el-collapse-item__arrow {
margin: 0;
}
.el-progress__text {
font-size: 14px;
}
</style>

Write Preview
Loading…
Cancel
Save