ShangHaiLifeECIF/dgtis-ui/src/views/system/userInfo/index.vue

<template>
  <div class="app-container">
    <div class="conPanel">
      <div class="userInfoPanel">
        <div class="title">{{custInfo.name}}<span class="num">（{{custInfo.custid}}）</span>
<!--          <span class="tag">2孩儿</span>-->
          <span class="tag" v-for="item in 120" :key="item" v-if="labelPD(item)" v-text="labeText(item)"></span>
        </div>
        <el-row class="userInfo">
          <el-col :span="12">
            <span class="name">性别</span>
            <span class="value" v-if="custInfo.gender == 0">男</span>
            <span class="value" v-else>女</span>
          </el-col>
          <el-col :span="12">
            <span class="name">民族</span>
            <span class="value">汉</span>
          </el-col>
          <el-col :span="12">
            <span class="name">出生日期</span>
            <span class="value">{{custInfo.birthday}}</span>
            <el-tag type="warning" effect="dark" size="mini">{{custInfo.label3}}</el-tag>
          </el-col>
          <el-col :span="12">
            <span class="name">国籍</span>
            <span class="value">中国</span>
          </el-col>
          <el-col :span="12">
            <span class="name">户籍所在地</span>
            <span class="value">江苏省南京市江宁区天元东路***号a区*栋****</span>
          </el-col>
          <el-col :span="12">
            <span class="name">婚姻状况</span>
            <span class="value">已婚</span>
          </el-col>
          <el-col :span="12">
            <span class="name">职业</span>
            <span class="value">律师</span>
            <el-tag type="warning" effect="dark" size="mini">敏感职业</el-tag>
          </el-col>
          <el-col :span="12">
            <span class="name">工作单位</span>
            <span class="value">神州通誉软件（上海）有限公司</span>
          </el-col>
          <el-col :span="12">
            <span class="name">最高学历</span>
            <span class="value">硕士</span>
          </el-col>
          <el-col :span="12">
            <span class="name">客户类型</span>
            <span class="value">投保人</span>
          </el-col>
          <el-col :span="12">
            <span class="name">客户等级</span>
            <span class="value">白金</span>
          </el-col>
          <el-col :span="12">
            <span class="name">社保情况</span>
            <span class="value">有社保</span>
          </el-col>
          <el-col :span="12">
            <span class="name">官微积分</span>
            <span class="value">586</span>
          </el-col>
          <el-col :span="12">
            <span class="name">户籍类型</span>
            <span class="value">城镇</span>
          </el-col>
          <el-col :span="12">
            <span class="name">个人年收入</span>
            <span class="value">6w-8w</span>
          </el-col>
          <el-col :span="12">
            <span class="name">家庭年收入</span>
            <span class="value">20w-30w</span>
          </el-col>
          <el-col :span="12">
            <span class="name">收入来源</span>
            <span class="value">工资</span>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-tabs class="userInfoTab" v-model="tabActive" @tab-click="tabChange">
          <el-tab-pane label="联系信息" name="lxxx">
            <contact :data="contactData"></contact>
          </el-tab-pane>
          <el-tab-pane label="习惯偏好" name="pzgl">
            <habit :data="habitData"></habit>
          </el-tab-pane>
          <el-tab-pane label="健康状况" name="jsgl">
            <health :data="healthData"></health>
          </el-tab-pane>
          <el-tab-pane label="关系信息" name="gxxx">
            <relationship :data="relationshipData"></relationship>
          </el-tab-pane>
          <el-tab-pane label="合约信息" name="hyxx">
            <contract-information :data="contractInformationData"></contract-information>
          </el-tab-pane>
          <el-tab-pane label="理赔信息" name="lpxx">
            <claim :data="claimData"></claim>
          </el-tab-pane>
          <el-tab-pane label="接触信息" name="jcxx">
            <touched :data="touchedData"></touched>
          </el-tab-pane>
          <el-tab-pane label="标签信息" name="bqxx">
            <tags :data="tagsData"></tags>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getCustomerById } from "@/api/customerInformation/customerInformation.js";
import habit from './components/habit'
import health from './components/health'
import contractInformation from './components/contractInformation'
import claim from './components/claim'
import contact from './components/contact'
import relationship from './components/relationship'
import touched from './components/touched'
import tags from './components/tags'
export default {
  name: "UserInfo",
  components: {
    habit,
    health,
    contractInformation,
    claim,
    contact,
    relationship,
    touched,
    tags
  },
  data() {
    return {
        custInfo:{},
      tabActive:'hyxx',
      habitData:[],
      healthData:[],
      contractInformationData:[],
      claimData:[],
      contactData:[
        {
          des:'户籍地址',
          country:'中国',
          province:'河南',
          city:'洛阳',
          area:'洛龙区',
          street:'开元大道厚载门街300号',
          postalCode:'47100',
          WeChat:'weixin123',
          email:'mail163.com',
          QQ:'974171632',
          phone:'180***121',
        },
        {
          des:'公司地址',
          country:'中国',
          province:'河南',
          city:'洛阳',
          area:'洛龙区',
          street:'开元大道厚载门街300号',
          postalCode:'47100',
          WeChat:'weixin123',
          email:'mail163.com',
          QQ:'974171632',
          phone:'180***121',
        },
        {
          des:'户籍地址',
          country:'中国',
          province:'河南',
          city:'洛阳',
          area:'洛龙区',
          street:'开元大道厚载门街300号',
          postalCode:'47100',
          WeChat:'weixin123',
          email:'mail163.com',
          QQ:'974171632',
          phone:'180***121',
        },
      ],
      relationshipData:[
        {
          type:'父母',
          name1:'张大川',
          role1:'儿子',
          name2:'张三',
          role2:'父亲',
          des:'父子关系，张三是张大川的父亲',
        },
        {
          type:'子女',
          name1:'张大川',
          role1:'父亲',
          name2:'张蕾',
          role2:'女儿',
          des:'父女关系，张蕾是张大川的女儿',
        },
        {
          type:'夫妻',
          name1:'张大川',
          role1:'丈夫',
          name2:'王美丽',
          role2:'妻子',
          des:'夫妻关系，王美丽是张大川的妻子',
        },
      ],
      touchedData: {
        data:[
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#DCE4F7',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#DCE4F7',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#DCE4F7',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#FEE2B0',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#FEE2B0',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#FEE2B0',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#FEE2B0',
          },
          {
            label:'保险单号：BX12312313<br>接触类型：投保<br>接触角色：投保人<br>接触原因：需要保险服务',
            date:'2018.03.21',
            backgroundColor:'#FEE2B0',
          },

        ],
        // color:"chocolate",
        dowload:false,
    },
      tagsData:['有极短意保单','给本人投保','给父母投保','给配偶投保','仅有一年期短险保单','有续期缴费的保单'],
    }
  },
  created() {

  },
  mounted() {
      this.getCustomerByIdData();
  },
  methods: {
      getCustomerByIdData(){
          this.loading = true;
          let id = this.$route.query.id;
          getCustomerById({id:id}).then(response => {
                  console.log(response);
                  this.custInfo = response.data.custInfo
                  this.loading = false;
              }
          );
      },
      labelPD(index){
          var that = this;
          var label = 'label'+index;
          if(that.custInfo[label] && that.custInfo[label] != ""){
              return true;
          }else{
              return false;
          }
      },
      labeText(index){
          var that = this;
          var label = 'label'+index;
          return that.custInfo[label];
      },
    tabChange(tab, event){
      console.log(tab, event);
    },
  }
};
</script>
<style lang="scss">
  .conPanel{
    width: 97%;
    /*height: 92%;*/
    /*position: absolute;*/
    .userInfoPanel{
      border-radius: 5px;
      background:#FFF;
      .title{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        color: #1E4F97;
        font-weight: bold;
        padding: 0 10px;
        border-bottom: 1px solid #F0F0F0;
        overflow: hidden;
        .num{
          font-size: 14px;
        }
        .tag{
          font-size: 12px;
          color: #FFF;
          padding: 4px;
          background: #00398B;
          margin: 0 4px;
          border-radius: 4px;
        }
      }
    }
    .userInfoTab{
      margin-top: 16px;
      .tagDiv{
        padding: 20px 30px;
        border-radius: 5px;
        background: #FFF;
        box-sizing: border-box;
        .tag{
          margin-right: 16px;
        }
      }
    }
    .userInfo{
      padding: 10px;
      box-sizing: border-box;
      line-height:26px;
      .name{
        font-size: 14px;
        font-weight: bold;
        color: #333;
        width: 130px;
        text-align: right;
        display: inline-block;
      }
      .value{
        font-size: 14px;
        color: #333;
        display: inline-block;
        padding-left: 20px;
        margin-right: 6px;
      }
    }
  }
</style>
<style>
  .userInfoTab .el-tabs__header .el-tabs__nav-wrap::after {
        background-color: rgba(255,255,255,0);
  }
  .userInfoTab .el-tabs__item.is-active{
    color: #00388B;
  }
  .userInfoTab .el-tabs__active-bar{
    background-color: #00388B;
  }
  .userInfoTab .el-tabs__item:hover {
    color: #00388B;
  }
  .userInfoTab .el-tabs__header{
    padding: 0 30px;
    box-sizing: border-box;
  }
</style>