Skip to content

fix: 增加admin/setting相关页面 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: 增加admin/setting相关页面 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/router/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,26 @@ export const constantRoutes = [
path: '/404',
component: () => import('@/views/exception/404.vue'),
},
{
path: '/setting',
component: layouts.BasicLayout,
meta: {
breadcrumb: [{ name: 'setting' }],
},
children: [
{
path: '',
name: 'setting',
component: () => import('@/views/admin/setting/index.vue'),
meta: {
title: '个人设置',
isMenu: false,
keepAlive: false,
permission: '*',
active: 'setting',
openKeys: 'setting',
},
},
],
},
]
2 changes: 1 addition & 1 deletion src/router/routes/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ export default [
openKeys: 'setting',
},
},
]
]
112 changes: 112 additions & 0 deletions src/views/admin/setting/Basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<template>
<a-row
type="flex"
:gutter="48">
<a-col flex="0 0 480px">
<a-form
ref="formRef"
:rules="formRules"
:model="formData"
layout="vertical">
<a-form-item
name="name"
label="昵称">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
<a-form-item
label="邮箱"
name="email">
<a-input v-model:value="formData.email"></a-input>
</a-form-item>
<a-form-item
name="phone"
label="联系电话">
<a-input v-model:value="formData.phone"></a-input>
</a-form-item>

<a-form-item
label="个人简介"
name="remark">
<a-textarea v-model:value="formData.remark"></a-textarea>
</a-form-item>

<a-form-item>
<a-button
@click="handleOk"
type="primary"
>更新资料
</a-button>
</a-form-item>
</a-form>
</a-col>
<!-- <a-col class="align-center">-->
<!-- <div>-->
<!-- <a-avatar-->
<!-- src="http://cdn.xuanyunet.com/images/avatar.jpg"-->
<!-- :size="144"></a-avatar>-->
<!-- </div>-->
<!-- <div class="mt-8-2">-->
<!-- <a-upload :show-upload-list="false">-->
<!-- <a-button>-->
<!-- <template #icon>-->
<!-- <upload-outlined></upload-outlined>-->
<!-- </template>-->
<!-- 上传头像-->
<!-- </a-button>-->
<!-- </a-upload>-->
<!-- </div>-->
<!-- </a-col>-->
</a-row>
</template>

<script setup>
import apis from '@/apis'

defineOptions({
name: 'Basic',
})
import { config } from '@/config'
import { useForm } from '@/hooks'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const { formRef, formData, formRules } = useForm()

getUserInfo()

/**
* 获取用户信息
* @returns {Promise<void>}
*/
async function getUserInfo() {
const { data } = await apis.user.getUserDetail().catch((err) => {
console.log(err)
})
formData.value = data
}

/**
* 提交表单
*/
function handleOk() {
formRef.value.validateFields().then(async (values) => {
const params = {
...values,
}
const { success } = await apis.user.updateUser(formData.value.id, params).catch((err) => {
console.log(err)
})
if (config('http.code.success') === success) {
message.success('修改成功')
setTimeout(() => {
router.back()
}, 1500)
}
})
}

// updateUser
</script>

<style lang="less" scoped></style>
58 changes: 58 additions & 0 deletions src/views/admin/setting/Bind.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<a-list
item-layout="horizontal"
row-key="id"
:data-source="listData">
<template #renderItem="{ item }">
<a-list-item>
<template #actions>
<a>绑定</a>
</template>
<a-list-item-meta>
<template #avatar>
<a-avatar
shape="square"
:size="48"
:style="{
backgroundColor: item.color,
}">
<template #icon>
<component :is="item.avatar"></component>
</template>
</a-avatar>
</template>
<template #title>{{ item.title }}</template>
<template #description>{{ item.description }}</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</template>

<script setup>
import { AlipayOutlined, DingdingOutlined, TaobaoOutlined } from '@ant-design/icons-vue'

defineOptions({
name: 'Bind',
})

const listData = [
{ id: '1', title: '绑定淘宝', description: '当前未绑定淘宝账号', avatar: TaobaoOutlined, color: '#ff5800' },
{
id: '2',
title: '绑定支付宝',
description: '当前未绑定支付宝账号',
avatar: AlipayOutlined,
color: '#1677ff',
},
{
id: '3',
title: '绑定钉钉',
description: '当前未绑定钉钉账号',
avatar: DingdingOutlined,
color: '#007fff',
},
]
</script>

<style lang="less" scoped></style>
35 changes: 35 additions & 0 deletions src/views/admin/setting/Custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<a-list item-layout="horizontal">
<a-list-item>
<template #actions>
<a-switch
v-model:checked="themeColor"
checked-children="黑色"
un-checked-children="白色"></a-switch>
</template>
<a-list-item-meta>
<template #title>风格配色</template>
<template #description>整体风格配色设置</template>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<template #actions> </template>
<a-list-item-meta>
<template #title>主题色</template>
<template #description>页面风格配色</template>
</a-list-item-meta>
</a-list-item>
</a-list>
</template>

<script setup>
import { ref } from 'vue'

defineOptions({
name: 'Custom',
})

const themeColor = ref(false)
</script>

<style lang="less" scoped></style>
37 changes: 37 additions & 0 deletions src/views/admin/setting/Message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<a-list
item-layout="horizontal"
row-key="id"
:data-source="listData">
<template #renderItem="{ item }">
<a-list-item>
<template #actions>
<a-switch
v-model:checked="item.checked"
checked-children="开"
un-checked-children="关"></a-switch>
</template>
<a-list-item-meta>
<template #title>{{ item.title }}</template>
<template #description>{{ item.description }}</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</template>

<script setup>
import { ref } from 'vue'

defineOptions({
name: 'Message',
})

const listData = ref([
{ id: '1', title: '账户密码', description: '其他用户的消息将以站内信的形式通知', checked: true },
{ id: '2', title: '系统消息', description: '系统消息将以站内信的形式通知', checked: true },
{ id: '3', title: '待办任务', description: '待办任务将以站内信的形式通知', checked: true },
])
</script>

<style lang="less" scoped></style>
103 changes: 103 additions & 0 deletions src/views/admin/setting/Safe.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<template>
<a-row
type="flex"
:gutter="48">
<a-col flex="0 0 480px">
<a-form
ref="formRef"
:rules="formRules"
:model="formData"
layout="vertical">
<a-form-item
name="old_password"
label="旧密码">
<a-input-password
v-model:value="formData.old_password"
size="large"
type="password">
<template #prefix>
<lock-outlined></lock-outlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item
label="新密码"
name="new_password">
<a-input-password
v-model:value="formData.new_password"
size="large"
type="password">
<template #prefix>
<lock-outlined></lock-outlined>
</template>
</a-input-password>
</a-form-item>
<a-form-item
name="new_passwords"
label="确认新密码">
<a-input-password
v-model:value="formData.new_passwords"
size="large"
type="password">
<template #prefix>
<lock-outlined></lock-outlined>
</template>
</a-input-password>
</a-form-item>

<a-form-item>
<a-button
@click="handleOk"
type="primary"
>更新密码
</a-button>
</a-form-item>
</a-form>
</a-col>
</a-row>
</template>

<script setup>
import apis from '@/apis'

defineOptions({
name: 'Safe',
})
import { config } from '@/config'
import { useForm } from '@/hooks'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const { formRef, formData, formRules } = useForm()
import { LockOutlined } from '@ant-design/icons-vue'

/**
* 提交表单
*/
function handleOk() {
formRef.value.validateFields().then(async (values) => {
const params = {
old_password: values.old_password,
new_password: values.new_password,
}
if (values.new_passwords !== params.new_password) {
return message.error('两次密码不一致')
}

const { success } = await apis.user.updatePassword(params.old_password, params).catch((err) => {
console.log(err)
})
if (config('http.code.success') === success) {
message.success('修改成功')
setTimeout(() => {
router.back()
}, 1500)
}
})
}

// updateUser
</script>

<style lang="less" scoped></style>
Loading