From 5a040f5f7b854bb17d37329596e666e1931d228c Mon Sep 17 00:00:00 2001
From: J_yt <1592211625@qq.com>
Date: Wed, 13 Apr 2022 18:48:08 +0800
Subject: [PATCH] Merge branch 'master' of
 http://git.2weisou.com/liumin/zkPCproject

---
 public/img/base.png                   | Bin 0 -> 388 bytes
 src/router/views/index.js             |   6 +
 src/views/Customer/CustomerDetail.vue | 656 ++++++++++++++++++++++++++
 src/views/Customer/index.vue          |   5 +-
 4 files changed, 666 insertions(+), 1 deletion(-)
 create mode 100644 public/img/base.png
 create mode 100644 src/views/Customer/CustomerDetail.vue

diff --git a/public/img/base.png b/public/img/base.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a750d0b96d1c6402a3321188e21e077039490be
GIT binary patch
literal 388
zcmV-~0ek+5P)<h;3K|Lk000e1NJLTq000~S001Be1^@s60ks%H00001b5ch_0Itp)
z=>Px$K1oDDR7gwhmoZAjKoo}mmsy1bOtD>p7ucI<XKO7)k}e8q9S@-C64c5Q*a&))
z9Ka>%mNW^74kII*!qwemf-49!?Y#HCyzieT6o%oU5aJfVKDK-2jIn@%Ab9x$Shvbt
z0p)fV`#RkKf8DlGYLsdlFpoxCSzm)u+Gj}n-YC^p*4JQ^_8HQ?{})ONBDztlNhwbO
z%yib&*>C~i()az0bN;R%obyRpmJxsp0MjAhULX;v;kn~DJWW#t{dVFwp0;hv0fbV@
z$tLhdAQ3$?#?G=VD~5c16h$*3#I=<2U|qcez5>`?DJU3Y=Xst#4FRpzEdN)oe#rMt
z0UrPyEt?iZ#68c;yPU=VyL_vvQi_%8&wPpKk&-0YtLys2vMjP~`+i+cW5FulrfH4=
i?6|IbM`H(#?fU?p8k8>{u{X{D0000<MNUMnLSTa4{iqTE

literal 0
HcmV?d00001

diff --git a/src/router/views/index.js b/src/router/views/index.js
index f7bc475..6419635 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -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'),
diff --git a/src/views/Customer/CustomerDetail.vue b/src/views/Customer/CustomerDetail.vue
new file mode 100644
index 0000000..6f94660
--- /dev/null
+++ b/src/views/Customer/CustomerDetail.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/Customer/index.vue b/src/views/Customer/index.vue
index 027e3d3..5daca9f 100644
--- a/src/views/Customer/index.vue
+++ b/src/views/Customer/index.vue
@@ -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;