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

<template>
  <v-container class="register-for-invite pa-0" fluid :class="`type-${type}`">
    <activity-invite-user-box class="box1">
      <template #title>快速注册</template>
      <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>
    </activity-invite-user-box>
  </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>