✨ feat(客户端): 新增家长实名认证页面

@@ -1302,7 +1302,6 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
       "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
       "dev": true,
-      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.0.4"
       },

@@ -109,6 +109,14 @@ export default [{
   },
   children: []
 }, {
+  path: '/me/verifyUser',
+  name: '实名认证',
+  component: () => import('./views/me/verifyUser.vue'),
+  meta: {
+    title: '实名认证'
+  },
+  children: []
+}, {
   path: '/image',
   name: 'html转图片',
   component: () => import('./views/html2canvas.vue'),

@@ -10,7 +10,7 @@
           <van-col class="text-wrapper" span="18">
             <div>
               <div class="username">瑟日古娜</div>
-              <div class="toggle-user">切换儿童</div>
+              <div class="toggle-user" @click="toggleUser">切换儿童</div>
             </div>
             <div class="address">呼和浩特市新城区蒙古族幼儿园</div>
           </van-col>
@@ -44,7 +44,7 @@
 
     <div class="van-hairline--bottom sub-handle">
       <div>
-        <my-button type="custom" :custom-style="styleObject1" @on-click="">实名认证</my-button>
+        <my-button type="custom" :custom-style="styleObject1" @on-click="goTo('/me/verifyUser')">实名认证</my-button>
       </div>
       <div>
         <my-button type="custom" :custom-style="styleObject2" @on-click="">新增儿童</my-button>
@@ -76,6 +76,17 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
+// 切换用户功能
+const toggleUser = () => {
+  console.warn('切换儿童');
+}
+// 跳转相关页面
+const goTo = (path) => {
+  $router.push({
+    path: path
+  })
+}
+
 // 自定义按钮颜色样式
 const styleObject1 = reactive({
   backgroundColor: '#FFFFFF',

+<template>
+  <div class="verify-user-page">
+    <p style="color: #713610; font-size: 1.25rem; padding: 1rem; text-align: center; font-weight: bold;">请录入真实的信息</p>
+    <div style="padding: 1rem;">
+      <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: '请填写家长姓名' }]"  />
+          </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-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: '请填写验证码' }]" >
+              <template #button>
+                <van-button @click="sendCode" size="small" type="primary" :disabled="disabled">
+                  <span v-if="countDown === 60">发送验证码</span>
+                  <span v-else>{{ countDown }} 秒重新发送</span>
+                </van-button>
+              </template>
+            </van-field>
+          </div>
+        </van-form>
+      </van-config-provider>
+    </div>
+  </div>
+
+  <div style="padding: 2rem;">
+    <my-button @on-click="submit" type="primary">保存</my-button>
+  </div>
+
+  <van-number-keyboard
+    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 { useRoute, useRouter } from 'vue-router'
+import axios from '@/utils/axios';
+import $ from 'jquery'
+import { Toast } from 'vant';
+const $route = useRoute();
+const $router = useRouter();
+
+const themeVars = {
+  buttonPrimaryBackground: '#F9D95C',
+  buttonPrimaryBorderColor: '#F9D95C',
+  buttonPrimaryColor: '#713610',
+};
+
+const parent = ref('')
+
+// 判断是否显示控件
+let use_widget = ref(true);
+/**
+ * 手机号码校验
+ * 函数返回 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
+};
+
+  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) {
+    disabled.value = false;
+  }
+};
+
+// 设置发送短信倒计时
+const countDown = ref(60);
+const countDownHandle = () => {
+  // 倒计时
+  if (countDown.value === 0) {
+    countDown.value = 60;
+  } else {
+    countDown.value--;
+    setTimeout(() => {
+      countDownHandle()
+    }, 1000)
+  }
+}
+const sendCode = () => { // 发送验证码
+  if (countDown.value === 60) {
+    axios.post('/srv/?f=shzl_comment&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); 
+    })
+  }
+};
+
+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>
+import mixin from 'common/mixin';
+
+export default {
+  mixins: [mixin.init],
+  data () {
+    return {
+
+    }
+  },
+  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>
+
+<style lang="less" scoped>
+.verify-user-page {
+  padding: 1rem;
+}
+</style>
\ No newline at end of file