fix 控件输入手机号长度校验

@@ -16,8 +16,9 @@
       <van-form ref="form" @submit="onSubmit">
         <van-cell-group inset style="border: 1px solid #EAEAEA;">
           <van-field v-if="use_widget" v-model="phone" name="phone" label="手机号" placeholder="手机号" readonly clickable
+            :rules="[{ validator, message: '请输入正确手机号' }]"
             @touchstart.stop="showKeyboard" />
-          <van-field v-else v-model="phone" name="phone" label="手机号" placeholder="手机号"
+          <van-field v-else v-model="phone" name="validator" label="手机号" placeholder="手机号"
             :rules="[{ validator, message: '请输入正确手机号' }]" />
           <van-field v-model="code" center clearable name="code" type="digit" label="短信验证码" placeholder="请输入短信验证码"
             :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
@@ -31,12 +32,12 @@
             </template>
           </van-field>
         </van-cell-group>
-        <div class="btn" @click="submit">
-          登&nbsp;录
-        </div>
       </van-form>
     </van-config-provider>
   </div>
+  <div class="btn" @click="submit">
+    登&nbsp;录
+  </div>
 
   <van-number-keyboard v-model="phone" :show="keyboard_show" :maxlength="11" @blur="onBlur" />
 
@@ -51,6 +52,7 @@
 
 <script setup>
 import Cookies from 'js-cookie'
+import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue'
 
 import { ref, onMounted } from 'vue';
 import { Toast } from 'vant'
@@ -60,9 +62,12 @@ import logo_image from '@images/denglu-top@2x.gif'
 import { wxInfo } from '@/utils/tools';
 
 import { useCountDown } from '@vant/use';
+import { useTitle } from '@/utils/generatePackage'
 
 const $route = useRoute();
 const $router = useRouter();
+// 设置页面标题
+useTitle($route.meta.title)
 
 // 判断是否显示控件
 let use_widget = ref(true);
@@ -93,6 +98,8 @@ if (import.meta.env.DEV) {
   code.value = import.meta.env.VITE_PIN
 }
 
+const form = ref(null);
+
 onMounted(() => {
   /**
    * 判断微信环境看是否弹出控件框
@@ -116,6 +123,21 @@ onMounted(() => {
   }
 })
 
+const submit = () => {
+  let valid = form.value.validate();
+  valid
+    .then(() => {
+      form.value.submit();
+    })
+    .catch(error => {
+      console.error(error);
+      Toast({
+        message: '请检查后再次提交',
+        icon: 'cross',
+      });
+    })
+}
+
 // 手机号输入控件控制
 const keyboard_show = ref(false);
 const showKeyboard = () => { // 弹出数字弹框
@@ -214,51 +236,18 @@ const themeVars = {
   buttonPrimaryColor: '#713610',
   CellVerticalPadding: '14px'
 };
-</script>
-
-<script>
-// FIXME: VUE2写法
-import mixin from 'common/mixin';
 
-import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue'
-
-export default {
-  components: { ImageSliderVerify },
-  mixins: [mixin.init],
-  data() {
-    return {
-      sliderShow: false,
-    }
-  },
-  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',
-          });
-        })
-    },
-    // 滑块验证成功后回调
-    handleConfirm (val) {
-      this.sliderShow = false
+// 滑块验证成功后回调
+const sliderShow = ref(false);
+const handleConfirm = (val) => {
+  sliderShow.value = false
   console.warn('验证成功');
-    },
-    handleClose () {
-      this.sliderShow = false
-    },
-    imageVerify () {
-      this.sliderShow = true;
-    }
-  },
+}
+const handleClose = () => {
+  sliderShow.value = false
+}
+const imageVerify = () => {
+  sliderShow.value = true;
 }
 </script>
 
@@ -284,7 +273,8 @@ body {
 .login-section {
 
   // background-color: #FAFAFA;
-  .btn {
+}
+.btn {
   margin: 16px;
   background-color: @base-color;
   text-align: center;
@@ -292,6 +282,5 @@ body {
   font-size: 2.25vh;
   padding: 1.5vh;
   border-radius: 5px;
-  }
 }
 </style>