项目详情和客户编辑接口对接

src/api/GBC/GBC.js

@@ -54,5 +54,38 @@ export function getGBCprojectlistByYear(data) {
   })
 }
 
+// 查询项目下的客户列表
+export function getGBCappntlist(data) {
+  return request({
+    url: getUrl('/sale/gbc/appnt/list', 1),
+    method: 'post',
+    data
+  })
+}
 
+// 查询项目下的客户列表
+export function getGBCappntDetail(data) {
+  return request({
+    url: getUrl('/sale/gbc/appnt/detail', 1),
+    method: 'post',
+    data
+  })
+}
 
+// 保存客户类型
+export function getGBCappntTypeSave(data) {
+  return request({
+    url: getUrl('/sale/gbc/appnt/type/save', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 保存客户沟通记录
+export function getGBCappntConnectSave(data) {
+  return request({
+    url: getUrl('/sale/gbc/appnt/connect/save', 1),
+    method: 'post',
+    data
+  })
+}

src/views/GBC/customerDetail.vue

@@ -9,28 +9,41 @@
       </div>
       <div style="display: flex;font-size: 13px;color: #999;margin-top: 10px;">
         <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
-          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">4</span>份
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">{{infoContent.contSize}}</span>份
         </span>
         <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
-          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">5</span>人
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">{{infoContent.members.length}}</span>人
         </span>
         <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
-          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">60</span>万元
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">{{infoContent.totalAmt}}</span>
         </span>
         <span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
-          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">10</span>万元
+          <span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">{{infoContent.totalPrem}}</span>
         </span>
       </div>
     </div>
     <div style="margin: 10px;overflow: auto;white-space: nowrap;">
-      <div v-for="(item,index) in dataList1" :key="index" style="display: inline-block;width: 80px;height: 80px;border-radius: 5px;background: #fff;margin-right: 10px;overflow: hidden;position: relative;">
-        <div v-if="item.sex=='女'" class="triangle1"></div>
-        <div v-if="item.sex=='男'" class="triangle2"></div>
-        <div style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">{{item.type}}</div>
+      <div v-for="(item,index) in infoContent.members" @click="activeMembers(item,index)" class="membersClass" :key="index" :style="{border:activeMembersIndex==index?'1px solid #e98c8c':'none'}">
+        <div v-if="item.gender=='1'" class="triangle1"></div>
+        <div v-if="item.gender=='0'" class="triangle2"></div>
+        <div v-if="item.relateToAppnt == 1" style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">本人</div>
+        <div v-if="item.relateToAppnt == 2" style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">配偶</div>
+        <div v-if="item.relateToAppnt == 3" style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">父母</div>
+        <div v-if="item.relateToAppnt == 4" style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">子女</div>
+        <div v-if="item.relateToAppnt == 5" style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">其他</div>
         <div style="position: absolute;top: 20px;left: 20px;">
-          <img :src="item.src" style="width: 40px;" />
+          <img v-if="item.gender =='0' && item.relateToAppnt == 1" src="@/assets/images/GBC/relation6.png" style="width: 40px;" />
+          <img v-if="item.gender =='1' && item.relateToAppnt == 1" src="@/assets/images/GBC/relation1.png" style="width: 40px;" />
+          <img v-if="item.gender =='0' && item.relateToAppnt == 2" src="@/assets/images/GBC/relation6.png" style="width: 40px;" />
+          <img v-if="item.gender =='1' && item.relateToAppnt == 2" src="@/assets/images/GBC/relation1.png" style="width: 40px;" />
+          <img v-if="item.gender =='0' && item.relateToAppnt == 3" src="@/assets/images/GBC/relation4.png" style="width: 40px;" />
+          <img v-if="item.gender =='1' && item.relateToAppnt == 3" src="@/assets/images/GBC/relation5.png" style="width: 40px;" />
+          <img v-if="item.gender =='0' && item.relateToAppnt == 4" src="@/assets/images/GBC/relation3.png" style="width: 40px;" />
+          <img v-if="item.gender =='1' && item.relateToAppnt == 4" src="@/assets/images/GBC/relation2.png" style="width: 40px;" />
+          <img v-if="item.gender =='0' && item.relateToAppnt == 5" src="@/assets/images/GBC/relation6.png" style="width: 40px;" />
+          <img v-if="item.gender =='1' && item.relateToAppnt == 5" src="@/assets/images/GBC/relation1.png" style="width: 40px;" />
         </div>
-        <div style="position: absolute;bottom: 3px;width: 100%;text-align: center;font-size: 12px;">{{item.name}}</div>
+        <div style="position: absolute;bottom: 3px;width: 100%;text-align: center;font-size: 12px;">{{item.appntName}}</div>
       </div>
     </div>
     <div style="margin: 10px;border-radius: 5px;overflow: hidden;">
@@ -42,17 +55,17 @@
               <p>年龄：</p>
               <p>性别：</p>
               <p>手机号码：</p>
-              <p>部门/科室：</p>
+              <p v-if="activeMembersIndex == 0">部门/科室：</p>
             </div>
             <div style="width: 70%;line-height: 30px;color: #000;">
-              <p>赵燕燕</p>
-              <p>39周岁</p>
-              <p>男</p>
-              <p>158****6959</p>
-              <p>财务部</p>
+              <p>{{infoContent.appntName}}</p>
+              <p>{{infoContent.age}}周岁</p>
+              <p>{{infoContent.gender=='1'?'女':'男'}}</p>
+              <p>{{infoContent.mobile}}</p>
+              <p v-if="activeMembersIndex == 0">{{infoContent.departmentName}}</p>
             </div>
           </div>
-          <van-field class="customerType" v-model="customerType" label="客户类型" name="客户类型" readonly right-icon="arrow" @click="toSelect('toChooseType')" placeholder="请选择"/>
+          <van-field @click="toSelect('toChooseAppntType')" v-model="infoContent.appntTypeName" class="customerType" label="客户类型" name="客户类型" readonly right-icon="arrow" placeholder="请选择"/>
         </van-collapse-item>
       </van-collapse>
     </div>
@@ -61,37 +74,39 @@
         <van-collapse-item title="沟通记录" name="2">
           <div style="display: flex;justify-content: space-between;align-items: center;">
             <span>内容描述：</span>
-            <van-button plain round type="danger" size="small">添 加</van-button>
+            <van-button @click="activeConnectRecords = true" plain round type="danger" size="small">添 加</van-button>
           </div>
-          <div class="message">
-            <div class="wrapper">
-              <div class="parents">
-                <textarea placeholder="请输入内容描述......" maxlength="500" autofocus="true" v-model="val"></textarea>
-                <span class="tips">
-                  {{val.length}}/500
+          <div v-if="activeConnectRecords">
+            <div class="message">
+              <div class="wrapper">
+                <div class="parents">
+                  <textarea placeholder="请输入内容描述......" maxlength="500" autofocus="true" v-model="connectContent"></textarea>
+                  <span class="tips">
+                  {{connectContent.length}}/500
                 </span>
+                </div>
               </div>
             </div>
+            <div class="saveMeaasge" style="margin-top: 10px;display: flex;justify-content: center;">
+              <van-button @click="getGBCappntConnectSave" type="danger" size="small">保 存</van-button>
+            </div>
           </div>
-          <div class="saveMeaasge" style="margin-top: 10px;display: flex;justify-content: center;">
-            <van-button type="danger" size="small">保 存</van-button>
-          </div>
-          <div class="dataList2" style="border-top: 1px solid #dedede;margin-top: 10px;">
-            <div v-for="(item,index) in dataList2" :key="index" style="margin-top: 10px;">
+          <div class="connectRecordsClass" style="border-top: 1px solid #dedede;margin-top: 10px;">
+            <div v-for="(item,index) in infoContent.connectRecords" :key="index" style="margin-top: 10px;">
               <div style="display: flex;line-height: 30px;align-items: center;">
                 <span style="display: inline-block;width: 30%;color: #666;">记录时间：</span>
-                <span style="display: inline-block;width: 70%;color: #000;">{{item.time}}</span>
+                <span style="display: inline-block;width: 70%;color: #000;">{{item.connectTime}}</span>
               </div>
               <div style="display: flex;line-height: 30px;align-items: center;">
                 <span style="display: inline-block;width: 30%;color: #666;">提交人：</span>
-                <span style="display: inline-block;width: 70%;color: #000;">{{item.name}}</span>
+                <span style="display: inline-block;width: 70%;color: #000;">{{item.createUser}}</span>
               </div>
               <div style="display: flex;line-height: 30px;align-items: center;">
                 <span style="display: inline-block;width: 30%;color: #666;">内容描述：</span>
                 <span style="display: inline-block;width: 70%;color: #000;"></span>
               </div>
               <div class="itemMessage">
-                <van-field v-model="item.message" readonly rows="5" label="" type="textarea" maxlength="500" placeholder=""/>
+                <van-field v-model="item.connectContent" readonly rows="5" label="" type="textarea" maxlength="500" placeholder=""/>
               </div>
             </div>
           </div>
@@ -101,25 +116,25 @@
     <div style="margin: 10px;border-radius: 5px;overflow: hidden;">
       <van-collapse v-model="activeNames">
         <van-collapse-item title="保单信息" name="3">
-          <div v-for="(item,index) in dataList3" :key="index" style="border-bottom: 1px dashed #dedede;margin-bottom: 20px;">
+          <div v-for="(item,index) in infoContent.contList" :key="index" style="border-bottom: 1px dashed #dedede;margin-bottom: 20px;">
             <div style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #dedede;padding-bottom: 5px;">
               <div>
-                <p style="font-size: 14px;font-weight: bold;line-height: 25px;color: #000;">国富健康保终身重大疾病保险 </p>
-                <p style="font-size: 12px;line-height: 25px;color: #999;">保单号：600000417000520180000136 </p>
+                <p style="font-size: 14px;font-weight: bold;line-height: 25px;color: #000;">{{item.productName}} </p>
+                <p style="font-size: 12px;line-height: 25px;color: #999;">保单号：{{item.contNo}} </p>
               </div>
-              <div v-if="item.status == '1'" style="padding: 10px 20px;border-radius: 8px;border: 1px solid #e9332e;background: #ffdfde;color: #e9332e;">
+              <div v-if="item.orderStatus == '08'" style="padding: 10px 20px;border-radius: 8px;border: 1px solid #e9332e;background: #ffdfde;color: #e9332e;">
                 <span>已承保</span>
               </div>
-              <div v-if="item.status == '2'" style="padding: 10px 20px;border-radius: 8px;border: 1px solid #48A1F3;background: #DBEDFE;color: #48A1F3;">
+              <div v-if="item.orderStatus == '09'" style="padding: 10px 20px;border-radius: 8px;border: 1px solid #48A1F3;background: #DBEDFE;color: #48A1F3;">
                 <span>已退保</span>
               </div>
             </div>
             <div style="padding: 10px 0px;">
               <div style="display: flex;line-height: 30px;align-items: center;">
                 <p style="width: 30%;color: #666;">投保人：</p>
-                <p style="width: 25%;color: #000;">{{item.name1}}</p>
+                <p style="width: 25%;color: #000;">{{item.appntName}}</p>
                 <p style="width: 25%;color: #666;">被保险人：</p>
-                <p style="width: 20%;color: #000;">{{item.name2}}</p>
+                <p style="width: 20%;color: #000;">{{item.insuredName}}</p>
               </div>
               <div style="display: flex;line-height: 30px;align-items: center;">
                 <p style="width: 30%;color: #666;">保额(元)：</p>
@@ -128,14 +143,14 @@
                 <p style="width: 20%;color: #000;">{{item.prem}}</p>
               </div>
               <div style="display: flex;line-height: 30px;align-items: center;">
-                <p style="width: 30%;color: #666;">交费时间：</p>
-                <p style="width: 25%;color: #000;">{{item.time1}}</p>
-                <p style="width: 25%;color: #666;">保险时间：</p>
-                <p style="width: 20%;color: #000;">{{item.tiem2}}</p>
+                <p style="width: 30%;color: #666;">交费期间：</p>
+                <p style="width: 25%;color: #000;">{{item.paymentPeriod}}</p>
+                <p style="width: 25%;color: #666;">保险期间：</p>
+                <p style="width: 20%;color: #000;">{{item.insuredPeriod}}</p>
               </div>
               <div style="display: flex;line-height: 30px;align-items: center;">
                 <p style="width: 30%;color: #666;">保险生效日期：</p>
-                <p style="width: 50%;color: #000;">{{item.date}}</p>
+                <p style="width: 50%;color: #000;">{{item.effectiveDate}}</p>
               </div>
             </div>
           </div>
@@ -150,6 +165,7 @@
 
 <script>
 import { Collapse, CollapseItem } from 'vant'
+import { getGBCappntDetail, getGBCappntTypeSave, getGBCappntConnectSave } from '@/api/GBC/GBC.js'
 
 export default {
   components: {
@@ -158,63 +174,117 @@ export default {
   },
   data() {
     return {
-      dataList1:[
-        {name:'刘亚丽',type:'妻子',src:require('@/assets/images/GBC/relation1.png'),sex:'女'},
-        {name:'刘桂芬',type:'母亲',src:require('@/assets/images/GBC/relation2.png'),sex:'女'},
-        {name:'谢居安',type:'父亲',src:require('@/assets/images/GBC/relation3.png'),sex:'男'},
-        {name:'谢危',type:'儿子',src:require('@/assets/images/GBC/relation4.png'),sex:'男'},
-        {name:'刘亚丽',type:'妻子',src:require('@/assets/images/GBC/relation5.png'),sex:'女'},
-        {name:'刘桂芬',type:'母亲',src:require('@/assets/images/GBC/relation6.png'),sex:'女'},
-        {name:'谢居安',type:'父亲',src:require('@/assets/images/GBC/relation1.png'),sex:'男'},
-        {name:'谢危',type:'儿子',src:require('@/assets/images/GBC/relation2.png'),sex:'男'},
-      ],
+      activeMembersIndex:0,
+      activeConnectRecords:false,
+      infoContent:{
+        members:[
+          {appntName:'刘亚丽',relateToAppnt:1,src:require('@/assets/images/GBC/relation1.png'),gender:'1'},
+          {appntName:'刘桂芬',relateToAppnt:2,src:require('@/assets/images/GBC/relation2.png'),gender:'1'},
+          {appntName:'谢居安',relateToAppnt:3,src:require('@/assets/images/GBC/relation3.png'),gender:'0'},
+          {appntName:'谢危',relateToAppnt:4,src:require('@/assets/images/GBC/relation4.png'),gender:'0'},
+          {appntName:'刘亚丽',relateToAppnt:5,src:require('@/assets/images/GBC/relation5.png'),gender:'1'},
+          {appntName:'刘桂芬',relateToAppnt:6,src:require('@/assets/images/GBC/relation6.png'),gender:'1'},
+          {appntName:'谢居安',relateToAppnt:7,src:require('@/assets/images/GBC/relation1.png'),gender:'0'},
+          {appntName:'谢危',relateToAppnt:8,src:require('@/assets/images/GBC/relation2.png'),gender:'0'},
+          {appntName:'谢危',relateToAppnt:9,src:require('@/assets/images/GBC/relation2.png'),gender:'0'},
+        ],
+        connectRecords:[
+          {
+            connectTime:'2023-11-21 16:00:00',
+            createUser:'赵威武',
+            connectContent:'客户为财务部总经理，45岁，2个小孩，大儿子读初中，小女儿读小学，爱人在银行工作，全家人都已配置过重疾险，保额均为30万。自己可以做购买决策，但目前有2套房贷在供，经济压力较大，但对我司方案很认可，回去商量后再决定是否加保'
+          },
+          {
+            connectTime:'2023-11-21 16:00:00',
+            createUser:'赵威武',
+            connectContent:'客户为财务部总经理，45岁，2个小孩，大儿子读初中，小女儿读小学，爱人在银行工作，全家人都已配置过重疾险，保额均为30万。自己可以做购买决策，但目前有2套房贷在供，经济压力较大，但对我司方案很认可，回去商量后再决定是否加保'
+          },
+          {
+            connectTime:'2023-11-21 16:00:00',
+            createUser:'赵威武',
+            connectContent:'客户为财务部总经理，45岁，2个小孩，大儿子读初中，小女儿读小学，爱人在银行工作，全家人都已配置过重疾险，保额均为30万。自己可以做购买决策，但目前有2套房贷在供，经济压力较大，但对我司方案很认可，回去商量后再决定是否加保'
+          }
+        ],
+        contList:[
+          {appntName:'赵燕燕',insuredName:'赵燕燕',amt:'3,200.00',prem:'150.00',paymentPeriod:'3年交',insuredPeriod:'终身',effectiveDate:'2023-11-28',orderStatus: '1'},
+          {appntName:'赵燕燕',insuredName:'赵燕燕',amt:'3,200.00',prem:'150.00',paymentPeriod:'3年交',insuredPeriod:'终身',effectiveDate:'2023-11-28',orderStatus: '1'},
+          {appntName:'赵燕燕',insuredName:'赵燕燕',amt:'3,200.00',prem:'150.00',paymentPeriod:'3年交',insuredPeriod:'终身',effectiveDate:'2023-11-28',orderStatus: '2'},
+        ]
+      },
       activeNames:[],
       popupShow:false,
       columns:[],
       customerType:'',
       pickerType: '',
-      columns_toChooseType:[
+      columns_toChooseAppntType:[
         {text:'A类',id:'A'},
         {text:'B类',id:'B'},
         {text:'C类',id:'C'},
         {text:'D类',id:'D'},
       ],
-      val: "",
+      connectContent: "",
       maxLength: 500,
-      dataList2:[
-        {
-          time:'2023-11-21 16:00:00',
-          name:'赵威武',
-          message:'客户为财务部总经理，45岁，2个小孩，大儿子读初中，小女儿读小学，爱人在银行工作，全家人都已配置过重疾险，保额均为30万。自己可以做购买决策，但目前有2套房贷在供，经济压力较大，但对我司方案很认可，回去商量后再决定是否加保'
-        },
-        {
-          time:'2023-11-21 16:00:00',
-          name:'赵威武',
-          message:'客户为财务部总经理，45岁，2个小孩，大儿子读初中，小女儿读小学，爱人在银行工作，全家人都已配置过重疾险，保额均为30万。自己可以做购买决策，但目前有2套房贷在供，经济压力较大，但对我司方案很认可，回去商量后再决定是否加保'
-        },
-        {
-          time:'2023-11-21 16:00:00',
-          name:'赵威武',
-          message:'客户为财务部总经理，45岁，2个小孩，大儿子读初中，小女儿读小学，爱人在银行工作，全家人都已配置过重疾险，保额均为30万。自己可以做购买决策，但目前有2套房贷在供，经济压力较大，但对我司方案很认可，回去商量后再决定是否加保'
-        }
-      ],
-      dataList3:[
-        {name1:'赵燕燕',name2:'赵燕燕',amt:'3,200.00',prem:'150.00',tiem1:'3年交',time2:'终身',date:'2023-11-28',status: '1'},
-        {name1:'赵燕燕',name2:'赵燕燕',amt:'3,200.00',prem:'150.00',tiem1:'3年交',time2:'终身',date:'2023-11-28',status: '1'},
-        {name1:'赵燕燕',name2:'赵燕燕',amt:'3,200.00',prem:'150.00',tiem1:'3年交',time2:'终身',date:'2023-11-28',status: '2'},
-      ]
     }
   },
   created() {
 
   },
   mounted(){
-
+    this.getGBCappntDetail()
   },
   methods: {
+    activeMembers(thisData,thisIndex) {
+      this.activeMembersIndex = thisIndex
+      this.infoContent.appntName = thisData.name
+      this.infoContent.age = thisData.age
+      this.infoContent.gender = thisData.gender
+      this.infoContent.mobile = thisData.mobile
+      this.infoContent.departmentName = thisData.departmentName
+    },
+    getGBCappntDetail() {
+      let params = {
+        "projectCode": this.$route.query.projectCode,
+        "appntId": this.$route.query.appntId
+      }
+      getGBCappntDetail(params).then(res => {
+        if(res.result == 0) {
+          this.infoContent = res.content
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    getGBCappntConnectSave(){
+      let params = {
+        "projectCode": this.$route.query.projectCode,
+        "appntId": this.$route.query.projectCode,
+        "connectContent": this.connectContent
+      }
+      getGBCappntConnectSave(params).then(res=>{
+        if(res.result == 0) {
+          this.$toast('保存成功')
+          this.getGBCappntDetail()
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
     onConfirm(value){
-      if(this.pickerType == 'toChooseType'){
-        this.customerType = value.text
+      if(this.pickerType == 'toChooseAppntType'){
+        this.infoContent.appntTypeName = value.text
+        this.infoContent.appntType = value.id
+        let params = {
+          "projectCode": this.$route.query.projectCode,
+          "appntId": this.$route.query.appntId,
+          "appntType": this.infoContent.appntType
+        }
+        getGBCappntTypeSave(params).then(res=>{
+          if(res.result == 0){
+            this.$toast('保存成功')
+          } else {
+            this.$toast(res.resultMessage)
+          }
+        })
       }
       this.popupShow = false
     },
@@ -222,8 +292,8 @@ export default {
       this.pickerType = pickerType
       this.popupShow = true
       switch (pickerType) {
-        case 'toChooseType':
-          this.columns = this.columns_toChooseType
+        case 'toChooseAppntType':
+          this.columns = this.columns_toChooseAppntType
           break
       }
     },
@@ -317,4 +387,14 @@ export default {
       font-weight: bold;
     }
   }
+  .membersClass{
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    border-radius: 5px;
+    background: #fff;
+    margin-right: 10px;
+    overflow: hidden;
+    position: relative;
+  }
 </style>

src/views/GBC/projectDetail.vue

@@ -6,27 +6,40 @@
       <van-tab title="产品列表" name="productList"></van-tab>
     </van-tabs>
     <div v-if="tabActive == 'customerList'">
-      <div style="display: flex;align-items: center;margin-left: 10px;">
+      <div style="display: flex;align-items: center;padding-left: 10px;background: #fff;">
         <div style="width: 30%;">
           <van-dropdown-menu :overlay="dropdownmenuoverlay">
-            <van-dropdown-item v-model="chooseType" :options="chooseTypeOption" />
+            <van-dropdown-item v-model="filterType" :options="filterTypeOption" @change="dropdownMenuChange"/>
           </van-dropdown-menu>
         </div>
-        <van-search v-model="searchvalue" shape="round" background="#f5f5f5" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
+        <van-search v-if="filterType == 1 || filterType == 2 || filterType == 3" v-model="searchvalue" shape="round" @search="getGBCappntlist" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
+        <div v-if="filterType == 4" style="display: flex;align-items: center;height: 54px;">
+          <div @click="toChooseDate('startDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding:0px 10px;">
+            <van-icon name="notes-o" />
+            <span v-if="!startDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
+            <span v-if="startDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{startDate}}</span>
+          </div>
+          <span style="margin: 0px 5px;font-size: 14px;">至</span>
+          <div @click="toChooseDate('endDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding: 0px 10px;">
+            <van-icon name="notes-o" />
+            <span v-if="!endDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
+            <span v-if="endDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{endDate}}</span>
+          </div>
+        </div>
       </div>
       <div style="padding: 0px 10px 10px;">
-        <div v-for="item in customerList">
+        <div v-for="(item,index) in customerList" :key="index">
           <div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
             <div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
-              <div style="width: 55%;overflow: hidden;">
-                <p>客户姓名：{{item.name}}</p>
-                <p>手机号码：{{item.phone}}</p>
-                <p>服务组长：{{item.leader}}</p>
+              <div style="width: 55%;overflow: hidden;white-space: nowrap;">
+                <p>客户姓名：{{item.appntName}}</p>
+                <p>手机号码：{{item.mobile}}</p>
+                <p>服务组长：{{item.teamLeader}}</p>
               </div>
-              <div style="width: 45%;overflow: hidden;">
-                <p>部门/科室：{{item.department}}</p>
-                <p>承包保单：{{item.policyNums}}</p>
-                <p>服务组员：{{item.serviceName}}</p>
+              <div style="width: 45%;overflow: hidden;white-space: nowrap;">
+                <p>部门/科室：{{item.departmentName}}</p>
+                <p>承包保单：{{item.contSize}}份</p>
+                <p>服务组员：{{item.teamMember}}</p>
               </div>
             </div>
             <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
@@ -117,12 +130,17 @@
         </div>
       </div>
     </div>
+
+    <van-popup v-model="showDataPicker" position="bottom">
+      <van-datetime-picker type="date" v-model="currentDate" @confirm="onConfirmDate" @cancel="cancelDate" :max-date="maxDate" :min-date="minDate" />
+    </van-popup>
   </div>
 </template>
 
 <script>
 import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
 import { getList } from '@/api/ebiz/product/product.js'
+import { getGBCappntlist } from '@/api/GBC/GBC.js'
 export default {
   components: {
     [Tab.name]: Tab,
@@ -136,57 +154,22 @@ export default {
     return {
       tabActive:1,
       searchvalue:'',
-      chooseType: 0,
-      chooseTypeOption: [
-        { text: '请选择', value: 0 },
+      filterType: 1,
+      startDate:'',
+      endDate:'',
+      showDataPicker:false,
+      minDate: new Date(2000, 0, 1),
+      maxDate: new Date(2050, 11, 31),
+      currentDate:new Date(),
+      datePickerType:'',
+      filterTypeOption: [
         { text: '按客户', value: 1 },
         { text: '按科室', value: 2 },
         { text: '按小组', value: 3 },
         { text: '按日期', value: 4 },
       ],
       dropdownmenuoverlay:false,
-      customerList:[
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-        {
-          name:'赵燕燕',
-          department:'财务部',
-          phone:'15825826959',
-          policyNums:'10份',
-          leader:'李斯',
-          serviceName:'刘艺'
-        },
-      ],
+      customerList:[],
       currentRate: 0,
       colorList:['#E9332E','#CB9BFF','#54C6FA','#FF9B39','#60D64D','#4045F3','#FF59D9','#E8C0A2','#FCD338','#7584A2'],
       dataList1:[
@@ -223,14 +206,92 @@ export default {
 
   },
   mounted(){
+    this.getGBCappntlist()
     this.getProductList()
   },
   methods: {
+    dropdownMenuChange(value){
+      this.filterType = value
+      this.searchvalue = ''
+      this.startDate = ''
+      this.endDate = ''
+      if(value == 1 || value == 2 || value == 3) {
+        this.getGBCappntlist()
+      }
+    },
+    getGBCappntlist(){
+      let params = {
+        "projectCode": this.$route.query.projectCode,
+        "filterType": this.filterType,
+        "appntName": "",
+        "departmentName": "",
+        "teamMemberName": "",
+        "startDate": "",
+        "endDate": ""
+      }
+      if(this.filterType == 1){
+        params.appntName = this.searchvalue
+      }
+      if(this.filterType == 2){
+        params.departmentName = this.searchvalue
+      }
+      if(this.filterType == 3){
+        params.teamMemberName = this.searchvalue
+      }
+      if(this.filterType == 4) {
+        params.startDate = this.startDate
+        params.endDate = this.endDate
+      }
+      getGBCappntlist(params).then(res=>{
+        if(res.result == '0') {
+          this.customerList = []
+          if(res.content && res.content.length != 0) {
+            this.customerList = res.content
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    toChooseDate(type){
+      this.datePickerType = type
+      if(type == 'startDate') {
+        this.showDataPicker = true
+      }
+      if(type == 'endDate') {
+        this.showDataPicker = true
+      }
+    },
+    onConfirmDate(date){
+      if(this.datePickerType == 'startDate') {
+        let year = date.getFullYear()
+        let month = String(date.getMonth() + 1).padStart(2, '0');
+        let day = String(date.getDate()).padStart(2, '0');
+        this.startDate = year + '-' + month + '-' + day;
+        if(this.endDate) {
+          this.getGBCappntlist()
+        }
+      }
+      if(this.datePickerType == 'endDate') {
+        let year = date.getFullYear()
+        let month = String(date.getMonth() + 1).padStart(2, '0');
+        let day = String(date.getDate()).padStart(2, '0');
+        this.endDate = year + '-' + month + '-' + day;
+        if(this.startDate) {
+          this.getGBCappntlist()
+        }
+      }
+      this.showDataPicker = false
+    },
+    cancelDate(){
+      this.showDataPicker = false
+    },
     goCustomerDetail(data){
       this.$router.push({
         path:'/GBC/customerDetail',
         query:{
-          serviceName:data.serviceName
+          projectCode:this.$route.query.projectCode,
+          appntId:data.appntId
         },
       })
     },
@@ -262,6 +323,13 @@ export default {
       })
     },
   },
+  // watch: {
+  //   isShowOthenSalarySource(nVal) {
+  //     if (!nVal) {
+  //       this.userInfo.otherSalarySource = ''
+  //     }
+  //   },
+  // },
   computed: {
     text() {
       return this.currentRate.toFixed(0) + '%';
@@ -296,4 +364,16 @@ export default {
     border-radius: 3px;
     margin-right: 3px;
   }
+  /deep/ .van-hairline--top-bottom::after{
+    border: none;
+  }
+  /deep/ .van-dropdown-menu{
+    background: #fff;
+  }
+  /deep/ .van-search__content{
+    background: #f5f5f5;
+  }
+  /deep/ [data-v-3f765cce] .van-dropdown-item__content{
+    box-shadow: 0px 0px 5px 5px #f5f5f5;
+  }
 </style>