itbaima-study/itbaima-forum-session
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成个人设置页面

Browse Source
This commit is contained in:
柏码の讲师 2023-06-17 17:21:36 +08:00
parent e11d3c4e55
commit feccf869ee
12 changed files with 222 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
study-project-frontend/src/App.vue
View File

@ -1,7 +1,5 @@
<script setup>
import {get} from "@/net";
import {useStore} from "@/stores";
import router from "@/router";
const store = useStore()
const user = localStorage.getItem('user')

13
study-project-frontend/src/components/index/Settings.vue
View File

@ -1,13 +0,0 @@
<script setup>
</script>
<template>
<div>
我是设置界面
</div>
</template>
<style scoped>
</style>

54
study-project-frontend/src/components/settings/InfoSettings.vue Normal file
View File

@ -0,0 +1,54 @@
<script setup>
import {reactive} from "vue";
import {Select} from "@element-plus/icons-vue";
const infoForm = reactive({
username: '',
desc: '',
phone: '',
qq: '',
wx: '',
blog: '',
sex: ''
})
</script>
<template>
<div>
<el-form
label-position="top"
label-width="100px"
:model="infoForm"
style="max-width: 460px">
<el-form-item label="用户名">
<el-input v-model="infoForm.username" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="infoForm.sex" class="ml-4">
<el-radio label="1" size="large">男</el-radio>
<el-radio label="2" size="large">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="infoForm.phone" />
</el-form-item>
<el-form-item label="QQ">
<el-input v-model="infoForm.qq" />
</el-form-item>
<el-form-item label="微信">
<el-input v-model="infoForm.wx" />
</el-form-item>
<el-form-item label="博客">
<el-input v-model="infoForm.blog" />
</el-form-item>
<el-form-item label="个人简介">
<el-input type="textarea" v-model="infoForm.desc" :rows="6"/>
</el-form-item>
</el-form>
<el-button type="success" :icon="Select">保存个人信息设置</el-button>
</div>
</template>
<style scoped>
</style>

49
study-project-frontend/src/components/settings/PrivacySettings.vue Normal file
View File

@ -0,0 +1,49 @@
<script setup>
import {Message, Select} from "@element-plus/icons-vue";
import {reactive} from "vue";
const privacyForm = reactive({
email: false,
phone: false,
qq: false,
wx: false,
blog: false,
sex: false
})
</script>
<template>
<div>
<el-form
label-position="top"
label-width="100px"
:model="privacyForm"
style="max-width: 460px">
<el-form-item>
<el-checkbox v-model="privacyForm.email" label="是否公开展示展示我的邮箱" size="large" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="privacyForm.sex" label="是否公开展示展示我的性别" size="large" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="privacyForm.phone" label="是否公开展示展示我的电话号码" size="large" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="privacyForm.qq" label="是否公开展示展示我的QQ" size="large" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="privacyForm.wx" label="是否公开展示展示我的微信" size="large" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="privacyForm.blog" label="是否公开展示展示我的博客" size="large" />
</el-form-item>
</el-form>
<el-button type="success" :icon="Select">保存隐私设置</el-button>
</div>
</template>
<style scoped>
::v-deep(.el-form-item) {
margin-bottom: 5px;
}
</style>

53
study-project-frontend/src/components/settings/SecuritySettings.vue Normal file
View File

@ -0,0 +1,53 @@
<script setup>
import {reactive} from "vue";
import {Lock, Message, Select} from "@element-plus/icons-vue";
const securityForm = reactive({
email: '',
password_old: '',
password_new: '',
password_new_repeat: '',
})
</script>
<template>
<div>
<div>
<h1><el-icon><Message/></el-icon> 邮箱设置</h1>
<el-form
label-position="top"
label-width="100px"
:model="securityForm"
style="max-width: 460px">
<el-form-item label="邮箱地址">
<el-input v-model="securityForm.email" />
</el-form-item>
</el-form>
<el-button type="success" :icon="Select">保存邮件地址</el-button>
</div>
<el-divider/>
<div>
<h1><el-icon><Lock/></el-icon> 密码设置</h1>
<el-form
label-position="top"
label-width="100px"
:model="securityForm"
style="max-width: 460px">
<el-form-item label="原密码">
<el-input v-model="securityForm.password_old" />
</el-form-item>
<el-form-item label="新密码">
<el-input v-model="securityForm.password_old" />
</el-form-item>
<el-form-item label="重复新密码">
<el-input v-model="securityForm.password_old" />
</el-form-item>
</el-form>
<el-button type="success" :icon="Select">修改密码</el-button>
</div>
</div>
</template>
<style scoped>
</style>

10
study-project-frontend/src/router/index.js
View File

@ -12,15 +12,15 @@ const router = createRouter({
{
path: '',
name: 'welcome-login',
component: () => import('@/components/welcome/LoginPage.vue')
component: () => import('@/views/welcome/LoginPage.vue')
}, {
path: 'register',
name: 'welcome-register',
component: () => import('@/components/welcome/RegisterPage.vue')
component: () => import('@/views/welcome/RegisterPage.vue')
}, {
path: 'forget',
name: 'welcome-forget',
component: () => import('@/components/welcome/ForgetPage.vue')
component: () => import('@/views/welcome/ForgetPage.vue')
}
]
}, {
@ -31,11 +31,11 @@ const router = createRouter({
{
path: '',
name: 'index-list',
component: () => import('@/components/index/PostList.vue')
component: () => import('@/views/index/PostList.vue')
}, {
path: 'settings',
name: 'index-settings',
component: () => import('@/components/index/Settings.vue')
component: () => import('@/views/index/Settings.vue')
}
]
}

4
study-project-frontend/src/views/IndexView.vue
View File

@ -74,7 +74,9 @@
</div>
</el-header>
<el-main style="padding: 0">
<router-view/>
<el-scrollbar style="height: 100%">
<router-view/>
</el-scrollbar>
</el-main>
</el-container>
</el-container>

0
study-project-frontend/src/components/index/PostList.vue → study-project-frontend/src/views/index/PostList.vue
View File

58
study-project-frontend/src/views/index/Settings.vue Normal file
View File

@ -0,0 +1,58 @@
<script setup>
import {ref} from "vue";
import {useStore} from "@/stores";
import InfoSettings from "@/components/settings/InfoSettings.vue";
import SecuritySettings from "@/components/settings/SecuritySettings.vue";
import PrivacySettings from "@/components/settings/PrivacySettings.vue";
const store = useStore()
const activeName = ref('info')
</script>
<template>
<div style="display: flex;padding: 20px 30px">
<div style="flex: 1">
<el-tabs v-model="activeName">
<el-tab-pane label="个人信息设置" name="info">
<info-settings/>
</el-tab-pane>
<el-tab-pane label="账号安全设置" name="security">
<security-settings/>
</el-tab-pane>
<el-tab-pane label="隐私设置" name="privacy">
<privacy-settings/>
</el-tab-pane>
</el-tabs>
</div>
<div style="width: 300px">
<div class="user-card" style="margin: 15px 0 0 30px">
<div style="text-align: right;padding: 5px 15px 0 15px">
<div style="width: 70px;display: inline-block">
<el-avatar :size="70" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
<div style="text-align: center;font-weight: bold">{{store.auth.user.username}}</div>
</div>
</div>
<div style="padding: 10px;font-size: 13px">
还打算登记卡手动滑稽啊扩大合计阿卡手打啊世纪大厦健康大厦登记卡
撒谎登记卡手动滑稽卡死打卡机阿萨高大上科技大厦打撒黑科技
撒活动卡萨丁卡仕达酱啊受打击卡萨
大萨达哈萨克大豪科技啊打卡机阿萨达
</div>
</div>
</div>
</div>
</template>
<style scoped>
.user-card {
height: 300px;
width: 260px;
border-radius: 5px;
border: solid 1px lightgrey;
}
.user-card > div {
border-bottom: solid 1px lightgrey;
}
</style>

0
study-project-frontend/src/components/welcome/ForgetPage.vue → study-project-frontend/src/views/welcome/ForgetPage.vue
View File

0
study-project-frontend/src/components/welcome/LoginPage.vue → study-project-frontend/src/views/welcome/LoginPage.vue
View File

0
study-project-frontend/src/components/welcome/RegisterPage.vue → study-project-frontend/src/views/welcome/RegisterPage.vue
View File