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

Merge branch 'master' of http://git.2weisou.com/liumin/zkPCproject

newStyle
J_yt 2 years ago
parent
6e76dc7c6e
commit
5a040f5f7b
4 changed files with 666 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/base.png
  2. +6
    -0
      src/router/views/index.js
  3. +656
    -0
      src/views/Customer/CustomerDetail.vue
  4. +4
    -1
      src/views/Customer/index.vue

BIN
public/img/base.png View File

Before After
Width: 28  |  Height: 32  |  Size: 388 B

+ 6
- 0
src/router/views/index.js View File

@@ -31,6 +31,12 @@ export default [{
import(/* webpackChunkName: "page" */ '@/views/Receive/index'),
name: '接待详情',
},
{
path: '/Customer/CustomerDetail',
component: () =>
import(/* webpackChunkName: "page" */ '@/views/Customer/CustomerDetail'),
name: '客户详情',
},
{
path: '/contentManage/updateRecord/update',
component: () => import(/* webpackChunkName: "views" */ '@/views/contentManage/updateRecord/update'),


+ 656
- 0
src/views/Customer/CustomerDetail.vue View File

@@ -0,0 +1,656 @@
<template>
<div class="mainBox">
<div class="headers">
<div class="lside">
<div class="level">A</div>
</div>
<div class="rside">
<div class="customer-name">
<span class="names">先生</span>
<span class="tag">初次到访</span>
</div>
<div class="adviser">
<span>负责顾问</span>
<span class="trans">转交</span>
</div>
</div>

<div class="customer-bottom">
<div class="item">
<span class="tops">80%</span>
<span class="btms">销讲执行</span>
</div>
<div class="item">
<span class="tops">3次</span>
<span class="btms">来访次数</span>
</div>
<div class="item">
<span class="tops">155min</span>
<span class="btms">到访时长</span>
</div>
<div class="item">
<span class="tops">3</span>
<span class="btms">画像标签</span>
</div>
<div class="item">
<span class="tops">3</span>
<span class="btms">违禁触达</span>
</div>
</div>
</div>

<div class="body-container">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<el-menu-item index="1">历史记录</el-menu-item>
<el-menu-item index="2">客户资料</el-menu-item>
<el-menu-item index="3">客户意向</el-menu-item>
<el-menu-item index="4">销讲执行</el-menu-item>
<el-menu-item index="5">违禁触达</el-menu-item>
</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>
<!-- 历史记录列表 -->
<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>
</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="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">-</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>
<!-- 指标内容 -->
<div class="contents">
<div class="head">
<span style="margin-left: 96px;">指标</span>
<span style="margin-left: 582px;">执行</span>
</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>
<!-- 列表 -->
<div class="p-content">
<div class="p-items">
<span class="p-i-lside">红包</span>
<span class="p-i-rside">1次</span>
</div>
<div class="p-items">
<span class="p-i-lside">收红包</span>
<span class="p-i-rside">1次</span>
</div>
</div>
</div>
</template>
</div>
</div>
</template>

<script>
export default {
data() {
return {
activeIndex: "1", // 大的tab
activeindex1act: 0, // 筛选条件下标
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;
},

// 筛选历史记录类型
selectTap(data, index) {
this.activeindex1act = index;
}
}
};
</script>

<style lang="scss" scoped>
.mainBox {
padding: 0 28px;
width: 100%;
min-width: 1200px;
min-height: 100%;
display: flex;
flex-direction: column;
// 顶端样式
.headers {
padding: 20px 20px 0 20px;
width: 100%;
height: 172px;
background: #fff;
display: flex;
flex-wrap: wrap;

.lside {
width: 68px;
flex-shrink: 0;
display: flex;
justify-items: flex-end;

.level {
width: 36px;
height: 36px;
border: 1px solid #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
}

.rside {
flex-grow: 1;

.customer-name {
height: 36px;
display: flex;
align-items: center;

.names {
margin-right: 8px;
font-size: 16px;
}

.tag {
padding: 1px 12px;
text-align: center;
font-size: 14px;
background: rgba($color: #2671e2, $alpha: 0.2);
color: #2671e2;
}
}

.adviser {
margin-top: 12px;
font-size: 14px;
color: #333333;

.trans {
margin-left: 24px;
color: #2671e2;
cursor: pointer;
}
}
}

.customer-bottom {
margin-left: 8px;
width: 100%;
height: 84px;
display: flex;
align-content: center;

.item {
padding: 0 60px;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;

.tops {
font-size: 16px;
color: #333;
font-weight: 500;
text-align: center;
}

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

.body-container {
margin-top: 20px;
padding: 0 20px;
background: #fff;
flex-grow: 1;

.activeIndex1 {
.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-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;
}
}
}
}
}

.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;
align-items: center;

.b-lside {
width: 96px;
flex-shrink: 0;
color: #585858;
}

.b-rside {
flex-grow: 1;
}
}
}

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

.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;
}
</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>

+ 4
- 1
src/views/Customer/index.vue View File

@@ -353,7 +353,7 @@
</el-table-column>
<el-table-column label="操作" align="center" width="250" fixed="right">
<template slot-scope="{ row }">
<el-button type="text" v-if="cus_index_detail">客户详情</el-button>
<el-button @click="toCustomer" type="text" v-if="cus_index_detail">客户详情</el-button>
<el-button
type="text"
@click="Receivedetailsabout(row)"
@@ -594,6 +594,9 @@ export default {
this.zkhousePage();
},
methods: {
toCustomer() {
this.$router.push('/Customer/CustomerDetail')
},
// 批量转交按钮点击事件
transfer() {
this.dialogVisible = true;


Write Preview
Loading…
Cancel
Save