ebiz-h5/src/views/GBC/customerDetail.vue

<template>
  <div>
    <div style="background: #fff;margin: 10px;padding: 10px;border-radius: 5px;">
      <div style="display: flex;font-size: 14px;font-weight: bold;">
        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">保单数量</span>
        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center">家庭成员</span>
        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">总保额</span>
        <span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">总保费</span>
      </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>
        <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>
        <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>
        <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>
      </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 style="position: absolute;top: 20px;left: 20px;">
          <img :src="item.src" style="width: 40px;" />
        </div>
        <div style="position: absolute;bottom: 3px;width: 100%;text-align: center;font-size: 12px;">{{item.name}}</div>
      </div>
    </div>
    <div style="margin: 10px;border-radius: 5px;overflow: hidden;">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="标题1" 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>
              <p>年龄：</p>
              <p>性别：</p>
              <p>手机号码：</p>
              <p>部门/科室：</p>
            </div>
            <div style="width: 70%;line-height: 30px;color: #000;">
              <p>赵燕燕</p>
              <p>39周岁</p>
              <p>男</p>
              <p>158****6959</p>
              <p>财务部</p>
            </div>
          </div>
          <van-field class="customerType" v-model="customerType" label="客户类型" name="客户类型" readonly right-icon="arrow" @click="toSelect('toChooseType')" placeholder="请输入"/>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-popup v-model="popupShow" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" />
    </van-popup>
  </div>
</template>

<script>
import { Collapse, CollapseItem } from 'vant'

export default {
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
  },
  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:'男'},
      ],
      activeNames:[],
      popupShow:false,
      columns:[],
      customerType:'',
      columns_toChooseType:[
        {text:'A类',id:'A'},
        {text:'B类',id:'B'},
        {text:'C类',id:'C'},
        {text:'D类',id:'D'},
      ],

    }
  },
  created() {

  },
  mounted(){

  },
  methods: {
    onConfirm(){

    },
    toSelect(pickerType){
      switch (pickerType) {
        case 'toChooseType':
          this.columns = this.columns_toChooseType
          break
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    document.body.style.backgroundColor = ''
    next()
  }
}
</script>

<style lang="scss" scoped>
  .triangle1 {
    width: 0;
    height: 0;
    border-width:30px; /* 设置边长 */
    border-style: solid;
    transform: translateX(50px) translateY(-30px) rotate(45deg);
    border-color: transparent transparent #FC7D5B transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
  }
  .triangle2 {
    width: 0;
    height: 0;
    border-width:30px; /* 设置边长 */
    border-style: solid;
    transform: translateX(50px) translateY(-30px) rotate(45deg);
    border-color: transparent transparent #3D72D0 transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
  }
  /deep/ .van-cell:not(:last-child)::after {
    border-bottom: 1px dashed #666 !important;
  }
  /deep/ .van-cell:not(:last-child)::after{
    left:0px !important;
  }
  .customerType{
    padding-left: 0px;
    padding-right: 0px;
    color: #666;
  }
</style>