编辑客户信息页面基本功能编写

src/views/GBC/customerDetail.vue

@@ -35,7 +35,7 @@
     </div>
     <div style="margin: 10px;border-radius: 5px;overflow: hidden;">
       <van-collapse v-model="activeNames">
-        <van-collapse-item title="标题1" name="1">
+        <van-collapse-item title="基本信息" name="1">
           <div style="display: flex;padding-bottom: 10px;border-bottom: 1px dashed #666;">
             <div style="width: 30%;line-height: 30px;color: #666;">
               <p>客户姓名：</p>
@@ -52,7 +52,93 @@
               <p>财务部</p>
             </div>
           </div>
-          <van-field class="customerType" v-model="customerType" label="客户类型" name="客户类型" readonly right-icon="arrow" @click="toSelect('toChooseType')" placeholder="请输入"/>
+          <van-field class="customerType" v-model="customerType" label="客户类型" name="客户类型" readonly right-icon="arrow" @click="toSelect('toChooseType')" placeholder="请选择"/>
+        </van-collapse-item>
+      </van-collapse>
+    </div>
+    <div style="margin: 10px;border-radius: 5px;overflow: hidden;">
+      <van-collapse v-model="activeNames">
+        <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>
+          </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
+                </span>
+              </div>
+            </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 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>
+              </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>
+              </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=""/>
+              </div>
+            </div>
+          </div>
+        </van-collapse-item>
+      </van-collapse>
+    </div>
+    <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 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>
+              </div>
+              <div v-if="item.status == '1'" 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;">
+                <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: #666;">被保险人：</p>
+                <p style="width: 20%;color: #000;">{{item.name2}}</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.amt}}</p>
+                <p style="width: 25%;color: #666;">保费(元)：</p>
+                <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>
+              </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>
+              </div>
+            </div>
+          </div>
         </van-collapse-item>
       </van-collapse>
     </div>
@@ -86,13 +172,37 @@ export default {
       popupShow:false,
       columns:[],
       customerType:'',
+      pickerType: '',
       columns_toChooseType:[
         {text:'A类',id:'A'},
         {text:'B类',id:'B'},
         {text:'C类',id:'C'},
         {text:'D类',id:'D'},
       ],
-
+      val: "",
+      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() {
@@ -102,16 +212,24 @@ export default {
 
   },
   methods: {
-    onConfirm(){
-
+    onConfirm(value){
+      if(this.pickerType == 'toChooseType'){
+        this.customerType = value.text
+      }
+      this.popupShow = false
     },
     toSelect(pickerType){
+      this.pickerType = pickerType
+      this.popupShow = true
       switch (pickerType) {
         case 'toChooseType':
           this.columns = this.columns_toChooseType
           break
       }
     },
+  },
+  computed: {
+
   },
   beforeRouteLeave(to, from, next) {
     document.body.style.backgroundColor = ''
@@ -148,4 +266,55 @@ export default {
     padding-right: 0px;
     color: #666;
   }
+  /deep/ .message{
+    border-radius: 10px;
+    border: 1px solid #dedede;
+    margin-top: 20px;
+    padding: 10px;
+  }
+  .parents {
+    width: 100%;
+    height: 120px;
+    position: relative;
+  }
+  textarea {
+    border: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .tips {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  /deep/ .saveMeaasge{
+    .van-button--small{
+      padding: 0px 40px;
+      border-radius: 5px;
+    }
+  }
+  /deep/ .itemMessage{
+    border: 1px solid #dedede;
+    border-radius: 10px;
+    padding: 10px;
+    .van-field__label{
+      width: 0;
+    }
+    .van-cell{
+      padding: 0px;
+    }
+    .van-field__control{
+      color: #333;
+      height: auto;
+    }
+  }
+  /deep/ .van-collapse-item{
+    .van-cell__title{
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
 </style>

src/views/GBC/projectDetail.vue

@@ -47,7 +47,7 @@
         <div style="padding: 10px;background: rgba(251, 235, 230, 0.5);border-radius: 5px;display: flex;justify-content: flex-start;flex-wrap:wrap;">
           <div v-for="(item,index) in dataList1" style="width: 33%;display: flex;justify-content: space-around;align-items: center;">
             <div>
-              <div style="font-size: 12px;line-height: 20px;margin: 5px 0px;">
+              <div style="font-size: 12px;line-height: 22px;margin: 7px 0px;">
                 <p style="display: flex;justify-content: center;font-size: 14px;">{{item.value}}</p>
                 <p style="display: flex;justify-content: center;align-items: center;">
                   <span class="colorBlock" :style="{background:colorList[index]}"></span>