feat: 用户设置布局修改
This commit is contained in:
wang_fan_w
parent
ee2ed691ec
commit
13ec570adc
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-row align="center" :gutter="[0, 16]">
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-card>
|
||||||
|
<div class="row-title margin-bottom">实名认证</div>
|
||||||
|
<a-space direction="vertical" size="large">
|
||||||
|
<a-descriptions :data="data" :column="3" :align="{ label: 'right' }" table-layout="fixed" />
|
||||||
|
</a-space>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-card>
|
||||||
|
<div class="row-title margin-bottom">认证记录</div>
|
||||||
|
<a-table :columns="tableColumns" :data="tableData" size="small">
|
||||||
|
<template #optional>
|
||||||
|
<a-space>
|
||||||
|
<a-button size="mini" type="text">查看</a-button>
|
||||||
|
<a-button size="mini" type="text">撤回</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const data = ref([
|
||||||
|
{
|
||||||
|
label: "用户ID：",
|
||||||
|
value: "1000001"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "用户名：",
|
||||||
|
value: "admin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "用户昵称：",
|
||||||
|
value: "兔子先森"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "角色：",
|
||||||
|
value: "系统管理员"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "权限：",
|
||||||
|
value: "全部"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "实名认证：",
|
||||||
|
value: "已认证"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "邮箱：",
|
||||||
|
value: "2547096351@qq.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "手机号：",
|
||||||
|
value: "15888888888"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "注册时间：",
|
||||||
|
value: "2024-06-20"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const tableColumns = ref([
|
||||||
|
{
|
||||||
|
title: "认证类型",
|
||||||
|
dataIndex: "authenticationType"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "认证内容",
|
||||||
|
dataIndex: "authenticationContent"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "当前状态",
|
||||||
|
dataIndex: "status"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
dataIndex: "createTime"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "operation",
|
||||||
|
slotName: "optional",
|
||||||
|
fixed: "right",
|
||||||
|
width: 200
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const tableData = reactive([
|
||||||
|
{
|
||||||
|
key: "1",
|
||||||
|
authenticationType: "证件认证",
|
||||||
|
authenticationContent: "实名认证，鉴定信息",
|
||||||
|
status: "1",
|
||||||
|
createTime: "2024-06-20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "2",
|
||||||
|
authenticationType: "证件认证",
|
||||||
|
authenticationContent: "实名认证，鉴定信息",
|
||||||
|
status: "0",
|
||||||
|
createTime: "2024-06-20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "3",
|
||||||
|
authenticationType: "证件认证",
|
||||||
|
authenticationContent: "实名认证，鉴定信息",
|
||||||
|
status: "1",
|
||||||
|
createTime: "2024-06-20"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.row-title {
|
||||||
|
font-size: $font-size-title-1;
|
||||||
|
}
|
||||||
|
.margin-bottom {
|
||||||
|
margin-bottom: $padding;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-form :model="form" :style="{ width: '600px' }">
|
||||||
|
<a-form-item field="name" label="用户ID">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入用户昵称" disabled />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="用户昵称">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入用户昵称" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="角色">
|
||||||
|
<a-input v-model="form.name" placeholder="请选择角色" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="权限">
|
||||||
|
<a-input v-model="form.name" placeholder="请选择权限" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="注册时间">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入注册时间" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button>提交</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const form = ref({
|
||||||
|
name: ""
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.row-title {
|
||||||
|
font-size: $font-size-title-1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-form :model="form" :style="{ width: '600px' }">
|
||||||
|
<a-form-item field="name" label="登录密码">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入登录密码" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="密保问题">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入密保问题" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="密保答案">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入密保答案" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="安全手机">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入安全手机" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item field="name" label="安全邮箱">
|
||||||
|
<a-input v-model="form.name" placeholder="请输入安全邮箱" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button>提交</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const form = ref({
|
||||||
|
name: ""
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.row-title {
|
||||||
|
font-size: $font-size-title-1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,95 +1,56 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dc-page">
|
<div class="container">
|
||||||
<a-row align="center">
|
<a-card>
|
||||||
<a-col :span="2">
|
<a-row align="center">
|
||||||
<div>
|
<a-col :span="2">
|
||||||
<a-avatar :size="100" @click="toast" trigger-type="mask">
|
<div>
|
||||||
<img alt="avatar" :src="myImage" />
|
<a-avatar :size="100" @click="toast" trigger-type="mask">
|
||||||
<template #trigger-icon>
|
<img alt="avatar" :src="myImage" />
|
||||||
<IconEdit />
|
<template #trigger-icon>
|
||||||
</template>
|
<IconEdit />
|
||||||
</a-avatar>
|
</template>
|
||||||
</div>
|
</a-avatar>
|
||||||
</a-col>
|
</div>
|
||||||
<a-col :span="22">
|
</a-col>
|
||||||
<a-space direction="vertical" size="large">
|
<a-col :span="22">
|
||||||
<a-descriptions :data="data" :column="3" title="用户资料" :align="{ label: 'right' }" />
|
<a-space direction="vertical" size="large">
|
||||||
</a-space>
|
<a-descriptions :data="data" :column="3" title="用户资料" :align="{ label: 'right' }" />
|
||||||
</a-col>
|
</a-space>
|
||||||
</a-row>
|
</a-col>
|
||||||
<a-divider />
|
</a-row>
|
||||||
<a-row>
|
</a-card>
|
||||||
<a-col :span="12">
|
<a-card class="margin-top">
|
||||||
<div class="row-title">基础信息</div>
|
<a-row align="center">
|
||||||
<a-form :model="form" :style="{ width: '600px' }">
|
<a-col :span="24">
|
||||||
<a-form-item field="name" label="用户ID">
|
<a-tabs :type="type" :size="size">
|
||||||
<a-input v-model="form.name" placeholder="请输入用户昵称" disabled />
|
<a-tab-pane key="1" title="基本信息">
|
||||||
</a-form-item>
|
<BasicInfo />
|
||||||
<a-form-item field="name" label="用户昵称">
|
</a-tab-pane>
|
||||||
<a-input v-model="form.name" placeholder="请输入用户昵称" />
|
<a-tab-pane key="2" title="安全设置">
|
||||||
</a-form-item>
|
<SecuritySettings />
|
||||||
<a-form-item field="name" label="角色">
|
</a-tab-pane>
|
||||||
<a-input v-model="form.name" placeholder="请选择角色" />
|
<a-tab-pane key="3" title="实名认证">
|
||||||
</a-form-item>
|
<Accreditation />
|
||||||
<a-form-item field="name" label="权限">
|
</a-tab-pane>
|
||||||
<a-input v-model="form.name" placeholder="请选择权限" />
|
</a-tabs>
|
||||||
</a-form-item>
|
</a-col>
|
||||||
<a-form-item field="name" label="注册时间">
|
<a-col :span="24"> </a-col>
|
||||||
<a-input v-model="form.name" placeholder="请输入注册时间" />
|
</a-row>
|
||||||
</a-form-item>
|
</a-card>
|
||||||
<a-form-item>
|
|
||||||
<a-button>提交</a-button>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<div class="row-title">安全设置</div>
|
|
||||||
<a-form :model="form" :style="{ width: '600px' }">
|
|
||||||
<a-form-item field="name" label="登录密码">
|
|
||||||
<a-input v-model="form.name" placeholder="请输入登录密码" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item field="name" label="密保问题">
|
|
||||||
<a-input v-model="form.name" placeholder="请输入密保问题" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item field="name" label="密保答案">
|
|
||||||
<a-input v-model="form.name" placeholder="请输入密保答案" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item field="name" label="安全手机">
|
|
||||||
<a-input v-model="form.name" placeholder="请输入安全手机" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item field="name" label="安全邮箱">
|
|
||||||
<a-input v-model="form.name" placeholder="请输入安全邮箱" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item>
|
|
||||||
<a-button>提交</a-button>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="24">
|
|
||||||
<div class="row-title">实名认证</div>
|
|
||||||
<a-space direction="vertical" size="large">
|
|
||||||
<a-descriptions :data="data" :column="3" :align="{ label: 'right' }" table-layout="fixed" />
|
|
||||||
</a-space>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="24">
|
|
||||||
<div class="row-title">认证记录</div>
|
|
||||||
<a-table :columns="tableColumns" :data="tableData" size="small">
|
|
||||||
<template #optional>
|
|
||||||
<a-space>
|
|
||||||
<a-button size="mini" type="text">查看</a-button>
|
|
||||||
<a-button size="mini" type="text">撤回</a-button>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import myImage from "@/assets/img/my-image.jpg";
|
import myImage from "@/assets/img/my-image.jpg";
|
||||||
|
import BasicInfo from "@/views/personal-center/user-settings/components/basic-info.vue";
|
||||||
|
import SecuritySettings from "@/views/personal-center/user-settings/components/security-settings.vue";
|
||||||
|
import Accreditation from "@/views/personal-center/user-settings/components/accreditation.vue";
|
||||||
import { getCurrentInstance } from "vue";
|
import { getCurrentInstance } from "vue";
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
|
const type = ref("rounded");
|
||||||
|
const size = ref("medium");
|
||||||
|
|
||||||
const data = ref([
|
const data = ref([
|
||||||
{
|
{
|
||||||
label: "用户ID：",
|
label: "用户ID：",
|
||||||
@ -129,66 +90,16 @@ const data = ref([
|
|||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const tableColumns = ref([
|
|
||||||
{
|
|
||||||
title: "认证类型",
|
|
||||||
dataIndex: "authenticationType"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "认证内容",
|
|
||||||
dataIndex: "authenticationContent"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "当前状态",
|
|
||||||
dataIndex: "status"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "创建时间",
|
|
||||||
dataIndex: "createTime"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
dataIndex: "operation",
|
|
||||||
slotName: "optional",
|
|
||||||
fixed: "right",
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const tableData = reactive([
|
|
||||||
{
|
|
||||||
key: "1",
|
|
||||||
authenticationType: "证件认证",
|
|
||||||
authenticationContent: "实名认证，鉴定信息",
|
|
||||||
status: "1",
|
|
||||||
createTime: "2024-06-20"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "2",
|
|
||||||
authenticationType: "证件认证",
|
|
||||||
authenticationContent: "实名认证，鉴定信息",
|
|
||||||
status: "0",
|
|
||||||
createTime: "2024-06-20"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "3",
|
|
||||||
authenticationType: "证件认证",
|
|
||||||
authenticationContent: "实名认证，鉴定信息",
|
|
||||||
status: "1",
|
|
||||||
createTime: "2024-06-20"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const toast = () => {
|
const toast = () => {
|
||||||
proxy.$message.info("修改头像");
|
proxy.$message.info("修改头像");
|
||||||
};
|
};
|
||||||
|
|
||||||
const form = ref({
|
|
||||||
name: ""
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.row-title {
|
.container {
|
||||||
font-size: $font-size-title-1;
|
padding: $padding;
|
||||||
|
}
|
||||||
|
.margin-top {
|
||||||
|
margin-top: $padding;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user