联调注册接口

pages/activity/invite-user/invite-new-user.vue

@@ -88,8 +88,6 @@ import WithdrawalRecord from './components/WithdrawalRecord';
 import SharePopup from './components/SharePopup';
 import WxPopTpis from './components/WxPopTpis';
 
-const Authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiI2ODk3NyIsImNsaWVudCI6IjEiLCJ1c2VyVHlwZSI6IjIiLCJtZXJjaGFudFNpZ24iOiJTWlgiLCJleHAiOjE3NDcwMzMyODgsInVzZXJuYW1lIjoiZHZBd1UxNjM0NjA5NTU3U1pYIn0.o7bIutx2e2WrdqIx6fG_WR57oSXZ5s5ewfB0QdAHOBU';
-
 export default {
   auth: false,
   name: 'OemInviteNewUser',
@@ -107,13 +105,7 @@ export default {
       accumulatedWithdrawal: 0, // 累计提现金额,
       // 查询参数
       queryData: {
-        // phoneNumber: '', // 手机号
-        // merchantSign: '', // 商户标识
-        // userName: '', // 邀请人用户名
-        // quiltUserName: '', // 被邀请人用户名
         activityId: '', // 活动ID
-        // toDay: '', // 今日日期
-        // inviteUserName: '', // 邀请人名称
       },
       activeTab: 0,
       tabs: [{
@@ -192,10 +184,7 @@ export default {
     },
     // 获取活动页上部分数据
     async getActivityData() {
-      const res = await this.$axios.$get(
-        '/activity/v5/activity/inviteNewUser/getInviteNewUserPageData',
-        // { headers: { Authorization } }
-      );
+      const res = await this.$axios.$get('/activity/v5/activity/inviteNewUser/getInviteNewUserPageData');
       let {
         registerCount, // 今日注册人数
         nickname, // 用户昵称
@@ -219,7 +208,6 @@ export default {
       let {status, success, data} = await this.$axios.$post(
         '/activity/v5/activity/inviteNewUser/getInviteNewRegisterUserData',
         { ...this.queryData, ...this.tabs[0].query },
-        // { headers: { Authorization } }
       );
       if(status === 0 && success) {
         this.tabs[0].data = data.list;
@@ -242,7 +230,6 @@ export default {
       let {status, success, data} = await this.$axios.$post(
         '/activity/v5/activity/inviteNewUser/getInviteNewUserBuyData',
         { ...this.queryData, ...this.tabs[1].query },
-        // { headers: { Authorization } }
       );
       if(status === 0 && success) {
         this.tabs[1].data = data.list;
@@ -264,7 +251,6 @@ export default {
       let {status, success, data} = await this.$axios.$post(
         '/activity/v5/activity/inviteNewUser/getInviteNewUserWithdrawalRecodeList',
         {...this.queryData,...this.tabs[2].query },
-        // { headers: { Authorization } }
       );
 
       if(status === 0 && success) {
@@ -280,14 +266,15 @@ export default {
       }
       */
     },
-    // 获取邀请url地址,用于生成二维码
+    // 获取邀请url地址,用于生成二维码 id: 活动ID
     async getActivityRule(id) {
       let {status, success, data} = await this.$axios.$get('/activity/activity/basic/getDetailsById',{
         params: { id }
       });
 
       if(status === 0 && success) {
-        this.qrText = data?.activityInviteNewUser?.jumpAddress;
+        // 生成二维码的文本
+        this.qrText = `${data?.activityInviteNewUser?.jumpAddress}?activityId=${id}&invitationUserName=${this.nickname}`;
       }
     }
   }

pages/activity/invite-user/invite-passive-user.vue

@@ -51,38 +51,83 @@
         </div>
       </div>
 
-      <div class="input-wrap">
-        <div class="input-cell">
-          <div class="input-cell-label">
-            <span class="required">*</span><span class="label-name">手机号</span>
-          </div>
-          <div class="input-cell-value">
-            <input class="input" v-model.trim="value" type="number" placeholder="请输入11位手机号" />
-          </div>
-          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
-        </div>
-
-        <div class="input-cell">
-          <div class="input-cell-label">
-            <span class="required">*</span><span class="label-name">短信验证</span>
-          </div>
-          <div class="code-cell">
-            <div class="input-cell-value">
-              <input class="input" v-model.trim="value" type="number" placeholder="请输入验证码" />
+      <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>
-            <div class="get-code ml-2">
-              <span v-if="!codeObj.isDisable" @click="getCodeHandle">获取验证码</span>
-              <van-count-down ref="countDown" @finish="codeObj.isDisable = false" :time="60000">
-                <template #default="timeData">
-                  <span><span v-if="codeObj.isDisable" style="color: #999">{{ timeData.seconds }}秒后重试</span></span>
-                </template>
-              </van-count-down>
+            <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>
-          </div>
-          <div class="input-error-msg">手机号码不正确，请重新输入!</div>
-        </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 class="mb-3" type="primary" round block color="#435EFB" text="注册并下载APP" />
+          <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">
@@ -94,22 +139,34 @@
 </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: '受邀验证',
+    title: '注册',
   },
   components: { WxPopTpis },
+  fetch() {
+    this.form.invitationUserName = this.$route.query.invitationUserName;
+    this.form.activityId = this.$route.query.activityId;
+  },
   data() {
     return {
-      value: '',
+      form: {
+        phone: '', // 手机号
+        code: '', // 验证码
+        activityId: '', // 活动ID
+        invitationUserName: '', // 邀请人用户名
+      },
+      submitting: false, // 提交按钮状态
+      codeTime: 0, // 验证码倒计时
       codeObj: {
-        tips: '获取验证码',
-        isDisable: false,
-        time: 60,
+        codeSending: false,// 发送验证码按钮状态
+        isFinish: true, // 验证码倒计时是否完成
       }
     }
   },
@@ -120,15 +177,52 @@ export default {
     }
   },
   methods: {
-    // 获取验证码
-    getCodeHandle() {
-      if (!this.value) {
-        this.$toast('请输入手机号');
-        return;
+    // 发送验证码
+    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: 5,
+          phone: this.form.phone,
+        });
+
+        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; // 校验不通过
+        // 校验通过
+        await registerForInvite(this, this.form);
+        this.$toast.success(res.msg);
 
-      this.$refs.countDown.reset();
-      this.codeObj.isDisable = true;
+        // 注册成功后，下载
+        this.registerDownload();
+      }finally {
+        this.submitting = false;
+      }
+    },
+    // 注册并下载
+    async registerDownload() {
+      // TODO: 下载逻辑
+      this.$callSzx.open({ param: {}, path: '' });
     }
   }
 }
@@ -199,80 +293,43 @@ export default {
   }
 }
 
-.input-wrap{
+.form-wrap{
   background-color: #fff;
   padding: 16px;
   border-radius: 8px;
 
-  .input-cell{
-    margin-bottom: 16px;
-
-    .input-cell-label{
-      font-size: 14px;
-      line-height: 20px;
-      margin-bottom: 8px;
-
-      .required{
-        color: #FE5C5B;
-      }
+  .input-cell-label{
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 8px;
 
-      .label-name{
-        font-weight: 600;
-        color: #242424;
-      }
+    .required{
+      color: #FE5C5B;
     }
-    
-    .input-cell-value{
-      background-color: #F3F3F3;
-      border-radius: 4px;
-      display: flex;
-      height: 48px;
-      padding: 0 12px;
-      align-items: center;
-      flex: 1;
-      position: relative;
 
-     .input{
-      flex: 1;
-        background-color: transparent;
-        border: none;
-        outline: none;
-        font-size: 14px;
-        line-height: 20px;
-        color: #242424;
-     }
-    }
-    .input-error-msg{
-     bottom: 0;
-     left: 0;
-     font-size: 12px;
-     color: #FE5C5B
-    }
-    
-    .code-cell{
-      display: flex;
-      
-      .get-code{
-       width: 80px;
-       flex-shrink: 0;
-       font-weight: 400;
-       font-size: 14px;
-       color: #3370FF;
-       display: flex;
-       align-items: center;
-      }
+    .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: 56px;
-    }
+    margin-top: 40px;
+  }
 
-    .tips{
-      font-weight: 400;
-      font-size: 14px;
-      color: #979797;
-      line-height: 20px;
-    }
+  .tips{
+    font-weight: 400;
+    font-size: 14px;
+    color: #979797;
+    line-height: 20px;
+  }
+
+  .fetch-code{
+    color: #3370FF;
+  }
 }
 </style>