test: 手机号登录

CHANGELOG.md

@@ -4,6 +4,7 @@
 范围|描述|commitId
 --|--|--
  - | 表单验证 | [8f3bc1e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8f3bc1e)
+ - | 插件面板分开显示 | [fb5e86b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/fb5e86b)
  - | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc)
  - | 日历页首页 | [561c8e6](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/561c8e6)
  - | 日历页添加 | [1b46a91](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b46a91)
@@ -55,6 +56,8 @@
  - | 更新drone.yml | [a57d598](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a57d598)
  - | 添加drone.yml | [9fbae89](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/9fbae89)
  - | 修改.drone.yml | [f5b52e3](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/f5b52e3)
+ - | ci update | [d38262e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/d38262e)
+ - | drone | [8cddc7b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8cddc7b)
 
 
 ### 🔨 代码重构

hooks/user/userMixin.js

@@ -1,6 +1,5 @@
 import { ref, computed, reactive } from 'vue';
 import { useStore } from 'vuex';
-import { onReady } from '@dcloudio/uni-app';
 import clipboard from "@/common/js/dc-clipboard/clipboard.js";
 import Config from '@/common/js/config.js'
 
@@ -88,12 +87,12 @@ export default function userMixin() {
   // const showPaste = ref(false);
   const dataObj = reactive({
     showInterval: false,
-    interval: 120,
+    interval: 60,
     showPaste: false
-  })
+  });
 
   //有图片验证码的值
-  function hasvalue(form) {
+  function hasvalue(form, renderData) {
     if(form.smsCode || form.showPaste) return
     if (!verifyPhone(form.phone)) {
       uni.$ui.showToast('请输入正确的手机号');
@@ -103,26 +102,29 @@ export default function userMixin() {
       uni.$ui.showToast('请输入图形验证码');
       return;
     }
-    getCode(form);
+
+    if (!dataObj.showInterval) {
+      getCode(form, renderData);
+    }
   }
 
   // 获取验证码
-  async function getCode(form) {
+  async function getCode(form, renderData) {
     try {
-      if (!form.verificationCodeId || !form.verificationCodeValue) {
+      if (!renderData.verificationCodeId || !form.verificationCodeValue) {
         uni.$ui.showToast('缺少图形验证码参数');
         return;
       }
       const params = {
         phone: form.phone,
-        verificationCodeId: form.verificationCodeId,
+        verificationCodeId: renderData.verificationCodeId,
         verificationCodeValue: form.verificationCodeValue,
       };
       const date = await store.dispatch('user/sendCode', params);
       getCodeInterval();
       dataObj.showPaste = true;
     } catch (err) {
-      getImageCode();
+      dataObj.showPaste = false;
       throw err;
     }
   }
@@ -135,7 +137,7 @@ export default function userMixin() {
         clearInterval(codeTimer.value);
         codeTimer.value = null;
         dataObj.showInterval = false;
-        dataObj.interval = 120;
+        dataObj.interval = 60;
         return;
       }
       dataObj.interval = dataObj.interval - 1;

pages/user/login.vue

@@ -1,17 +1,17 @@
 <template>
   <view class="u-p-l-50 u-p-r-50 u-p-t-30">
-    <u-form :model="form" ref="loginForm" :error-type="['message']">
+    <u-form :model="form" ref="phoneLoginForm" :error-type="['message']">
-      <u-form-item label="手机号码" prop="phone" label-width="150">
+      <u-form-item label="手机号码" prop="phone" label-width="160">
         <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
       </u-form-item>
 
-      <u-form-item label="图形验证码" prop="verificationCodeValue" label-width="150">
+      <u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160">
         <u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input>
-        <image slot="right" :src="imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
+        <image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
       </u-form-item>
 
-      <u-form-item label="验证码" prop="smsCode" label-width="150">
+      <u-form-item label="验证码" prop="smsCode" label-width="160">
-        <u-input @focus="mixinInit.hasvalue(form)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
+        <u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
         <u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button>
         <u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button>
       </u-form-item>
@@ -23,7 +23,7 @@
     </u-form>
 
     <view class="u-m-t-50">
-      <u-button @click="submit" type="primary">立即登录</u-button>
+      <u-button @click="submitLogin" type="primary">立即登录</u-button>
     </view>
 
     <view class="flex justify-between">
@@ -43,51 +43,43 @@
 <script setup>
   import { ref, computed, reactive } from 'vue';
   import { useStore } from 'vuex';
-  import { onLoad, onReady } from '@dcloudio/uni-app';
+  import { onReady } from '@dcloudio/uni-app';
   import userMixin from '@/hooks/user/userMixin'
 
   const store = useStore();
   const mixinInit = userMixin();
-  const loginForm = ref(null);
+  const phoneLoginForm = ref(null);
 
   const form = reactive({
     phone: '',
-    verificationCodeId: '', // 图形验证码id
     verificationCodeValue: '', // 图形验证码值
     smsCode: ''
   });
-  const imageBase64 = ref(null); // 图形验证码图片
+  const renderData = reactive({
-
+    verificationCodeId: '', // 图形验证码id
-  getImageCode();
+    imageBase64: '' // 图形验证码图片
+  })
 
   onReady(() => {
-    loginForm.value.setRules(mixinInit.rules);
+    phoneLoginForm.value.setRules(mixinInit.rules);
   });
 
-  function submit() {
+  getImageCode(); // 获取图形验证码
+
+  // 表单验证
+  const submitLogin = () => {
     console.log('111111')
-    loginForm.value.validate(valid => {
+    phoneLoginForm.value.validate(valid => {
-      console.log('22222', valid)
+      console.log('2222', valid)
       if (valid) {
         login()
       }
     });
   }
 
-  // 获取图形验证码
+  /**
-  async function getImageCode() {
+   * 登录
-    uni.$ui.showLoading();
+   */
-    try {
-      const data = await uni.$u.api.getImageCode();
-      imageBase64.value = data.imageBase64 || '';
-      form.verificationCodeId = data.verificationCodeId || '';
-      uni.$ui.hideLoading();
-    } catch (error) {
-      uni.$ui.hideLoading();
-      uni.$ui.showToast(error);
-    }
-  }
-
   async function login() {
     uni.$ui.showLoading();
     try {
@@ -117,6 +109,21 @@
     }
   }
 
+  // 获取图形验证码
+  async function getImageCode() {
+    uni.$ui.showLoading();
+    try {
+      const data = await uni.$u.api.getImageCode();
+      renderData.imageBase64 = data.imageBase64 || '';
+      renderData.verificationCodeId = data.verificationCodeId || '';
+      uni.$ui.hideLoading();
+    } catch (error) {
+      uni.$ui.hideLoading();
+      uni.$ui.showToast(error);
+    }
+  }
+
+  // 页面跳转
   function openPage(url) {
     uni.navigateTo({
       url: url