注册

H5/src/api/grade.js

@@ -15,7 +15,7 @@ export function getMyTeam(userId) {
  * 森林状态
  * @param {*}
  */
-export function getForestStatus(userId){
+export function getForestStatus(userId) {
   return request({
     url: `/user/forestStatus?userId=${userId}`,
     method: "get"

H5/src/views/register.vue

@@ -5,7 +5,7 @@
     <div class="form-content">
       <van-cell-group>
         <van-field
-          :value="value"
+          :value="form.userId"
           placeholder="请输入用户名"
           :border="hasBorder"
           bind:change="onChange"
@@ -18,7 +18,7 @@
           />
         </van-field>
         <van-field
-          :value="value"
+          :value="form.sms"
           placeholder="请输入验证码"
           :border="hasBorder"
           bind:change="onChange"
@@ -34,11 +34,15 @@
             size="small"
             type="primary"
             class="verify-code"
-            >发送验证码</van-button
+            :disabled="disabled"
+            @click="sendSms"
           >
+            <span v-if="!disabled">发送验证码</span>
+            <span v-else>{{ time }}秒后重新发送</span>
+          </van-button>
         </van-field>
         <van-field
-          :value="value"
+          :value="form.beInvitedCode"
           placeholder="请输入推荐人邀请码（非必填）"
           :border="hasBorder"
           bind:change="onChange"
@@ -64,23 +68,76 @@
   </div>
 </template>
 <script>
+import { smsCode } from "@/api/base";
 export default {
   name: "register",
   data() {
     return {
+      form: {
+        userId: "",
+        sms: "",
+        beInvitedCode: ""
+      },
+      disabled: false,
+      sendMsg: "发送验证码",
       value: "",
       hasBorder: false,
-      show: true,
+      show: false,
       title: "注册失败",
-      tip: "该推荐人邀请码不存在，请重新填写"
+      tip: "该推荐人邀请码不存在，请重新填写",
+      time: 60,
+      timer: null
     };
   },
+  mounted() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
   methods: {
     register() {
       //  this.show = true
     },
     onClickHide() {
       this.show = false;
+    },
+    sendSms() {
+      const _this = this;
+      if (_this.timer) {
+        return false;
+      }
+      // 校验手机号
+      let phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
+      //如果手机号码输入为空
+      if (!_this.form.userId) {
+        //  _this.$toast('请输入手机号')
+        return false;
+      }
+      //验证输入的电话号码是否是11位数字
+      if (!phoneReg.test(_this.form.userId)) {
+        // _this.$toast('请输入手机号');
+        return false;
+      }
+      _this.time = 60;
+      _this.disabled = true;
+      _this.handelSendSmsApi();
+      _this.timer = setInterval(() => {
+        if (_this.time === 0) {
+          clearInterval(_this.timer);
+          _this.disabled = false;
+        }
+        _this.time--;
+      }, 1000);
+    },
+    handelSendSmsApi() {
+      // 检验手机号
+      const params = {
+        codeType: 0,
+        phone: this.form.userId
+      };
+      smsCode(params).then(res => {
+        console.log(res);
+      });
     }
   }
 };
@@ -109,7 +166,7 @@ export default {
   }
   .form-content {
     padding: 0 15px;
-    .van-field__left-icon {
+    ::v-deep .van-field__left-icon {
       display: flex;
       align-items: center;
     }