黄尔冬 / net_iou

<template>
  <v-layout id="BasicInfo" column justify-center align-center>
    <v-flex>
      <v-card id="InfoBlock" class="infoList" height="15.5rem">
        <v-list>
          <v-subheader>本人信息</v-subheader>
          <v-divider></v-divider>          
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title >微信号</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <input type="text" placeholder="请输入微信号" v-model="form.wechatId">
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile @click="areaListDisplay = true">
            <v-list-tile-content>
              <v-list-tile-title >现居住地区</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <div :class="form.area ? '' : 'grey--text text--darken-1'">{{form.area || "请选择地区"}}</div>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title >详细地址</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <input type="text" placeholder="请具体到小区门牌号" v-model="form.address">
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider> 
          <v-subheader>紧急联系人1</v-subheader>
          <v-divider></v-divider>          
          <v-list-tile @click="showRoleList('A')">
            <v-list-tile-content>
              <v-list-tile-title >TA是我的</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <div :class="form.contactARole ? '' : 'grey--text text--darken-1'">{{form.contactARole || "请选择"}}</div>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title >联系人姓名</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <input type="text" placeholder="请输入该联系人姓名" v-model="form.contactAName">
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title >联系人手机</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <input type="text" placeholder="请输入联系人手机" v-model="form.contactAPhone">
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider> 
          <v-subheader>紧急联系人2</v-subheader>
          <v-divider></v-divider>          
          <v-list-tile @click="showRoleList('B')">
            <v-list-tile-content>
              <v-list-tile-title >TA是我的</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <div :class="form.contactBRole ? '' : 'grey--text text--darken-1'">{{form.contactBRole || "请选择"}}</div>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title >联系人姓名</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <input type="text" placeholder="请输入该联系人姓名" v-model="form.contactBName">
            </v-list-tile-action>
          </v-list-tile>
          <v-divider></v-divider>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title >联系人手机</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
             <input type="text" placeholder="请输入联系人手机" v-model="form.contactBPhone">
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
        <div class="ConfirmButtonBlock">
          <v-btn depressed id="ConfirmButton" :loading="isLoading" @click="formCheck">{{this.nextStep ? '下一步' : '确  定'}}</v-btn>
        </div>
      </v-card>
    </v-flex>
    <Picker 
      :data="rolaList" 
      title="请选择" 
      @pickerClose="rolaListDisplay = false" 
      @select="roleChange"
      :display="rolaListDisplay"/>
    <Picker 
      :data="areaList" 
      title="请选择" 
      @pickerClose="areaListDisplay = false" 
      @select="areaSelect"
      @change="pickerChange"
      :display="areaListDisplay"/>
    <v-dialog  v-model="dialogDisplay" persistent max-width="290">
      <v-card class="hintDialog">
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text class='dialogContent'>{{dialogInfo}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="black" flat @click.native="dialogDisplay = false">知道了</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
import {wechatShareSetting} from '@/helper'
import Picker from '@/components/Picker'
import areaData from '@/assets/areaData.json'

export default {
  layout: 'lightColor',
  data:() => ({
    form: {
      wechatId: '',
      area: '',
      address: '',
      contactAName: '',
      contactAPhone: '',
      contactARole: '',
      contactBName: '',
      contactBPhone: '',
      contactBRole: '',
    },
    rolaList: [[{text: '配偶'},{text: '父母'},{text: '兄弟姐妹'},{text: '子女'},]],
    rolaListDisplay: false,
    areaListDisplay: false,
    target: 'A',
    areaData: {},
    provice: [],
    city: [],
    district: [],
    areaList: [],
    isLoading: false,
    dialogDisplay: false,
    dialogInfo: ''
  }),
  head:() => ({
    title: '基础信息'
  }),
  components: {
    Picker
  },
  watch: {
    city() {
      this.$set(this.areaList, 1, this.city)
    },
    district() {
      this.$set(this.areaList, 2, this.district)
    }
  },
  computed: {
    nextStep() {
      return this.$route.query.next || ''
    }
  },
  created() {
    this.areaData = areaData
    const initProvice = this.areaData['86']
    Object.keys(initProvice).forEach(key => {
      this.provice.push({
        text: initProvice[key],
        value: initProvice[key],
        id: key
      })
    })
    this.changeCity('110000')
    this.areaList = [this.provice, this.city, this.district]
  },
  mounted() {
    wechatShareSetting(this.$axios, this.$store)
    
  },
  methods: {
    showRoleList(target) {
      this.target = target
      let list = [{text: '配偶', value:'配偶'},{text: '父母', value:'父母'},{text: '兄弟姐妹', value:'兄弟姐妹'},{text: '子女', value:'子女'},{text: '同事', value:'同事'},{text: '同学', value:'同学'},{text: '朋友', value:'朋友'},]
      this.rolaList = target === "A" ? [list.slice(0, 4)] : [list]
      this.rolaListDisplay = true
    },
    roleChange(e) {
      this.target === "A" ? this.form.contactARole = e[0] : this.form.contactBRole = e[0]
    },
    areaSelect(e) {
      this.form.area = `${e[0]}-${e[1]}-${e[2]}`
    },
    pickerChange(e, i) {
      if (e === 0) {
        const id = this.provice[i].id              
        this.changeCity(id)
      } else if (e === 1) {
        const id = this.city[i].id                      
        this.changeDistrict(id)
      }
    },
    changeCity(id) {
      const cities = this.areaData[id]
      let result = []
      Object.keys(cities).forEach(key => {
        result.push({
          text: cities[key],
          value: cities[key],
          id: key
        })
      })
      this.city = result
      this.changeDistrict(result[0].id)
    },
    changeDistrict(id) {
      const districts = this.areaData[id]
      let result = []
      Object.keys(districts).forEach(key => {
        result.push({
          text: districts[key],
          value: districts[key],
          id: key
        })
      })
      this.district = result
    },
    formCheck() {
      const reg = /^((13[0-9])|(15[^4])|(166)|(17[0-8])|(18[0-9])|(19[8-9])|(147,145))\d{8}$/
      if (!(this.form.wechatId && this.form.area && this.form.address && this.form.contactAName && this.form.contactAPhone && this.form.contactARole && this.form.contactBName && this.form.contactBPhone && this.form.contactBRole)) {
        this.dialogInfo = '请完成所有项后再提交！'
        this.dialogDisplay = true
        return
      }
      if (!reg.test(this.form.contactAPhone) || !reg.test(this.form.contactBPhone)) {
        this.dialogInfo = '请输入有效的手机号码！'
        this.dialogDisplay = true
        return
      }
      this.submit()
    },
    async submit() {
      this.isLoading = true
      const {data} = await this.$axios.post('/credit/base', Object.assign({userId: this.$store.state.user.id}, this.form))
      if (data.success) {
        if (!this.nextStep) {
          this.$router.push('/creditCertification')
        }
        if (this.nextStep === 'mobile') {
          window.location.replace('https://open.shujumohe.com/box/yys?box_token=65FF254FF4F4490BA633412666F07FFB&cb=https://www.51liuliang.cc/netiou/iou')          
        }
      } else {
        this.isLoading = false
        this.$store.dispatch('displayMessage', data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #BasicInfo {

    .infoList {
      width: 100vw;
      background: #FFFFFF;
      padding: 0;
      .list {
        padding: 0;
      }

      input {
        outline: none;
        text-align: right;
      }

      .subheader {
        height: 2rem;
        line-height: 2rem;
        display: block;
        background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
      }

    }

  
    .ConfirmButtonBlock {
      width: 90vw;
      margin: 2.5rem auto;

      #ConfirmButton {
        color: #484646;
        background-image: linear-gradient(-213deg, #DAB269 0%, #E7C78C 92%);
        border-radius: 2px;
        width: 100%;
        height: 2.8rem;
        font-size: 18px;
        margin: auto;
        transition: 0.2s all ease-in-out;

        &:disabled {
          background-image: none;
        }
      }
    }
    
  }
  .hintDialog {
    background-color: #fff;
    color: #000;
    .headline {
      justify-content: center;
      font-weight: bold;
      padding-bottom: 0;
    }
    .dialogContent {
      justify-content: center;  
      text-align: center;

      .warningIcon {
        margin-bottom: 0.5rem;
        color: red;
        font-size: 5rem;
      }
      .bold {
        font-weight: bold;
      }

      p {
        margin-bottom: 0;
      }
    }
    .btn {
      width: 100%;
    }
  }
</style>