客户详情

src/config/api.js

       method:'get',
       url: `${commPrefix}/customer/recommend/:id`
     },
+    getCustomerDetail: {
+      method: `get`,
+      url: `${commPrefix}/customer/recommend/get/:id`
+    },
     taPointsRecords: { // 积分列表
       method: `get`,
       url: `${commPrefix}/taPointsRecords/:id`
-    }
+    },
   },
   goods:{
     list:{

src/store/modules/customer.js

           reject(message)
         })
       })
-    }
-
+    },
+    getCustomerDetail({ commit }, payload) { // 查询客户详情
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.recommendCustomer.getCustomerDetail,
+          urlData: { id: payload.customerId}
+        }).then((data) => {
+          resolve(data)
+        }).catch(({ message }) => {
+          reject(message)
+        })
+    })
+}
     
   }
 }

src/views/customer/customerDetails.vue

         <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>
+          <p class="name">{{  customerDetail.consultant === null ? '' :  customerDetail.consultant.name }}</p>
+          <p class="phone">{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.phone }}</p>
           <div class="info">
-            <p>部门：营销部</p>
-            <p>岗位：置业经理</p>
-            <p>公司：南京知与行网络科技有限公司</p>
+            <p>部门：{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.department }}</p>
+            <p>岗位：{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.post }}</p>
+            <p>公司：{{ customerDetail.consultant === null ? '' :  customerDetail.consultant.company }}</p>
           </div>
-          <p class="project">所属项目：香颂.蔚澜半岛</p>
+          <p class="project">所属项目：
+            <span v-if="customerDetail.consultant === null"></span>
+            <span v-else v-for="(item, index) in customerDetail.consultant.projects" :key="index">{{ item }}</span>
+          </p>
         </div>
       </el-col>
       <el-col :span="15">
           <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>
+              <p class="info-box">用户名称：<span>{{ customerDetail.name }}</span></p>
+              <p class="info-box">国家：<span>{{ customerDetail.country }}</span></p>
+              <p class="info-box">手机号：<span>{{ customerDetail.phone }}</span></p>
+              <p class="info-box">省份：<span>{{ customerDetail.province }}</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>{{ customerDetail.duration / 60 }} 分钟</span></p>
+              <p class="info-box">城市：<span>{{ customerDetail.city }}</span></p>
+              <p class="info-box">访问次数：<span>{{ customerDetail.visitTimes }}</span></p>
               <p class="info-box">来访渠道：<span>活动分享</span></p>
-              <p class="info-box">首次访问时间：<span>2019-07-23 12:23:49</span></p>
+              <p class="info-box">首次访问时间：<span>{{ formateDate(customerDetail.visitTime) }}</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>
+            <p>意向项目：<span>{{ customerDetail.intention }}</span></p>
+            <p>需求类型：<span>{{ customerDetail.demandType }}</span></p>
+            <p>物业类型：<span>{{ customerDetail.realtyManageType }}</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>
+            <p>价格区间：<span>{{ customerDetail.priceRange }}</span></p>
+            <p>预约到访时间：<span>{{ formateDate(customerDetail.appointmentTime) }}</span></p>
+            <p>预约人数：<span>{{ customerDetail.visiteNum }}</span></p>
           </div>
-          <p class="flex-box">客户说明：<span>客户说明展示处</span></p>
-          <p class="flex-box">客户描述：<span>客户描述展示处</span></p>
+          <p class="flex-box">客户说明：<span>{{ customerDetail.verifyRemark }}</span></p>
+          <p class="flex-box">客户描述：<span>{{ customerDetail.describe }}</span></p>
           
         </div>
       </el-col>
     <div class="access-records">
       <p class="title">访问记录</p>
       <el-table
-      :data="tableData"
+      :data="customerDetail.visitRecords || []"
       class="table-box"
       style="width: 100%;">
       <el-table-column
-        prop="name"
+        prop="event"
         label="访问事件">
       </el-table-column>
       <el-table-column
-        prop="date"
+        prop="visitTime"
         label="访问时间">
+        <template slot-scope="scope">{{ formateDate(scope.row.visitTime) }}</template>
       </el-table-column>
       <el-table-column
-        prop="time"
+        prop="visitDuration"
         label="停留时间">
+        <template slot-scope="scope">{{ scope.row.visitDuration / 60 }}分钟</template>
       </el-table-column>
     </el-table>
     </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from "vuex";
+import { createNamespacedHelpers } from "vuex"
+import dayjs from 'dayjs'
 
 export default {
   data() {
     return {
+      customerId: '',
+      customerDetail: '',
       tableData: [
         {
           date: "2016-05-02",
     };
   },
   computed: {},
-  created() {}
+  methods: {
+    formateDate(dt) {
+      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
+    },
+    getCustomerDetail() {
+      let data = { customerId: this.customerId }
+      this.$store.dispatch('customer/getCustomerDetail',data).then((res) => {
+        this.customerDetail = res
+        console.log('customer/getCustomerDetail: ', this.customerDetail)
+      }).catch(() => {
+        console.log('customer/getCustomerDetail err')
+      })
+    }
+  },
+  created() {
+    this.customerId = this.$route.query.id
+    this.getCustomerDetail()
+  }
 };
 </script>
 <style lang="scss">