detail

src/views/customer/customerDetails.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="detail-box">
+    <el-row :gutter="24">
+      <el-col :span="9">
+        <div class="grid-content">
+          <p class="title">置业顾问信息</p>
+          <img class="touxiang" src="http://img1.imgtn.bdimg.com/it/u=1022041283,4133755956&fm=26&gp=0.jpg" alt="">
+          <p class="name">曹玉文</p>
+          <p class="phone">13706842514</p>
+          <div class="info">
+            <p>部门：营销部</p>
+            <p>岗位：置业经理</p>
+            <p>公司：南京知与行网络科技有限公司</p>
+          </div>
+          <p class="project">所属项目：香颂.蔚澜半岛</p>
+        </div>
+      </el-col>
+      <el-col :span="15">
+        <div class="grid-content">
+          <p class="title">客户信息</p>
+          <div style="display:flex">
+            <img class="touxiang" src="http://img1.imgtn.bdimg.com/it/u=1022041283,4133755956&fm=26&gp=0.jpg" alt="">
+            <div style="width:100%">
+              <p class="info-box">用户名称：<span>曹建芳</span></p>
+              <p class="info-box">国家：<span>中国</span></p>
+              <p class="info-box">手机号：<span>184521462130</span></p>
+              <p class="info-box">省份：<span>江苏</span></p>
+            </div>       
+          </div>
+          <div class="other-info">
+              <p class="info-box">访问时长：<span>20分30秒 在线</span></p>
+              <p class="info-box">城市：<span>苏州</span></p>
+              <p class="info-box">访问次数：<span>20次</span></p>
+              <p class="info-box">来访渠道：<span>活动分享</span></p>
+              <p class="info-box">首次访问时间：<span>2019-07-23 12:23:49</span></p>
+          </div>
+          <p style="line-height:1.8">详细信息：</p>
+          <div class="flex-box" style="display:flex;justify-content: space-between;">
+            <p>意向项目：<span>香颂.蔚澜半岛、碧桂园</span></p>
+            <p>需求类型：<span>高层</span></p>
+            <p>物业类型：<span>物业</span></p>
+          </div>
+          <div class="flex-box" style="display:flex;justify-content: space-between;">
+            <p>价格区间：<span>100-200万</span></p>
+            <p>预约到访时间：<span>2019-07-23 12:59:14</span></p>
+            <p>预约人数：<span>2</span></p>
+          </div>
+          <p class="flex-box">客户说明：<span>客户说明展示处</span></p>
+          <p class="flex-box">客户描述：<span>客户描述展示处</span></p>
+          
+        </div>
+      </el-col>
+    </el-row>
+    <div class="access-records">
+      <p class="title">访问记录</p>
+      <el-table
+      :data="tableData"
+      class="table-box"
+      style="width: 100%;">
+      <el-table-column
+        prop="name"
+        label="访问事件">
+      </el-table-column>
+      <el-table-column
+        prop="date"
+        label="访问时间">
+      </el-table-column>
+      <el-table-column
+        prop="time"
+        label="停留时间">
+      </el-table-column>
+    </el-table>
+    </div>
+  
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from "vuex";
+
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          time: "10分30秒"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          time: "17分43秒"
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          time: "05分26秒"
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          time: "1时24分27秒"
+        }
+      ]
+    };
+  },
+  computed: {},
+  created() {}
+};
+</script>
+<style lang="scss">
+.detail-box {
+  .el-table th.is-leaf,
+  .el-table td {
+    border-bottom: 0px !important;
+    text-align: center;
+  }
+  .el-table::before {
+    background-color: #fff;
+  }
+}
+</style>
+
+
+<style lang="scss" scoped>
+.detail-box {
+  .access-records{
+    border: 1px solid #dcdcdc;
+    border-radius: 5px;
+    padding: 12px 15px;
+    margin-bottom: 26px;
+  }
+  .grid-content {
+    border: 1px solid #dcdcdc;
+    border-radius: 5px;
+    height: 400px;
+    overflow: hidden;
+    padding: 12px 15px;
+    position: relative;
+    margin-bottom: 26px;
+    p {
+      margin: 0;
+      font-size: 15px;
+    }
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 30px;
+    }
+    .touxiang {
+      width: 90px;
+      height: 80px;
+      display: inline-block;
+      margin-right: 26px;
+    }
+    .name {
+      position: absolute;
+      top: 80px;
+      left: 130px;
+      font-weight: 600;
+    }
+    .phone {
+      position: absolute;
+      top: 116px;
+      left: 130px;
+    }
+    .info {
+      margin: 20px 0;
+      p {
+        color: #666;
+        line-height: 1.8;
+      }
+    }
+    .info-box {
+      display: inline-block;
+      width: 50%;
+      line-height: 2.4;
+      span {
+        color: #555;
+      }
+    }
+    .other-info {
+      margin-left: 96px;
+      width: 100%;
+      span {
+        color: #555;
+      }
+    }
+    .flex-box {
+      line-height: 2.2;
+      span {
+        color: #555;
+      }
+    }
+  }
+}
+</style>

src/views/customer/list.vue

@@ -19,12 +19,6 @@
             <span>推荐人电话</span>
             <el-input v-model="form.consultTel" ></el-input>
           </li>
-          <!--          <li>-->
-          <!--            <span>状态</span>-->
-          <!--            <el-select v-model="form.status" placeholder="请选择">-->
-          <!--              <el-option v-for="(item,i) in gridData || []" :key="i" :label="item.name" :value="item.value"></el-option>-->
-          <!--            </el-select>-->
-          <!--          </li>-->
         </ul>
         <el-button
                 size="mini"
@@ -75,7 +69,7 @@
           &nbsp;
           <a href="javascript: void(0);" @click="showRecommendCustomerList(scope.row)" v-if="scope.row.phone !== '' && scope.row.phone !== undefined && scope.row.phone !== null">推荐客户</a>
           &nbsp;
-          <router-link :to="{ name:'editCustomer', query: { id: scope.row.customerId } }">查看详情</router-link>
+          <router-link :to="{ name:'customerDetails', query: { id: scope.row.customerId } }">查看详情</router-link>
         </template>
       </el-table-column>
     </el-table>

src/views/index.js

@@ -197,6 +197,15 @@ const pages = [
           title: '审核',
         },
       },
+      {
+        path: 'customerDetails',
+        name: 'customerDetails',
+        component: () => import('./customer/customerDetails.vue'),
+        meta: {
+          menuShow: false,
+          title: '客户详情',
+        },
+      },
       {
         path: 'integralRecord',
         name: 'integralRecord',