|
|
@@ -4,22 +4,52 @@
|
|
|
import axios from "axios";
|
|
|
import {router} from '../router'
|
|
|
|
|
|
- // 输入框的ref
|
|
|
+ // 输入框值
|
|
|
const account = ref('')
|
|
|
const password = ref('')
|
|
|
|
|
|
- // 用于计算
|
|
|
+ // 用于前端阻拦不合法输入
|
|
|
+ // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
+ const hasAccountInput = computed(() => account.value != '');
|
|
|
+ const hasPasswordInput = computed(() => password.value != '');
|
|
|
+
|
|
|
+ const chinaMobileRegex = /^1(3[0-9]|4[579]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[189])\d{8}$/;
|
|
|
+ const accountLegal = computed(() => chinaMobileRegex.test(account.value));
|
|
|
+
|
|
|
+ // 密码有就行
|
|
|
+ const passwordLegal = hasPasswordInput;
|
|
|
+
|
|
|
const loginDisabled = computed(() => {
|
|
|
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
- return !(emailRegex.test(account.value) && password.value.trim() !== '');
|
|
|
+ return !(accountLegal.value && passwordLegal.value);
|
|
|
});
|
|
|
|
|
|
- function handleLogin() {
|
|
|
- axios.post(
|
|
|
|
|
|
- )
|
|
|
- console.log(account.value)
|
|
|
- router.push({ path: "/home" })
|
|
|
+ // POST /api/user/login
|
|
|
+ // params
|
|
|
+ // phone: string
|
|
|
+ // password: string
|
|
|
+ async function handleLogin() {
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.post('/user/login', {
|
|
|
+ params: {
|
|
|
+ phone: account.value,
|
|
|
+ password: password.value,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(response)
|
|
|
+ // token塞入饼干中
|
|
|
+ const token = response.data.token;
|
|
|
+ document.cookie = `token=${token}`
|
|
|
+
|
|
|
+ // 路由跳转
|
|
|
+ router.push({ path: "/home" })
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ // 可以给用户弹窗
|
|
|
+ }
|
|
|
+
|
|
|
+ // router.push({ path: "/home" })
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
@@ -44,14 +74,25 @@
|
|
|
<el-form class="space-y-4 md:space-y-6">
|
|
|
|
|
|
<el-form-item>
|
|
|
- <label for="email" class="block mb-2 text-sm font-medium text-gray-900">注册邮箱</label>
|
|
|
- <input id="email" type="email" v-model="account"
|
|
|
+ <label v-if="!hasAccountInput" for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
|
|
|
+ 注册手机号
|
|
|
+ </label>
|
|
|
+ <label v-else-if="!accountLegal" for="tel"
|
|
|
+ class="inline-block mb-2 font-medium text-red-500 text-sm">
|
|
|
+ 手机号内容不合法
|
|
|
+ </label>
|
|
|
+ <label v-else for="tel" class="inline-block mb-2 text-sm font-medium text-gray-900">
|
|
|
+ 注册手机号
|
|
|
+ </label>
|
|
|
+
|
|
|
+ <input id="tel" type="tel" v-model="account"
|
|
|
required
|
|
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
|
|
|
- placeholder="name@company.com">
|
|
|
+ placeholder="">
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
+<!-- 因为密码目前设定是有就行，所以也没有做条件渲染-->
|
|
|
<label for="password" class="block mb-2 text-sm font-medium text-gray-900">账户密码</label>
|
|
|
<input id="password" type="password" v-model="password"
|
|
|
required
|
Nivek