|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <v-container class="register-for-invite pa-0" fluid>
|
|
|
+ <div class="box box1">
|
|
|
+ <div class="box-header">快速注册</div>
|
|
|
+ <div class="box-main">
|
|
|
+ <validation-observer ref="observer" 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"
|
|
|
+ placeholder="请输入11位手机号"
|
|
|
+ solo
|
|
|
+ type="tel"
|
|
|
+ flat
|
|
|
+ />
|
|
|
+ </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
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ solo
|
|
|
+ flat
|
|
|
+ >
|
|
|
+ <template #append>
|
|
|
+ <v-btn
|
|
|
+ :loading="codeSending"
|
|
|
+ :disabled="codeTime > 0"
|
|
|
+ small
|
|
|
+ depressed
|
|
|
+ color="#8027E5"
|
|
|
+ plain
|
|
|
+ class="text-base"
|
|
|
+ @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"
|
|
|
+ :loading="submitting"
|
|
|
+ class="submit-btn"
|
|
|
+ rounded
|
|
|
+ ></v-btn>
|
|
|
+ </div>
|
|
|
+ </v-form>
|
|
|
+ </validation-observer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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: '',
|
|
|
+ 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: {
|
|
|
+ maskPhone(value) {
|
|
|
+ return [/\d/, /\d/];
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ this.toDownload();
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ this.submitting = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toDownload() {
|
|
|
+ window.open('https://www.androidscloud.com', '_self');
|
|
|
+ },
|
|
|
+ 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(
|
|
|
+ () => --this.codeTime <= 0 && clearInterval(this.codeInterval),
|
|
|
+ 1000,
|
|
|
+ );
|
|
|
+ this.$toast.success(res.msg);
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ this.codeSending = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.register-for-invite {
|
|
|
+ color: #333;
|
|
|
+ background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-position-y: -44px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+.box {
|
|
|
+ width: 373px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: auto;
|
|
|
+ border-image-source: url('~/assets/image/activity/invite-user/box@2x.png');
|
|
|
+ border-image-slice: 38 * 2 20 * 2 30 * 2 fill;
|
|
|
+
|
|
|
+ // border-image-width: 200px;
|
|
|
+ // border-image-slice: 200%;
|
|
|
+ border-width: 38px 15px 15px;
|
|
|
+ // border-width: 1px;
|
|
|
+ border-style: solid;
|
|
|
+ position: relative;
|
|
|
+ + .box {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .box-header {
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ // left: 141px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 130px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .box-main {
|
|
|
+ padding: 30px 15px 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.box1 {
|
|
|
+ margin-top: 275px;
|
|
|
+}
|
|
|
+.submit-btn {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ width: 302px !important;
|
|
|
+ height: 62px !important;
|
|
|
+ background-image: url('~/assets/image/activity/invite-user/share-button@2x.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 24px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
曾志翔