master
Lee-1203 2022-01-10 18:46:42 +08:00
parent bd90d119b8
commit 642f11b1bb
5 changed files with 341 additions and 107 deletions

View File

@ -1,5 +1,5 @@
<template>
<router-view></router-view>
<router-view></router-view>
</template>
<script>
@ -7,14 +7,55 @@
</script>
<style>
body{
margin: 0px;
}
p{
margin: 0px;
}
a{
text-decoration: none;
}
*{outline: none;}
* {
margin: 0;
padding: 0;
outline: none;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #FFFFFF;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #8E8E8E;
}
a {
text-decoration: none;
}
ul,ol,li {
list-style: none;
}
textarea {
resize: none;
}
/* 清楚浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
/* 右侧公共标题 */
.pull-title{
height: 43px;
border-bottom: 1px solid #E4EAEE;
}
.title-item{
display: flex;
}
.title-item li{
padding: 0 22px;
font-size: 16px;
color: #454D67;
line-height: 42px;
border-bottom: 1px solid #E4EAEE;
}
.title-item li.cur{
border-bottom: 1px solid #0544A4;
}
</style>

BIN
src/assets/search-btn.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 529 B

View File

@ -1,108 +1,114 @@
<template>
<div class="nav">
<div class="logo">
<img src="../assets/logo.png" alt="" />
<div>
<p>巴音孟克</p>
<p>火眼识才系统</p>
</div>
</div>
<div class="user">
<img src="" alt="" />
<p><span>用户名</span><span>Loretta</span></p>
</div>
<div class="nav">
<div class="logo">
<img src="../assets/logo.png" alt="" />
<div>
<p>巴音孟克</p>
<p>火眼识才系统</p>
</div>
</div>
<div class="user">
<img src="" alt="" />
<p><span>用户名</span><span>Loretta</span></p>
</div>
<div class="navigation">
<router-link class="navigationList" to="/consumer"><img src="../assets/user.png" alt="" />
<p>用户管理</p>
</router-link>
<router-link class="navigationList" to="/projectManagement"><img src="../assets/xiangmu.png" alt="" />
<p>项目管理</p>
</router-link>
<div class="navigation">
<router-link class="navigationList" to="/foo"
><img src="../assets/user.png" alt="" />
<p>用户管理</p>
</router-link>
<router-link class="navigationList" to="/projectManagement"
><img src="../assets/xiangmu.png" alt="" />
<p>项目管理</p>
</router-link>
<div>
<div class="navigationList">
<img src="../assets/zhanghu.png" alt="" />
<p>账户管理</p>
<img src="" alt="">
</div>
</div>
</div>
</div>
<div>
<div class="navigationList">
<img src="../assets/zhanghu.png" alt="" />
<p>账户管理</p>
<img src="" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
msg: String,
},
};
export default {
props: {
msg: String,
},
};
</script>
<style scoped>
.nav {
width: 260px;
height: 100vh;
background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
border-radius: 0px 30px 30px 0px;
padding-top: 30px;
box-sizing: border-box;
}
.logo {
display: flex;
align-items: flex-end;
justify-content: center;
}
.logo div {
margin-left: 17px;
}
.logo div p {
font-size: 22px;
font-family: PangMenZhengDao;
color: #ffffff;
letter-spacing: 3px;
text-align: center;
}
.user {
width: 260px;
height: 50px;
margin-top: 40px;
.nav {
width: 260px;
height: 100vh;
background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
border-radius: 0px 30px 30px 0px;
padding-top: 30px;
box-sizing: border-box;
}
display: flex;
align-items: center;
padding-left: 40px;
background: rgba(255, 255, 255, 0.15);
}
.user img {
width: 36px;
border-radius: 50%;
margin-right: 31px;
height: 36px;
}
.user p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.navigation {
margin-top: 58px;
}
.navigationList{
display: flex;
margin-bottom: 42px;
justify-content: center;
}
.navigationList p{
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
.logo {
display: flex;
align-items: flex-end;
justify-content: center;
}
line-height: 25px;
margin-left: 20px;
}
.logo div {
margin-left: 17px;
}
.logo div p {
font-size: 22px;
font-family: PangMenZhengDao;
color: #ffffff;
letter-spacing: 3px;
text-align: center;
}
.user {
width: 260px;
height: 50px;
margin-top: 40px;
display: flex;
align-items: center;
padding-left: 40px;
background: rgba(255, 255, 255, 0.15);
}
.user img {
width: 36px;
border-radius: 50%;
margin-right: 31px;
height: 36px;
}
.user p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.navigation {
margin-top: 58px;
}
.navigationList {
display: flex;
margin-bottom: 42px;
justify-content: center;
}
.navigationList p {
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 25px;
margin-left: 20px;
}
</style>

View File

@ -7,6 +7,7 @@ import {
} from 'vue-router'
import login from '../view/login.vue'
import index from '../view/index.vue'
import consumer from '../view/consumer.vue'
import projectManagement from '../view/projectManagement.vue'
//配置路由
const router = createRouter({
@ -21,6 +22,11 @@ const router = createRouter({
name: 'index',
component: index
},
{
path: '/consumer', //
name: 'consumer',
component: consumer
},
{
path: '/projectManagement', //
name: 'projectManagement',

181
src/view/consumer.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<div class="disFlex">
<NavLeft />
<div class="consumer">
<div class="pull-title">
<ul class="title-item">
<li class="cur">用户管理</li>
</ul>
</div>
<div class="consumer-seach">
<ul class="consumer-seach-item">
<li>
<el-input v-model="input" placeholder="请输入手机号" class="input-with-select" style="width: 340px;">
<template #prepend>
<el-select v-model="select" placeholder="手机号" style="width: 88px;">
<el-option label="手机号" value="1"></el-option>
<el-option label="微信号" value="2"></el-option>
<el-option label="钉钉号" value="3"></el-option>
</el-select>
</template>
</el-input>
</li>
<li>
<el-date-picker v-model="value" type="date" placeholder="请选择注册时间" style="width: 340px;">
</el-date-picker>
</li>
<el-button class="seach-btn" @click="queryConsumer()"><img src="../assets/search-btn.png" alt="">查询
</el-button>
</ul>
</div>
<div class="consumer-list">
<el-table :data="tableData" style="width: 100%;">
<el-table-column align="center" prop="name" label="用户姓名" />
<el-table-column align="center" prop="phone" label="手机号" />
<el-table-column align="center" prop="wxMiniShowname" label="微信" />
<el-table-column align="center" prop="dingdingShowname" label="钉钉" />
<el-table-column align="center" prop="createTime" label="注册时间" />
<el-table-column align="center" label="操作">
<el-button type="text" size="small" @click="handleClick"></el-button>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="consumer-pagination">
<el-pagination background v-model:currentPage="currentPage3" :page-size="100"
layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import NavLeft from "../components/nav.vue";
export default {
components: {
NavLeft,
},
props: {
msg: String,
},
data() {
return {
input: '',
select: '',
value: '',
tableData: [],
consumerData: {
current: 1,
keyword: "",
type: "",
size: 10
},
};
},
mounted() {
//
this.getConsumer();
},
methods: {
//
newDate(data) {
let yy = new Date(data).getFullYear();
let mm = new Date(data).getMonth() + 1;
let dd = new Date(data).getDate();
return yy + "-" + mm + "-" + "-" + dd;
},
//
queryConsumer() {
this.consumerData.startTime = this.keyword;
this.getConsumer();
},
//
getConsumer() {
let param = new URLSearchParams();
param.append("current", this.consumerData.current);
param.append("keyword", this.consumerData.keyword);
param.append("size", this.consumerData.size);
param.append("type", this.consumerData.type);
let that = this;
this.axios
.get("/hysc/member/getMemberPage", {
params: param
})
.then(function(response) {
console.log(response.data);
that.tableData = response.data.data.records;
})
.catch(function(error) {
console.log(error);
});
}
}
};
</script>
<style scoped>
.disFlex {
display: flex;
}
.consumer {
width: calc(100% - 260px);
padding: 50px 60px;
}
/* 搜索 */
.consumer-seach {
margin: 60px 0 50px;
}
.consumer-seach-item {
display: flex;
}
.consumer-seach-item li {
margin-right: 10px;
}
.consumer-seach-item>>>.el-input__inner {
height: 40px;
}
.consumer-seach-item .seach-btn,
.consumer-seach-item .seach-btn:hover {
width: 90px;
height: 40px;
background-color: #0544A4;
color: #FFFFFF;
border: 0;
}
.consumer-seach-item .seach-btn img {
height: 18px;
margin-right: 8px;
font-size: 15px;
}
/* 列表 */
.consumer-list>>>.el-table .cell{
padding: 0;
}
/* 分页 */
.consumer-pagination {
display: flex;
justify-content: flex-end;
margin-top: 120px;
}
.consumer-pagination>>>.el-pager li {
color: #666666;
font-weight: normal;
}
.consumer-pagination>>>.el-input__inner {
width: 48px;
}
.consumer-pagination>>>.el-pagination__jump {
margin-left: 0;
}
</style>