feat:完成登录页面+各种细节
This commit is contained in:
BIN
Yi.BBS.Vue3/src/assets/login_images/QQ.png
Normal file
BIN
Yi.BBS.Vue3/src/assets/login_images/QQ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
Yi.BBS.Vue3/src/assets/login_images/WeChat.png
Normal file
BIN
Yi.BBS.Vue3/src/assets/login_images/WeChat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
Yi.BBS.Vue3/src/assets/login_images/login_bg_phone.png
Normal file
BIN
Yi.BBS.Vue3/src/assets/login_images/login_bg_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
Yi.BBS.Vue3/src/assets/login_images/login_two.jpg
Normal file
BIN
Yi.BBS.Vue3/src/assets/login_images/login_two.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
206
Yi.BBS.Vue3/src/assets/styles/login.scss
Normal file
206
Yi.BBS.Vue3/src/assets/styles/login.scss
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/*公共CSS*/
|
||||||
|
.box {
|
||||||
|
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgb(29, 67, 89);
|
||||||
|
.content {
|
||||||
|
box-shadow: 0px 1px 6px #3B4859;
|
||||||
|
.login-wrapper {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.login-form {
|
||||||
|
.form-item {
|
||||||
|
margin: 20px 0;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin: 5px 20px;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
.input-item {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 200;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 40px;
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
font-weight: 100;
|
||||||
|
margin-top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
span:nth-child(1) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
span:nth-child(3) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 30%;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.divider-text {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0px 20px;
|
||||||
|
line-height: 0px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.other-login-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.other-login-item {
|
||||||
|
border: 1px solid rgb(214, 222, 228);
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*一般大于手机的尺寸CSS*/
|
||||||
|
@media (min-width: 767px) {
|
||||||
|
.box {
|
||||||
|
background-color: #F0F2F5;
|
||||||
|
.content {
|
||||||
|
width: 85vw;
|
||||||
|
height: 90vh;
|
||||||
|
background: url("@/assets/login_images/login_two.jpg") no-repeat;
|
||||||
|
background-size: 90% 100%;
|
||||||
|
position: absolute;
|
||||||
|
right: 15%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
.login-wrapper {
|
||||||
|
width: 25vw;
|
||||||
|
position: absolute;
|
||||||
|
right: 15%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 45px;
|
||||||
|
color: rgb(81, 100, 115);
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.login-form {
|
||||||
|
margin: 10px 0;
|
||||||
|
.form-item {
|
||||||
|
span {
|
||||||
|
color: rgb(81, 100, 115);
|
||||||
|
}
|
||||||
|
.input-item {
|
||||||
|
height: 60px;
|
||||||
|
border: 1px solid rgb(214, 222, 228);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-btn {
|
||||||
|
height: 50px;
|
||||||
|
background-color: rgb(59, 72, 89);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
.line {
|
||||||
|
border-bottom: 1px solid rgb(214, 222, 228);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.other-login-item {
|
||||||
|
border-radius: 20px;
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*手机端CSS*/
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.box {
|
||||||
|
.content {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
.login-wrapper {
|
||||||
|
width: 70%;
|
||||||
|
height: 60%;
|
||||||
|
padding-top: 15%;
|
||||||
|
h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.login-form {
|
||||||
|
.form-item {
|
||||||
|
margin: 10px 0;
|
||||||
|
span {
|
||||||
|
color: rgb(113, 129, 141);
|
||||||
|
}
|
||||||
|
.input-item {
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid rgb(113, 129, 141);
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-btn {
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgb(235, 95, 93);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
.line {
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
}
|
||||||
|
.divider-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.other-login-item {
|
||||||
|
border-radius: 15px;
|
||||||
|
img {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -55,12 +55,18 @@ const agree=async ()=>{
|
|||||||
if(res.isArgee)
|
if(res.isArgee)
|
||||||
{
|
{
|
||||||
agreeNum.value+=1;
|
agreeNum.value+=1;
|
||||||
alert(res.message)
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
agreeNum.value-=1;
|
agreeNum.value-=1;
|
||||||
alert(res.message)
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
|
|||||||
@@ -33,8 +33,8 @@
|
|||||||
|
|
||||||
<el-menu-item index="5">
|
<el-menu-item index="5">
|
||||||
<div style="width: 350px;">
|
<div style="width: 350px;">
|
||||||
<el-input style="width: 300px;" placeholder="全站搜索" clearable prefix-icon="Search" />
|
<el-input style="width: 300px;" v-model="searchText" placeholder="全站搜索" clearable prefix-icon="Search" />
|
||||||
<el-button type="primary" plain>搜索</el-button>
|
<el-button type="primary" plain @click="search">搜索</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
|
||||||
@@ -59,19 +59,40 @@ import useUserStore from '@/stores/user.js'
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const userStore =useUserStore();
|
const userStore =useUserStore();
|
||||||
const activeIndex = ref('1')
|
const activeIndex = ref('1')
|
||||||
|
const searchText=ref('')
|
||||||
const handleSelect = (key, keyPath) => {
|
const handleSelect = (key, keyPath) => {
|
||||||
console.log(key, keyPath)
|
console.log(key, keyPath)
|
||||||
}
|
}
|
||||||
const logout=async ()=>{
|
const logout= async()=>{
|
||||||
await userStore.logOut();
|
ElMessageBox.confirm(`确定登出系统吗?`, "警告", {
|
||||||
router.push("/login");
|
confirmButtonText: "确认",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then( async() => {
|
||||||
|
//异步
|
||||||
|
await userStore.logOut();
|
||||||
|
//删除成功后,跳转到主页
|
||||||
|
router.push("/login");
|
||||||
|
ElMessage({
|
||||||
|
type: "success",
|
||||||
|
message: "登出成功",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
const enterIndex=()=>{
|
const enterIndex=()=>{
|
||||||
router.push("/index");
|
router.push("/index");
|
||||||
};
|
};
|
||||||
const enterProfile=()=>{
|
const enterProfile=()=>{
|
||||||
router.push("/profile");}
|
router.push("/profile");}
|
||||||
|
|
||||||
|
const search=()=>{
|
||||||
|
var routerPer = { path: `/discuss`,query:{q:searchText.value} };
|
||||||
|
searchText.value='';
|
||||||
|
router.push(routerPer)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.logo{
|
.logo{
|
||||||
|
|||||||
@@ -1,53 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="body-div" id="body">
|
<div class="box">
|
||||||
|
<div class="content">
|
||||||
<div class="left">
|
<RouterView/>
|
||||||
<video class="videoBG" autoplay playsinline loop disablepictureinpicture poster="/loginBg.png">
|
</div>
|
||||||
<!-- <source src="/loginBg.mp4" type="video/mp4"> -->
|
</div>
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right">
|
|
||||||
<div class="right-div">
|
|
||||||
<RouterView />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
<style src="@/assets/styles/login.scss" scoped></style>
|
||||||
<script setup>
|
|
||||||
import { onMounted } from 'vue';
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.left
|
|
||||||
{
|
|
||||||
|
|
||||||
background-color: #010413;
|
|
||||||
}
|
|
||||||
.right
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
.right-div
|
|
||||||
{
|
|
||||||
margin-top: 60%;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.body-div
|
|
||||||
{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 930px;
|
|
||||||
}
|
|
||||||
.videoBG
|
|
||||||
{
|
|
||||||
|
|
||||||
width:100% ;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -51,7 +51,7 @@ const router = createRouter({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name:'discuss',
|
name:'discuss',
|
||||||
path: '/discuss/:plateId',
|
path: '/discuss/:plateId?',
|
||||||
component: () => import('../views/Discuss.vue')
|
component: () => import('../views/Discuss.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -35,6 +35,19 @@ myaxios.interceptors.response.use(function (response) {
|
|||||||
|
|
||||||
return response;
|
return response;
|
||||||
}, function (error) {
|
}, function (error) {
|
||||||
|
const response=error.response.data;
|
||||||
|
//业务异常+应用异常,统一处理
|
||||||
|
switch(response.code)
|
||||||
|
{
|
||||||
|
|
||||||
|
case 403:
|
||||||
|
ElMessage.error(response.message)
|
||||||
|
break;
|
||||||
|
case 500:
|
||||||
|
ElMessage.error(response.message)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
});
|
});
|
||||||
export default myaxios
|
export default myaxios
|
||||||
@@ -114,6 +114,12 @@ const handleClick =async (tab, event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async()=>{
|
onMounted(async()=>{
|
||||||
|
|
||||||
|
if(route.query.q !=undefined)
|
||||||
|
{
|
||||||
|
query.title=route.query.q??''
|
||||||
|
router.push("/discuss")
|
||||||
|
}
|
||||||
await loadDiscussList();
|
await loadDiscussList();
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 100%">
|
<div style="width: 100%">
|
||||||
<div class="body-div">
|
<div class="body-div">
|
||||||
<el-form
|
<el-form label-width="120px" :model="editForm" label-position="left" :rules="rules" ref="ruleFormRef">
|
||||||
label-width="120px"
|
|
||||||
:model="editForm"
|
|
||||||
label-position="left"
|
|
||||||
:rules="rules"
|
|
||||||
ref="ruleFormRef"
|
|
||||||
>
|
|
||||||
<el-form-item label="分类:">
|
<el-form-item label="分类:">
|
||||||
<el-radio-group v-model="radio">
|
<el-radio-group v-model="radio">
|
||||||
<el-radio-button label="discuss">主题</el-radio-button>
|
<el-radio-button label="discuss">主题</el-radio-button>
|
||||||
@@ -16,11 +10,7 @@
|
|||||||
<el-radio-button label="orther">其他</el-radio-button>
|
<el-radio-button label="orther">其他</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item v-if="route.query.artType == 'article'" label="子文章名称:" prop="name">
|
||||||
v-if="route.query.artType == 'article'"
|
|
||||||
label="子文章名称:"
|
|
||||||
prop="name"
|
|
||||||
>
|
|
||||||
<el-input placeholder="请输入" v-model="editForm.name" />
|
<el-input placeholder="请输入" v-model="editForm.name" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-else label="标题:" prop="title">
|
<el-form-item v-else label="标题:" prop="title">
|
||||||
@@ -30,11 +20,7 @@
|
|||||||
<el-input placeholder="请输入" v-model="editForm.introduction" />
|
<el-input placeholder="请输入" v-model="editForm.introduction" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="内容:" prop="content">
|
<el-form-item label="内容:" prop="content">
|
||||||
<MavonEdit
|
<MavonEdit height="30rem" v-model="editForm.content" :codeStyle="codeStyle" />
|
||||||
height="30rem"
|
|
||||||
v-model="editForm.content"
|
|
||||||
:codeStyle="codeStyle"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="封面:">
|
<el-form-item label="封面:">
|
||||||
<el-input placeholder="请输入" />
|
<el-input placeholder="请输入" />
|
||||||
@@ -43,13 +29,7 @@
|
|||||||
<el-input placeholder="请输入" v-model="editForm.types" />
|
<el-input placeholder="请输入" v-model="editForm.types" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button
|
<el-button @click="submit(ruleFormRef)" class="submit-btn" type="primary">提交</el-button></el-form-item>
|
||||||
@click="submit(ruleFormRef)"
|
|
||||||
class="submit-btn"
|
|
||||||
type="primary"
|
|
||||||
>提交</el-button
|
|
||||||
></el-form-item
|
|
||||||
>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,11 +69,11 @@ const editForm = reactive({
|
|||||||
//组装主题内容: 需要更新主题信息
|
//组装主题内容: 需要更新主题信息
|
||||||
const discuss = {
|
const discuss = {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//组装文章内容:需要添加的文章信息
|
//组装文章内容:需要添加的文章信息
|
||||||
const article = {
|
const article = {
|
||||||
};
|
};
|
||||||
|
|
||||||
//定义效验规则
|
//定义效验规则
|
||||||
const ruleFormRef = ref(null);
|
const ruleFormRef = ref(null);
|
||||||
@@ -119,45 +99,62 @@ const submit = async (formEl) => {
|
|||||||
if (route.query.artType == "discuss") {
|
if (route.query.artType == "discuss") {
|
||||||
|
|
||||||
|
|
||||||
discuss.title=editForm.title;
|
discuss.title = editForm.title;
|
||||||
discuss.types= editForm.types;
|
discuss.types = editForm.types;
|
||||||
discuss.introduction= editForm.introduction;
|
discuss.introduction = editForm.introduction;
|
||||||
discuss.content= editForm.content;
|
discuss.content = editForm.content;
|
||||||
discuss.plateId= discuss.plateId??route.query.plateId
|
discuss.plateId = discuss.plateId ?? route.query.plateId
|
||||||
|
|
||||||
//主题创建
|
//主题创建
|
||||||
if (route.query.operType == "create") {
|
if (route.query.operType == "create") {
|
||||||
const response= await discussAdd(discuss);
|
const response = await discussAdd(discuss);
|
||||||
var routerPer = { path: `/article/${response.data.id}` };
|
|
||||||
router.push(routerPer);
|
ElMessage({
|
||||||
|
message: `[${discuss.title}]主题创建成功!`,
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
var routerPer = { path: `/article/${response.data.id}` };
|
||||||
|
router.push(routerPer);
|
||||||
}
|
}
|
||||||
//主题更新
|
//主题更新
|
||||||
else if (route.query.operType == "update") {
|
else if (route.query.operType == "update") {
|
||||||
await discussUpdate(route.query.discussId, discuss);
|
await discussUpdate(route.query.discussId, discuss);
|
||||||
|
|
||||||
|
ElMessage({
|
||||||
|
message: `[${discuss.title}]主题更新成功!`,
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
var routerPer = { path: `/article/${route.query.discussId}` };
|
var routerPer = { path: `/article/${route.query.discussId}` };
|
||||||
router.push(routerPer);
|
router.push(routerPer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//artcle文章处理
|
//artcle文章处理
|
||||||
else if (route.query.artType == "article") {
|
else if (route.query.artType == "article") {
|
||||||
//组装文章内容:需要添加的文章信息
|
//组装文章内容:需要添加的文章信息
|
||||||
article.content= editForm.content;
|
article.content = editForm.content;
|
||||||
article.name= editForm.name;
|
article.name = editForm.name;
|
||||||
article.discussId=route.query.discussId;
|
article.discussId = route.query.discussId;
|
||||||
article.parentId=route.query.parentArticleId
|
article.parentId = route.query.parentArticleId
|
||||||
//文章创建
|
//文章创建
|
||||||
if (route.query.operType == "create") {
|
if (route.query.operType == "create") {
|
||||||
const response= await articleAdd(article);
|
const response = await articleAdd(article);
|
||||||
|
ElMessage({
|
||||||
|
message: `[${article.name}]文章创建成功!`,
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
var routerPer = { path: `/article/${route.query.discussId}/${response.data.id}` };
|
var routerPer = { path: `/article/${route.query.discussId}/${response.data.id}` };
|
||||||
router.push(routerPer);
|
router.push(routerPer);
|
||||||
}
|
}
|
||||||
//文章更新
|
//文章更新
|
||||||
else if (route.query.operType == "update") {
|
else if (route.query.operType == "update") {
|
||||||
await articleUpdate(route.query.articleId, article);
|
await articleUpdate(route.query.articleId, article);
|
||||||
|
ElMessage({
|
||||||
|
message: `[${article.name}]文章更新成功!`,
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
var routerPer = { path: `/article/${route.query.discussId}/${route.query.articleId}` };
|
var routerPer = { path: `/article/${route.query.discussId}/${route.query.articleId}` };
|
||||||
router.push(routerPer);
|
router.push(routerPer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//添加成功后跳转到该页面
|
//添加成功后跳转到该页面
|
||||||
@@ -186,17 +183,17 @@ onMounted(async () => {
|
|||||||
//加载主题
|
//加载主题
|
||||||
const loadDiscuss = async () => {
|
const loadDiscuss = async () => {
|
||||||
const response = await discussGet(route.query.discussId);
|
const response = await discussGet(route.query.discussId);
|
||||||
const res=response.data
|
const res = response.data
|
||||||
editForm.content = res.content;
|
editForm.content = res.content;
|
||||||
editForm.title = res.title;
|
editForm.title = res.title;
|
||||||
editForm.types = res.types;
|
editForm.types = res.types;
|
||||||
editForm.introduction = res.introduction;
|
editForm.introduction = res.introduction;
|
||||||
discuss.plateId=res.plateId;
|
discuss.plateId = res.plateId;
|
||||||
};
|
};
|
||||||
//加载文章
|
//加载文章
|
||||||
const loadArticle = async () => {
|
const loadArticle = async () => {
|
||||||
const response = await articleGet(route.query.articleId);
|
const response = await articleGet(route.query.articleId);
|
||||||
const res=response.data
|
const res = response.data
|
||||||
editForm.content = res.content;
|
editForm.content = res.content;
|
||||||
editForm.name = res.name;
|
editForm.name = res.name;
|
||||||
editForm.discussId = res.discussId;
|
editForm.discussId = res.discussId;
|
||||||
|
|||||||
@@ -1,55 +1,74 @@
|
|||||||
<template>
|
<template>
|
||||||
<h2> 登录-欢迎</h2>
|
<div class="login-wrapper">
|
||||||
|
<h1>意社区-登录</h1>
|
||||||
|
<div class="login-form">
|
||||||
|
<div class="username form-item">
|
||||||
|
<span>使用邮箱或者手机号</span>
|
||||||
|
<input type="text" class="input-item" v-model="loginForm.userName">
|
||||||
|
</div>
|
||||||
|
<div class="password form-item">
|
||||||
|
<span>密码</span>
|
||||||
|
<input type="password" class="input-item" v-model="loginForm.password">
|
||||||
|
</div>
|
||||||
|
<button class="login-btn" @click="login">登 录</button>
|
||||||
|
<button class="login-btn" @click="guestlogin">游客临时登录</button>
|
||||||
|
</div>
|
||||||
|
<div class="divider">
|
||||||
|
<span class="line"></span>
|
||||||
|
<span class="divider-text">其他方式登录</span>
|
||||||
|
<span class="line"></span>
|
||||||
|
</div>
|
||||||
|
<div class="other-login-wrapper">
|
||||||
|
<div class="other-login-item">
|
||||||
|
<img src="@/assets/login_images/QQ.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="other-login-item">
|
||||||
|
<img src="@/assets/login_images/WeChat.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <h2> 登录-欢迎</h2>
|
||||||
<el-input v-model="loginForm.userName" placeholder="用户名" />
|
<el-input v-model="loginForm.userName" placeholder="用户名" />
|
||||||
<el-input v-model="loginForm.password" placeholder="密码" show-password />
|
<el-input v-model="loginForm.password" placeholder="密码" show-password />
|
||||||
<el-button class="login-btn" type="primary" @click="login" >登录</el-button>
|
<el-button class="login-btn" type="primary" @click="login">登录</el-button>
|
||||||
<br>
|
<br>
|
||||||
<el-button class="login-btn" type="primary" @click="guestlogin" >游客临时登录</el-button>
|
<el-button class="login-btn" type="primary" @click="guestlogin">游客临时登录</el-button> -->
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive } from 'vue';
|
import { reactive } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
import useUserStore from '@/stores/user.js'
|
import useUserStore from '@/stores/user.js'
|
||||||
const userStore=useUserStore();
|
const userStore = useUserStore();
|
||||||
const router=useRouter();
|
const router = useRouter();
|
||||||
const loginForm=reactive({
|
const route = useRoute();
|
||||||
userName:"",
|
const loginForm = reactive({
|
||||||
password:"",
|
userName: "",
|
||||||
uuid:"",
|
password: "",
|
||||||
code:""
|
uuid: "",
|
||||||
|
code: ""
|
||||||
})
|
})
|
||||||
const guestlogin=async ()=>{
|
const guestlogin = async () => {
|
||||||
loginForm.userName="guest";
|
loginForm.userName = "guest";
|
||||||
loginForm.password="123456"
|
loginForm.password = "123456"
|
||||||
await userStore.login(loginForm);
|
await userStore.login(loginForm);
|
||||||
router.push("/index")
|
const redirect = route.query?.redirect ?? '/index'
|
||||||
}
|
router.push(redirect)
|
||||||
const login=async ()=>{
|
|
||||||
const response= await userStore.login(loginForm);
|
|
||||||
console.log(response);
|
|
||||||
if( response.status==200)
|
|
||||||
{
|
|
||||||
router.push("/index")
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
alert("登录失败")
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
const login = async () => {
|
||||||
|
const response = await userStore.login(loginForm).catch((e) => {
|
||||||
|
loginForm.password = "";
|
||||||
|
});
|
||||||
|
if (response!=undefined) {
|
||||||
|
ElMessage({
|
||||||
|
message: `您好${loginForm.userName},登录成功!`,
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
|
||||||
|
const redirect = route.query?.redirect ?? '/index'
|
||||||
|
router.push(redirect)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style src="@/assets/styles/login.scss" scoped></style>
|
||||||
h2{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.el-input
|
|
||||||
{
|
|
||||||
margin:0rem 0 0.5rem 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
.login-btn
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
import errImage from "@/assets/401_images/401.gif";
|
import errImage from "@/assets/401_images/401.gif";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
// let { proxy } = getCurrentInstance();
|
let { proxy } = getCurrentInstance();
|
||||||
const router=useRouter();
|
const router=useRouter();
|
||||||
|
|
||||||
const errGif = ref(errImage + "?" + +new Date());
|
const errGif = ref(errImage + "?" + +new Date());
|
||||||
|
|||||||
@@ -43,17 +43,24 @@ const rules = ref({
|
|||||||
|
|
||||||
/** 提交按钮 */
|
/** 提交按钮 */
|
||||||
function submit() {
|
function submit() {
|
||||||
pwdRef.value.validate(valid => {
|
pwdRef.value.validate(async valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
updateUserPwd(user.oldPassword, user.newPassword).then(response => {
|
const response=await updateUserPwd(user.oldPassword, user.newPassword)
|
||||||
alert("修改成功");
|
|
||||||
});
|
if(response.status==200)
|
||||||
|
{
|
||||||
|
ElMessage({
|
||||||
|
type: "success",
|
||||||
|
message: "更新密码成功",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
/** 关闭按钮 */
|
/** 关闭按钮 */
|
||||||
function close() {
|
function close() {
|
||||||
alert("关闭")
|
|
||||||
// proxy.$tab.closePage();
|
// proxy.$tab.closePage();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ function changeScale(num) {
|
|||||||
/** 上传预处理 */
|
/** 上传预处理 */
|
||||||
function beforeUpload(file) {
|
function beforeUpload(file) {
|
||||||
if (file.type.indexOf("image/") == -1) {
|
if (file.type.indexOf("image/") == -1) {
|
||||||
alert("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
|
ElMessage.error("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。")
|
||||||
} else {
|
} else {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
@@ -117,8 +117,15 @@ async function uploadImg() {
|
|||||||
open.value = false;
|
open.value = false;
|
||||||
options.img = import.meta.env.VITE_APP_BASEAPI + "/file/" + response.data[0].id;
|
options.img = import.meta.env.VITE_APP_BASEAPI + "/file/" + response.data[0].id;
|
||||||
userStore.icon = options.img;
|
userStore.icon = options.img;
|
||||||
await updateUserIcon(response.data[0].id);
|
const iconResponse= await updateUserIcon(response.data[0].id);
|
||||||
alert("上传成功")
|
if(iconResponse.status==200)
|
||||||
|
{
|
||||||
|
ElMessage({
|
||||||
|
type: "success",
|
||||||
|
message: "头像更新成功",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
/** 实时预览 */
|
/** 实时预览 */
|
||||||
|
|||||||
@@ -1,42 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
|
<el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
|
||||||
<el-form-item label="账号" prop="userName">
|
<el-form-item label="账号" prop="userName">
|
||||||
<el-input v-model="user.userName" disabled />
|
<el-input v-model="user.userName" disabled />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="用户昵称" prop="nick">
|
<el-form-item label="用户昵称" prop="nick">
|
||||||
<el-input v-model="user.nick" maxlength="30" />
|
<el-input v-model="user.nick" maxlength="30" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="手机号码" prop="phone">
|
<el-form-item label="手机号码" prop="phone">
|
||||||
<el-input v-model="user.phone" maxlength="11" />
|
<el-input v-model="user.phone" maxlength="11" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="邮箱" prop="email">
|
<el-form-item label="邮箱" prop="email">
|
||||||
<el-input v-model="user.email" maxlength="50" />
|
<el-input v-model="user.email" maxlength="50" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="性别">
|
<el-form-item label="性别">
|
||||||
<el-radio-group v-model="user.sex">
|
<el-radio-group v-model="user.sex">
|
||||||
<el-radio :label="0">男</el-radio>
|
<el-radio :label="0">男</el-radio>
|
||||||
<el-radio :label="1">女</el-radio>
|
<el-radio :label="1">女</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="submit">保存</el-button>
|
<el-button type="primary" @click="submit">保存</el-button>
|
||||||
<el-button type="danger" @click="close">关闭</el-button>
|
<el-button type="danger" @click="close">关闭</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { updateUserProfile } from "@/apis/userApi";
|
import { updateUserProfile } from "@/apis/userApi";
|
||||||
import useUserStore from "@/stores/user"
|
import useUserStore from "@/stores/user"
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
const userStore=useUserStore();
|
const userStore = useUserStore();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
user: {
|
user: {
|
||||||
type: Object
|
type: Object
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const userRef=ref(null);
|
const userRef = ref(null);
|
||||||
|
|
||||||
const rules = ref({
|
const rules = ref({
|
||||||
nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
nick: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||||
@@ -46,18 +46,21 @@ const rules = ref({
|
|||||||
|
|
||||||
/** 提交按钮 */
|
/** 提交按钮 */
|
||||||
function submit() {
|
function submit() {
|
||||||
userRef.value.validate(valid => {
|
userRef.value.validate(async valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
updateUserProfile(props.user).then(response => {
|
const response = await updateUserProfile(props.user);
|
||||||
userStore.name=props.user.nick
|
if (response.status == 200) {
|
||||||
alert("修改成功");
|
ElMessage({
|
||||||
});
|
type: "success",
|
||||||
|
message: "用户信息修改成功",
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
/** 关闭按钮 */
|
/** 关闭按钮 */
|
||||||
function close() {
|
function close() {
|
||||||
alert("关闭")
|
// proxy.$tab.closePage();
|
||||||
proxy.$tab.closePage();
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
@@ -70,7 +70,8 @@ namespace Yi.BBS.Application.Forum
|
|||||||
.WhereIF(input.PlateId is not null, x => x.PlateId == input.PlateId)
|
.WhereIF(input.PlateId is not null, x => x.PlateId == input.PlateId)
|
||||||
.Where(x=>x.IsTop==input.IsTop)
|
.Where(x=>x.IsTop==input.IsTop)
|
||||||
.OrderByIF(input.Type==QueryDiscussTypeEnum.New, x =>x.CreationTime,OrderByType.Desc )
|
.OrderByIF(input.Type==QueryDiscussTypeEnum.New, x =>x.CreationTime,OrderByType.Desc )
|
||||||
.OrderByIF(input.Type == QueryDiscussTypeEnum.Host, x => x.SeeNum, OrderByType.Desc)
|
.OrderByIF(input.Type == QueryDiscussTypeEnum.Host, x => x.SeeNum, OrderByType.Desc)
|
||||||
|
.OrderByIF(input.Type == QueryDiscussTypeEnum.Suggest, x => x.AgreeNum, OrderByType.Desc)
|
||||||
.LeftJoin<UserEntity>((discuss, user) => discuss.CreatorId==user.Id)
|
.LeftJoin<UserEntity>((discuss, user) => discuss.CreatorId==user.Id)
|
||||||
.Select((discuss,user) =>new DiscussGetListOutputDto {
|
.Select((discuss,user) =>new DiscussGetListOutputDto {
|
||||||
User=new UserGetListOutputDto() { UserName=user.UserName,Nick=user.Nick, Icon = user.Icon }
|
User=new UserGetListOutputDto() { UserName=user.UserName,Nick=user.Nick, Icon = user.Icon }
|
||||||
|
|||||||
Binary file not shown.
Reference in New Issue
Block a user