feat: 手机号登录

CHANGELOG.md

@@ -38,6 +38,13 @@
  - | defineExpose, defineEmits不需要引入 | [902cacc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/902cacc)
 
 
+### 📦 持续集成
+范围|描述|commitId
+--|--|--
+ - | 添加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)
+
+
 ### 🔨 代码重构
 范围|描述|commitId
 --|--|--

hooks/user/userMixin.js

@@ -1,11 +1,13 @@
-import { ref, computed } from 'vue';
-import { useStore } from 'vuex';
-import clipboard from "@/common/js/dc-clipboard/clipboard.js"
+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'
 
 export default function userMixin() {
   const store = useStore();
   const user = computed(() => store.state.user.user);
-  const rules = ref({
+  const rules = {
     phone: [{
         required: true,
         message: '请输入手机号',
@@ -78,46 +80,146 @@ export default function userMixin() {
         trigger: ['change', 'blur'],
       }
     ],
-  });
-  const errorType = ['message'];
-  const labelPosition = 'left';
-  const border = false;
-  const smsCode = ref(''); // 短信验证码
+  };
+  const smsCode = ref(null); // 短信验证码
   const showInterval = ref(false);
   const interval = ref(120);
   const codeTimer = ref(null);
-  const showPaste = ref(false);
-
-  // 获取图形验证码
-  async function getImageCode() {
-    console.log('5555')
-    uni.$ui.showLoading();
-    try {
-      const data = await uni.$u.api.getImageCode();
-      const { imageBase64, verificationCodeId } = data;
-      imageBase64 = imageBase64 || '';
-      verificationCodeId = verificationCodeId || '';
-      uni.$ui.hideLoading();
-    } catch (error) {
-      uni.$ui.hideLoading();
-      uni.$ui.showToast(error);
-    }
+  const showPaste = ref(false);
+
+  //有图片验证码的值
+  function hasvalue(form) {
+    if(form.smsCode || form.showPaste) return
+    if (!verifyPhone(form.phone)) {
+      uni.$ui.showToast('请输入正确的手机号');
+      return;
+    }
+    if (!form.verificationCodeValue) {
+      uni.$ui.showToast('请输入图形验证码');
+      return;
+    }
+    getCode();
+  }
+
+  // 获取验证码
+  async function getCode() {
+    try {
+      if (!verificationCodeId.value || !form.verificationCodeValue) {
+        showToast('缺少图形验证码参数');
+        return;
+      }
+      const params = {
+        phone: form.phone,
+        verificationCodeId: verificationCodeId.value,
+        verificationCodeValue: form.verificationCodeValue,
+      };
+      const date = await store.dispatch('user/sendCode', params);
+      getCodeInterval();
+      showPaste.value = true;
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  // 获取验证码倒计时
+  function getCodeInterval() {
+    showInterval.value = true;
+    codeTimer.value = setInterval(() => {
+      if (interval.value === 0) {
+        clearInterval(codeTimer.value);
+        codeTimer.value = null;
+        showInterval.value = false;
+        interval.value = 120;
+        return;
+      }
+      interval.value = interval.value - 1;
+    }, 1000);
+  }
+
+  // 粘贴
+  function setCode() {
+    // 获取粘贴板内容
+    // 小程序平台
+    //#ifdef MP-WEIXIN
+    uni.getClipboardData({
+      success (res) {
+        smsCode.value = res.data;
+      }
+    });
+    //#endif
+
+    // 非小程序平台
+    //#ifndef MP-WEIXIN
+    getClipboardContents()
+    //#endif
+  }
+
+  // 非小程序平台粘贴
+  async function getClipboardContents() {
+    try {
+      const text = await navigator.clipboard.readText();
+      smsCode.value = text;
+    } catch (err) {
+      console.error('Failed to read clipboard contents: ', err);
+    }
+  }
+
+  // 验证信息
+  function checkRules() {
+    if (!verifyPhone(phone.value)) {
+      uni.$ui.showToast('请输入正确的手机号');
+      return false;
+    }
+    if (!smsCode.value) {
+      uni.$ui.showToast('验证码无效');
+      return false;
+    }
+
+    if (phone.value === user.value.phone) {
+      uni.$ui.showToast('新手机号不能与旧手机号相同');
+      return;
+    }
+    return true;
+  }
+
+  /**
+   * 验证手机号格式
+   * @param {string} phone 手机号
+   */
+  function verifyPhone(phone) {
+    const phoneExg = /^1\d{10}$/;
+    return phoneExg.test(phone);
+  }
+
+  /**
+   * 验证账号/密码 格式
+   * @param {string} account 账号
+   */
+  function verifyLoginname(account) {
+    const accountExg = /^[a-zA-Z0-9._-]{2,20}$/;
+    return accountExg.test(account);
+  }
+
+  // 微信登录
+  function handleWxLogin() {
+    const origin = `${Config.baseUrl}/pt-mui`; // 测试
+    const appid = 'wxd1842e073e0e6d91';
+    const state = 'wx_web';
+    const href = 'https://open.weixin.qq.com/connect/qrconnect';
+    // eslint-disable-next-line
+    window.location.href =
+      `${href}?appid=${appid}&redirect_uri=${origin}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;
   }
 
   return {
-    rules,
-    errorType,
-    labelPosition,
-    border,
-    getImageCode,
-    // hasvalue,
-    // getCode,
-    // getCodeInterval,
-    // checkRules,
-    // setCode,
-    // getClipboardContents,
-    // verifyPhone,
-    // verifyLoginname,
-    // handleWxLogin
+    rules,
+    showPaste,
+    showInterval,
+    interval,
+    hasvalue,
+    checkRules,
+    setCode,
+    verifyLoginname,
+    handleWxLogin
   }
 }

pages.json

@@ -12,13 +12,22 @@
 				"navigationStyle": "custom",
 				"navigationBarTextStyle": "white"
 			}
-		},
+		},
+		// 用户名密码登录
 		{
 			"path": "pages/user/accountLogin",
 			"style": {
 				"navigationStyle": "custom",
 				"navigationBarTextStyle": "white"
 			}
+		},
+		// 手机号登录
+		{
+			"path": "pages/user/login",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -7,7 +7,7 @@
 			<!-- 上传 导入wbs -->
 			<Upload @success="onUploadSuccess" @error="onUploadError" />
 		</view>
-
+<u-button @click="toLogin">登录</u-button>
 		<!-- 项目列表 -->
 		<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
 
@@ -104,6 +104,10 @@ function onMove(event) {
   prevY = y;
   data.value.calendar.initDate();
 }
+
+function toLogin() {
+  uni.navigateTo({ url: '/pages/user/accountLogin' })
+}
 </script>
 
 <style>

pages/user/accountLogin.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="u-p-l-50 u-p-r-50 u-p-t-30">
-    <u-form :model="model" ref="loginForm" :rules="mixinInit.rules" :error-type="mixinInit.errorType">
-      <u-form-item :label-position="mixinInit.labelPosition" label="用户名" prop="account" label-width="150">
-        <u-input :border="mixinInit.border" placeholder="请输入用户名" v-model="model.account" type="text"></u-input>
+    <u-form :model="form" ref="loginForm" :error-type="['message']">
+      <u-form-item label="用户名" prop="account" label-width="150">
+        <u-input placeholder="请输入用户名" v-model="form.account" type="text"></u-input>
       </u-form-item>
-      <u-form-item :label-position="mixinInit.labelPosition" label="密码" prop="password" label-width="150">
-        <u-input :password-icon="true" :border="mixinInit.border" type="password" v-model="model.password" placeholder="请输入密码">
+      <u-form-item label="密码" prop="password" label-width="150">
+        <u-input :password-icon="true" type="password" v-model="form.password" placeholder="请输入密码">
         </u-input>
       </u-form-item>
       <view class="flex flex-nowrap">
@@ -26,69 +26,72 @@
     <view style="margin-top: 200rpx;text-align: center; color: #999999;font-size: 35rpx;">
       快速登录
     </view>
-    <view style="text-align: center; margin-top: 20rpx;">
+    <view style="text-align: center; margin-top: 20rpx;" @click="mixinInit.handleWxLogin">
       <image src="/common/img/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
     </view>
   </view>
 </template>
 
 <script setup>
-  import { ref, computed } from 'vue';
+  import { ref, computed, reactive } from 'vue';
   import { useStore } from 'vuex';
+  import { onReady} from '@dcloudio/uni-app';
   import userMixin from '@/hooks/user/userMixin'
 
   const store = useStore();
-  const mixinInit = userMixin();
-  const userInfo = uni.$storage.getStorageSync('user');
-  const user = ref({});
-  const loginForm = ref(null);
-  const model = ref({
+  const mixinInit = userMixin();
+  const loginForm = ref(null);
+  
+  const form = reactive({
     account: '',
     password: ''
   })
-
-
-  if (userInfo) {
-    user.value = JSON.parse(userInfo);
-  }
+
+  onReady(() => {
+    loginForm.value.setRules(mixinInit.rules);
+  });
 
   const submit = () => {
-    loginForm.value.validate(data => {
-      console.log(data);
+    loginForm.value.validate(valid => {
+      if (valid) {
+        login()
+      }
     });
   }
 
-  async function login() {
+  async function login() {
+    uni.$ui.showLoading();
     try {
-      uni.$ui.showLoading();
-      if (account.value === user.value.account) {
-        uni.$ui.showToast('当前账户已登录');
-      } else {
-        const params = ref({
-          client: 1,
-          data: {
-            identifier: account.value,
-            credential: password.value,
-          },
-          type: 3,
-        });
-
-        let res = await uni.$u.api.signin(params.value);
-        store.commit('user/setToken', res.token);
-        store.commit('user/setUser', res);
-        uni.$storage.setStorageSync('anyringToken', res.token || '');
-        uni.$storage.setStorageSync('user', JSON.stringify(res));
-      }
-
-      uni.navigateTo({
-        url: '/pages/index/index'
+      const params = reactive({
+        client: 1,
+        data: {
+          identifier: form.account,
+          credential: form.password,
+        },
+        type: 3,
       });
 
-      uni.$ui.hideLoading();
+      let res = await uni.$u.api.signin(params);
+      store.commit('user/setToken', res.token);
+      store.commit('user/setUser', res);
+      uni.$storage.setStorageSync('anyringToken', res.token || '');
+      uni.$storage.setStorageSync('user', JSON.stringify(res));
+
+      uni.$ui.hideLoading();
+      
+      uni.navigateTo({
+        url: '/pages/index/index'
+      });
     } catch (error) {
       uni.$ui.hideLoading();
       uni.$ui.showToast(error);
     }
+  }
+
+  function openPage(url) {
+    uni.navigateTo({
+      url: url
+    })
   }
 </script>
 

pages/user/forgetPassword.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/user/login.vue

@@ -1,8 +1,132 @@
 <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-item label="手机号码" prop="phone" label-width="150">
+        <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
+      </u-form-item>
+
+      <u-form-item label="图形验证码" prop="verificationCodeValue" label-width="150">
+        <u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input>
+        <image slot="right" :src="imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
+      </u-form-item>
+
+      <u-form-item label="验证码" prop="smsCode" label-width="150">
+        <u-input @focus="mixinInit.hasvalue(form)" placeholder="请输入验证码" v-model="form.smsCode" type="text"> </u-input>
+        <u-button slot="right" type="primary" size="mini" v-show="mixinInit.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button>
+        <u-button slot="right" size="mini" v-if="mixinInit.showInterval">{{ mixinInit.interval }}</u-button>
+      </u-form-item>
+
+      <view class="flex flex-nowrap">
+        <view class="flex-sub"></view>
+        <view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view>
+      </view>
+    </u-form>
+
+    <view class="u-m-t-50">
+      <u-button @click="submit" type="primary">立即登录</u-button>
+    </view>
+
+    <view class="flex justify-between">
+      <view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/rigister')">新用户注册</view>
+      <view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/accountLogin')">用户名登录</view>
+    </view>
+
+    <view style="margin-top: 200rpx;text-align: center; color: #999999;font-size: 35rpx;">
+      快速登录
+    </view>
+    <view style="text-align: center; margin-top: 20rpx;" @click="mixinInit.handleWxLogin">
+      <image src="/common/img/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
+    </view>
+  </view>
 </template>
 
-<script>
+<script setup>
+  import { ref, computed, reactive } from 'vue';
+  import { useStore } from 'vuex';
+  import { onLoad, onReady } from '@dcloudio/uni-app';
+  import userMixin from '@/hooks/user/userMixin'
+
+  const store = useStore();
+  const mixinInit = userMixin();
+  const loginForm = ref(null);
+
+  const form = reactive({
+    phone: '',
+    verificationCodeValue: '',
+    smsCode: ''
+  });
+  const imageBase64 = ref(null); // 图形验证码图片
+  const verificationCodeId = ref(null); // 图形验证码id
+  const data = {};
+  const treeId = ref(null);
+
+  getImageCode();
+
+  onReady(() => {
+    loginForm.value.setRules(mixinInit.rules);
+  });
+
+  const submit = () => {
+    loginForm.value.validate(valid => {
+      if (valid) {
+        login()
+      }
+    });
+  }
+
+  // 获取图形验证码
+  async function getImageCode() {
+    uni.$ui.showLoading();
+    try {
+      const data = await uni.$u.api.getImageCode();
+      imageBase64.value = data.imageBase64 || '';
+      verificationCodeId.value = data.verificationCodeId || '';
+      uni.$ui.hideLoading();
+    } catch (error) {
+      uni.$ui.hideLoading();
+      uni.$ui.showToast(error);
+    }
+  }
+
+  async function login() {
+    uni.$ui.showLoading();
+    try {
+      const params = reactive({
+        client: 1,
+        data: {
+          identifier: form.phone,
+          credential: form.smsCode,
+        },
+        type: 1,
+      });
+
+      let res = await uni.$u.api.signin(params);
+      store.commit('user/setToken', res.token);
+      store.commit('user/setUser', res);
+      uni.$storage.setStorageSync('anyringToken', res.token || '');
+      uni.$storage.setStorageSync('user', JSON.stringify(res));
+
+      uni.$ui.hideLoading();
+
+      uni.navigateTo({
+        url: '/pages/index/index'
+      });
+    } catch (error) {
+      uni.$ui.hideLoading();
+      uni.$ui.showToast(error);
+    }
+  }
+
+  function openPage(url) {
+    uni.navigateTo({
+      url: url
+    })
+  }
 </script>
 
-<style>
+<style lang="scss" scoped>
+  .code-image {
+    width: 200rpx;
+    height: 70rpx;
+  }
 </style>

pages/user/rigister.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>