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

<template>
  <div>
    <!-- 微信环境提示浏览器打开 -->
    <WxPopTpis v-if="isWeChatBrowser" />
    
    <div class="padssive" v-else>
      <div class="bg-top-img-wrap" align="right">
        <img class="bg-top-img" src="~assets/image/activity/invite-user/invite-passive-user/bg.png" />
      </div>

      <div class="bright-wrap">
        <div class="bright-item mb-6">
          <div class="img-wrap">
            <img class="label-img" src="~assets/image/activity/invite-user/invite-passive-user/hosting.png" />
          </div>
          <div class="text-wrap">
            <p class="title-text">游戏托管</p>
            <p class="tips-text">自动刷资源</p>
            <p class="tips-text">秒升角色战力</p>
          </div>
        </div>
        <div class="bright-item mb-6">
          <div class="img-wrap">
            <img class="label-img" src="~assets/image/activity/invite-user/invite-passive-user/clone.png" />
          </div>
          <div class="text-wrap">
            <p class="title-text">应用分身</p>
            <p class="tips-text">无限多开群控</p>
            <p class="tips-text">小号多不用愁</p>
          </div>
        </div>
        <div class="bright-item">
          <div class="img-wrap">
            <img class="label-img" src="~assets/image/activity/invite-user/invite-passive-user/location.png" />
          </div>
          <div class="text-wrap">
            <p class="title-text">位置服务</p>
            <p class="tips-text">想去哪</p>
            <p class="tips-text">就去哪</p>
          </div>
        </div>
        <div class="bright-item">
          <div class="img-wrap">
            <img class="label-img" style="bottom:8px" src="~assets/image/activity/invite-user/invite-passive-user/multi.png" />
          </div>
          <div class="text-wrap">
            <p class="title-text">功能全面</p>
            <p class="tips-text">三端互通</p>
            <p class="tips-text">应有尽有</p>
          </div>
        </div>
      </div>

      <div class="form-wrap">
        <validation-observer ref="observer" slim>
          <v-form @submit.prevent="submit">
            <div class="input-cell-label">
              <span class="required">*</span><span class="label-name">手机号</span>
            </div>
            <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>
            <div class="input-cell-label">
              <span class="required">*</span><span class="label-name">短信验证</span>
            </div>
            <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="codeObj.codeSending"
                    :disabled="codeTime > 0"
                    small
                    depressed
                    color="#D3E0FF"
                    plain
                    class="text-base"
                    @click.prevent="sendSmsCode"
                  >
                    <template>
                      <van-count-down ref="countDown" @finish="()=>codeObj.isFinish = true" :time="60000">
                        <template #default="timeData">
                          <span v-if="codeObj.isFinish" class="fetch-code">发送验证码</span>
                          <span v-else><span style="color: #999">{{ timeData.seconds }}s后重试</span></span>
                        </template>
                      </van-count-down>
                    </template>
                  </v-btn>
                </template>
              </v-text-field>
            </validation-provider>
          </v-form>
        </validation-observer>

        <div class="req-btn-wrap">
          <van-button :loading="submitting" :disabled="form.phone.length < 11 && form.code.length < 6" @click="submit" class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
        </div>

        <div class="tips">
          通过登录即可完成注册，成为我们的新用户，登录后表示同意云手机客户端服务协议
        </div>
      </div>
    </div>
</div>
</template>

<script>
import { registerForInvite } from '~/api/user/client.js';
import { sendSmsCode } from '~/api/message/phone.js';
import WxPopTpis from './components/WxPopTpis';

export default {
  auth: false,
  name: 'InvitePassiveUser',
  head: {
    title: '注册',
  },
  components: { WxPopTpis },
  fetch() {
    this.form.invitationUserName = this.$route.query.invitationUserName;
    this.form.activityId = this.$route.query.activityId;
    this.merchantSign = this.$route.query.merchantSign;
  },
  data() {
    return {
      merchantSign: '', // 商户标识
      form: {
        phone: '', // 手机号
        code: '', // 验证码
        activityId: '', // 活动ID
        invitationUserName: '', // 邀请人用户名
      },
      submitting: false, // 提交按钮状态
      codeTime: 0, // 验证码倒计时
      codeObj: {
        codeSending: false,// 发送验证码按钮状态
        isFinish: true, // 验证码倒计时是否完成
      }
    }
  },
  computed: {
    // 是否为微信浏览器环境
    isWeChatBrowser() {
      return this.$userAgent.isWx;
    }
  },
  methods: {
    // 发送验证码
    async sendSmsCode() {
      try {
        // 如果倒计时未完成，直接返回
        if(!this.codeObj.isFinish) return;

        this.codeObj.codeSending = true;
        let {valid} = await this.$refs.providerPhome.validate(); // 校验手机号
        if(!valid) return; // 校验不通过

        // 校验通过
        let {msg} = await sendSmsCode(this, {
          type: 'common',
          // authorizationType: 7, // 登录类型
          phone: this.form.phone,
        },{ headers: { merchantSign: this.merchantSign }});

        this.codeObj.isFinish = false;
        this.$refs.countDown.reset();
        this.$toast.success(msg);
      }catch({message}){
        message && this.$toast.fail(message);
      } finally {
        this.codeObj.codeSending = false;
      }
    },
    async submit() {
      try {
        this.submitting = true;
        // 校验表单
        const valid = await this.$refs.observer.validate();
        if(!valid) return; // 校验不通过
        // 校验通过
        const res = await registerForInvite(this, this.form, { headers: { merchantSign: this.merchantSign }});
        console.log(res)
        this.$toast.success(res.msg);

        // 注册成功后，下载
        this.registerDownload(res.data);
      }catch({message}){
        message && this.$toast.fail(message);
      }  finally {
        this.submitting = false;
      }
    },
    // 跳转到下载应用
    async registerDownload({ downloadUrl }) {
      setTimeout(()=>{
        window.location.href = downloadUrl;
      }, 600)
    }
  }
}
</script>

<style lang="scss" scoped>
.padssive{
  padding: 0 16px 16px 16px;
  height: 100vh;
  overflow: auto;
  background: linear-gradient(#D3E0FF, #F5F5F5);
}

.bg-top-img-wrap{

  .bg-top-img{
    width: 119px;
    height: 119px;
  }
}

.bright-wrap{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  align-content: space-around;
  margin-bottom: 16px;
  
  .bright-item{
    width: 155px;
    height: 82px;
    background: linear-gradient( 160deg, #62A9FF 0%, #3370FF 100%);
    border-radius: 8px;
    display: flex;

    .img-wrap{
      position: relative;
      padding-left: 10px;

     .label-img{
        width: 48px;
        height: 53px;
        position: relative;
        left: 0;
        bottom: 5px;
      }
    }

   .text-wrap{
      margin-left: 15px;
      font-size: 12px;
      color: #c6c6c6;
      line-height: 18px;
      text-align: left;

      &>p{
        margin-bottom: 0;
      }
    
    .title-text{
      font-size: 16px;
      color: #fff;
      line-height: 35px;
      font-weight: 600;
    }
   }
  }
}

.form-wrap{
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;

  .input-cell-label{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;

    .required{
      color: #FE5C5B;
    }

    .label-name{
      font-weight: 600;
      color: #242424;
    }
  }

  ::v-deep .theme--light.v-text-field--solo > .v-input__control > .v-input__slot{
    background-color: #F3F3F3;
  }

  .req-btn-wrap{
    margin-top: 40px;
  }

  .tips{
    font-weight: 400;
    font-size: 14px;
    color: #979797;
    line-height: 20px;
  }

  .fetch-code{
    color: #3370FF;
  }
}
</style>