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

<template>
  <v-container class="register-for-invite pa-0" fluid :class="`type-${type}`">
    <div class="w245h244">
      <img class="download-btn" src="~/assets/image/activity/invite-user/fission/btn.png" alt="" @click="download">
    </div>
    <video class="w325h183" webkit-playsinline="true" playsinline="true" x5-playsinline autoplay muted controls src="~/assets/image/activity/invite-user/fission/20230511-153039.mp4"></video>
    <div class="box1">
      <!-- <validation-observer ref="observer" class="mlr10" slim>
        <v-form>
          <validation-provider v-slot="{ errors }" ref="providerPhome" name="手机号码" rules="phone" slim>
            <div style="display: flex;">
              <div class="label-item">
                手机号
              </div>
              <v-text-field v-model="form.phone" v-mask="$mask.phone" background-color="#f6f6f6" name="phone" required :error-messages="errors" placeholder="请输入11位手机号" solo type="tel" flat maxlength="11" @input="submit" @focus="addUserVisit(19)" />
            </div>
          </validation-provider>
        </v-form>
      </validation-observer> -->
    </div>
  </v-container>
</template>

<script>
import { Toast } from 'vant';
import { registerForInvite } from '~/api/user/client.js';
import { sendSmsCode } from '~/api/message/phone.js';
export default {
  auth: false,
  name: 'RegisterForInvite',
  data() {
    return {
      current: 1,
      form: {
        phone: '',
        code: '',
        invitationUserName: null,
        activityId: null,
      },
      codeSending: false,
      codeTime: 0,
      submitting: false,
      client: 1
    };
  },
  fetch() {
    this.form.invitationUserName = this.$route.query.invitationUserName;
    this.form.activityId = this.$route.query.activityId;
    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
      this.client = 1;
    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
      this.client = 2;
    } else if (this.$userAgent.isMiniProgram) {
      this.client = 5;
    } else {
      this.client = 7;
    }
  },
  head() {
    return {
      title: '老板疯了，云手机真免费，不领白不领，活动随时结束',
      meta: [{
        property: 'og:image',
        content: 'https://file.phone.androidscloud.com:8121/document/newFile/download/1/347905r86eb745a1sc38/LowLevelMultipartUpload_30813454097856102499'
      },
      {
        property: 'og:description',
        content: '老板疯了，云手机真免费，不领白不领，活动随时结束'
      },
      {
        property: 'og:title',
        content: '双子星云手机'
      }]
    }
  },
  computed: {
    type() {
      return 2;
    },
    url() {
      return `${location.origin}/cloud/phone/web/#/pages/register/index?invitationUserName=${this.form.invitationUserName}&activityId=${this.form.activityId}&invitationType=5`
    }
  },
  mounted() {
    this.makePoint('activity_download_PV')
    this.makePoint('activity_download_UV')
    this.addUserVisit(16)
  },
  methods: {
    download() {
      window.open(this.url, '_self');
      this.addUserVisit(18)
    },
    maskPhone(value) {
      return [/\d/, /\d/];
    },
    makePoint(positionButton) {
      this.$axios.$post('/publics/v5/buriedPointRecord/reportRecords', [
        {
          client: this.client,
          eventCode: '28_分享活动',
          userName: this.form.invitationUserName,
          positionButton,
          operationTime: this.getCurrentTime(),
          phoneNumber: '',
          deviceId: ''
        },
      ]);
    },
    getCurrentTime() {
      const date = new Date(); // 当前时间
      const year = date.getFullYear() // 年
      const month = this.repair(date.getMonth() + 1); // 月
      const day = this.repair(date.getDate()); // 日
      const hour = this.repair(date.getHours()); // 时
      const minute = this.repair(date.getMinutes()); // 分
      const second = this.repair(date.getSeconds()); // 秒
      // 当前时间 
      const curTime = year + "-" + month + "-" + day +
        " " + hour + ":" + minute + ":" + second;
      return curTime;
    },
    repair(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
    async submit() {
      if (this.form.phone.length < 11 || !/^((13[0-9])|(14[5|7])|(15([0-9]))|(16[0134689])|(17[2-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.form.phone)) {
        return
      }
      try {
        this.submitting = true;
        const valid = await this.$refs.observer.validate();
        if (valid) {
          this.$tongji.trackEvent('活动', '注册', '', 0);
          await registerForInvite(this, this.form);
          Toast({
            message: '绑定成功',
            duration: 3000
          });
          setTimeout(() => {
            window.open('http://wuji.androidscloud.com', '_self');
          }, 3000)
        }
        this.addUserVisit(20);
      } catch (error) {
        Toast({
          message: error.message,
          duration: 3000
        });
        if (error.response.data.status === 1114) {
          setTimeout(() => {
            window.open('http://wuji.androidscloud.com', '_self');
          }, 3000)
        }
        this.addUserVisit(20);
      } 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);
          this.makePoint('activity_Share_获得验证码')
          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,
          );
          Toast({
            message: res.msg,
            duration: 3000
          });
        }
      } catch (error) {
        Toast({
          message: error.message,
          duration: 3000
        });
      } finally {
        this.codeSending = false;
      }
    },
    addUserVisit(accessType) {
      this.$axios.$post('/user/v5/operateApi/addUserVisit', {
        accessType,
        loginType: 2,
        userName: this.form.invitationUserName
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.w325h183 {
  width: 325px;
  height: 183px;
  border-radius: 19px;
  position: absolute;
  top: 550px;
  left: calc(50% - 162.5px);
  background: #F5F5F5;
}

.w245h244 {
  margin: 260px auto 0;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  .download-btn {
    width: 226px;
    height: 82px;
    position: absolute;
    left: calc(50% - 113px);
  }
}

.w282h239 {
  width: 282px;
  height: 239px;
  display: block;
  position: absolute;
  top: 229px;
  right: 21px;
  animation: xing 2s infinite;
}

@keyframes xing {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }
}

.mlr10 {
  overflow: hidden;
  width: 344px;
  padding: 0 10px;
  box-sizing: border-box;
}

.register-for-invite {
  color: #333;
  background-size: 100% auto;
  // background-position-y: -44px;
  overflow: hidden;
  padding-bottom: 30px;
  min-height: 812px;

  &.type-1 {
    background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
  }

  &.type-2 {
    background-image: url('~/assets/image/activity/invite-user/bj2@2x.png');
  }

  &.type-3 {
    background-image: url('~/assets/image/activity/invite-user/bg-3@2x.png');
  }
}

.box1 {
  position: absolute;
  bottom: 32px;
  left: calc(50% - 172px);
  width: 344px;
}

.submit-btn-box {
  // 解决百度APP广告屏蔽导致按钮被隐藏
  display: flex !important;
  justify-content: center;
}

.submit-btn {
  display: block;
  width: 308px !important;
  height: 30px !important;
  background: linear-gradient(0deg, #F34927 0%, #FDAF7D 100%);
  border-radius: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF !important;
  line-height: 30px;
  margin-top: 10px;
}

.label-item {
  width: 64px;
  font-size: 14px;
  color: #333;
  height: 49px;
  line-height: 49px;
  text-align: center;
}

.w220 {
  width: 220px;
}
</style>