feat: 登录/注册接口对接
This commit is contained in:
@@ -8,7 +8,7 @@ interface LoginParamsType {
|
|||||||
verifyCode?: string // 验证码
|
verifyCode?: string // 验证码
|
||||||
}
|
}
|
||||||
|
|
||||||
export const precheckAndSendEmail = (data: LoginParamsType) => {
|
export const precheckAndSendEmail = (data: LoginParamsType): Promise<ApiResponse> => {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/auth/precheckAndSendEmail',
|
url: '/api/auth/precheckAndSendEmail',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@@ -16,7 +16,7 @@ export const precheckAndSendEmail = (data: LoginParamsType) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const fetchLogin = (data: LoginParamsType) => {
|
export const fetchRegisterOrLogin = (data: LoginParamsType): Promise<LoginResponse> => {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/auth/registerOrLogin',
|
url: '/api/auth/registerOrLogin',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
@@ -24,10 +24,17 @@ export const fetchLogin = (data: LoginParamsType) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const resetPassword = (data: LoginParamsType) => {
|
export const resetPassword = (data: LoginParamsType): Promise<ApiResponse> => {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/auth/forgotPwd',
|
url: '/api/auth/forgotPwd',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const checkLoginStatus = (): Promise<ApiResponse<LoginResponse>> => {
|
||||||
|
return request({
|
||||||
|
url: '/api/auth/checkLoginStatus',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -45,10 +45,6 @@ export const useUserInfoStore = defineStore('userInfo', () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const login = async (data: any) => {
|
|
||||||
return new Promise((resolve, reject) => {})
|
|
||||||
}
|
|
||||||
|
|
||||||
const logOut = () => {
|
const logOut = () => {
|
||||||
// 处理退出登录的一些逻辑
|
// 处理退出登录的一些逻辑
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
@@ -69,7 +65,6 @@ export const useUserInfoStore = defineStore('userInfo', () => {
|
|||||||
setGenerateParams,
|
setGenerateParams,
|
||||||
getGenerateParams,
|
getGenerateParams,
|
||||||
resetGenerateParams,
|
resetGenerateParams,
|
||||||
logOut,
|
logOut
|
||||||
login
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
45
src/types/api.d.ts
vendored
Normal file
45
src/types/api.d.ts
vendored
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
// 全局API响应类型定义
|
||||||
|
declare global {
|
||||||
|
// 基础API响应结构
|
||||||
|
interface ApiResponse<T = any> {
|
||||||
|
success: boolean
|
||||||
|
message: string
|
||||||
|
data?: T
|
||||||
|
code?: number
|
||||||
|
errMsg?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录/注册相关响应
|
||||||
|
interface LoginResponse {
|
||||||
|
token?: string
|
||||||
|
user?: {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
email: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用列表响应
|
||||||
|
interface ListResponse<T> {
|
||||||
|
list: T[]
|
||||||
|
total: number
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页参数
|
||||||
|
interface PaginationParams {
|
||||||
|
page: number
|
||||||
|
pageSize: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用错误响应
|
||||||
|
interface ErrorResponse {
|
||||||
|
success: false
|
||||||
|
message: string
|
||||||
|
code?: number
|
||||||
|
errMsg?: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {}
|
||||||
@@ -6,6 +6,18 @@ import { getLocal } from '@/utils/local'
|
|||||||
import router from '@/router/index'
|
import router from '@/router/index'
|
||||||
import { useOverallStore } from '@/stores'
|
import { useOverallStore } from '@/stores'
|
||||||
|
|
||||||
|
// 扩展 AxiosRequestConfig 接口
|
||||||
|
declare module 'axios' {
|
||||||
|
interface AxiosRequestConfig {
|
||||||
|
loading?: boolean
|
||||||
|
loadingDom?: any
|
||||||
|
repeatRequest?: boolean
|
||||||
|
meta?: {
|
||||||
|
responseAll?: boolean
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
// console.log(import.meta.env,123)
|
// console.log(import.meta.env,123)
|
||||||
@@ -36,7 +48,7 @@ service.interceptors.request.use(
|
|||||||
}
|
}
|
||||||
// 如果登录了,有token,则请求携带token
|
// 如果登录了,有token,则请求携带token
|
||||||
// Do something before request is sent
|
// Do something before request is sent
|
||||||
if (store.token) {
|
if (store.state.token) {
|
||||||
config.headers.Authorization = getLocal('token') // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
|
config.headers.Authorization = getLocal('token') // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
|
||||||
// config.headers['X-Token'] = getLocal('token') // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
|
// config.headers['X-Token'] = getLocal('token') // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -46,14 +46,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, computed } from 'vue'
|
import { ref, reactive, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useUserInfoStore } from '@/stores'
|
||||||
import { showToast } from 'vant'
|
import { showToast } from 'vant'
|
||||||
import { google } from '@/assets/base64'
|
import { google } from '@/assets/base64'
|
||||||
import { fetchLogin } from '@/api/login'
|
import { fetchRegisterOrLogin } from '@/api/login'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const userInfoStore = useUserInfoStore()
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const formData = reactive<Record<string, string>>({
|
const formData = reactive({
|
||||||
email: '',
|
email: '',
|
||||||
password: ''
|
password: ''
|
||||||
})
|
})
|
||||||
@@ -109,19 +111,14 @@ const handleLogin = async () => {
|
|||||||
|
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
|
|
||||||
const response: any = await fetchLogin({ ...formData, operationType: 'LOGIN' } as any)
|
fetchRegisterOrLogin({ ...formData, operationType: 'LOGIN' }).then((response) => {
|
||||||
if (response.code === 200) {
|
console.log('登录成功', response)
|
||||||
console.log('登录成功', response)
|
userInfoStore.setToken(response.token)
|
||||||
// showToast('登录成功')
|
userInfoStore.setUserInfo(response.user)
|
||||||
// router.push('/stylist/customer')
|
showToast('登录成功')
|
||||||
} else {
|
router.replace('/stylist/customer')
|
||||||
showToast(response.message)
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// showToast('登录成功')
|
|
||||||
|
|
||||||
// 登录成功后跳转到主页或工作台
|
|
||||||
// router.push('/stylist/customer')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理忘记密码
|
// 处理忘记密码
|
||||||
|
|||||||
@@ -16,24 +16,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<form @submit.prevent="handleConfirm" class="login-form">
|
<div class="login-form">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input
|
<input type="text" v-model="formData.name" placeholder="Name" class="input-field" />
|
||||||
type="text"
|
|
||||||
v-model="formData.name"
|
|
||||||
placeholder="Name"
|
|
||||||
class="input-field"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input
|
<input type="email" v-model="formData.email" placeholder="Email" class="input-field" />
|
||||||
type="email"
|
|
||||||
v-model="formData.email"
|
|
||||||
placeholder="Email"
|
|
||||||
class="input-field"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group pwd">
|
<div class="input-group pwd">
|
||||||
<input
|
<input
|
||||||
@@ -41,19 +29,18 @@
|
|||||||
v-model="formData.password"
|
v-model="formData.password"
|
||||||
placeholder="Your Password"
|
placeholder="Your Password"
|
||||||
class="input-field"
|
class="input-field"
|
||||||
required
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 登录按钮 -->
|
<!-- 登录按钮 -->
|
||||||
<button type="submit" class="login-button">Sign Up</button>
|
<button type="button" class="login-button" @click="handleConfirm">Sign Up</button>
|
||||||
|
|
||||||
<!-- Google登录按钮 -->
|
<!-- Google登录按钮 -->
|
||||||
<div type="button" class="google-button" @click="handleGoogleLogin">
|
<div type="button" class="google-button" @click="handleSignupByGoogle">
|
||||||
<img :src="google" class="google-icon" />
|
<img :src="google" class="google-icon" />
|
||||||
Sign up with Google
|
Sign up with Google
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -64,16 +51,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, computed } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { showToast } from 'vant'
|
import { showToast } from 'vant'
|
||||||
import { google } from '@/assets/base64'
|
import { google } from '@/assets/base64'
|
||||||
import { fetchLogin } from '@/api/login'
|
import { fetchRegisterOrLogin } from '@/api/login'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const formData = reactive<Record<string, string>>({
|
const formData = reactive({
|
||||||
name: '',
|
name: '',
|
||||||
email: '',
|
email: '',
|
||||||
password: ''
|
password: ''
|
||||||
@@ -135,23 +122,12 @@ const validateForm = () => {
|
|||||||
return isValid
|
return isValid
|
||||||
}
|
}
|
||||||
|
|
||||||
// 计算属性:表单是否有效
|
|
||||||
const isFormValid = computed(() => {
|
|
||||||
return (
|
|
||||||
formData.name &&
|
|
||||||
formData.email &&
|
|
||||||
formData.password &&
|
|
||||||
validateEmail(formData.email) &&
|
|
||||||
validatePassword(formData.password)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 返回上一页
|
// 返回上一页
|
||||||
const goBack = () => {
|
const goBack = () => {
|
||||||
router.go(-1)
|
router.go(-1)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理登录
|
// 处理注册
|
||||||
const handleConfirm = async () => {
|
const handleConfirm = async () => {
|
||||||
if (!validateForm()) {
|
if (!validateForm()) {
|
||||||
showToast('请检查输入信息')
|
showToast('请检查输入信息')
|
||||||
@@ -160,26 +136,25 @@ const handleConfirm = async () => {
|
|||||||
|
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
|
|
||||||
const res:any = await fetchLogin({...formData, operationType: 'REGISTER'} as any)
|
fetchRegisterOrLogin({ ...formData, operationType: 'REGISTER' })
|
||||||
if(res.code === 200) {
|
.then((res) => {
|
||||||
console.log('注册成功', res)
|
if (res.success) {
|
||||||
// showToast('注册成功')
|
showToast('注册成功')
|
||||||
// router.push('/stylist/customer')
|
router.push('/login')
|
||||||
} else {
|
} else {
|
||||||
showToast(res.message)
|
showToast(res.message)
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
.catch((err) => {
|
||||||
// 处理忘记密码
|
showToast(err.message)
|
||||||
const handleForgotPassword = () => {
|
})
|
||||||
showToast('忘记密码功能开发中...')
|
.finally(() => {
|
||||||
console.log('11111111111')
|
isLoading.value = false
|
||||||
// 这里可以跳转到忘记密码页面
|
})
|
||||||
// router.push('/forgot-password')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理Google登录
|
// 处理Google登录
|
||||||
const handleGoogleLogin = async () => {
|
const handleSignupByGoogle = async () => {
|
||||||
try {
|
try {
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
showToast('Google登录功能开发中...')
|
showToast('Google登录功能开发中...')
|
||||||
@@ -193,23 +168,6 @@ const handleGoogleLogin = async () => {
|
|||||||
isLoading.value = false
|
isLoading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 实时验证输入
|
|
||||||
const handleEmailInput = () => {
|
|
||||||
if (formData.email && !validateEmail(formData.email)) {
|
|
||||||
formErrors.email = '请输入有效的邮箱地址'
|
|
||||||
} else {
|
|
||||||
formErrors.email = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handlePasswordInput = () => {
|
|
||||||
if (formData.password && !validatePassword(formData.password)) {
|
|
||||||
formErrors.password = '密码至少需要6位字符'
|
|
||||||
} else {
|
|
||||||
formErrors.password = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
|
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
|
||||||
<template v-if="pageMode === 'entry'">
|
<template v-if="pageMode === 'entry'">
|
||||||
<div class="setting flex flex-between">
|
<div class="setting flex flex-between">
|
||||||
<van-icon name="arrow-left" color="#fff" size="70" />
|
<van-icon name="arrow-left" color="#fff" size="70" @click="handleBack" />
|
||||||
<SvgIcon name="setting" size="70" />
|
<SvgIcon name="setting" size="70" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content flex flex-center flex-column">
|
<div class="content flex flex-center flex-column">
|
||||||
@@ -50,6 +50,10 @@ const router = useRouter()
|
|||||||
type PageMode = 'form' | 'entry'
|
type PageMode = 'form' | 'entry'
|
||||||
const pageMode = ref<PageMode>('entry')
|
const pageMode = ref<PageMode>('entry')
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
router.go(-1)
|
||||||
|
}
|
||||||
|
|
||||||
const handleChangeMode = (mode: PageMode) => {
|
const handleChangeMode = (mode: PageMode) => {
|
||||||
pageMode.value = mode
|
pageMode.value = mode
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user