0110
parent
bd90d119b8
commit
642f11b1bb
63
src/App.vue
63
src/App.vue
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,14 +7,55 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
* {
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
p{
|
outline: none;
|
||||||
margin: 0px;
|
}
|
||||||
}
|
body {
|
||||||
a{
|
-webkit-font-smoothing: antialiased;
|
||||||
text-decoration: none;
|
background-color: #FFFFFF;
|
||||||
}
|
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||||
*{outline: none;}
|
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>
|
</style>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 529 B |
|
|
@ -1,108 +1,114 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="../assets/logo.png" alt="" />
|
<img src="../assets/logo.png" alt="" />
|
||||||
<div>
|
<div>
|
||||||
<p>巴音孟克</p>
|
<p>巴音孟克</p>
|
||||||
<p>火眼识才系统</p>
|
<p>火眼识才系统</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<img src="" alt="" />
|
<img src="" alt="" />
|
||||||
<p><span>用户名：</span><span>Loretta</span></p>
|
<p><span>用户名：</span><span>Loretta</span></p>
|
||||||
</div>
|
</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">
|
<div>
|
||||||
<router-link class="navigationList" to="/foo"
|
<div class="navigationList">
|
||||||
><img src="../assets/user.png" alt="" />
|
<img src="../assets/zhanghu.png" alt="" />
|
||||||
<p>用户管理</p>
|
<p>账户管理</p>
|
||||||
</router-link>
|
<img src="" alt="">
|
||||||
<router-link class="navigationList" to="/projectManagement"
|
</div>
|
||||||
><img src="../assets/xiangmu.png" alt="" />
|
</div>
|
||||||
<p>项目管理</p>
|
</div>
|
||||||
</router-link>
|
</div>
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="navigationList">
|
|
||||||
<img src="../assets/zhanghu.png" alt="" />
|
|
||||||
<p>账户管理</p>
|
|
||||||
<img src="" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
msg: String,
|
msg: String,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.nav {
|
.nav {
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
|
background: linear-gradient(126deg, #0d338a 0%, #0d338a 0%, #2884d3 100%);
|
||||||
border-radius: 0px 30px 30px 0px;
|
border-radius: 0px 30px 30px 0px;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
box-sizing: border-box;
|
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;
|
|
||||||
|
|
||||||
display: flex;
|
.logo {
|
||||||
align-items: center;
|
display: flex;
|
||||||
padding-left: 40px;
|
align-items: flex-end;
|
||||||
background: rgba(255, 255, 255, 0.15);
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.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;
|
.logo div {
|
||||||
margin-left: 20px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import {
|
||||||
} from 'vue-router'
|
} from 'vue-router'
|
||||||
import login from '../view/login.vue'
|
import login from '../view/login.vue'
|
||||||
import index from '../view/index.vue'
|
import index from '../view/index.vue'
|
||||||
|
import consumer from '../view/consumer.vue'
|
||||||
import projectManagement from '../view/projectManagement.vue'
|
import projectManagement from '../view/projectManagement.vue'
|
||||||
//配置路由
|
//配置路由
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
@ -21,6 +22,11 @@ const router = createRouter({
|
||||||
name: 'index',
|
name: 'index',
|
||||||
component: index
|
component: index
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/consumer', //
|
||||||
|
name: 'consumer',
|
||||||
|
component: consumer
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/projectManagement', //
|
path: '/projectManagement', //
|
||||||
name: 'projectManagement',
|
name: 'projectManagement',
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue