Login.vue 2.52 KB
<template>
  <div class="member_login">
    <NafmHeader />
    <van-form class="login_form" @submit="onSubmit">
      <van-field v-model="code" placeholder="请输入社会信用代码或组织机构代码" :rules="[{ required: true, message: '请输入社会信用代码或组织机构代码' }]">
        <div slot="left-icon" :style="code && code!== '' ? '' : 'opacity: 0.6'">
          <van-icon name="coupon-o" />
        </div>
      </van-field>
      <van-field v-model="password" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]">
        <div slot="left-icon" :style="password && password!== '' ? '' : 'opacity: 0.6'">
          <van-icon name="edit" />
        </div>
      </van-field>
      <van-field v-model="checkCode" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
        <div slot="left-icon" :style="checkCode && checkCode!== '' ? '' : 'opacity: 0.6'">
          <van-icon name="certificate" />
        </div>
        <template #button>
          <span>111111</span>
        </template>
      </van-field>
      <p style="margin: 18px" class="wraning_tip">
        提示:请输入贵单位会员系统的登录名及密码登录(单位会员)
      </p>
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit" :disabled="isLogin">登录</van-button>
      </div>
    </van-form>
    <div class="membership_about">
      <van-cell title="入会指南" is-link to="/member/membershipGuide" />
      <van-cell title="会籍办理常见问题" is-link to="/member/membershipGuide" />
      <van-cell title="会员管理规则" is-link to="/member/membershipGuide" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      code: '',
      password: '',
      checkCode: ''
    }
  },
  computed: {
    isLogin() {
      return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
    }
  },
  methods: {
    onSubmit(value) {
      
    }
  }
}
</script>
<style lang="less" scoped>
.member_login {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 150px;
  background-color: #f6f6f6;
  .login_form {
    background-color: #ffffff;
    padding-bottom: 30px;
    .wraning_tip {
      color: #ea5c6d;
      font-size: 22px;
      text-align: justify;
      font-family: PingFangSC-Regular;
    }
  }
  .membership_about {
    margin: 20px 0;

    .van-cell {
      background-color: #f6f6f6;
    }
  }
}
</style>