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

<template>
  <div class="app-container">
    <div class="conPanel" v-loading="loading">
      <div class="userInfoPanel">
        <div class="title">{{custInfo.name}}<span class="num">（{{custInfo.custid}}）</span>
<!--          <span class="tag">2孩儿</span>-->
          <span class="tag" v-if="custInfo.label10 && custInfo.label10 !='' " v-text="custInfo.label10"></span>
          <span class="tag" v-if="custInfo.label25 && custInfo.label25 !='' " v-text="custInfo.label25"></span>
          <span class="tag" v-if="custInfo.label73 && custInfo.label73 !='' " v-text="custInfo.label73"></span>
          <span class="tag" v-if="custInfo.label74 && custInfo.label74 !='' " v-text="custInfo.label74"></span>
          <span class="tag" v-if="custInfo.label100 && custInfo.label100 !='' " v-text="custInfo.label100"></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">{{custInfo.ethnic}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">出生日期</span>
            <span class="value">{{parseTime(custInfo.birthday,'{yy}-{mm}-{dd}')}}</span>
            <el-tag type="warning" effect="dark" size="mini" v-if="custInfo.label3 && custInfo.label3 !='' ">{{custInfo.label3}}</el-tag>
            <el-tag type="warning" effect="dark" size="mini" v-if="custInfo.label96 && custInfo.label96 !='' ">{{custInfo.label96}}</el-tag>
            <el-tag type="warning" effect="dark" size="mini" v-if="custInfo.label97 && custInfo.label97 !='' ">{{custInfo.label97}}</el-tag>
          </el-col>
          <el-col :span="12">
            <span class="name">国籍</span>
            <span class="value">{{custInfo.nation}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">婚姻状况</span>
            <span class="value" v-if="custInfo.maritalstat == 1">未婚</span>
            <span class="value" v-else-if="custInfo.maritalstat == 2">已婚</span>
            <span class="value" v-else-if="custInfo.maritalstat == 3">丧偶</span>
            <span class="value" v-else-if="custInfo.maritalstat == 4">离异</span>
          </el-col>
          <el-col :span="12">
            <span class="name">职业</span>
            <span class="value">{{custInfo.occupation}}</span>
            <el-tag type="warning" effect="dark" size="mini" v-if="custInfo.label98 && custInfo.label98 !='' ">{{custInfo.label98}}</el-tag>
          </el-col>
          <el-col :span="12">
            <span class="name">工作单位</span>
            <span class="value">{{custInfo.employer}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">最高学历</span>
            <span class="value">{{custInfo.education}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">客户类型</span>
            <span class="value">{{custInfo.custtype}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">客户等级</span>
            <span class="value" v-text="levelText(custInfo.custclass)"></span>
          </el-col>
          <el-col :span="12">
            <span class="name">社保情况</span>
            <span class="value">{{custInfo.sistatus}}</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.regtype}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">个人年收入</span>
            <span class="value">{{custInfo.pincome}}万</span>
            <el-tag type="warning" effect="dark" size="mini" v-if="custInfo.label21 && custInfo.label21 !='' ">{{custInfo.label21}}</el-tag>
          </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">{{custInfo.incomesource}}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">户籍所在地</span>
            <span class="value">{{custInfo.homeaddress}}</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" v-if="hasHabitData()"></habit>
            <nodata v-else></nodata>
          </el-tab-pane>
          <el-tab-pane label="健康状况" name="jsgl">
            <health :data="healthData" v-if="hasHealthData()"></health>
            <nodata v-else></nodata>
          </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" :tagsData="tagsDataHY"></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" v-if="tagsData && tagsData.length > 0"></tags>
            <nodata v-else></nodata>
          </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'
import nodata from './components/nodata'
export default {
  name: "UserInfo",
  components: {
    habit,
    health,
    contractInformation,
    claim,
    contact,
    relationship,
    touched,
    tags,
    nodata
  },
  data() {
    return {
      loading: true,
        custInfo:{},
      tabActive:'hyxx',
      habitData:{},
      healthData:{},
      contractInformationData:[],
      tagsDataHY:[],
      labelHyNum:[24,28,31,35,37,43,44,46,65,88,89,107,116,120],
      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:[],
      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 that = this;
          let id = that.$route.query.id;
          getCustomerById({id:id}).then(response => {
                  console.log(response);
                  that.custInfo = response.data.custInfo;
                  that.relationshipData = response.data.relationship;
                  that.habitData.ctype = response.data.custInfo.ctype;
                  response.data.custInfo.hobby1 ? response.data.custInfo.hobby1 = response.data.custInfo.hobby1+'、' : response.data.custInfo.hobby1 ='';
                  response.data.custInfo.hobby2 ? response.data.custInfo.hobby2 = response.data.custInfo.hobby2+'、' : response.data.custInfo.hobby2 ='';
                  response.data.custInfo.hobby3 ? response.data.custInfo.hobby3 = response.data.custInfo.hobby3 : response.data.custInfo.hobby3 ='';
                  that.habitData.hobby = response.data.custInfo.hobby1 + response.data.custInfo.hobby2 +response.data.custInfo.hobby3;
                  response.data.custInfo.evadate ? that.healthData.evadate = response.data.custInfo.evadate : that.healthData.evadate = '';
                  response.data.custInfo.height ? that.healthData.height = response.data.custInfo.height : that.healthData.height = '';
                  response.data.custInfo.weight ? that.healthData.weight = response.data.custInfo.weight : that.healthData.weight = '';
                  response.data.custInfo.bmi ? that.healthData.bmi = response.data.custInfo.bmi : that.healthData.bmi = '';
                  that.labelAll();
                  that.labelHy();
                  response.data.insuranceclaimthread?that.claimData = response.data.insuranceclaimthread:that.claimData = [];
                  response.data.insurancearrangement?that.contractInformationData = response.data.insurancearrangement:that.contractInformationData = [];
                  that.loading =  false;
              }
          );
      },
      labelAll(){
          var that = this;
          that.tagsData = [];
          for(var i=0;i<120;i++){
            var label = 'label'+i;
            if(that.custInfo[label] && that.custInfo[label] != ""){
              that.tagsData.push(that.custInfo[label]);
            }
          }
      },
      labelHy(){
        var that = this;
        that.tagsDataHY = [];
        that.labelHyNum.forEach((item,index) => {
          var label = 'label'+item;
          if(that.custInfo[label] && that.custInfo[label] != ""){
            that.tagsDataHY.push(that.custInfo[label]);
          }
        } )
      },
      hasHealthData(){
        if(this.healthData.evadate ){
          return true;
        }else if(this.healthData.height){
          return true;
        }else if(this.healthData.weight){
          return true;
        }else if(this.healthData.bmi){
          return true;
        }
      },
      hasHabitData(){
        if(this.habitData.ctype ){
          return true;
        }else if(this.habitData.hobby){
          return true;
        }
      },
    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: 10px 30px 20px;
        border-radius: 5px;
        background: #FFF;
        box-sizing: border-box;
        .tag{
          margin-right: 16px;
          margin-top: 10px;
        }
      }
    }
    .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>