android-cloud-H5/pages/register-for-invite.vue

<template>
  <v-container class="register-for-invite" fluid>
    <div class="title">注册</div>
    <validation-observer ref="observer" v-slot="{ invalid }" slim>
      <v-form @submit.prevent="submit()">
        <validation-provider
          v-slot="{ errors }"
          ref="providerPhome"
          name="手机号码"
          rules="required|min:11|max:11"
          slim
        >
          <v-text-field
            v-model="form.phone"
            label="手机号码"
            name="phone"
            required
            :error-messages="errors"
            maxlength="11"
            type="tel"
          />
        </validation-provider>
        <validation-provider
          v-slot="{ errors }"
          name="验证码"
          rules="required|min:6|max:6"
          slim
        >
          <v-text-field
            v-model="form.code"
            label="验证码"
            :error-messages="errors"
            name="code"
            maxlength="6"
            required
          >
            <template #append-outer>
              <v-btn
                :loading="codeSending"
                :disabled="codeTime > 0"
                small
                @click="sendSmsCode()"
              >
                <template v-if="codeTime > 0">{{ codeTime }}s</template>
                <template v-else>发送验证码</template>
              </v-btn>
            </template>
          </v-text-field>
        </validation-provider>

        <div class="">
          <v-btn type="submit" :disabled="invalid" :loading="submitting"
            >注册并下载app</v-btn
          >
        </div>
      </v-form>
    </validation-observer>
  </v-container>
</template>

<script>
import { registerForInvite } from '~/api/user/client.js';
import { sendSmsCode } from '~/api/message/phone.js';
export default {
  auth: false,
  name: 'RegisterForInvite',
  data() {
    return {
      form: {
        phone: '17603013019',
        code: '',
        invitationUserName: null,
        activityId: null,
      },
      codeSending: false,
      codeTime: 0,
      submitting: false,
    };
  },
  fetch() {
    this.form.invitationUserName = this.$route.query.invitationUserName;
    this.form.activityId = this.$route.query.activityId;
  },
  head: {
    title: '注册',
  },
  watch: {},
  methods: {
    async submit() {
      try {
        this.submitting = true;
        const valid = await this.$refs.observer.validate();
        if (valid) {
          this.$tongji.trackEvent('活动', '注册', '', 0);
          const res = await registerForInvite(this, this.form);
          this.$toast.success(res.msg);
        }
      } finally {
        this.submitting = false;
      }
    },
    async sendSmsCode() {
      try {
        this.codeSending = true;
        const validationResult = await this.$refs.providerPhome.validate();
        if (validationResult.valid) {
          this.$tongji.trackEvent('活动', '发送短信', '', 0);
          const res = await sendSmsCode(this, {
            type: 'common',
            authorizationType: 4,
            phone: this.form.phone,
          });
          this.codeTime = 60;
          this.codeInterval = setInterval(() => {
            if (--this.codeTime <= 0) {
              clearInterval(this.codeInterval);
            }
          }, 1000);
          this.$toast.success(res.msg);
        }
      } finally {
        this.codeSending = false;
      }
    },
  },
};
</script>