android-cloud-H5/pages/activity/invite-user/register.vue

<template>
  <v-container class="register-for-invite pa-0" fluid :class="`type-${type}`">
    <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="phone"
              slim
            >
              <v-text-field
                v-model="form.phone"
                v-mask="$mask.phone"
                label=""
                name="phone"
                required
                :error-messages="errors"
                placeholder="请输入11位手机号"
                solo
                type="tel"
                flat
                maxlength="11"
              />
            </validation-provider>
            <validation-provider
              v-slot="{ errors }"
              name="短信验证码"
              rules="code"
              slim
            >
              <v-text-field
                v-model="form.code"
                v-mask="'######'"
                label=""
                :error-messages="errors"
                name="code"
                maxlength="6"
                required
                placeholder="请输入验证码"
                solo
                flat
                type="tel"
              >
                <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="submit-btn-box">
              <v-btn
                type="submit"
                :loading="submitting"
                class="submit-btn"
                rounded
                >注册并下载APP</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: '注册',
  },
  computed: {
    type() {
      return Number(this.$route.query.type);
    },
  },
  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.openSzxApp();
        }
      } finally {
        this.submitting = false;
      }
    },
    openSzxApp() {
      this.$callSzx.open({ param: {}, path: '' });
    },
    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: 5,
            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-size: 100% auto;
  // background-position-y: -44px;
  overflow: hidden;
  padding-bottom: 30px;
  min-height: 100vh;
  &.type-1 {
    background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
  }
  &.type-2 {
    background-image: url('~/assets/image/activity/invite-user/bg-2@2x.png');
  }
}
.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-box {
  // 解决百度APP广告屏蔽导致按钮被隐藏
  display: flex !important;
  margin-top: 24px;
  // align-items: center;
  justify-content: center;
}
.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%;
  color: #dd1b0d !important;
  font-size: 22px !important;
  font-weight: bold !important;
}
</style>