feat(用户): 添加用户界面、用户详情界面

dev
zjb 8 months ago
parent b3b0c4028a
commit 604f678b31

@ -1,9 +1,9 @@
/*
* @Author: zhangjiabao
* @Date: 2024-01-25 11:05:17
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-01-30 00:13:14
* @FilePath: /luoo_manage_fe/src/router/index.js
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-01 22:16:25
* @FilePath: \luoo_manage_fe\src\router\index.js
*/
import Vue from "vue";
import Router from "vue-router";
@ -94,9 +94,17 @@ export const constantRouterMap = [
{
path: "list",
name: "UserManageList",
component: () => import("@/views/common/unfinished"),
component: () => import("@/views/user/index"),
meta: { title: "用户列表" }
},
{
path: "detail",
name: "UserManageDetail",
hidden: true,
component: () => import("@/views/user/detail"),
meta: { title: "用户详情" }
},
{
path: "sign",
name: "UserSign",
@ -148,7 +156,7 @@ export const constantRouterMap = [
{
path: "comment",
name: "Comment",
component: () => import("@/views/common/unfinished"),
component: () => import("@/views/comment/index"),
meta: { title: "评论管理" }
},
{

@ -0,0 +1,98 @@
<!--
* @Author: zhangjiabao
* @Date: 2024-02-01 22:15:37
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-01 22:15:43
* @FilePath: \luoo_manage_fe\src\views\comment\index.vue
-->
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="card-header clearfix">
<span class="card-header-text">评论管理</span>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {}
};
</script>
<style scoped>
.pagination-right {
text-align: right;
margin-top: 10px;
}
.box-card {
min-height: 300px;
height: calc(100vh - 140px);
border-radius: 10px;
.el-card__header {
background-color: rgba(249, 249, 249, 1);
}
}
/deep/ .el-dialog {
border-radius: 5px;
}
.popup-dialog {
.el-dialog__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 50px;
background-color: #f5f5f5f5;
}
.el-dialog__title {
font-size: 15px;
font-weight: bolder;
}
.el-dialog__footer {
border-top: solid;
border-top-width: thin;
border-top-color: rgb(233, 233, 233);
padding: 10px 20px 10px;
}
}
.in-card-form {
height: 60px;
display: flex;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.card-header {
height: 23px;
}
.app-container {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
}
.card-header-text {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
text-align: left;
line-height: 20px;
letter-spacing: normal;
color: #333333;
}
</style>

@ -0,0 +1,354 @@
<!--
* @Author: zhangjiabao
* @Date: 2024-02-02 01:00:52
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-02 02:24:36
* @FilePath: \luoo_manage_fe\src\views\user\detail.vue
-->
<template>
<div class="app-container">
<el-card class="box-card box-card-up" style="overflow-x:auto;">
<el-row
:gutter="20"
style="min-width:1600px;overflow:auto; white-space: nowrap;"
>
<el-col :span="2">
<img
style="width:100px; height:100px; margin-top:5px; "
src="//luoow.wxwenku.com/997/cover_min.jpg"
/>
</el-col>
<el-col :span="2">
<div style="width:100%; height:100px; margin-top:5px; ">
<span
style="line-height:30px;
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif; font-weight: 700; color: #666666;"
>落在低处</span
><span
style="margin-left:10px;line-height:30px; color:rgba(64, 158, 255, 1);
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif; font-weight: 700;"
></span
>
<br />
<span style="line-height:30px;"></span>
<br />
<span
style="line-height:30px;font-size: 12px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 12px;"
>你还没有设置签名哦</span
>
</div>
</el-col>
<el-col :span="1">
<div style="width:100%; height:100px; margin-top:5px; ">
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 14px;"
>用户状态</span
>
<br />
<span
class="green-dot"
style="line-height:30px;font-family: '微软雅黑', sans-serif;
font-size: 12px; font-weight: 400;"
>正常</span
>
</div>
</el-col>
<el-col :span="3">
<div
style="width:100%; height: 100px; background-color: rgb(249,249,249); padding-left:20px;
border-left-style: solid; border-left-color: rgb(251, 98, 96); border-width: 0px 0px 0px 5px;"
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 16px;"
>播放总数</span
>
<br />
<span
style="line-height:30px;font-family: '微软雅黑', sans-serif;
font-size: 20px; font-weight: 700; color:#666666"
>1000</span
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 14px;"
></span
>
</div>
</el-col>
<el-col :span="3">
<div
style="width:100%; height: 100px; background-color: rgb(249,249,249); padding-left:20px;
border-left-style: solid; border-left-color: rgb(0, 153, 255); border-width: 0px 0px 0px 5px;"
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 16px;"
>收藏期刊总数</span
>
<br />
<span
style="line-height:30px;font-family: '微软雅黑', sans-serif;
font-size: 20px; font-weight: 700; color:#666666"
>1000</span
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 14px;"
></span
>
</div>
</el-col>
<el-col :span="3">
<div
style="width:100%; height: 100px; background-color: rgb(249,249,249); padding-left:20px;
border-left-style: solid; border-left-color: rgb(129, 103, 245); border-width: 0px 0px 0px 5px;"
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 16px;"
>收藏单曲总数</span
>
<br />
<span
style="line-height:30px;font-family: '微软雅黑', sans-serif;
font-size: 20px; font-weight: 700; color:#666666"
>1000</span
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 14px;"
></span
>
</div>
</el-col>
<el-col :span="3">
<div
style="width:100%; height: 100px; background-color: rgb(249,249,249); padding-left:20px;
border-left-style: solid; border-left-color: rgb(81, 211, 81); border-width: 0px 0px 0px 5px;"
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 16px;"
>注册天数</span
>
<br />
<span
style="line-height:30px;font-family: '微软雅黑', sans-serif;
font-size: 20px; font-weight: 700; color:#666666"
>1000</span
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 14px;"
></span
>
</div>
</el-col>
<el-col :span="3">
<div
style="width:100%; height: 100px; background-color: rgb(249,249,249); padding-left:20px;
border-left-style: solid; border-left-color: rgb(255, 169, 76); border-width: 0px 0px 0px 5px;"
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 16px;"
>在线总时长</span
>
<br />
<span
style="line-height:30px;font-family: '微软雅黑', sans-serif;
font-size: 20px; font-weight: 700; color:#666666"
>1000</span
>
<span
style="line-height:50px;font-family: '微软雅黑', sans-serif;
font-weight: 400; color: #999999; font-size: 14px;"
></span
>
</div>
</el-col>
<el-col :span="3">
<div style="margin-top:30px; padding-left:10px">
<el-button size="medium" type="primary">修改资料</el-button>
<el-button size="medium">设置状态</el-button>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card box-card-down">
<div slot="header" class="card-header clearfix">
<el-button
type="text"
class=" card-header-text-button card-header-text-button-selected"
>用户详情</el-button
>
<el-button type="text" class="card-header-text-button"
>播放记录</el-button
>
<el-button type="text" class="card-header-text-button"
>收藏期刊</el-button
>
<el-button type="text" class="card-header-text-button"
>收藏单曲</el-button
>
<el-button type="text" class="card-header-text-button"
>下载记录</el-button
>
<el-button type="text" class="card-header-text-button"
>评论记录</el-button
>
<el-button type="text" class="card-header-text-button"
>登录日志</el-button
>
<el-button type="text" class="card-header-text-button"
>操作日志</el-button
>
<el-button type="text" class="card-header-text-button"
>IM记录</el-button
>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "UserDetail",
components: {},
props: {},
data() {
return {
data: {}
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {}
};
</script>
<style scoped>
.pagination-right {
text-align: right;
margin-top: 10px;
}
.box-card-up {
height: 150px;
}
.box-card-down {
margin-top: 10px;
height: calc(100vh - 300px);
}
.box-card {
min-height: 150px;
/* height: calc(100vh - 140px); */
border-radius: 10px;
.el-card__header {
background-color: rgba(249, 249, 249, 1);
}
}
/deep/ .el-dialog {
border-radius: 5px;
}
.popup-dialog {
.el-dialog__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 50px;
background-color: #f5f5f5f5;
}
.el-dialog__title {
font-size: 15px;
font-weight: bolder;
}
.el-dialog__footer {
border-top: solid;
border-top-width: thin;
border-top-color: rgb(233, 233, 233);
padding: 10px 20px 10px;
}
}
.in-card-form {
height: 60px;
display: flex;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.card-header {
height: 23px;
}
.app-container {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
}
.card-header-text {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
text-align: left;
line-height: 20px;
letter-spacing: normal;
color: #333333;
}
.card-header-text-button {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
text-align: left;
line-height: 31px;
letter-spacing: normal;
color: #333333;
width: 100px;
position: relative;
top: -16px;
text-align: center;
}
.card-header-text-button-selected {
color: rgba(64, 158, 255, 1);
border-bottom: solid;
border-radius: 0px;
border-color: rgba(64, 158, 255, 1);
border-width: 0px 0px 2px 0px;
}
.green-dot,
.red-dot {
position: relative;
padding-left: 15px; /* 调整圆点距离文字的距离 */
}
.green-dot::before,
.red-dot::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 10px; /* 圆点的直径 */
height: 10px;
border-radius: 50%;
display: inline-block;
}
.green-dot::before {
background-color: green;
}
.red-dot::before {
background-color: red;
}
</style>

@ -0,0 +1,266 @@
<!--
* @Author: zhangjiabao
* @Date: 2024-02-01 22:12:08
* @LastEditors: zhangjiabao
* @LastEditTime: 2024-02-02 01:14:57
* @FilePath: \luoo_manage_fe\src\views\user\index.vue
-->
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="card-header clearfix">
<span class="card-header-text">用户管理</span>
</div>
<el-form :inline="true" class="in-card-form">
<el-form-item>
<el-input
size="medium"
style="width: 200px;"
placeholder="用户昵称/ID/手机号码"
></el-input>
</el-form-item>
<el-form-item>
<el-input
size="medium"
style="width: 200px;"
placeholder="用户标识"
></el-input>
</el-form-item>
<el-form-item>
<el-input
size="medium"
style="width: 200px;"
placeholder="用户状态"
></el-input>
</el-form-item>
<el-form-item>
<el-input
size="medium"
style="width: 200px;"
placeholder="在线状态"
></el-input>
</el-form-item>
<el-form-item>
<el-input
size="medium"
style="width: 200px;"
placeholder="在线状态"
></el-input>
</el-form-item>
<el-form-item>
<el-date-picker
placeholder="注册时间"
:editable="false"
:clearable="false"
value-format="yyyy-MM-dd"
size="medium"
style="width: 200px;"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" size="medium"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-refresh-left" size="medium">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="text" icon="el-icon-s-operation">高级筛选</el-button>
</el-form-item>
</el-form>
<el-form :inline="true" class="in-card-form">
<el-form-item>
<el-button
plain
icon="el-icon-error"
type="primary"
size="medium"
@click="callNotFinished"
>停用用户</el-button
>
</el-form-item>
<el-form-item>
<el-button
plain
icon="el-icon-unlock"
type="primary"
size="medium"
@click="callNotFinished"
>启用用户</el-button
>
</el-form-item>
<el-form-item>
<el-button
plain
icon="el-icon-s-tools"
type="primary"
size="medium"
@click="callNotFinished"
>标识设置</el-button
>
</el-form-item>
<el-form-item>
<el-button
plain
icon="el-icon-upload2"
size="medium"
@click="callNotFinished"
>导出数据</el-button
>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table
stripe
ref="userTable"
:data="table.data"
height="calc(100vh - 345px)"
v-loading="table.loading"
element-loading-text="加载中"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
border
fit
@selection-change="handleTableSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="UID" sortable="" prop="id"></el-table-column>
<el-table-column label="用户昵称"></el-table-column>
<el-table-column label="用户标识"></el-table-column>
<el-table-column label="用户状态"></el-table-column>
<el-table-column label="播放记录"></el-table-column>
<el-table-column label="收藏期刊"></el-table-column>
<el-table-column label="收藏单曲"></el-table-column>
<el-table-column label="评论记录"></el-table-column>
<el-table-column label="注册时间"></el-table-column>
<el-table-column label="在线状态"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
plain
icon="el-icon-video-play"
type="primary"
size="mini"
@click="handleDetailClick(scope.row)"
>详情</el-button
>
<el-button plain icon="el-icon-edit" type="primary" size="mini"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
name: "User",
components: {},
props: {},
data() {
return {
queryForm: {
data: {},
lastQuery: {}
},
table: {
loading: false,
selection: [],
data: [{ id: 1 }, { id: 2 }, { id: 3 }],
page: {}
}
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
/**
* 表格多选框
*/
handleTableSelectionChange(val) {
this.table.selection = val;
},
callNotFinished() {
this.$message.info("未开放这个功能");
},
/**
* 表格详情
*/
handleDetailClick(row) {
this.$router.push(`/userManage/detail?id=${row.id}`);
}
}
};
</script>
<style scoped>
.pagination-right {
text-align: right;
margin-top: 10px;
}
.box-card {
min-height: 300px;
height: calc(100vh - 140px);
border-radius: 10px;
.el-card__header {
background-color: rgba(249, 249, 249, 1);
}
}
/deep/ .el-dialog {
border-radius: 5px;
}
.popup-dialog {
.el-dialog__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 50px;
background-color: #f5f5f5f5;
}
.el-dialog__title {
font-size: 15px;
font-weight: bolder;
}
.el-dialog__footer {
border-top: solid;
border-top-width: thin;
border-top-color: rgb(233, 233, 233);
padding: 10px 20px 10px;
}
}
.in-card-form {
height: 60px;
display: flex;
overflow: auto;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.card-header {
height: 23px;
}
.app-container {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
}
.card-header-text {
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
"Microsoft YaHei", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
text-align: left;
line-height: 20px;
letter-spacing: normal;
color: #333333;
}
</style>
Loading…
Cancel
Save