feat: 只保留前端部分
This commit is contained in:
+1
-12
@@ -6,9 +6,6 @@ import type {
|
||||
ToolsResponseData,
|
||||
ToolCateResponseData,
|
||||
ToolRecommendResponseData,
|
||||
ToolCollectResponseData,
|
||||
CollectReqData,
|
||||
GetToolCollectResponseData
|
||||
} from './type'
|
||||
|
||||
//项目用户相关的请求地址
|
||||
@@ -19,10 +16,6 @@ enum API {
|
||||
GET_TOOL_CATES = '/tool/cates',
|
||||
//获取推荐
|
||||
GET_TOOL_RECOMMEND = '/tool/recommends',
|
||||
//收藏工具
|
||||
COLLECT = '/tool/collects',
|
||||
//我的收藏
|
||||
GET_TOOL_COLLECTS = '/get/tool/collects',
|
||||
}
|
||||
//获取tools
|
||||
export const getTools = (data: ToolsReqData) => request.get<any, ToolsResponseData>(API.GET_TOOLS, {
|
||||
@@ -31,8 +24,4 @@ export const getTools = (data: ToolsReqData) => request.get<any, ToolsResponseDa
|
||||
//获取tool cate
|
||||
export const getToolCate = () => request.get<any, ToolCateResponseData>(API.GET_TOOL_CATES)
|
||||
//获取推荐
|
||||
export const getToolRecommend = () => request.get<any, ToolRecommendResponseData>(API.GET_TOOL_RECOMMEND)
|
||||
//收藏工具
|
||||
export const toolCollect = (data: CollectReqData) => request.post<any, ToolCollectResponseData>(API.COLLECT + '/' + data.toolId)
|
||||
//我的收藏
|
||||
export const getToolCollect = () => request.get<any, GetToolCollectResponseData>(API.GET_TOOL_COLLECTS)
|
||||
export const getToolRecommend = () => request.get<any, ToolRecommendResponseData>(API.GET_TOOL_RECOMMEND)
|
||||
@@ -44,14 +44,4 @@ export interface ToolCateResponseData extends ResponseData {
|
||||
//tools recommend response
|
||||
export interface ToolRecommendResponseData extends ResponseData {
|
||||
data: ToolsInfo[]
|
||||
}
|
||||
|
||||
//tools collect response
|
||||
export interface ToolCollectResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
//get collect response
|
||||
export interface GetToolCollectResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
import type {
|
||||
LoginReqData,
|
||||
LoginResponseData,
|
||||
LogoutResponseData,
|
||||
RegisterReqData,
|
||||
RegisterResponseData,
|
||||
SendCodeEmailResponseData,
|
||||
sendCodeEmailReq,
|
||||
UserInfoResponseData,
|
||||
ForgetReqData,
|
||||
ForgetResponseData
|
||||
} from './type'
|
||||
|
||||
//项目用户相关的请求地址
|
||||
enum API {
|
||||
//login
|
||||
LOGIN = '/login',
|
||||
//logout
|
||||
LOGOUT = '/logout',
|
||||
//register
|
||||
REGISTER = '/register',
|
||||
//forget
|
||||
FORGET = '/forget/password',
|
||||
//注册 - 发送邮箱验证码
|
||||
SEND_CODE_EMAIL = '/send/register/code',
|
||||
//忘记密码 - 发送邮箱验证码
|
||||
SEND_FORGET_CODE_EMAIL = '/send/forget/password/code',
|
||||
//获取用户信息
|
||||
USER_INFO = '/user/info'
|
||||
}
|
||||
|
||||
//login
|
||||
export const login = (data: LoginReqData) => request.post<any, LoginResponseData>(API.LOGIN, data)
|
||||
|
||||
//logout
|
||||
export const logout = () => request.post<any, LogoutResponseData>(API.LOGOUT)
|
||||
|
||||
//register
|
||||
export const register = (data: RegisterReqData) => request.post<any, RegisterResponseData>(API.REGISTER, data)
|
||||
|
||||
//forget
|
||||
export const forget = (data: ForgetReqData) => request.post<any, ForgetResponseData>(API.FORGET, data)
|
||||
|
||||
//register - send code
|
||||
export const sendCodeEmail = (data: sendCodeEmailReq) => request.post<any, SendCodeEmailResponseData>(API.SEND_CODE_EMAIL, data)
|
||||
|
||||
//forget - send code
|
||||
export const sendForgetCodeEmail = (data: sendCodeEmailReq) => request.post<any, SendCodeEmailResponseData>(API.SEND_FORGET_CODE_EMAIL, data)
|
||||
|
||||
//获取用户信息
|
||||
export const userInfo = () => request.get<any, UserInfoResponseData>(API.USER_INFO)
|
||||
@@ -1,49 +0,0 @@
|
||||
import { ResponseData } from "../common"
|
||||
|
||||
export interface LoginReqData {
|
||||
email: string,
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface RegisterReqData {
|
||||
email: string,
|
||||
code: string,
|
||||
password: string,
|
||||
password_confirmation: string
|
||||
}
|
||||
|
||||
export interface ForgetReqData {
|
||||
email: string,
|
||||
code: string,
|
||||
password: string,
|
||||
password_confirmation: string
|
||||
}
|
||||
|
||||
export interface sendCodeEmailReq {
|
||||
email: string
|
||||
}
|
||||
|
||||
export interface LoginResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
export interface LogoutResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
export interface RegisterResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
export interface ForgetResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
export interface SendCodeEmailResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
export interface UserInfoResponseData extends ResponseData {
|
||||
|
||||
}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted,reactive } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { RouterLink } from "vue-router"
|
||||
import { Star } from '@element-plus/icons-vue'
|
||||
import { useToolsStore } from '@/store/modules/tools'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
// import { ElMessage } from 'element-plus'
|
||||
import { useRoute } from "vue-router"
|
||||
//store
|
||||
const toolsStore = useToolsStore()
|
||||
const userStore = useUserStore()
|
||||
const route = useRoute()
|
||||
// const getToolsCate = async () => {
|
||||
// try {
|
||||
@@ -18,25 +16,6 @@ const route = useRoute()
|
||||
// }
|
||||
// }
|
||||
|
||||
//收藏
|
||||
const toolCollect = reactive({
|
||||
toolId: 0
|
||||
})
|
||||
const collect = async (toolId) => {
|
||||
try {
|
||||
if (!userStore.isLogin()) {
|
||||
//未登录,弹出登录窗口
|
||||
ElMessage.error('请登录')
|
||||
return
|
||||
}
|
||||
toolCollect.toolId = toolId
|
||||
await toolsStore.toolCollect(toolCollect)
|
||||
// ElMessage.success('收藏成功')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// getToolsCate()
|
||||
@@ -50,39 +29,6 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="md:mr-6 c-xs:mr-0">
|
||||
<!-- collect -->
|
||||
<div id="collect">
|
||||
<!-- cate title -->
|
||||
<div class="md:mt-8 md:mb-8 c-xs:mt-1 c-xs:mb-4 text-xl font-bold text-[--base-black]">
|
||||
我的收藏
|
||||
</div>
|
||||
<!-- card -->
|
||||
<div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10" v-if="toolsStore.collect.length > 0">
|
||||
<router-link v-for="(item, index) in toolsStore.collect" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5">
|
||||
<div class="flex items-center border-b pb-2">
|
||||
<el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
|
||||
<div class="flex flex-col ml-2 w-full">
|
||||
<div class="flex">
|
||||
<div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<el-text size="small">{{ item.cate }}</el-text>
|
||||
<el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)" type="warning"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<el-text line-clamp="2">{{ item.desc }}</el-text>
|
||||
</div>
|
||||
</router-link>
|
||||
<!-- 占位 div -->
|
||||
<div class="w-[24%] c-md:w-[24%] c-sm:w-[32%]"></div>
|
||||
</div>
|
||||
<div v-else class="bg-white rounded-2xl">
|
||||
<el-empty description="暂无收藏" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- list -->
|
||||
<div v-for="(cate, index) in toolsStore.cates" :key="index">
|
||||
<!-- cate title -->
|
||||
@@ -100,7 +46,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<el-text size="small">{{ item.cate }}</el-text>
|
||||
<el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)" type="warning" :plain="!toolsStore.collectIds.includes(item.id)"/>
|
||||
<!-- <el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)" type="warning" :plain="!toolsStore.collectIds.includes(item.id)"/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,8 +3,7 @@
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useToolsStore } from '@/store/modules/tools'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
// import { ElMessageBox } from 'element-plus'
|
||||
import {rtrim} from '@/utils/string'
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
@@ -19,7 +18,6 @@ const searchParam = reactive({
|
||||
})
|
||||
//store
|
||||
const toolsStore = useToolsStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
//根据路由查询tool id
|
||||
const getToolInfo = async () => {
|
||||
@@ -27,26 +25,13 @@ const getToolInfo = async () => {
|
||||
searchParam.route = rtrim(routeStr, '/')
|
||||
await toolsStore.getToolInfo(searchParam)
|
||||
}
|
||||
|
||||
//收藏
|
||||
const toolCollect = reactive({
|
||||
toolId: 0
|
||||
})
|
||||
const collect = async (toolId) => {
|
||||
try {
|
||||
if (!userStore.isLogin()) {
|
||||
//未登录,弹出登录窗口
|
||||
ElMessage.error('请登录')
|
||||
return
|
||||
}
|
||||
toolCollect.toolId = toolId
|
||||
await toolsStore.toolCollect(toolCollect)
|
||||
// ElMessage.success('收藏成功')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
return
|
||||
}
|
||||
// const collect = () => {
|
||||
// ElMessageBox({
|
||||
// title: '提示',
|
||||
// message: '请使用快捷键`Ctrl+D`进行收藏'
|
||||
// })
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
getToolInfo()
|
||||
@@ -68,10 +53,6 @@ onMounted(() => {
|
||||
<div class="text-xl">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="warning" :plain="!toolsStore.collectIds.includes(toolsStore.toolInfo.id)" @click="collect(toolsStore.toolInfo.id)">收藏</el-button>
|
||||
<!-- <el-button type="danger">取消收藏</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,24 +3,17 @@ import { ref, reactive, onMounted } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { useToolsStore } from '@/store/modules/tools'
|
||||
import { useComponentStore } from '@/store/modules/component'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
import { ToolsInfo } from '@/api/tools/type';
|
||||
import Login from '@/components/Layout/Login/Login.vue'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import defaultAvatar from '@/assets/default_avatar.png'
|
||||
|
||||
import router from '@/router';
|
||||
// const isNavDrawer = ref(false)
|
||||
const loading = ref(false)
|
||||
const options = ref<ToolsInfo[]>([])
|
||||
const loginRef = ref()
|
||||
const userPopRef = ref()
|
||||
const defAvatar = ref(defaultAvatar)
|
||||
const feedBackUrl = import.meta.env.VITE_FEEDBACK_URL
|
||||
//store
|
||||
const toolsStore = useToolsStore()
|
||||
const componentStore = useComponentStore()
|
||||
const userStore = useUserStore()
|
||||
//查询参数
|
||||
const searchParam = reactive({
|
||||
cateId: 0,
|
||||
@@ -61,53 +54,8 @@ const optionClick = (url: string) => {
|
||||
router.push(url)
|
||||
}
|
||||
|
||||
//收藏
|
||||
// const collect = () => {
|
||||
// ElMessageBox({
|
||||
// title: '提示',
|
||||
// message: '请使用快捷键`Ctrl+D`进行收藏'
|
||||
// })
|
||||
// }
|
||||
|
||||
const openLogin = () => {
|
||||
loginRef.value.show()
|
||||
}
|
||||
|
||||
//获取用户信息
|
||||
const userInfo = async () => {
|
||||
try {
|
||||
//提交
|
||||
await userStore.userInfo()
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
//退出登录
|
||||
const logout = async () => {
|
||||
try {
|
||||
//提交
|
||||
await userStore.logout()
|
||||
location.reload()
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
//获取收藏
|
||||
const getToolCollect = async () => {
|
||||
try {
|
||||
await toolsStore.getCollect()
|
||||
// ElMessage.success('收藏成功')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getToolCollect(),
|
||||
userInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -170,30 +118,9 @@ onMounted(() => {
|
||||
|
||||
<div class=" w-full md:w-auto flex md:block c-xs:w-auto">
|
||||
<ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center c-xs:mt-0">
|
||||
<li class="hover:text-blue-500">
|
||||
<el-link :href="feedBackUrl" size="large" target="_blank">建议/问题</el-link>
|
||||
</li>
|
||||
<li class="ml-3" v-if="userStore.isLogin()">
|
||||
<!-- userStore.avatar -->
|
||||
<el-image class="w-10 h-10 cursor-pointer" fit="cover" :src="(userStore.avatar == '' || userStore.avatar == null || userStore.avatar == undefined) ? defAvatar : userStore.avatar" v-popover="userPopRef"></el-image>
|
||||
<el-popover
|
||||
ref="userPopRef"
|
||||
trigger="hover"
|
||||
virtual-triggering
|
||||
popper-style="padding-left: 0; padding-right: 0;"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<el-button link class="mb-3">{{ userStore.email }}</el-button>
|
||||
<el-button link type="danger" class="ml-0" style="margin-left: 0;" @click="logout">退出登录</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
</li>
|
||||
<li class="ml-3 hover:text-blue-500" v-else>
|
||||
<el-button size="large" type="primary" @click="openLogin">登录</el-button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<Login ref="loginRef"/>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
|
||||
const appNet = ref(import.meta.env.VITE_APP_WEBSITE || '')
|
||||
const appNet = ref(import.meta.env.VITE_APP_DESC || '')
|
||||
//菜单选中
|
||||
const defaultActive = ref('collect')
|
||||
//默认展开的菜单
|
||||
|
||||
@@ -1,406 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { Md5 } from 'ts-md5'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
// import router from '@/router';
|
||||
//visible
|
||||
const visible = ref(false)
|
||||
const reSendCount = ref(0)
|
||||
const reForgetSendCount = ref(0)
|
||||
//login select: 0 login; 1 reg; 2 forget
|
||||
const loginSelect = ref(0)
|
||||
//store
|
||||
const userStore = useUserStore()
|
||||
//interface
|
||||
interface loginFormRule {
|
||||
email: string,
|
||||
password: string
|
||||
}
|
||||
|
||||
interface registerFormRule {
|
||||
email: string,
|
||||
code: string,
|
||||
password: string,
|
||||
password_confirmation: string,
|
||||
}
|
||||
|
||||
interface forgetFormRule {
|
||||
email: string,
|
||||
code: string,
|
||||
password: string,
|
||||
password_confirmation: string,
|
||||
}
|
||||
//ref
|
||||
const ruleLoginFormRef = ref<FormInstance>()
|
||||
const ruleRegisterFormRef = ref<FormInstance>()
|
||||
const ruleForgetFormRef = ref<FormInstance>()
|
||||
//login from data
|
||||
const loginFrom = reactive<loginFormRule>({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
//register from data
|
||||
const registerFrom = reactive({
|
||||
email: '',
|
||||
code: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
})
|
||||
//forget from data
|
||||
const forgetFrom = reactive({
|
||||
email: '',
|
||||
code: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
})
|
||||
|
||||
//keep login check
|
||||
const keepLogin = ref(true)
|
||||
|
||||
//显示弹窗
|
||||
const show = () => {
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
//关闭弹窗
|
||||
// const close = () => {
|
||||
// visible.value = false
|
||||
// }
|
||||
|
||||
//发送验证码
|
||||
const sendCode = async () => {
|
||||
try {
|
||||
//发送
|
||||
await userStore.sendCodeEmail({
|
||||
email: registerFrom.email
|
||||
})
|
||||
//设置倒计时
|
||||
reSendCount.value = 180
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
if (reSendCount.value == 0) {
|
||||
clearInterval(intervalId)
|
||||
} else {
|
||||
reSendCount.value--
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
ElMessage.success('发送成功')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
//忘记密码 - 发送验证码
|
||||
const sendForgetCode = async () => {
|
||||
try {
|
||||
//发送
|
||||
await userStore.sendForgetCodeEmail({
|
||||
email: forgetFrom.email
|
||||
})
|
||||
//设置倒计时
|
||||
reForgetSendCount.value = 180
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
if (reForgetSendCount.value == 0) {
|
||||
clearInterval(intervalId)
|
||||
} else {
|
||||
reForgetSendCount.value--
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
ElMessage.success('发送成功')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
//登录 - 提交
|
||||
const loginSubmit = async (formEl: FormInstance|undefined) => {
|
||||
formEl?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loginSubmitCore()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//登录core
|
||||
const loginSubmitCore = async (isReg: boolean = false) => {
|
||||
try {
|
||||
//提交
|
||||
await userStore.login({
|
||||
email: loginFrom.email,
|
||||
password: Md5.hashStr(loginFrom.password),
|
||||
})
|
||||
//登录成功(通过注册调用的登录不用提示文字)
|
||||
if (isReg == false) {
|
||||
ElMessage.success('登录成功')
|
||||
}
|
||||
//关闭弹窗
|
||||
// close()
|
||||
location.reload()
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
}
|
||||
|
||||
//注册 - 提交
|
||||
const registerSubmit = (formEl: FormInstance|undefined) => {
|
||||
formEl?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
//提交注册
|
||||
await userStore.register({
|
||||
email: registerFrom.email,
|
||||
code: registerFrom.code,
|
||||
password: Md5.hashStr(registerFrom.password),
|
||||
password_confirmation: Md5.hashStr(registerFrom.password_confirmation)
|
||||
})
|
||||
ElMessage.success('注册成功')
|
||||
//模拟登录
|
||||
loginFrom.email = registerFrom.email
|
||||
loginFrom.password = registerFrom.password
|
||||
loginSubmitCore(true)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//忘记密码 - 提交
|
||||
const forgetSubmit = (formEl: FormInstance|undefined) => {
|
||||
formEl?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
//提交注册
|
||||
await userStore.forget({
|
||||
email: forgetFrom.email,
|
||||
code: forgetFrom.code,
|
||||
password: Md5.hashStr(forgetFrom.password),
|
||||
password_confirmation: Md5.hashStr(forgetFrom.password_confirmation)
|
||||
})
|
||||
ElMessage.success('操作成功')
|
||||
//模拟登录
|
||||
loginFrom.email = forgetFrom.email
|
||||
loginFrom.password = forgetFrom.password
|
||||
loginSubmitCore(true)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message)
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//登录 - 规则验证
|
||||
const loginRules = reactive<FormRules<loginFormRule>>({
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', trigger: 'blur'},
|
||||
{type: 'email', message: '邮箱格式错误', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
{min: 6, max: 20, message: '密码长度范围6~20', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
//自定义验证 - 重复密码验证
|
||||
const confirmPassword = (_rule: any, value: any, callback: any) => {
|
||||
if (registerFrom.password !== value) {
|
||||
callback(new Error('重复密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
//忘记密码 - 自定义验证 - 重复密码验证
|
||||
const confirmForgetPassword = (_rule: any, value: any, callback: any) => {
|
||||
if (forgetFrom.password !== value) {
|
||||
callback(new Error('重复密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
//注册 - 规则验证
|
||||
const registerRules = reactive<FormRules<registerFormRule>>({
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', trigger: 'blur'},
|
||||
{type: 'email', message: '邮箱格式错误', trigger: 'blur' },
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
{min: 6, max: 20, message: '密码长度范围6~20', trigger: 'blur'},
|
||||
],
|
||||
password_confirmation: [
|
||||
{required: true, message: '请重复输入密码', trigger: 'blur'},
|
||||
{validator: confirmPassword, trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
|
||||
//忘记密码 - 规则验证
|
||||
const forgetRules = reactive<FormRules<forgetFormRule>>({
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', trigger: 'blur'},
|
||||
{type: 'email', message: '邮箱格式错误', trigger: 'blur' },
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
{min: 6, max: 20, message: '密码长度范围6~20', trigger: 'blur'},
|
||||
],
|
||||
password_confirmation: [
|
||||
{required: true, message: '请重复输入密码', trigger: 'blur'},
|
||||
{validator: confirmForgetPassword, trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 登录弹窗 -->
|
||||
<el-dialog v-model="visible" title="" width="450" center class="pl-6 pr-6 pb-6" style="border-radius: 1rem">
|
||||
<!-- 登录 -->
|
||||
<el-form
|
||||
v-if="loginSelect == 0"
|
||||
ref="ruleLoginFormRef"
|
||||
:model="loginFrom"
|
||||
:rules="loginRules"
|
||||
>
|
||||
<el-divider><div class="text-xl font-normal">邮箱登录</div></el-divider>
|
||||
<div>
|
||||
<el-form-item prop="email">
|
||||
<el-input class="" v-model="loginFrom.email" size="large" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" style="margin-bottom: 0;">
|
||||
<el-input class="" v-model="loginFrom.password" size="large" placeholder="请输入密码" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
<div class="flex items-center mt-1">
|
||||
<el-checkbox v-model="keepLogin" label="" size="large" />
|
||||
<div class="">保持长时间登录</div>
|
||||
</div>
|
||||
<el-button class="w-full" type="primary" size="large" @click="loginSubmit(ruleLoginFormRef)">登录</el-button>
|
||||
<el-divider border-style="dashed" />
|
||||
<div class="flex justify-between">
|
||||
<el-button link @click="loginSelect = 1">还没有账号?去注册</el-button>
|
||||
<!-- <el-button type="danger">忘记密码</el-button> -->
|
||||
<el-button link @click="loginSelect = 2">忘记密码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 注册 -->
|
||||
<el-form
|
||||
v-if="loginSelect == 1"
|
||||
ref="ruleRegisterFormRef"
|
||||
:model="registerFrom"
|
||||
:rules="registerRules"
|
||||
>
|
||||
<el-divider><div class="text-xl font-normal">邮箱注册</div></el-divider>
|
||||
<div>
|
||||
<el-form-item prop="email">
|
||||
<el-input class="" v-model="registerFrom.email" size="large" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="registerFrom.code"
|
||||
placeholder="请输入验证码"
|
||||
class=""
|
||||
size="large"
|
||||
>
|
||||
<template #append>
|
||||
<el-button v-if="reSendCount == 0" @click="sendCode">发送验证码</el-button>
|
||||
<el-button v-else>{{reSendCount}}秒后重发</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input class="" v-model="registerFrom.password" size="large" placeholder="请输入密码" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password_confirmation">
|
||||
<el-input class="" v-model="registerFrom.password_confirmation" size="large" placeholder="请重复输入密码" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-button class="w-full" type="primary" size="large" @click="registerSubmit(ruleRegisterFormRef)">注册</el-button>
|
||||
<el-divider border-style="dashed" />
|
||||
<div class="flex justify-between">
|
||||
<el-button link @click="loginSelect = 0">已经有账号?去登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 忘记密码 -->
|
||||
<el-form
|
||||
v-if="loginSelect == 2"
|
||||
ref="ruleForgetFormRef"
|
||||
:model="forgetFrom"
|
||||
:rules="forgetRules"
|
||||
>
|
||||
<el-divider><div class="text-xl font-normal">忘记密码</div></el-divider>
|
||||
<div>
|
||||
<el-form-item prop="email">
|
||||
<el-input class="" v-model="forgetFrom.email" size="large" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="forgetFrom.code"
|
||||
placeholder="请输入验证码"
|
||||
class=""
|
||||
size="large"
|
||||
>
|
||||
<template #append>
|
||||
<el-button v-if="reForgetSendCount == 0" @click="sendForgetCode">发送验证码</el-button>
|
||||
<el-button v-else>{{reForgetSendCount}}秒后重发</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input class="" v-model="forgetFrom.password" size="large" placeholder="请输入密码" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password_confirmation">
|
||||
<el-input class="" v-model="forgetFrom.password_confirmation" size="large" placeholder="请重复输入密码" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-button class="w-full" type="primary" size="large" @click="forgetSubmit(ruleForgetFormRef)">提交</el-button>
|
||||
<el-divider border-style="dashed" />
|
||||
<div class="flex justify-between">
|
||||
<el-button link @click="loginSelect = 0">已经有账号?去登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fold-enter-active {
|
||||
transition: all 1s ease-out;
|
||||
}
|
||||
|
||||
.fold-enter-from,
|
||||
.fold-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,10 @@
|
||||
//创建tools相关的小工具
|
||||
import { defineStore } from 'pinia'
|
||||
import { getTools, getToolCate, getToolRecommend, toolCollect, getToolCollect } from '@/api/tools'
|
||||
import { getTools, getToolCate, getToolRecommend } from '@/api/tools'
|
||||
import { getIp } from '@/api/ip'
|
||||
import type { ToolsReqData, ToolsInfo, ToolCate, CollectReqData } from '@/api/tools/type'
|
||||
import type { ToolsReqData, ToolsInfo, ToolCate } from '@/api/tools/type'
|
||||
import type { IpReqData, IpInfo } from '@/api/ip/type'
|
||||
import type { WebInfo, WebInfoReqData } from '@/api/webinfo/type'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { fetchWebInfo } from '@/api/webinfo'
|
||||
|
||||
export const useToolsStore = defineStore('tools', {
|
||||
@@ -75,37 +74,6 @@ export const useToolsStore = defineStore('tools', {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//收藏工具
|
||||
async toolCollect(data: CollectReqData) {
|
||||
if (!useUserStore().isLogin()) {
|
||||
//未登录
|
||||
return
|
||||
}
|
||||
const result: any = await toolCollect(data)
|
||||
if (result.code == 200) {
|
||||
//收藏成功
|
||||
this.getCollect();
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//我的收藏
|
||||
async getCollect() {
|
||||
if (!useUserStore().isLogin()) {
|
||||
//未登录
|
||||
return
|
||||
}
|
||||
const result: any = await getToolCollect()
|
||||
if (result.code == 200) {
|
||||
this.collect = result.data
|
||||
this.collectIds = this.collect.map(item => item.id)
|
||||
console.log(this.collectIds)
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//获取网站信息
|
||||
async getWebInfo(data: WebInfoReqData) {
|
||||
const result: any = await fetchWebInfo(data)
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { login, register, sendCodeEmail, userInfo, logout, sendForgetCodeEmail, forget} from '@/api/user'
|
||||
import type { LoginReqData, RegisterReqData, sendCodeEmailReq, ForgetReqData } from '@/api/user/type'
|
||||
export const useUserStore = defineStore('user', {
|
||||
//用来存放变量
|
||||
state: () => ({
|
||||
token: import.meta.env.VITE_IS_MOCK == 'true' ? localStorage.setItem('TOKEN', '') : localStorage.getItem('TOKEN'),//token
|
||||
username: '',
|
||||
avatar: '',
|
||||
email: '',
|
||||
}),
|
||||
//方法
|
||||
actions: {
|
||||
//获取登录状态
|
||||
isLogin() {
|
||||
let flag = false;
|
||||
if (this.token != null && this.token != undefined && this.token != '') {
|
||||
flag = true;
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
//login
|
||||
async login(data: LoginReqData) {
|
||||
//发送请求
|
||||
const result: any = await login(data)
|
||||
if (result.code == 200) {
|
||||
//仓库存储token
|
||||
this.token = result.data.token
|
||||
//本地存储token
|
||||
localStorage.setItem('TOKEN', result.data.token)
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//logout
|
||||
async logout() {
|
||||
//发送请求
|
||||
const result: any = await logout()
|
||||
if (result.code == 200) {
|
||||
//本地存储token
|
||||
localStorage.setItem('TOKEN', '')
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//register
|
||||
async register(data: RegisterReqData) {
|
||||
//发送请求
|
||||
const result: any = await register(data)
|
||||
if (result.code == 200) {
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//forget
|
||||
async forget(data: ForgetReqData) {
|
||||
//发送请求
|
||||
const result: any = await forget(data)
|
||||
if (result.code == 200) {
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//register - send code email
|
||||
async sendCodeEmail(data: sendCodeEmailReq) {
|
||||
//发送请求
|
||||
const result: any = await sendCodeEmail(data)
|
||||
if (result.code == 200) {
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//forget - send code email
|
||||
async sendForgetCodeEmail(data: sendCodeEmailReq) {
|
||||
//发送请求
|
||||
const result: any = await sendForgetCodeEmail(data)
|
||||
if (result.code == 200) {
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
},
|
||||
//获取用户信息
|
||||
async userInfo() {
|
||||
if (!this.isLogin()) {
|
||||
return
|
||||
}
|
||||
//发送请求
|
||||
const result: any = await userInfo()
|
||||
if (result.code == 200) {
|
||||
this.username = result.data.nick_name
|
||||
this.avatar = result.data.avatar
|
||||
this.email = result.data.email
|
||||
return result.message
|
||||
} else {
|
||||
return Promise.reject(new Error(result.message))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
+2
-33
@@ -1,44 +1,13 @@
|
||||
import axios from "axios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
//store
|
||||
import pinia from '../store' //这里需要引入pinia
|
||||
const userStore = useUserStore(pinia)
|
||||
//创建axios实例
|
||||
let request = axios.create({
|
||||
baseURL: import.meta.env.VITE_IS_MOCK == 'true' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_SERVE + import.meta.env.VITE_APP_BASE_API,
|
||||
timeout: 5000
|
||||
})
|
||||
//创建一个存储CancelToken源的映射,用于管理请求和取消操作
|
||||
const cancelSources = new Map();
|
||||
//mock环境下无法使用的接口
|
||||
const mockBanUrl: string[] = [
|
||||
'/login',
|
||||
'/user/info',
|
||||
'/get/tool/collects',
|
||||
'/send/forget/password/code',
|
||||
'/send/register/code',
|
||||
'/forget/password',
|
||||
'/register',
|
||||
'/logout'
|
||||
];
|
||||
});
|
||||
|
||||
//请求拦截器
|
||||
request.interceptors.request.use(config => {
|
||||
if (import.meta.env.VITE_IS_MOCK == 'true' && config.url != undefined && mockBanUrl.includes(config.url)) {
|
||||
//mock环境不能使用登录后相关功能
|
||||
const source = axios.CancelToken.source()
|
||||
//将source与请求的url或某种唯一标识符关联起来
|
||||
cancelSources.set(config.url, source);
|
||||
config.cancelToken = source.token;
|
||||
//取消
|
||||
source.cancel('Request canceled by the user.');
|
||||
} else {
|
||||
//获取token
|
||||
if (userStore.token) {
|
||||
// config.headers.token = userStore.token
|
||||
config.headers.Authorization = 'Bearer ' + userStore.token
|
||||
}
|
||||
}
|
||||
return config;
|
||||
});
|
||||
//响应拦截器
|
||||
|
||||
Reference in New Issue
Block a user