userBind.vue 3.72 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1 2
<template>
  <h-view id="user-bind" class="public-style" title="用户绑定">
李晓兵's avatar
李晓兵 committed
3
    <h-header :proportion="[5,1,1]" class="bar-custom">
李晓兵's avatar
李晓兵 committed
4
      <div slot="left" class="h-header-btn">
李晓兵's avatar
李晓兵 committed
5
        <img src="@/assets/userBind/arrow.png" @click="$routeGo(-1)">
李晓兵's avatar
李晓兵 committed
6 7 8 9 10 11 12
        <span>用户绑定</span>
      </div>
    </h-header>
    <h-content class="content">
      <div class="info">
        <div class="info-icon">
          <img src="@/assets/userBind/info.png" >
786817560's avatar
786817560 committed
13
          <span>温馨提示</span>
李晓兵's avatar
李晓兵 committed
14 15 16 17
        </div>
        <p>绑定成功后,您即可使用APP中合同查询、还款查询等功能。</p>
      </div>
      <p>选择用户类型</p>
李晓兵's avatar
李晓兵 committed
18
      <!--<h-button :class="flag==0?'nature':'org'" @click.native="flag = 0">
李晓兵's avatar
李晓兵 committed
19 20 21 22
        <img src="@/assets/userBind/np.png" class="n-img" >自然人
      </h-button>
      <h-button :class="flag==1?'nature':'org'" @click.native="flag = 1">
        <img src="@/assets/userBind/entr.png" class="o-img" >企业
李晓兵's avatar
李晓兵 committed
23 24 25 26 27 28 29
      </h-button>-->
      <div class="bind-wrap" @click="flag = 0">
        <img :src="flag==0? bindnped:bindnp">
      </div>
      <div class="bind-wrap" @click="flag = 1">
        <img :src="flag==1? bindorged:bindorg">
      </div>
李晓兵's avatar
李晓兵 committed
30 31 32 33 34 35 36 37 38 39 40 41
      <h-button class="enter" @click.native="changePage">
        进入
        <img src="@/assets/userBind/right.png" >
      </h-button>
    </h-content>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      flag: 0,
李晓兵's avatar
李晓兵 committed
42 43 44 45
      bindnp: require('@/assets/userBind/bindnp.png'),
      bindnped: require('@/assets/userBind/bindnped.png'),
      bindorg: require('@/assets/userBind/bindorg.png'),
      bindorged: require('@/assets/userBind/bindorged.png'),
李晓兵's avatar
李晓兵 committed
46 47 48 49 50 51 52 53 54 55
    }
  },
  created () {

  },
  methods: {
    changePage () {
      let name
      let bpClass
      if (this.flag === 0) {
linxin's avatar
linxin committed
56
        name = 'NPBaseInfo'
李晓兵's avatar
李晓兵 committed
57 58
        bpClass = 'NP'
      } else if (this.flag === 1) {
786817560's avatar
786817560 committed
59
        name = 'EnterpriseNew'
李晓兵's avatar
李晓兵 committed
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
        bpClass = 'ORG'
      }
      this.$router.push({
        name: name,
        params: {
          'bp_class': bpClass,
        },
      })
    },
  },
}
</script>
<style lang="less" scoped type="text/less">
#user-bind {
  .content {
    .info {
      height: 88px;
77
      line-height: 88px;
李晓兵's avatar
李晓兵 committed
78 79
      background-color: rgba(142, 195, 30, 0.1);
      .info-icon {
80
        height: 30px;
李晓兵's avatar
李晓兵 committed
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
        padding-top: 20px;
        display: flex;
        align-items: center;
        img {
          width: 15.8px;
          height: 15.8px;
          margin-left: 17.1px;
        }
        span {
          color: rgba(142, 195, 30, 1);
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          margin-left: 9px;
          letter-spacing: 0.5px;
          line-height: 20px;
        }
      }
      p {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        color: rgba(101, 100, 100, 0.8);
        width: 310px;
        margin-left: 42px;
        letter-spacing: 0.4px;
        line-height: 18px;
        margin-top: 8px;
      }
    }
    p {
      color: rgba(101, 100, 100, 0.4);
      font-family: PingFangSC-Regular;
      letter-spacing: 0.5px;
      line-height: 24px;
      margin-left: 16px;
      margin-top: 24px;
    }
李晓兵's avatar
李晓兵 committed
117 118 119 120 121 122 123
    .bind-wrap{
      width: 92%;
      margin: 10px auto;
      img{
        width: 100%;
      }
    }
李晓兵's avatar
李晓兵 committed
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
    .enter {
      display: block;
      width: 343px;
      height: 56px;
      font-size: 15px;
      letter-spacing: 0.5px;
      line-height: 20px;
      margin: 0 auto;
      margin-top: 16px;
      font-family: PingFangSC-Regular;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .enter {
李晓兵's avatar
李晓兵 committed
140
      background-color: @headerColor;
李晓兵's avatar
李晓兵 committed
141 142 143 144 145 146 147 148 149 150 151
      color: #fff;
      margin-top: 80px;
      img {
        width: 18px;
        margin-left: 6.3px;
      }
    }
  }
}

</style>