epmet-wx-pa-chengyang/src/views/register/index.vue

<template>
  <div class="" style="padding-top: 0;">
    <van-tabs @click="onClickTab" :active="active">
      <van-tab title="手机号注册">
        <div class="block container">
          <van-field v-model="phone" label="手机号" placeholder="请输入" required />
          <van-field v-model="smsCode" label="验证码" placeholder="请输入" required>
            <template #button>
              <span v-if="time === 60" @click="getCode" class="blue">获取验证码</span>
              <span v-else class="blue">{{ time }}s后重试</span>
            </template>
          </van-field>
          <van-button block class="button" type="info" round @click="submit">注册</van-button>
        </div>
      </van-tab>
      <van-tab title="实名认证">
        <div class="block container">
          <van-field v-model="realName" label="真实姓名" placeholder="请输入" required />
          <van-field v-model="idCard" label="身份证号" placeholder="请输入" required/>
          <van-field v-model="phone" label="手机号" placeholder="请输入" required />
          <van-field v-model="smsCode" label="验证码" placeholder="请输入" required>
            <template #button>
              <span v-if="time === 60" @click="getCode" class="blue">获取验证码</span>
              <span v-else class="blue">{{ time }}s后重试</span>
            </template>
          </van-field>
          <van-button block class="button" type="info" round @click="submit">提交</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { editUser, sendsmscode } from '@/api/user'

var leftTime
export default {
  name: 'userInfo',
  data() {
    return {
      form: {},
      time: 60,
      userInfo: {},
      phone: '',
      smsCode: '',
      gender: '',
      userId: '',
      active:0,
      idCard:null,
      realName:null,
    }
  },

  mounted() {
    this.init()
  },
  destroyed() {
    clearInterval(leftTime)
  },
  methods: {
    onClickTab(val){

    },
    init() {
      this.type = this.$route.params.type ? this.$route.params.type : ''
      this.userInfo = this.$store.state.app.userInfo
      this.gender = this.userInfo.gender
      this.realName = this.userInfo.realName || this.userInfo.nickname
    },
    submit() {
      let params = {
        ...this.userInfo,
        mobile: this.phone,
        smsCode: this.smsCode,  
        realName: this.realName,
        appId: this.$store.state.app.appId,
        gender: this.gender,
        idNum:this.idCard
      }
      if (!params.mobile) {
        this.$toast.fail('请输入手机号')
        return
      }

      if (!params.smsCode) {
        this.$toast.fail('请输入验证码')
        return
      }
      editUser(params).then(res => {
        localStorage.setItem('token', res.token)
        this.$toast.success('注册成功')
        let query = this.$route.query
        this.$router.replace({ path: query.redirect, query: query.params ? JSON.parse(query.params) : {} })
      })
    },
    getCode() {
      if (!this.phone) {
        this.$toast.fail('请输入手机号')
        return false
      }
      if (!/1[3456789]\d{9}/.test(this.phone)) {
        this.$toast.fail('手机号格式错误')
        return false
      }
      sendsmscode({
        phone: this.phone
      }).then(() => {
        leftTime = setInterval(() => {
          if (this.time > 0) {
            this.time--
          } else {
            this.time = 60
            clearInterval(leftTime)
          }
        }, 1000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import './index';
</style>