客户详情页

src/assets/css/index.css

@@ -6,4 +6,7 @@
 
 .bgGray{
     background-color: #efefef;
+}
+.floatleft{
+    float:left;
 }

src/common/api/loginApi.js

@@ -166,4 +166,13 @@ export function GetSaRoomList(data) {
     method: 'post',
     data
   })
+}
+
+/* 客户详情 */
+export function GetSaClientInfo(data) {
+  return request({
+    url: '/GetSaClientInfo',
+    method: 'post',
+    data
+  })
 }

src/components/clientdetail.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">客户详情</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+      <template #right>
+        <van-icon name="replay" size="18" color="#ffffff" />
+      </template>
+    </van-nav-bar>
+    <van-row class="header">
+        <van-col span="14">
+            <van-row>
+                <van-col span="12">
+                    <!-- <van-image :src="require('@/assets/img/header.png')" width="60" height="60" /> -->
+                    <van-image :src="require('@/assets/img/header.png')" width="60" height="60" v-if="data2.Sex==0"/>
+                    <van-image :src="require('@/assets/img/male.jpg')" width="70" height="60" v-if="data2.Sex==1"/>
+                </van-col>
+                <van-col span="12">
+                    <van-col span="24" class="title1">{{name}}</van-col>
+                    <van-col span="24" class="title2">{{state}}</van-col>
+                </van-col>
+            </van-row>
+        </van-col>
+        <van-col span="10"></van-col>
+    </van-row>
+    <van-tabs v-model="activeName" >
+        <van-tab title="跟进记录" name="a" title-class="titleClass" >           
+            <van-cell v-for="item in data2.Contacts" :key="item.ccId" :title="item.VisitDate"  :value="item.VisitType" :to="'/getsaclientcontactinfo?id='+item.ccId" value-class="value1">
+                <template #icon>
+                    <van-icon name="volume-o" color="#ff0000"></van-icon>
+                </template>
+            </van-cell>
+        </van-tab>
+        <van-tab title="详细资料" name="b" title-class="titleClass">
+          <van-cell   title="联系电话"  :value="data2.Phone"  value-class="infoValue"  title-class="infoTitle"/>
+          <van-cell   title="业务员"  :value="data2.SalesManName"  value-class="infoValue" title-class="infoTitle" />      
+          <van-cell   title="国籍"  :value="data2.Nationality"  value-class="infoValue"  title-class="infoTitle"/>   
+          <van-cell   title="证件类型"  :value="data2.CredentialsType"  value-class="infoValue"  title-class="infoTitle"/>
+          <van-cell   title="证件号"  :value="data2.CredentialsId"  value-class="infoValue"  title-class="infoTitle"/>
+          <van-cell   title="出生日期"  :value="data2.Birth"  value-class="infoValue"  title-class="infoTitle"/>   
+          <van-cell   title="婚姻状况"  :value="data2.Marry"  value-class="infoValue"  title-class="infoTitle"/>
+          <van-cell   title="户籍"  :value="data2.Household"  value-class="infoValue"  title-class="infoTitle"/> 
+          <van-cell   title="联系地址"  :value="data2.Address"  value-class="infoValue"  title-class="infoTitle"/>    
+          <van-cell   title="邮编"  :value="data2.Post"  value-class="infoValue"  title-class="infoTitle"/>    
+          <van-cell   title="传真"  :value="data2.Fax"  value-class="infoValue"  title-class="infoTitle"/>   
+          <van-cell   title="电子邮件"  :value="data2.Email"  value-class="infoValue"  title-class="infoTitle"/>   
+          <van-cell   title="认知途径"  :value="data2.CognizeWay"  value-class="infoValue"  title-class="infoTitle"/>   
+          <van-cell   title="备注"  :value="data2.Remark"  value-class="infoValue"  title-class="infoTitle"/>               
+        </van-tab> 
+        <van-tab title="单据信息" name="c" title-class="titleClass">
+          <van-row class="bgBlue">
+            <van-col span="6" >日期</van-col> 
+            <van-col span="6">类型</van-col> 
+            <van-col span="8">物业名称</van-col> 
+            <van-col span="4">状态</van-col> 
+          </van-row>
+          <van-row v-for="item in data2.SaleBills" :key="item.BillId" class="bgBill">
+            <van-col span="6" >{{item.BillDate}}</van-col> 
+            <van-col span="6">{{item.BillType}}</van-col> 
+            <van-col span="8">{{item.RoomName}}</van-col> 
+            <van-col span="4">{{item.BillState}}</van-col> 
+          </van-row>
+        </van-tab>
+    </van-tabs>
+
+    <van-grid :column-num="2" class="bottom">
+      <van-grid-item >
+        <van-row style="width:100%;">
+          <van-col span="5"><van-icon name="edit"/></van-col>
+          <van-col span="19">资料完善{{completion}}</van-col>
+        </van-row>
+      </van-grid-item>
+      <van-grid-item >
+         <van-row style="width:100%;">
+          <van-col span="5"><van-icon name="add-o"/></van-col>
+          <van-col span="19">新增跟进</van-col>
+        </van-row>
+      </van-grid-item>
+    </van-grid>
+  </div>
+</template>
+
+<script>
+import { GetSaClientContactList,GetSaClientInfo } from "@/common/api/loginApi.js";
+import {Decimal} from 'decimal'
+export default {
+  name: "login",
+  data() {
+    return {
+        id:'',
+        name:'',
+        state:'',
+        activeName:'a',
+        
+        data2:{},      //详细资料
+      
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+    this.$util.persistLogin(this);
+    this.id=this.$route.query.id;
+    this.name=this.$route.query.name;
+    this.state=this.$route.query.state;
+   
+    this.GetSaClientInfo();
+  },
+  computed:{   //计算属性
+    completion:function(){
+       let sum=14;
+       let success=0;
+       if(this.data2==null){
+         return 0;
+       }
+       if(!this.$util.isEmpty(this.data2.Phone))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.SalesManName))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Nationality))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.CredentialsType))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.CredentialsId))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Birth))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Marry))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Household))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Address))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Post))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Fax))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Email))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.CognizeWay))
+       {
+         success++;
+       }
+        if(!this.$util.isEmpty(this.data2.Remark))
+       {
+         success++;
+       }
+       console.info('compute success',success);
+       let result =new Decimal(success).div(new Decimal(sum)).toFixed(1);
+       console.info('compute',result);
+       return result;
+    }
+   
+  },
+  methods: {
+   
+    //获取客户信息
+    GetSaClientInfo: function () {
+      var that = this;
+      var data = {
+        userCode:that.$store.state.data.userCode,
+        projectId: that.$store.state.projectId,
+        clientId:that.id       
+      };
+      console.info("data", data);
+      GetSaClientInfo(data).then((res) => {
+        console.info("GetSaClientInfo", res);
+        if (!res.result) {
+          that.$toast(res.msg);
+          return;
+        }
+        that.data2=res.data;
+      });
+    },
+     
+   
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.title1 {
+  color: #000;
+  font-size:18px;
+  font-weight:900;
+  text-align: left;
+  height:30px;
+}
+.title2{
+    color:#ff0000;
+     text-align: left;
+     font-size:13px;
+}
+.infoTitle{
+  color:#aaa;
+  text-align: left;
+}
+.value1 {
+  color: #ff0000;
+  font-size: 13px;
+}
+.infoValue{
+  color:#0606af;
+}
+.size{
+    font-size:16px;
+}
+.header{
+    margin-top:10px;
+    height: 70px;
+    border-bottom: #cfcfcf solid 3px;
+}
+.titleClass{
+    border-bottom: #000 solid 1px;
+}
+.van-tab{
+    color:#ff0000;
+}
+.redColor{
+    color:#ff0000;
+}
+.bgBlue{
+  background: #a0a0f7;
+  height:30px;
+  margin-top:5px;
+  padding-top:5px;
+}
+.bgBill{
+  height: 30px;
+  border-bottom: #aaa solid 1px;
+  padding-top:5px;
+}
+.bottom{
+  /* left:0; */
+  bottom: 0px;
+  position:absolute;
+  width:100%;
+}
+</style>

src/components/getsaclientsummarylist.vue

@@ -31,7 +31,7 @@
         <van-cell
           v-for="item in listdata"
           :key="item.clientId"
-          
+          :to="'/clientdetail?id='+item.clientId+'&name='+item.name+'&state='+$route.query.saleState"
         >
           <template #title>
             <van-col span="24" class="title1">{{item.name}}</van-col>

src/main.js

@@ -13,7 +13,7 @@ import {
   Form,
   Col,
   Row,
-  NavBar, RadioGroup, Radio, Cell, CellGroup, Grid, GridItem, Image as VanImage, Circle, Icon, List, Divider, PullRefresh,Picker,Popup  
+  NavBar, RadioGroup, Radio, Cell, CellGroup, Grid, GridItem, Image as VanImage, Circle, Icon, List, Divider, PullRefresh,Picker,Popup ,Tab, Tabs
 } from 'vant'
 
 // 引入全局css
@@ -48,6 +48,8 @@ Vue.use(Button)
   .use(PullRefresh)
   .use(Picker)
   .use(Popup)
+  .use(Tab)
+  .use(Tabs)
 
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

@@ -18,6 +18,7 @@ import getsaclientsummary from '@/components/getsaclientsummary'
 import getsaclientsummarylist from '@/components/getsaclientsummarylist'
 import filterhouse from '@/components/filterhouse'
 import getsaroomlist from '@/components/getsaroomlist'
+import clientdetail from '@/components/clientdetail'
 Vue.use(Router)
 
 export default new Router({
@@ -112,5 +113,10 @@ export default new Router({
       name: 'getsaroomlist',
       component: getsaroomlist
     },
+    {     //客户详情
+      path: '/clientdetail',
+      name: 'clientdetail',
+      component: clientdetail
+    },
   ]
 })