对账管理完成

src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 
 import '@/styles/index.scss' // global css
 

src/router/index.js

@@ -71,11 +71,11 @@ export const constantRoutes = [{
 			}
 		}]
 	},
-	
+
 	{
 		path: '/userManager',
 		component: Layout,
-		redirect: '/user',
+		redirect: '/userManager',
 		children: [{
 			path: 'userManager',
 			name: 'UserManager',
@@ -86,7 +86,37 @@ export const constantRoutes = [{
 			}
 		}]
 	},
-	
+
+	{
+		path: '/counting',
+		component: Layout,
+		redirect: '/counting',
+		children: [{
+			path: 'counting',
+			name: 'Counting',
+			component: () => import('@/views/counting/index'),
+			meta: {
+				title: '财务对账',
+				icon: 'counting'
+			}
+		}]
+	},
+
+	{
+		path: '/serveAC',
+		component: Layout,
+		redirect: '/serveAC',
+		children: [{
+			path: 'serveAC',
+			name: 'ServeAC',
+			component: () => import('@/views/serveAC/index'),
+			meta: {
+				title: '空调管理',
+				icon: 'serveAC'
+			}
+		}]
+	},
+
 	{
 		path: '/example',
 		component: Layout,

src/views/counting/index.vue

@@ -0,0 +1,573 @@
+<template>
+	<div class="app-container">
+		<el-row>
+			<el-col :span="24">
+				<div class="cell">
+					<div class="cell-title">
+						<div class="title-left">
+							<div class="title">财务对账</div>
+							<div class="title-detail">总余额：{{total_balance}}元</div>
+							<div class="title-detail">总消费：{{total_consumption}}元</div>
+							<div class="title-detail">总充值：{{total_recharge}}元</div>
+							<div class="title-detail">总交易笔数：{{total_number}}笔</div>
+						</div>
+						<div class="title-right">
+							<el-button type="primary">导出表单</el-button>
+						</div>
+					</div>
+					<div class="cell-body">
+						<el-form :inline="true" :model="formInline" class="demo-form-inline">
+							<el-form-item label="关键字：">
+								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
+							</el-form-item>
+							<el-form-item>
+								<el-button type="warning" @click="btn_search">查询</el-button>
+							</el-form-item>
+							<el-form-item label="时间筛选：">
+								<el-date-picker v-model="search_datatime" type="datetimerange" align="right"
+									start-placeholder="开始日期" end-placeholder="结束日期"
+									:default-time="['12:00:00', '08:00:00']">
+								</el-date-picker>
+							</el-form-item>
+							<el-form-item label="">
+								<el-select v-model="formInline.category" placeholder="支付状态">
+									<el-option label="学生" value="shanghai"></el-option>
+									<el-option label="教工" value="beijing"></el-option>
+									<el-option label="员工" value="beijing"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="">
+								<el-select v-model="formInline.category" placeholder="操作状态">
+									<el-option label="学生" value="shanghai"></el-option>
+									<el-option label="教工" value="beijing"></el-option>
+									<el-option label="员工" value="beijing"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="">
+								<el-select v-model="formInline.category" placeholder="楼栋">
+									<el-option label="学生" value="shanghai"></el-option>
+									<el-option label="教工" value="beijing"></el-option>
+									<el-option label="员工" value="beijing"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="">
+								<el-select v-model="formInline.category" placeholder="楼层">
+									<el-option label="学生" value="shanghai"></el-option>
+									<el-option label="教工" value="beijing"></el-option>
+									<el-option label="员工" value="beijing"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="">
+								<el-select v-model="formInline.category" placeholder="房间号">
+									<el-option label="学生" value="shanghai"></el-option>
+									<el-option label="教工" value="beijing"></el-option>
+									<el-option label="员工" value="beijing"></el-option>
+								</el-select>
+							</el-form-item>
+						</el-form>
+						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style"
+							:header-cell-style="header_cell_style">
+							<el-table-column label="序号" align="center" width="100">
+								<template slot-scope="scope">
+									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="姓名" align="center" width="100">
+								<template slot-scope="scope">
+									<span>{{ scope.row.name }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="手机" align="center" width="180">
+								<template slot-scope="scope">
+									<span>{{ scope.row.phone }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="操作状态" align="center" width="150">
+								<template slot-scope="scope">
+									<el-button v-if="scope.row.status == '消费'" size="mini" class="btn-cell-blue"
+										@click="recharge(scope.$index, scope.row)">{{scope.row.status}}
+									</el-button>
+									<el-button v-else size="mini" class="btn-cell-black"
+										@click="recharge(scope.$index, scope.row)">{{scope.row.status}}
+									</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column label="到账金额（元）" align="center" width="200">
+								<template slot-scope="scope">
+									<span>{{ scope.row.arrivalAmount }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="账户余额（元）" align="center" width="200">
+								<template slot-scope="scope">
+									<span>{{ scope.row.accountBalance }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="支付状态" align="center" width="150">
+								<template slot-scope="scope">
+									<span v-if="scope.row.payStatus == '支付成功'"
+										class="txt-cell-green">{{ scope.row.payStatus }}</span>
+									<span v-else class="txt-cell-red">{{ scope.row.payStatus }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="交易流水号" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.payNumber }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="支付时间" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.payTime }}</span>
+								</template>
+							</el-table-column>
+						</el-table>
+						<div class="pagination-table">
+							<el-pagination @current-change="currentPageChange"
+								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
+								layout="prev, pager, next, jumper" :total="pagination.total">
+							</el-pagination>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-dialog :title="form.status + '详情'" :visible.sync="dialogFormVisible" @close="dialog_close">
+			<el-form :model="form">
+				<el-form-item label="姓　名：" :label-width="formLabelWidth">
+					<div>{{form.name}}</div>
+				</el-form-item>
+				<el-form-item label="楼　栋：" :label-width="formLabelWidth">
+					<div>{{form.building}}</div>
+				</el-form-item>
+				<el-form-item label="楼　层：" :label-width="formLabelWidth">
+					<div>{{form.floor}}</div>
+				</el-form-item>
+				<el-form-item label="房间号：" :label-width="formLabelWidth">
+					<div>{{form.room}}</div>
+				</el-form-item>
+				<el-form-item label="设　备：" :label-width="formLabelWidth">
+					<div>{{form.device}}</div>
+				</el-form-item>
+			</el-form>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				total_balance: 0.0.toFixed(2),
+				total_consumption: 0.0.toFixed(2),
+				total_recharge: 0.0.toFixed(2),
+				total_number: 0,
+				search_datatime: '',
+				// 弹出对话框数据
+				dialogFormVisible: false,
+				form: {
+					status: '',
+					name: '',
+					building: '',
+					floor: '',
+					room: '',
+					device: ''
+				},
+				formLabelWidth: '120px',
+				// 表格单元格样式
+				cell_style: {
+					color: '#1A202B',
+					'font-size': '16px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表格头部样式
+				header_cell_style: {
+					background: '#E6ECFE',
+					color: '#1A202B',
+					'font-size': '18px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表单数据
+				formInline: {
+					user: '',
+					category: ''
+				},
+				tableData: [{
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '充值',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '充值',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '充值',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '充值',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '充值',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}],
+				// 分页参数
+				pagination: {
+					pageSize: 10,
+					currentPage: 1,
+					total: 100
+				}
+			}
+		},
+		mounted() {
+			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+		},
+		methods: {
+			btn_search() {
+				console.log('查询');
+			},
+			// 对话框初始化
+			recharge(index, row) {
+				// console.log(index, row);
+				this.dialogFormVisible = true
+				this.form.status = row.status
+				this.form.name = row.name
+				this.form.building = row.building
+				this.form.floor = row.floor
+				this.form.room = row.room
+				this.form.device = row.device
+			},
+			// currentPage 改变时会触发
+			currentPageChange(val) {
+				console.log('当前页:' + val);
+			},
+			// 对话框关闭时清理数据
+			dialog_close() {
+				this.form = {}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.app-container {
+		background-color: #EFF2F7;
+		padding: 10px;
+
+		.el-row {
+
+			.el-col {
+				padding: 10px;
+			}
+
+			.cell {
+				padding: 30px;
+				border-radius: 10px;
+				background-color: #FFFFFF;
+
+				.cell-title {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 30px;
+					padding-bottom: 30px;
+					border-bottom: 1px solid #CCCCCC;
+
+					.title-left {
+						display: flex;
+						align-items: center;
+
+						.title {
+							font-size: 22px;
+							font-family: Microsoft YaHei-3970(82674968);
+							font-weight: bold;
+							color: #1A202B;
+						}
+
+						.title-detail {
+							margin-left: 50px;
+							font-size: 18px;
+							font-family: Microsoft YaHei-3970(82674968);
+							color: #1A202B;
+						}
+					}
+
+					.title-right {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+
+						.el-button {
+							width: 110px;
+							height: 46px;
+							background: #2B4CFE;
+							font-size: 18px;
+							color: #FFFFFF;
+							font-family: Microsoft YaHei-3970(82674968);
+							border-radius: 5px;
+						}
+
+						.el-button--warning {
+							background: #F88A64;
+						}
+					}
+				}
+
+				.cell-body {
+
+					.el-form {
+						display: flex;
+						flex-wrap: wrap;
+						align-items: center;
+
+						.el-button--warning {
+							background: #F88A64;
+						}
+
+						.el-date-editor--datetimerange {
+							padding: 3px 8px;
+							width: 370px;
+						}
+
+						.el-select {
+							width: 130px;
+						}
+					}
+
+					.btn-cell-blue {
+						color: #2B4CFE;
+						border: none;
+						font-size: 18px;
+					}
+
+					.btn-cell-black {
+						color: #53575A;
+						border: none;
+						font-size: 18px;
+					}
+
+					.txt-cell-green {
+						color: #67C23A;
+					}
+
+					.txt-cell-red {
+						margin: 0;
+						display: inline-block;
+						background: #F56C6C;
+						color: #FFFFFF;
+						padding: 5px 10px;
+						border-radius: 20px;
+						font-size: 16px;
+					}
+
+					.pagination-table {
+						display: flex;
+						justify-content: flex-end;
+						align-items: center;
+						height: 30px;
+						margin-top: 20px;
+						padding-right: 100px;
+
+						::v-deep .el-pagination {
+							display: flex;
+							justify-content: flex-end;
+							align-items: center;
+						}
+
+						::v-deep .el-pagination ul {
+							display: flex;
+
+						}
+
+						::v-deep .el-pagination button,
+						::v-deep .el-pagination li {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							width: 50px;
+							height: 36px;
+							border: 1px solid #626262;
+							border-radius: 3px;
+							font-size: 14px;
+							margin: 0 5px;
+						}
+
+						::v-deep .el-pagination span {
+							margin-left: 10px;
+						}
+
+						::v-deep .el-pagination .el-pagination__jump {
+							font-size: 16px;
+						}
+
+						::v-deep .el-pagination .el-pagination__editor {
+							width: 50px;
+							height: 36px;
+							margin: 0 5px;
+						}
+
+						::v-deep .el-pagination .el-input__inner {
+							width: 50px;
+							height: 36px;
+							border: 1px solid #626262;
+							margin: -4px 0 0 0;
+						}
+					}
+				}
+			}
+		}
+
+		::v-deep .el-dialog {
+			margin: 0 !important;
+			width: 400px;
+			height: 320px;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
+			border-radius: 10px;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			.el-dialog__header {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 58px;
+				padding: 30px;
+				background: #E6EBFE;
+				border-radius: 10px 10px 0px 0px;
+				font-weight: bold;
+			}
+
+			.el-dialog__body {
+				padding-bottom: 0;
+
+				.el-form-item {
+					margin-bottom: 0;
+
+					.el-form-item__label,
+					.el-form-item__content {
+						font-size: 16px;
+						font-family: Microsoft YaHei-3970(82674968);
+						color: #53575A;
+					}
+
+					.el-input__inner {
+						width: 100px;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/login/index.vue

@@ -1,41 +1,44 @@
 <template>
 	<div class="login-container">
-		<div id="login_form">
-			<div class="title-container">
-				<div id="logo"></div>
-				<div id="title">共享空调运营管理平台</div>
+		<div class="form-container">
+			<div id="login_form">
+				<div class="title-container">
+					<div id="logo"></div>
+					<div id="title">共享空调运营管理平台</div>
+				</div>
+				<div id="caption">登录</div>
+				<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+					label-position="left">
+
+
+					<el-form-item prop="username">
+						<span class="svg-container">
+							<svg-icon icon-class="login_home" />
+						</span>
+						<el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username"
+							type="text" tabindex="1" auto-complete="off" />
+					</el-form-item>
+
+					<el-form-item prop="password">
+						<span class="svg-container">
+							<svg-icon icon-class="password" />
+						</span>
+						<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
+							placeholder="请输入密码" name="password" tabindex="2" auto-complete="off"
+							@keyup.enter.native="handleLogin" />
+						<span class="show-pwd" @click="showPwd">
+							<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+						</span>
+					</el-form-item>
+
+					<el-button :loading="loading" type="primary" class="btn_submit" @click.native.prevent="handleLogin">
+						登录
+					</el-button>
+
+					<el-link type="primary" class="btn_link" :underline="false" href="#">修改密码</el-link>
+
+				</el-form>
 			</div>
-			<div id="caption">登录</div>
-			<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-				label-position="left">
-
-
-				<el-form-item prop="username">
-					<span class="svg-container">
-						<svg-icon icon-class="login_home" />
-					</span>
-					<el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username"
-						type="text" tabindex="1" auto-complete="off" />
-				</el-form-item>
-
-				<el-form-item prop="password">
-					<span class="svg-container">
-						<svg-icon icon-class="password" />
-					</span>
-					<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-						placeholder="请输入密码" name="password" tabindex="2" auto-complete="off"
-						@keyup.enter.native="handleLogin" />
-					<span class="show-pwd" @click="showPwd">
-						<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-					</span>
-				</el-form-item>
-
-				<el-button :loading="loading" type="primary" class="btn_submit" @click.native.prevent="handleLogin">登录
-				</el-button>
-
-				<el-link type="primary" class="btn_link" :underline="false" href="#">修改密码</el-link>
-
-			</el-form>
 		</div>
 	</div>
 </template>
@@ -171,89 +174,96 @@
 	html,
 	body,
 	.login-container {
-		width: 100vw;
-		height: 100vh;
-		min-width: 1780px;
-		min-height: 900px;
-		background: url('../../icons/images/login/login_bg.png') no-repeat;
-		background-size: 100% 100%;
-		margin-bottom: 0;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
+		background: url(../../icons/images/login/login_bg.png) no-repeat;
+		background-size: 100% 100%;
+		width: 100vw;
+		height: 100vh;
+		margin-bottom: 0;
 
-		#login_form {
+		.form-container {
 			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
+			justify-content: flex-end;
 			align-items: center;
-			width: 600px;
-			height: 500px;
-			position: absolute;
-			left: 980px;
-			top: 160px;
+			margin: 0 auto;
+			width: 1220px;
+			height: 650px;
+			background: url(../../icons/images/login/login_form_bg.png) no-repeat;
+			background-size: 100% 100%;
 
-			.title-container {
+			#login_form {
 				display: flex;
-				justify-content: space-between;
+				flex-direction: column;
+				justify-content: space-around;
 				align-items: center;
-				width: 500px;
+				width: 640px;
+				height: 500px;
+
+
+				.title-container {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					width: 500px;
+
+					#logo {
+						width: 63px;
+						height: 63px;
+						background: url('../../icons/images/login/logo_login.png') 0 0 no-repeat;
+						background-size: 63px 63px;
+					}
 
-				#logo {
-					width: 63px;
-					height: 63px;
-					background: url('../../icons/images/login/logo_login.png') 0 0 no-repeat;
-					background-size: 63px 63px;
+					#title {
+						font-size: 42px;
+						font-family: Microsoft YaHei-3970(82674968);
+						font-weight: bold;
+						color: #2B4CFE;
+					}
 				}
 
-				#title {
-					font-size: 42px;
-					font-family: Microsoft YaHei-3970(82674968);
+				#caption {
+					display: flex;
+					justify-content: center;
+					font-size: 30px;
+					font-family: Adobe Heiti Std;
 					font-weight: bold;
 					color: #2B4CFE;
+					margin-top: 60px;
 				}
-			}
-
-			#caption {
-				display: flex;
-				justify-content: center;
-				font-size: 30px;
-				font-family: Adobe Heiti Std;
-				font-weight: bold;
-				color: #2B4CFE;
-				margin-top: 60px;
-			}
 
-			.login-form {
-				width: 500px;
-				max-width: 100%;
-				padding: 0 35px;
-				margin: 0 auto;
-				overflow: hidden;
-
-				.svg-container {
-					margin-top: -100px;
-					font-size: 22px;
-					color: $dark_gray;
-					display: inline-block;
-				}
+				.login-form {
+					width: 500px;
+					max-width: 100%;
+					padding: 0 35px;
+					margin: 0 auto;
+					overflow: hidden;
+
+					.svg-container {
+						margin-top: -100px;
+						font-size: 22px;
+						color: $dark_gray;
+						display: inline-block;
+					}
 
-				.btn_submit {
-					width: 100%;
-					height: 74px;
-					background: #2B4CFE;
-					border-radius: 37px;
-					font-size: 22px;
-					margin-top: 10px;
-				}
+					.btn_submit {
+						width: 100%;
+						height: 74px;
+						background: #2B4CFE;
+						border-radius: 37px;
+						font-size: 22px;
+						margin-top: 10px;
+					}
 
-				.btn_link {
-					width: 100%;
-					margin-top: 10px;
-					font-size: 20px;
-					font-family: Microsoft YaHei-3970(82674968);
-					font-weight: 400;
-					color: #2B4CFE;
+					.btn_link {
+						width: 100%;
+						margin-top: 10px;
+						font-size: 20px;
+						font-family: Microsoft YaHei-3970(82674968);
+						font-weight: 400;
+						color: #2B4CFE;
+					}
 				}
 			}
 		}

src/views/serveAC/index.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		
+	}
+</script>
+
+<style scoped>
+
+</style>

src/views/user/index.vue

@@ -16,7 +16,7 @@
 								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
 							</el-form-item>
 							<el-form-item>
-								<el-button type="warning" @click="onSubmit">查询</el-button>
+								<el-button type="warning" @click="btn_search">查询</el-button>
 							</el-form-item>
 							<el-form-item label="">
 								<el-select v-model="formInline.category" placeholder="类别">
@@ -30,62 +30,82 @@
 							:header-cell-style="header_cell_style">
 							<el-table-column label="序号" align="center" width="100">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{scope.$index + 1}}</span>
+									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="姓名" align="center" width="100">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.name }}</span>
+									<span>{{ scope.row.name }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="手机" align="center" width="180">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.phone }}</span>
+									<span>{{ scope.row.phone }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="身份证" align="center">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.identityCard }}</span>
+									<span>{{ scope.row.identityCard }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="类别" align="center" width="100">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.category }}</span>
+									<span>{{ scope.row.category }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="年级" align="center" width="100">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.grade }}</span>
+									<span>{{ scope.row.grade }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="账户余额（元）" align="center" width="180">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.accountBalance }}</span>
+									<span>{{ scope.row.accountBalance }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="备注" align="center">
 								<template slot-scope="scope">
-									<span style="margin-left: 10px">{{ scope.row.comment }}</span>
+									<span>{{ scope.row.comment }}</span>
 								</template>
 							</el-table-column>
 							<el-table-column label="操作" align="center">
 								<template slot-scope="scope">
-									<el-button size="mini" class="btn-table"
-										@click="handleEdit(scope.$index, scope.row)">充值</el-button>
+									<el-button size="mini" class="btn-table" @click="recharge(scope.$index, scope.row)">
+										充值</el-button>
 								</template>
 							</el-table-column>
 						</el-table>
 						<div class="pagination-table">
-							<el-pagination @current-change="handleCurrentChange"
+							<el-pagination @current-change="currentPageChange"
 								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
 								layout="prev, pager, next, jumper" :total="pagination.total">
 							</el-pagination>
-							<div class="ye">页</div>
 						</div>
 					</div>
 				</div>
 			</el-col>
 		</el-row>
+		<el-dialog title="充值" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
+			:close-on-press-escape="false" @close="dialog_close">
+			<el-form :model="form">
+				<el-form-item label="充值账号：" :label-width="formLabelWidth">
+					<div>{{form.account}}</div>
+				</el-form-item>
+				<el-form-item label="姓　　名：" :label-width="formLabelWidth">
+					<div>{{form.name}}</div>
+				</el-form-item>
+				<el-form-item label="充值金额：" :label-width="formLabelWidth" :required="true">
+					<el-input v-model="form.amount" autocomplete="off"></el-input>
+				</el-form-item>
+				<el-form-item label="备　　注：" :label-width="formLabelWidth">
+					<el-input type="textarea" v-model="form.desc"></el-input>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="dialogFormVisible = false">取 消</el-button>
+				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
@@ -93,6 +113,15 @@
 	export default {
 		data() {
 			return {
+				// 弹出对话框数据
+				dialogFormVisible: false,
+				form: {
+					account: '',
+					name: '',
+					amount: '',
+					desc: ''
+				},
+				formLabelWidth: '120px',
 				// 表格单元格样式
 				cell_style: {
 					color: '#1A202B',
@@ -212,12 +241,24 @@
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
-			handleEdit(index, row) {
-				console.log(index, row);
+			btn_search() {
+				console.log('查询');
+			},
+			// 充值对话框初始化
+			recharge(index, row) {
+				// console.log(index, row);
+				this.dialogFormVisible = true
+				this.form.account = row.identityCard
+				this.form.name = row.name
+				this.form.desc = row.comment
 			},
 			// currentPage 改变时会触发
-			handleCurrentChange(val) {
-				console.log(`当前页: ${val}`);
+			currentPageChange(val) {
+				console.log('当前页:' + val);
+			},
+			// 对话框关闭时清理数据
+			dialog_close() {
+				this.form = {}
 			}
 		}
 	}
@@ -295,29 +336,118 @@
 						margin-top: 20px;
 						padding-right: 100px;
 
+						::v-deep .el-pagination {
+							display: flex;
+							justify-content: flex-end;
+							align-items: center;
+						}
+
+						::v-deep .el-pagination ul {
+							display: flex;
+
+						}
+
 						::v-deep .el-pagination button,
 						::v-deep .el-pagination li {
-							width: 33px;
-							height: 33px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							width: 50px;
+							height: 36px;
 							border: 1px solid #626262;
 							border-radius: 3px;
 							font-size: 14px;
-							margin: 5px;
+							margin: 0 5px;
 						}
 
 						::v-deep .el-pagination span {
 							margin-left: 10px;
-							padding-top: 8px;
-							font-size: 14px;
 						}
 
-						.ye {
-							font-size: 15px;
-							color: #808080;
+						::v-deep .el-pagination .el-pagination__jump {
+							font-size: 16px;
+						}
+
+						::v-deep .el-pagination .el-pagination__editor {
+							width: 50px;
+							height: 36px;
+							margin: 0 5px;
+						}
+
+						::v-deep .el-pagination .el-input__inner {
+							width: 50px;
+							height: 36px;
+							border: 1px solid #626262;
+							margin: -4px 0 0 0;
 						}
 					}
 				}
 			}
 		}
+
+		::v-deep .el-dialog {
+			margin: 0 !important;
+			width: 600px;
+			height: 460px;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
+			border-radius: 10px;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			.el-dialog__header {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 58px;
+				padding: 30px;
+				background: #E6EBFE;
+				border-radius: 10px 10px 0px 0px;
+				font-weight: bold;
+			}
+
+			.el-dialog__body {
+				padding-bottom: 0;
+
+				.el-form-item__label,
+				.el-form-item__content {
+					font-size: 16px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #53575A;
+				}
+
+				.el-input__inner {
+					width: 100px;
+				}
+			}
+
+			.el-dialog__footer {
+				padding-bottom: 0 !important;
+				text-align: center;
+
+				.el-button.el-button--default {
+					width: 75px;
+					height: 40px;
+					border: 1px solid #2B4CFE;
+					border-radius: 6px;
+					font-size: 16px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #2B4CFE;
+				}
+
+				.el-button.el-button--primary {
+					width: 75px;
+					height: 40px;
+					background: #2B4CFE;
+					border-radius: 6px;
+					font-size: 16px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #FFFFFF;
+					margin-left: 60px;
+				}
+			}
+		}
 	}
 </style>