✨ feat(实名认证页面): 接口预联调

hookehuyr
Commit b37866084e58a9997d73eadc57cb7552dcbff0ea b3786608 1 parent e0b1c161
Showing 1 changed file with 108 additions and 101 deletions
src/views/me/verifyUser.vue
--- a/src/views/me/verifyUser.vue
View file @b378660
+++ b/src/views/me/verifyUser.vue
View file @b378660
@@ -5,14 +5,19 @@
       <van-config-provider :theme-vars="themeVars">
         <van-form ref="form" @submit="onSubmit">
           <div class="van-hairline--bottom">
-            <van-field v-model="parent" label="家长姓名" placeholder="请输入你真实的姓名" :rules="[{ required: true, message: '请填写家长姓名' }]"  />
+            <van-field v-model="user_name" label="家长姓名" placeholder="请输入你真实的姓名"
+              :rules="[{ required: true, message: '请填写家长姓名' }]" />
           </div>
           <div class="van-hairline--bottom">
-            <van-field v-if="use_widget" v-model="phone" name="phone" label="手机号" placeholder="手机号" readonly clickable @touchstart.stop="showKeyboard" />
+            <van-field v-if="use_widget" v-model="phone" name="phone" label="手机号" placeholder="手机号" readonly clickable
-            <van-field v-else v-model="phone" name="phone" label="手机号" placeholder="手机号" :rules="[{ validator, message: '请输入正确手机号' }]" />
+              :rules="[{ validator, message: '请输入正确手机号' }]"
+              @touchstart.stop="showKeyboard" />
+            <van-field v-else v-model="phone" name="phone" label="手机号" placeholder="手机号"
+              :rules="[{ validator, message: '请输入正确手机号' }]" />
           </div>
           <div class="van-hairline--bottom">
-            <van-field v-model="code" center clearable name="code" label="短信验证码" placeholder="请输入短信验证码" :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]" >
+            <van-field v-model="pin" center clearable name="pin" label="短信验证码" placeholder="请输入短信验证码"
+              :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
               <template #button>
                 <van-button @click="sendCode" size="small" type="primary" :disabled="disabled">
                   <span v-if="countDown === 60">发送验证码</span>
@@ -30,25 +35,19 @@
     <my-button @on-click="submit" type="primary">保存</my-button>
   </div>
-  <van-number-keyboard
+  <van-number-keyboard v-model="phone" :show="keyboard_show" :maxlength="11" @blur="onBlur" />
-    v-model="phone"
-    :show="keyboard_show"
-    :maxlength="11"
-    @blur="onBlur"
-  />
 </template>
 <script setup>
 import MyButton from '@/components/MyButton/index.vue'
 import { wxInfo } from '@/utils/tools';
-import qs from 'Qs'
+
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import axios from '@/utils/axios';
-import $ from 'jquery'
 import { Toast } from 'vant';
-const $route = useRoute();
+
 const $router = useRouter();
 const themeVars = {
@@ -57,54 +56,35 @@ const themeVars = {
   buttonPrimaryColor: '#713610',
 };
-const parent = ref('')
+/******************** 输入框控件 START ********************/
-// 判断是否显示控件
-let use_widget = ref(true);
 /**
- * 手机号码校验
+ * 判断微信环境看是否弹出控件框
- * 函数返回 true 表示校验通过，false 表示不通过
+ * 桌面微信直接输入
- * @param {*} val 
+ * 其他环境弹出输入框
  */
-const validator = (val) => {
+let use_widget = ref(true);
-  let flag = false;
+if (wxInfo().isiOS || wxInfo().isAndroid) {
-  // 简单判断手机号位数
+  use_widget.value = true;
-  if (/1\d{10}/.test(val) && phone.value.length === 11) {
+} else {
-    disabled.value = false;
+  use_widget.value = false;
-    flag = true;
+}
-  } else {
-    disabled.value = true;
-    flag = false;
-  }
-  return flag
-};
-
-  onMounted(() => {
-    /**
-     * 判断微信环境看是否弹出控件框
-     * 桌面微信直接输入
-     * 其他环境弹出输入框
-     */
-    if (wxInfo().isiOS || wxInfo().isAndroid) {
-      use_widget.value = true;
-    } else {
-      use_widget.value = false;
-    }
-  })
-// 手机号输入控件控制
+// 手机号输入控件
 const keyboard_show = ref(false);
 const showKeyboard = () => { // 弹出数字弹框
   keyboard_show.value = true;
 };
 const onBlur = () => { // 数字键盘失焦回调
   keyboard_show.value = false;
-  if (phone.value.length === 11) {
+  if (phone.value.length === 11) { // 手机号码位数正确时可以发送验证码
     disabled.value = false;
   }
 };
-// 设置发送短信倒计时
+/******************** 发送验证码模块 START ********************/
+
+// TODO：发送验证码接口待调，验证码写默认8888
 const countDown = ref(60);
 const countDownHandle = () => {
   // 倒计时
@@ -119,14 +99,84 @@ const countDownHandle = () => {
 }
 const sendCode = () => { // 发送验证码
   if (countDown.value === 60) {
-    axios.post('/srv/?f=shzl_comment&a=bind_phone&t=get_code',
+    axios.post('/srv/?a=bind_phone&t=get_code', {
-    qs.stringify({
       phone: phone.value
-    }))
+    })
+      .then(res => {
+        if (res.data.code === 1) {
+          Toast.success('发送成功');
+          countDownHandle()
+        } else {
+          console.warn(res.data);
+          Toast({
+            message: res.data.msg,
+            icon: 'close',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      })
+  }
+};
+
+/******************** 表单业务逻辑 START ********************/
+
+const user_name = ref('')
+const phone = ref('');
+const pin = ref('');
+const disabled = ref(true);
+
+// 表单填写验证
+const form = ref(null);
+let valid = null;
+let submit = () => {
+  valid = form.value.validate();
+  valid
+    .then(() => {
+      form.value.submit();
+    })
+    .catch(error => {
+      console.error(error);
+      Toast({
+        message: '请检查后再次提交',
+        icon: 'cross',
+      });
+    })
+};
+
+/**
+ * 手机号码校验
+ * 函数返回 true 表示校验通过，false 表示不通过
+ * @param {*} val 
+ */
+const validator = (val) => {
+  let flag = false;
+  // 简单判断手机号位数
+  if (/1\d{10}/.test(val) && phone.value.length === 11) {
+    disabled.value = false;
+    flag = true;
+  } else {
+    disabled.value = true;
+    flag = false;
+  }
+  return flag
+};
+
+// 过滤输入的验证码 只能四位
+const formatter = (value) => value.substring(0, 4);
+
+// 保存用户信息
+const onSubmit = (values) => {
+  axios.post('/srv/?a=c_auth', {
+    user_name: values.user_name,
+    phone: values.phone,
+    pin: values.pin,
+  })
     .then(res => {
       if (res.data.code === 1) {
-        Toast.success('发送成功');
+        Toast.success('录入成功')
-        countDownHandle()
+        $router.go(-1);
       } else {
         console.warn(res.data);
         Toast({
@@ -136,41 +186,12 @@ const sendCode = () => { // 发送验证码
       }
     })
     .catch(err => {
-      console.error(err); 
+      console.error(err);
     })
-  }
 };
-const phone = ref('');
+/****************************************/
-const code = ref('');
-const disabled = ref(true);
-// 过滤输入的数字 只能四位
-const formatter = (value) => value.substring(0, 4);
-// 保存用户信息
-const onSubmit = (values) => {
-  axios.post('/srv/?f=shzl_comment&a=bind_phone&t=bind',
-  qs.stringify({
-    phone: values.phone,
-    code: values.code,
-  }))
-  .then(res => {
-    if (res.data.code === 1) {
-      $router.push({
-        path: '/'
-      });
-    } else {
-      console.warn(res.data);
-      Toast({
-        message: res.data.msg,
-        icon: 'close',
-      });
-    }
-  })
-  .catch(err => {
-    console.error(err);
-  })
-};
 </script>
 <script>
@@ -178,29 +199,15 @@ import mixin from 'common/mixin';
 export default {
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
     }
   },
-  mounted () {
+  mounted() {
   },
   methods: {
-    submit () {
-      let valid = this.$refs.form.validate();
-      valid
-      .then(() => {
-        this.$refs.form.submit();
-      })
-      .catch(error => {
-        console.error(error);
-        this.$toast({
-          message: '请检查后再次提交',
-          icon: 'cross',
-        });
-      })
-    }
   }
 }
 </script>