前端登录逻辑对接
This commit is contained in:
陈淳
@@ -2,7 +2,8 @@
|
|||||||
"profiles": {
|
"profiles": {
|
||||||
"Yi.Framework.ApiMicroservice": {
|
"Yi.Framework.ApiMicroservice": {
|
||||||
"commandName": "Project",
|
"commandName": "Project",
|
||||||
"launchBrowser": true,
|
//<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƿ<EFBFBD><C7B7>Զ<EFBFBD><D4B6><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˸о<CBB8><D0BE><EFBFBD><EFBFBD><EFBFBD><EFBFBD>عرȽ<D8B1><C8BD>鷳
|
||||||
|
"launchBrowser": false,
|
||||||
"environmentVariables": {
|
"environmentVariables": {
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||||
},
|
},
|
||||||
|
|||||||
Binary file not shown.
@@ -1,6 +1,8 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import './style.css'
|
import './style.css'
|
||||||
import 'vant/es/image-preview/style';
|
import 'vant/es/image-preview/style';
|
||||||
|
import 'vant/es/toast/style';
|
||||||
|
import 'vant/es/dialog/style';
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
import './permission'
|
import './permission'
|
||||||
|
|||||||
@@ -4,59 +4,44 @@ import router from './router'
|
|||||||
// import 'nprogress/nprogress.css'
|
// import 'nprogress/nprogress.css'
|
||||||
import { getToken } from '@/utils/auth'
|
import { getToken } from '@/utils/auth'
|
||||||
// import { isHttp } from '@/utils/validate'
|
// import { isHttp } from '@/utils/validate'
|
||||||
// import { isRelogin } from '@/utils/request'
|
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
|
import { isRelogin } from '@/utils/myaxios'
|
||||||
// import useSettingsStore from '@/store/modules/settings'
|
// import useSettingsStore from '@/store/modules/settings'
|
||||||
// import usePermissionStore from '@/store/modules/permission'
|
// import usePermissionStore from '@/store/modules/permission'
|
||||||
|
|
||||||
// NProgress.configure({ showSpinner: false });
|
// NProgress.configure({ showSpinner: false });
|
||||||
|
|
||||||
const whiteList = ['/square', '/auth-redirect', '/bind', '/register'];
|
const whiteList = ['/login', '/auth-redirect', '/bind', '/register'];
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
// NProgress.start()
|
// NProgress.start()
|
||||||
if (getToken()) {
|
if (getToken()) {
|
||||||
// to.meta.title && useSettingsStore().setTitle(to.meta.title)
|
// to.meta.title && useSettingsStore().setTitle(to.meta.title)
|
||||||
/* has token*/
|
/* has token*/
|
||||||
if (to.path === '/square') {
|
if (to.path === '/login') {
|
||||||
next({ path: '/' })
|
next({ path: '/' })
|
||||||
// NProgress.done()
|
// NProgress.done()
|
||||||
} else {
|
} else {
|
||||||
useUserStore().getInfo();
|
if (useUserStore().roles.length === 0) {
|
||||||
next()
|
isRelogin.show = true
|
||||||
// if (useUserStore().roles.length === 0)
|
useUserStore().getInfo().then((response: any) => {
|
||||||
// {
|
next()
|
||||||
// // isRelogin.show = true
|
});
|
||||||
// // 判断当前用户是否已拉取完user_info信息
|
|
||||||
// useUserStore().getInfo().then(() => {
|
|
||||||
// // isRelogin.show = false
|
|
||||||
// next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
|
|
||||||
// // usePermissionStore().generateRoutes().then(accessRoutes => {
|
|
||||||
// // // 根据roles权限生成可访问的路由表
|
|
||||||
// // accessRoutes.forEach(route => {
|
|
||||||
// // if (!isHttp(route.path)) {
|
|
||||||
// // router.addRoute(route) // 动态添加可访问路由表
|
|
||||||
// // }
|
|
||||||
// // })
|
|
||||||
|
|
||||||
// // })
|
}
|
||||||
// }).catch(err => {
|
else
|
||||||
// useUserStore().logOut().then(() => {
|
{
|
||||||
// // ElMessage.error(err)
|
next()
|
||||||
// next({ path: '/' })
|
}
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// next()
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
// 没有token
|
// 没有token
|
||||||
if (whiteList.indexOf(to.path) !== -1) {
|
if (whiteList.indexOf(to.path) !== -1) {
|
||||||
// 在免登录白名单，直接进入
|
// 在免登录白名单，直接进入
|
||||||
next()
|
next()
|
||||||
} else {
|
} else {
|
||||||
next(`/square?redirect=${to.fullPath}`) // 否则全部重定向到登录页
|
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
|
||||||
// NProgress.done()
|
// NProgress.done()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router';
|
|||||||
import Layout from '@/layout/index.vue';
|
import Layout from '@/layout/index.vue';
|
||||||
|
|
||||||
export const constantRoutes = [
|
export const constantRoutes = [
|
||||||
|
|
||||||
{
|
{
|
||||||
name:'Layout',
|
name:'Layout',
|
||||||
path: '/',
|
path: '/',
|
||||||
@@ -45,7 +46,7 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
component: () => import('@/view/Login.vue'),
|
component: () => import('@/view/login.vue'),
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ const useUserStore = defineStore(
|
|||||||
login(username, password, code, uuid).then(res => {
|
login(username, password, code, uuid).then(res => {
|
||||||
setToken(res.data.token);
|
setToken(res.data.token);
|
||||||
this.token = res.data.token;
|
this.token = res.data.token;
|
||||||
resolve();
|
resolve(res);
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
@@ -37,7 +37,7 @@ const useUserStore = defineStore(
|
|||||||
const res=response.data;
|
const res=response.data;
|
||||||
const user = res.user
|
const user = res.user
|
||||||
// const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
|
// const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
|
||||||
|
const avatar=""
|
||||||
if (res.roleCodes && res.roleCodes.length > 0) { // 验证返回的roles是否是一个非空数组
|
if (res.roleCodes && res.roleCodes.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||||
this.roles = res.roleCodes
|
this.roles = res.roleCodes
|
||||||
this.permissions = res.permissionCodes
|
this.permissions = res.permissionCodes
|
||||||
@@ -63,12 +63,12 @@ const useUserStore = defineStore(
|
|||||||
// 退出系统
|
// 退出系统
|
||||||
logOut() {
|
logOut() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
logout(this.token).then(() => {
|
logout(this.token).then((response) => {
|
||||||
this.token = ''
|
this.token = ''
|
||||||
this.roles = []
|
this.roles = []
|
||||||
this.permissions = []
|
this.permissions = []
|
||||||
removeToken()
|
removeToken()
|
||||||
resolve()
|
resolve(response)
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -3,7 +3,10 @@ import axios from 'axios'
|
|||||||
// import vm from '../main'
|
// import vm from '../main'
|
||||||
import JsonBig from 'json-bigint'
|
import JsonBig from 'json-bigint'
|
||||||
import { getToken } from '@/utils/auth'
|
import { getToken } from '@/utils/auth'
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import useUserStore from '@/store/modules/user'
|
||||||
// import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
|
// import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
|
||||||
|
export let isRelogin = { show: false };
|
||||||
const myaxios = axios.create({
|
const myaxios = axios.create({
|
||||||
// baseURL:'/'//
|
// baseURL:'/'//
|
||||||
baseURL: import.meta.env.VITE_APP_BASE_API, // /dev-apis
|
baseURL: import.meta.env.VITE_APP_BASE_API, // /dev-apis
|
||||||
@@ -35,64 +38,88 @@ myaxios.interceptors.request.use(function(config) {
|
|||||||
|
|
||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
myaxios.interceptors.response.use(async function(response) {
|
myaxios.interceptors.response.use(async function(response) {
|
||||||
|
//成功
|
||||||
const resp = response.data
|
const resp = response.data
|
||||||
if (resp.code == undefined && resp.message == undefined) {
|
// if (resp.code == undefined && resp.message == undefined) {
|
||||||
// vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
|
// alert("直接爆炸")
|
||||||
// position: "top-right",
|
// // vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
|
||||||
// timeout: 5000,
|
// // position: "top-right",
|
||||||
// });
|
// // timeout: 5000,
|
||||||
} else if (resp.code == 401) {
|
// // });
|
||||||
// const res = await vm.$dialog.error({
|
// } else if (resp.code == 401) {
|
||||||
// text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
|
// alert("登录过期！重新登录");
|
||||||
// title: '错误',
|
|
||||||
// actions: {
|
|
||||||
// 'false': '取消',
|
|
||||||
// 'true': '跳转'
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// if (res) {
|
|
||||||
// vm.$router.push({ path: "/login" });
|
|
||||||
// }
|
|
||||||
|
|
||||||
} else if (resp.code !== 200) {
|
// const router = useRouter();
|
||||||
// vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
|
// router.push({ path:"/login" });
|
||||||
// position: "top-right",
|
|
||||||
// timeout: 5000,
|
// // const res = await vm.$dialog.error({
|
||||||
// });
|
// // text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
|
||||||
}
|
// // title: '错误',
|
||||||
|
// // actions: {
|
||||||
|
// // 'false': '取消',
|
||||||
|
// // 'true': '跳转'
|
||||||
|
// // }
|
||||||
|
// // });
|
||||||
|
// // if (res) {
|
||||||
|
// // vm.$router.push({ path: "/login" });
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// } else if (resp.code !== 200) {
|
||||||
|
// // vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
|
||||||
|
// // position: "top-right",
|
||||||
|
// // timeout: 5000,
|
||||||
|
// // });
|
||||||
|
// }
|
||||||
|
|
||||||
// store.dispatch("closeLoad");
|
// store.dispatch("closeLoad");
|
||||||
return resp;
|
return resp;
|
||||||
}, async function(error) {
|
}, async function(error) {
|
||||||
// const resp = error.response.data
|
//未授权、失败
|
||||||
// if (resp.code == undefined && resp.message == undefined) {
|
const resp = error.response.data
|
||||||
// vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
|
|
||||||
// position: "top-right",
|
|
||||||
// timeout: 5000,
|
|
||||||
// });
|
|
||||||
// } else if (resp.code == 401) {
|
|
||||||
// const res = await vm.$dialog.error({
|
|
||||||
// text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
|
|
||||||
// title: '错误',
|
|
||||||
// actions: {
|
|
||||||
// 'false': '取消',
|
|
||||||
// 'true': '跳转'
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// if (res) {
|
|
||||||
// vm.$store.dispatch("Logout").then((resp) => {
|
|
||||||
// vm.$router.push({ path: "/login" });
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
// } else if (resp.code !== 200) {
|
|
||||||
// vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
|
if (resp.code == undefined && resp.message == undefined) {
|
||||||
// position: "top-right",
|
alert("直接爆炸")
|
||||||
// timeout: 5000,
|
// vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
|
||||||
// });
|
// position: "top-right",
|
||||||
|
// timeout: 5000,
|
||||||
|
// });
|
||||||
|
} else if (resp.code == 401) {
|
||||||
|
if (!isRelogin.show) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
alert("登录过期！重新登录");
|
||||||
|
//登出
|
||||||
|
useUserStore().logOut().then(() => {
|
||||||
|
location.href = '/';
|
||||||
|
})
|
||||||
|
|
||||||
|
isRelogin.show = false;
|
||||||
|
}
|
||||||
|
// const router = useRouter();
|
||||||
|
// router.push({ path:"/login" });
|
||||||
|
|
||||||
|
// const res = await vm.$dialog.error({
|
||||||
|
// text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
|
||||||
|
// title: '错误',
|
||||||
|
// actions: {
|
||||||
|
// 'false': '取消',
|
||||||
|
// 'true': '跳转'
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// if (res) {
|
||||||
|
// vm.$router.push({ path: "/login" });
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// store.dispatch("closeLoad");
|
} else if (resp.code !== 200) {
|
||||||
|
alert("服务器内部错误")
|
||||||
|
// vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
|
||||||
|
// position: "top-right",
|
||||||
|
// timeout: 5000,
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
});
|
});
|
||||||
export default myaxios
|
export default myaxios
|
||||||
@@ -1,100 +1,129 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="div-top">
|
||||||
<div class="div-top">
|
<span class="title">农夫山泉</span>
|
||||||
|
<br />
|
||||||
<span class="title">农夫山泉</span>
|
<span class="subtitle">农夫山泉有点甜</span>
|
||||||
<br>
|
|
||||||
<span class="subtitle">农夫山泉有点甜</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="div-bottom">
|
<div class="div-bottom">
|
||||||
<h5>密码登录</h5>
|
<h5>密码登录</h5>
|
||||||
<van-field class="van-field-username" v-model="value" label="用户" placeholder="请输入用户名" />
|
<van-field
|
||||||
<van-field class="van-field-password" v-model="value" label="密码" placeholder="请输入密码" />
|
class="van-field-username"
|
||||||
<van-button type="primary">进入农夫山泉</van-button>
|
v-model="loginForm.username"
|
||||||
<p>其他方式登录<van-icon name="arrow" /></p>
|
label="用户"
|
||||||
|
placeholder="请输入用户名"
|
||||||
<van-row style="margin-top: 6rem;" >
|
/>
|
||||||
<van-col span="24"><p> 第三方登录</p></van-col>
|
<van-field
|
||||||
<van-col span="3"></van-col>
|
class="van-field-password"
|
||||||
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
v-model="loginForm.password"
|
||||||
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
label="密码"
|
||||||
<van-col span="6"><van-icon name="like" size="2rem"/></van-col>
|
placeholder="请输入密码"
|
||||||
<van-col span="3"></van-col>
|
/>
|
||||||
</van-row>
|
<van-button type="primary" @click="login">进入农夫山泉</van-button>
|
||||||
|
<p>其他方式登录<van-icon name="arrow" /></p>
|
||||||
|
|
||||||
|
<van-row style="margin-top: 6rem">
|
||||||
|
<van-col span="24"><p>第三方登录</p></van-col>
|
||||||
|
<van-col span="3"></van-col>
|
||||||
|
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
||||||
|
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
||||||
|
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
||||||
|
<van-col span="3"></van-col>
|
||||||
|
</van-row>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import useUserStore from "@/store/modules/user";
|
||||||
|
import { Toast } from "vant";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const redirect = ref(undefined);
|
||||||
|
const loginForm = ref({
|
||||||
|
username: "cc",
|
||||||
</template>
|
password: "123456",
|
||||||
<script setup lang="ts">
|
rememberMe: false,
|
||||||
import {ref} from 'vue';
|
code: "",
|
||||||
const value=ref("")
|
uuid: "",
|
||||||
|
});
|
||||||
</script>
|
const userStore = useUserStore();
|
||||||
<style scoped>
|
const login = () => {
|
||||||
.div-top{
|
// 调用action的登录方法
|
||||||
background-color: aqua;
|
userStore
|
||||||
position:absolute;
|
.login(loginForm.value)
|
||||||
top: 0;
|
.then((response: any) => {
|
||||||
left: 0;
|
Toast({
|
||||||
|
message: response.message,
|
||||||
|
position: "bottom",
|
||||||
|
});
|
||||||
|
router.push({ path: redirect.value || "/" });
|
||||||
|
})
|
||||||
|
.catch((response:any) => {
|
||||||
|
Toast({
|
||||||
|
message: response.message,
|
||||||
|
position: "bottom",
|
||||||
|
});
|
||||||
|
// loading.value = false;
|
||||||
|
// // 重新获取验证码
|
||||||
|
// if (captchaEnabled.value) {
|
||||||
|
// getCode();
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.div-top {
|
||||||
|
background-color: aqua;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 60%;
|
bottom: 60%;
|
||||||
|
}
|
||||||
}
|
.div-bottom {
|
||||||
.div-bottom{
|
|
||||||
background-color: bisque;
|
background-color: bisque;
|
||||||
position:absolute;
|
position: absolute;
|
||||||
top: 25%;
|
top: 25%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
border-radius: 3rem 3rem 0rem 0rem;
|
border-radius: 3rem 3rem 0rem 0rem;
|
||||||
padding: 1rem 2rem 2rem 2rem;
|
padding: 1rem 2rem 2rem 2rem;
|
||||||
|
|
||||||
/* min-height: 70%; */
|
/* min-height: 70%; */
|
||||||
}
|
}
|
||||||
.title{
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15%;
|
top: 15%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
.subtitle
|
.subtitle {
|
||||||
{
|
transform: translateX(-50%);
|
||||||
transform: translateX(-50%);
|
position: absolute;
|
||||||
position: absolute;
|
top: 30%;
|
||||||
top: 30%;
|
font-weight: lighter;
|
||||||
font-weight:lighter;
|
}
|
||||||
}
|
.van-field-username {
|
||||||
.van-field-username
|
margin-top: 2rem;
|
||||||
{
|
}
|
||||||
margin-top:2rem;
|
.van-field-password {
|
||||||
}
|
margin-top: 1rem;
|
||||||
.van-field-password
|
}
|
||||||
{
|
h5 {
|
||||||
margin-top: 1rem;
|
text-align: left;
|
||||||
}
|
font-size: 1.2rem;
|
||||||
h5{
|
font-weight: bolder;
|
||||||
text-align: left;
|
}
|
||||||
font-size: 1.2rem;
|
.div-bottom .van-button {
|
||||||
font-weight: bolder;
|
margin-top: 1rem;
|
||||||
}
|
width: 100%;
|
||||||
.div-bottom .van-button
|
border-radius: 0.4rem;
|
||||||
{
|
}
|
||||||
margin-top: 1rem;
|
.div-bottom p {
|
||||||
width: 100%;
|
text-align: center;
|
||||||
border-radius: 0.4rem;
|
}
|
||||||
}
|
.row-bottom {
|
||||||
.div-bottom p{
|
}
|
||||||
text-align: center;
|
</style>
|
||||||
|
|
||||||
};
|
|
||||||
.row-bottom{
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
|
|
||||||
<van-col class="rowBody" span="24">{{ item.content }}</van-col>
|
<van-col class="rowBody" span="24">{{ item.content }}</van-col>
|
||||||
|
|
||||||
<van-col
|
<!-- <van-col
|
||||||
span="8"
|
span="8"
|
||||||
v-for="(image, imageIndex) in item.images"
|
v-for="(image, imageIndex) in item.images"
|
||||||
:key="imageIndex"
|
:key="imageIndex"
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
:src="url + image"
|
:src="url + image"
|
||||||
radius="5"
|
radius="5"
|
||||||
/>
|
/>
|
||||||
</van-col>
|
</van-col> -->
|
||||||
|
|
||||||
<van-col span="24" class="bottomRow">
|
<van-col span="24" class="bottomRow">
|
||||||
<van-grid direction="horizontal" :column-num="3">
|
<van-grid direction="horizontal" :column-num="3">
|
||||||
|
|||||||
@@ -1,123 +1 @@
|
|||||||
<template>
|
<template>这里是广场</template>
|
||||||
<div class="div-top">
|
|
||||||
<span class="title">农夫山泉</span>
|
|
||||||
<br />
|
|
||||||
<span class="subtitle">农夫山泉有点甜</span>
|
|
||||||
</div>
|
|
||||||
<div class="div-bottom">
|
|
||||||
<h5>密码登录</h5>
|
|
||||||
<van-field
|
|
||||||
class="van-field-username"
|
|
||||||
v-model="loginForm.username"
|
|
||||||
label="用户"
|
|
||||||
placeholder="请输入用户名"
|
|
||||||
/>
|
|
||||||
<van-field
|
|
||||||
class="van-field-password"
|
|
||||||
v-model="loginForm.password"
|
|
||||||
label="密码"
|
|
||||||
placeholder="请输入密码"
|
|
||||||
/>
|
|
||||||
<van-button type="primary" @click="login">进入农夫山泉</van-button>
|
|
||||||
<p>其他方式登录<van-icon name="arrow" /></p>
|
|
||||||
|
|
||||||
<van-row style="margin-top: 6rem">
|
|
||||||
<van-col span="24"><p>第三方登录</p></van-col>
|
|
||||||
<van-col span="3"></van-col>
|
|
||||||
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
|
||||||
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
|
||||||
<van-col span="6"><van-icon name="like" size="2rem" /></van-col>
|
|
||||||
<van-col span="3"></van-col>
|
|
||||||
</van-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import useUserStore from "@/store/modules/user";
|
|
||||||
const router = useRouter();
|
|
||||||
const redirect = ref(undefined);
|
|
||||||
const loginForm = ref({
|
|
||||||
username: "cc",
|
|
||||||
password: "123456",
|
|
||||||
rememberMe: false,
|
|
||||||
code: "",
|
|
||||||
uuid: "",
|
|
||||||
});
|
|
||||||
const userStore = useUserStore();
|
|
||||||
const login=()=>{
|
|
||||||
|
|
||||||
// 调用action的登录方法
|
|
||||||
userStore
|
|
||||||
.login(loginForm.value)
|
|
||||||
.then(() => {
|
|
||||||
alert("登录成功");
|
|
||||||
router.push({ path: redirect.value || "/" });
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
alert("登录失败");
|
|
||||||
// loading.value = false;
|
|
||||||
// // 重新获取验证码
|
|
||||||
// if (captchaEnabled.value) {
|
|
||||||
// getCode();
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.div-top {
|
|
||||||
background-color: aqua;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 60%;
|
|
||||||
}
|
|
||||||
.div-bottom {
|
|
||||||
background-color: bisque;
|
|
||||||
position: absolute;
|
|
||||||
top: 25%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border-radius: 3rem 3rem 0rem 0rem;
|
|
||||||
padding: 1rem 2rem 2rem 2rem;
|
|
||||||
|
|
||||||
/* min-height: 70%; */
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
position: absolute;
|
|
||||||
top: 15%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
.subtitle {
|
|
||||||
transform: translateX(-50%);
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
.van-field-username {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
.van-field-password {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
.div-bottom .van-button {
|
|
||||||
margin-top: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
}
|
|
||||||
.div-bottom p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.row-bottom {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,211 +1,239 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<van-row class="headRow">
|
||||||
|
<van-col span="2"><van-icon name="scan" size="1.5rem" /></van-col>
|
||||||
|
<van-col span="20"></van-col>
|
||||||
|
<van-col span="2"
|
||||||
|
><van-icon name="setting-o" size="1.5rem" @click="show = true"
|
||||||
|
/></van-col>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
|
<van-row class="bodyRow">
|
||||||
|
<van-col span="6" class="leftCol">
|
||||||
|
<van-image
|
||||||
|
round
|
||||||
|
width="4rem"
|
||||||
|
height="4rem"
|
||||||
|
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
<van-col span="12" class="title"><span>大白不在家</span></van-col>
|
||||||
|
<van-col span="6" class="subtitle"
|
||||||
|
><span>个人主页<van-icon name="arrow" /></span
|
||||||
|
></van-col>
|
||||||
|
|
||||||
|
<van-col span="6" class="bodyCol"
|
||||||
|
><div><span>6</span><br />关注</div></van-col
|
||||||
|
>
|
||||||
|
<van-col span="6" class="bodyCol"
|
||||||
|
><div><span>3</span><br />粉丝</div></van-col
|
||||||
|
>
|
||||||
|
<van-col span="6" class="bodyCol"
|
||||||
|
><div><span>0</span><br />人气</div></van-col
|
||||||
|
>
|
||||||
|
<van-col span="6" class="bodyCol"
|
||||||
|
><div><span>3</span><br />钱钱</div></van-col
|
||||||
|
>
|
||||||
|
|
||||||
<van-row class="headRow">
|
<van-col span="24">
|
||||||
<van-col span="2"><van-icon name="scan" size="1.5rem"/></van-col>
|
<van-row class="btnRow">
|
||||||
<van-col span="20"></van-col>
|
<van-col span="12">
|
||||||
<van-col span="2"><van-icon name="setting-o" size="1.5rem" @click="show=true"/></van-col>
|
<van-button class="btn">
|
||||||
</van-row>
|
<van-icon name="bag" size="1.8rem" /> 我的购物<van-icon
|
||||||
|
name="arrow"
|
||||||
|
size="1.2rem" /></van-button
|
||||||
|
></van-col>
|
||||||
|
|
||||||
<van-row class="bodyRow">
|
<van-col span="12">
|
||||||
<van-col span="6" class="leftCol">
|
<van-button class="btn"
|
||||||
<van-image
|
><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon
|
||||||
round
|
name="arrow"
|
||||||
width="4rem"
|
size="1.2rem" /></van-button
|
||||||
height="4rem"
|
></van-col>
|
||||||
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
</van-row>
|
||||||
/>
|
</van-col>
|
||||||
</van-col>
|
|
||||||
<van-col span="12" class="title"><span >大白不在家</span></van-col>
|
|
||||||
<van-col span="6" class="subtitle"><span >个人主页<van-icon name="arrow" /></span></van-col>
|
|
||||||
|
|
||||||
|
<AppGrid class="grid" :data="data1"></AppGrid>
|
||||||
|
<AppGrid class="grid" :data="data2"></AppGrid>
|
||||||
|
<AppGrid class="grid" :data="data3"></AppGrid>
|
||||||
|
</van-row>
|
||||||
|
|
||||||
<van-col span="6" class="bodyCol"><div><span>6</span><br>关注</div></van-col>
|
<van-popup
|
||||||
<van-col span="6" class="bodyCol"><div><span>3</span><br>粉丝</div></van-col>
|
v-model:show="show"
|
||||||
<van-col span="6" class="bodyCol"><div><span>0</span><br>人气</div></van-col>
|
position="right"
|
||||||
<van-col span="6" class="bodyCol"><div><span>3</span><br>钱钱</div></van-col>
|
:style="{ height: '100%', width: '100%', backgroundColor: '#F8F8F8' }"
|
||||||
|
>
|
||||||
|
<van-nav-bar
|
||||||
|
title="设置"
|
||||||
|
left-text="返回"
|
||||||
|
left-arrow
|
||||||
|
@click-left="show = false"
|
||||||
|
/>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="账户与安全" is-link />
|
||||||
|
<van-cell title="黑名单" is-link />
|
||||||
|
<van-cell title="推送设置" is-link />
|
||||||
|
<van-cell title="隐私管理" is-link />
|
||||||
|
<van-cell title="通用设置" is-link />
|
||||||
|
</van-cell-group>
|
||||||
|
<van-cell-group class="group">
|
||||||
|
<van-cell title="家庭入驻" is-link />
|
||||||
|
<van-cell title="社区入驻" is-link />
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
<van-col span="24">
|
<van-cell-group class="group">
|
||||||
<van-row class="btnRow">
|
<van-cell title="清理缓存" is-link />
|
||||||
<van-col span="12" > <van-button class="btn" > <van-icon name="bag" size="1.8rem"/> 我的购物<van-icon name="arrow" size="1.2rem" /></van-button></van-col>
|
<van-cell title="检测更新" is-link />
|
||||||
|
<van-cell title="关于我们" is-link />
|
||||||
|
<van-cell title="给个好评" is-link />
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
<van-col span="12"> <van-button class="btn"><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon name="arrow" size="1.2rem"/></van-button></van-col>
|
<van-button type="danger" @click="outLog">退出登录</van-button>
|
||||||
</van-row>
|
</van-popup>
|
||||||
</van-col >
|
<!-- <van-popup v-model:show="show" position="right">
|
||||||
|
|
||||||
|
|
||||||
<AppGrid class="grid" :data='data1'></AppGrid>
|
|
||||||
<AppGrid class="grid" :data='data2'></AppGrid>
|
|
||||||
<AppGrid class="grid" :data='data3'></AppGrid>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-popup v-model:show="show" position="right" :style="{ height:'100%',width:'100%',backgroundColor:'#F8F8F8' }" >
|
|
||||||
|
|
||||||
<van-nav-bar
|
|
||||||
title="设置"
|
|
||||||
left-text="返回"
|
|
||||||
left-arrow
|
|
||||||
@click-left="show=false"
|
|
||||||
/>
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="账户与安全" is-link />
|
|
||||||
<van-cell title="黑名单" is-link />
|
|
||||||
<van-cell title="推送设置" is-link />
|
|
||||||
<van-cell title="隐私管理" is-link />
|
|
||||||
<van-cell title="通用设置" is-link />
|
|
||||||
</van-cell-group>
|
|
||||||
<van-cell-group class="group">
|
|
||||||
<van-cell title="家庭入驻" is-link />
|
|
||||||
<van-cell title="社区入驻" is-link />
|
|
||||||
</van-cell-group>
|
|
||||||
|
|
||||||
<van-cell-group class="group">
|
|
||||||
<van-cell title="清理缓存" is-link />
|
|
||||||
<van-cell title="检测更新" is-link />
|
|
||||||
<van-cell title="关于我们" is-link />
|
|
||||||
<van-cell title="给个好评" is-link />
|
|
||||||
</van-cell-group>
|
|
||||||
|
|
||||||
<van-button type="danger">退出登录</van-button>
|
|
||||||
</van-popup>
|
|
||||||
<!-- <van-popup v-model:show="show" position="right">
|
|
||||||
<div class="body-div"> 内容</div>
|
<div class="body-div"> 内容</div>
|
||||||
</van-popup> -->
|
</van-popup> -->
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import AppGrid from '@/components/AppGrid.vue'
|
import AppGrid from "@/components/AppGrid.vue";
|
||||||
import {AppGridData} from '@/type/class/AppGridData.ts'
|
import { AppGridData } from "@/type/class/AppGridData.ts";
|
||||||
import {ref} from 'vue'
|
import { ref } from "vue";
|
||||||
const show=ref<boolean>(false);
|
import { Dialog } from "vant";
|
||||||
let data1 :AppGridData={
|
import useUserStore from "@/store/modules/user";
|
||||||
head:"个人中心",
|
const show = ref<boolean>(false);
|
||||||
body:[
|
let data1: AppGridData = {
|
||||||
{
|
head: "个人中心",
|
||||||
title:"我的消息",
|
body: [
|
||||||
icon:"comment-o"
|
{
|
||||||
},
|
title: "我的消息",
|
||||||
{
|
icon: "comment-o",
|
||||||
title:"我的聊天",
|
},
|
||||||
icon:"chat-o"
|
{
|
||||||
},
|
title: "我的聊天",
|
||||||
{
|
icon: "chat-o",
|
||||||
title:"我的喜欢",
|
},
|
||||||
icon:"like-o"
|
{
|
||||||
},
|
title: "我的喜欢",
|
||||||
{
|
icon: "like-o",
|
||||||
title:"我的关注",
|
},
|
||||||
icon:"user-o"
|
{
|
||||||
},
|
title: "我的关注",
|
||||||
]
|
icon: "user-o",
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
let data2 :AppGridData={
|
let data2: AppGridData = {
|
||||||
head:"功能",
|
head: "功能",
|
||||||
body:[
|
body: [
|
||||||
{
|
{
|
||||||
title:"排行榜",
|
title: "排行榜",
|
||||||
icon:"medal-o"
|
icon: "medal-o",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"活动报名",
|
title: "活动报名",
|
||||||
icon:"balance-list-o"
|
icon: "balance-list-o",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"钱钱兑换",
|
title: "钱钱兑换",
|
||||||
icon:"gem-o"
|
icon: "gem-o",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"全网上新",
|
title: "全网上新",
|
||||||
icon:"gift-card-o"
|
icon: "gift-card-o",
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
let data3 :AppGridData={
|
let data3: AppGridData = {
|
||||||
head:"服务",
|
head: "服务",
|
||||||
body:[
|
body: [
|
||||||
{
|
{
|
||||||
title:"客服",
|
title: "客服",
|
||||||
icon:"service-o"
|
icon: "service-o",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"小黑屋",
|
title: "小黑屋",
|
||||||
icon:"wap-home-o"
|
icon: "wap-home-o",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"邀请好友",
|
title: "邀请好友",
|
||||||
icon:"friends-o"
|
icon: "friends-o",
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
|
};
|
||||||
|
const outLog = () => {
|
||||||
|
Dialog.confirm({
|
||||||
|
title: "提示",
|
||||||
|
message: "确定退出当前用户吗？",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
useUserStore()
|
||||||
|
.logOut()
|
||||||
|
.then((response: any) => {
|
||||||
|
location.href = "/";
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// on cancel
|
||||||
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.grid{
|
.grid {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
.headRow{
|
.headRow {
|
||||||
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
|
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
|
||||||
}
|
}
|
||||||
.bodyRow
|
.bodyRow {
|
||||||
{
|
text-align: left;
|
||||||
text-align: left;
|
margin-top: 1.5rem;
|
||||||
margin-top: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
padding-left: 1.5rem;
|
padding-right: 1.5rem;
|
||||||
padding-right: 1.5rem;;
|
padding-bottom: 4rem;
|
||||||
padding-bottom: 4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title
|
.title {
|
||||||
{
|
font-size: 1.5rem;
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 4rem;
|
|
||||||
}
|
|
||||||
.subtitle
|
|
||||||
{
|
|
||||||
line-height: 4rem;
|
line-height: 4rem;
|
||||||
color:#CBCBCB ;
|
|
||||||
}
|
}
|
||||||
.bodyCol{
|
.subtitle {
|
||||||
text-align: center;
|
line-height: 4rem;
|
||||||
font-size: 1.2rem;
|
color: #cbcbcb;
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
.btn{
|
.bodyCol {
|
||||||
width: 100%;
|
text-align: center;
|
||||||
margin: 0;
|
font-size: 1.2rem;
|
||||||
padding: 0;
|
margin-top: 1rem;
|
||||||
background-color: #FFFFFF;
|
|
||||||
border:none;
|
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
.btnRow{
|
.btn {
|
||||||
margin-top: 1.5rem;
|
width: 100%;
|
||||||
box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
.btnRow .van-button
|
.btnRow {
|
||||||
{
|
margin-top: 1.5rem;
|
||||||
|
box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
|
||||||
|
}
|
||||||
|
.btnRow .van-button {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
.van-icon-send-gift
|
.van-icon-send-gift {
|
||||||
{
|
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
.btnRow .van-icon-arrow
|
.btnRow .van-icon-arrow {
|
||||||
{
|
|
||||||
margin-left: 0.45rem;
|
margin-left: 0.45rem;
|
||||||
}
|
}
|
||||||
.van-cell
|
.van-cell {
|
||||||
{
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.group
|
.group {
|
||||||
{
|
margin-top: 1rem;
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
.van-popup .van-button
|
.van-popup .van-button {
|
||||||
{
|
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user