待对接口

src/components/tuikuan/tuikuan.css

@@ -0,0 +1,346 @@
+/* congzhijilu */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.item {
+	margin: 0 28px 0 0;
+}
+
+.green_txt {
+	font-size: 26px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #009900;
+	padding: 0 5px 0 0;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+.tag {
+	width: 108px;
+	height: 40px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #000000;
+	line-height: 54px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 106px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 300px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.zhuangtai>>>.el-input__inner {
+	font-size: 20px;
+	width: 150px;
+	border: 1px solid #4D4D4D;
+}
+
+.el-button {
+	margin: 0 0 0 0;
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+.third-row>>>.el-table td {
+	padding: 10px 0;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	padding: 0;
+	margin: 0;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 60px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.riqi>>>.el-input__inner {
+	border: 1px solid #626262;
+	width: 280px;
+}
+
+.riqi>>>.el-range-input,
+.riqi>>>.el-range__icon {
+	font-size: 18px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	height: 46px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 46px;
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 66px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.red_font {
+	padding: 0 5px;
+	color: #e30000;
+	border: 1px solid #e30000;
+	cursor: pointer;
+	font-size: 18px;
+	background-color: #fff;
+}
+
+.green_font {
+	padding: 0 5px;
+	color: #00d400;
+	border: 1px solid #00d400;
+	cursor: pointer;
+	font-size: 18px;
+	background-color: #fff;
+}
+
+.desc {
+	display: flex;
+	font-size: 18px;
+}
+
+.desc .lab {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	height: 60px;
+	width: 120px;
+}
+
+.desc .con {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 60px;
+}
+
+/* 印章 */
+.seal-result {
+	width: 160px;
+	height: 160px;
+	line-height: 160px;
+	transform: rotate(30deg);
+	border: solid 8px rgba(0, 120, 0, 0.5);
+	border-radius: 100%;
+	text-align: center;
+	font-size: 38px;
+	font-weight: bold;
+	right: 130px;
+	bottom: 40px;
+	position: absolute;
+	color: rgba(0, 120, 0, 0.5);
+	background-color: rgba(255, 255, 255, 0.3)
+}
+
+.seal-result-fail {
+	border-color: rgba(222, 0, 0, 0.5);
+	color: rgba(222, 0, 0, 0.5);
+}

src/components/tuikuan/tuikuan.vue

@@ -0,0 +1,459 @@
+<template>
+	<div>
+		<el-row>
+			<el-col :span="24" class="first-row">
+				<div class="tag">充值记录</div>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="second-row">
+				<el-form :inline="true" class="demo-form-inline">
+					<el-form-item label="" class="riqi">
+						<el-date-picker v-model="select_datetime" type="daterange" range-separator="至"
+							@change="dateChange" start-placeholder="开始日期" end-placeholder="结束日期"
+							value-format="yyyy-MM-dd">
+						</el-date-picker>
+					</el-form-item>
+					<el-form-item label="" class="shuibiaoId">
+						<el-input v-model="searchformUser" clearable placeholder="请输入户号/联系人/手机号"></el-input>
+					</el-form-item>
+					<el-form-item label="" class="zhuangtai">
+						<el-select v-model="selectItem.value" clearable placeholder="支付状态" @change="getItem">
+							<el-option v-for="item in options" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" icon="el-icon-document" @click="onExport">导出</el-button>
+					</el-form-item>
+				</el-form>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24">
+				<div class="">
+					<span class="item">总计：<span class="green_txt">{{ amount }}</span>元</span> <span
+						class="item">总交易笔数：<span class="green_txt">{{ total_times }}</span>笔</span> <span
+						class="item">次均额：<span class="green_txt">{{ avg }}</span>元</span>
+				</div>
+			</el-col>
+		</el-row>
+		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
+		<el-row>
+			<el-col :span="24" class="third-row">
+				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
+					highlight-current-row>
+					<el-table-column align="center" label="序号" type="index" :index="indexMethod" width="100px">
+					</el-table-column>
+					<el-table-column align="center" label="户号">
+						<template slot-scope="scope">{{ scope.row.card_number }}</template>
+					</el-table-column>
+					<el-table-column prop="user_name" label="联系人" align="center"></el-table-column>
+					<el-table-column prop="order_num" label="交易流水号" align="center"></el-table-column>
+					<el-table-column prop="balance" label="充值前余额" align="center" :formatter="formatBalance">
+					</el-table-column>
+					<el-table-column prop="account" label="支付余额（元）" align="center" :formatter="formatBalance"
+						show-overflow-tooltip></el-table-column>
+					<!-- <el-table-column prop="account" label="到账余额（元）" align="center" :formatter="formatBalance"
+						show-overflow-tooltip></el-table-column> -->
+					<el-table-column label="支付状态" align="center">
+						<template slot-scope="scope">
+							<el-tag class="green_font" v-if="scope.row.pay_state == 2" type="text"
+								@click="handleShowDialog(scope.$index, scope.row)">
+								已到账
+							</el-tag>
+							<el-tag class="red_font" v-else-if="scope.row.pay_state == 1" type="text"
+								@click="handleShowDialog(scope.$index, scope.row)">
+								未到账
+							</el-tag>
+							<el-tag class="red_font" v-else="scope.row.pay_state == 0" type="text"
+								@click="handleShowDialog(scope.$index, scope.row)">
+								未支付
+							</el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column prop="re_time" label="支付时间" align="center" width="200px"></el-table-column>
+				</el-table>
+				<div style="margin-top: 20px" class="table-footer">
+					<div class="pages">
+						<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
+							:hide-on-single-page="true" :page-size="pageRows" :total="rows_total"
+							@current-change="handleCurrentChange"></el-pagination>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="forth-row">
+				<!-- 支付状态对话框 -->
+				<el-dialog title="支付状态" :visible.sync="viewdialogFormVisible" :close-on-click-modal="false"
+					:close-on-press-escape="false" width="500px" top="0vh" class="my-dialog">
+					<hr
+						style="width:100%; position:absolute; top:60px; left:0px; background-color:#CCCCCC; height:1px; border:0;">
+					<div class="desc">
+						<span class="lab">联系人：</span>
+						<span class="con">{{ showOrderStatus.userName }}</span>
+					</div>
+					<div class="desc">
+						<span class="lab">支付情况：</span>
+						<span class="con">{{ showOrderStatus.orderState }}</span>
+					</div>
+					<div class="desc">
+						<span class="lab">现账户余额：</span>
+						<span class="con">{{ showOrderStatus.balance }}</span>
+					</div>
+					<span class="seal-result" v-if="showOrderStatus.result == 0">已支付</span>
+					<span class="seal-result seal-result-fail" v-else-if="showOrderStatus.result == 1">未支付</span>
+					<span v-else="showOrderStatus.result == -1"></span>
+				</el-dialog>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				amount: 0.0.toFixed(2),
+				total_times: 0,
+				avg: 0.0.toFixed(2),
+				select_datetime: [],
+				startTime: '',
+				endTime: '',
+				options: [{
+					value: 2,
+					label: '已到账'
+				}, {
+					value: 1,
+					label: '未到账'
+				}, {
+					value: 0,
+					label: '未支付'
+				}],
+				selectItem: {
+					value: '',
+					label: ''
+				},
+				searchformUser: '', // 查找的姓名
+				select_month: '', // 选择的月份
+				// 余额列表
+				tableData: [], // 余额列表
+				rows_total: 0, // 余额列表总记录数
+				currentPage: 1, // 余额列表当前页
+				pageRows: 8, // 每页记录数
+				viewdialogFormVisible: false,
+				showOrderStatus: {
+					userName: '',
+					orderState: '',
+					balance: 0,
+					result: -1
+				}
+			}
+		},
+		created() {
+			// 获取总金额
+			// this.get_total_amount()
+			// 获取余额列表
+			let params = {
+				page: this.currentPage,
+				rows: this.pageRows
+			}
+
+			// 初始化日期为今天天 至 明天
+			this.initDate()
+		},
+		methods: {
+			/**
+			 * 订单详情
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			handleShowDialog(index, row) {
+				// console.log(index, row)
+				// 显示支付状态对话框
+				this.viewdialogFormVisible = true
+
+				// 获取订单状态
+				this.get_order_state(row.user_name, row.stu_number, row.order_num)
+			},
+			/**
+			 * 获取订单状态
+			 * @param {Object} userName
+			 * @param {Object} orderNo
+			 */
+			get_order_state(userName, stu_number, orderNo) {
+				// 组合参数
+				let formData = new FormData();
+				formData.append("orderNo", orderNo);
+				formData.append("stu_number", stu_number);
+
+				this.showOrderStatus = {
+					userName: '',
+					orderState: '',
+					balance: 0,
+					result: -1
+				}
+
+				var _this = this;
+				this.$axios.post('/jxch-smartmp/HotWaters/wpqueryOrder.action', formData)
+					.then(res => {
+						// console.log(res.data);
+						if (res.data.code == 200) {
+							// _this.$message.success('数据加载成功！');
+							_this.showOrderStatus.result = 0
+						} else if (res.data.code == 205) {
+							_this.showOrderStatus.result = 1
+						} else if (res.data.code == 520) {
+							_this.showOrderStatus.result = -1
+						} else {
+							_this.showOrderStatus.result = -1
+							_this.$message.warning('【获取订单状态】暂无数据！');
+						}
+						_this.showOrderStatus.userName = userName;
+						_this.showOrderStatus.balance = res.data.balance.toFixed(2);
+						_this.showOrderStatus.orderState = res.data.message;
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【获取订单状态】请求异常: ' + err);
+					})
+			},
+			/**
+			 * 获取参数
+			 * @param {Object} e
+			 */
+			getItem(e) {
+				if (typeof e == 'number' && e == 2) {
+					this.selectItem.value = this.options[0].value
+					this.selectItem.label = this.options[0].label
+				} else if (typeof e == 'number' && e == 1) {
+					this.selectItem.value = this.options[1].value
+					this.selectItem.label = this.options[1].label
+				} else if (typeof e == 'number' && e == 0) {
+					this.selectItem.value = this.options[2].value
+					this.selectItem.label = this.options[2].label
+				} else {
+					this.selectItem = {
+						value: '',
+						label: ''
+					}
+				}
+
+				// console.log(typeof(this.selectItem));
+				// console.log(this.selectItem);
+			},
+			/**
+			 * 序号的计算
+			 */
+			indexMethod(index) {
+				return (this.currentPage - 1) * 8 + index + 1;
+			},
+			/**
+			 * 格式化列数据
+			 */
+			formatBalance: (row, column, cellValue, index) => {
+				// row: 行数据
+				// column: 列属性
+				// cellValue: 单元格数据值
+				// index: 行索引，注意：2.3.9版本以后才有。
+				return cellValue.toFixed(2)
+			},
+			formatStatus: (row, column, cellValue, index) => {
+				// row: 行数据
+				// column: 列属性
+				// cellValue: 单元格数据值
+				// index: 行索引，注意：2.3.9版本以后才有。
+				// 0：未支付，1：未到账，2：已到账
+				if (cellValue == 2) {
+					return '已到账'
+				} else if (cellValue == 1) {
+					return '未到账'
+				} else if (cellValue == 0) {
+					return '未支付'
+				} else {
+					return '未知'
+				}
+			},
+			/**
+			 * 充值记录列表
+			 */
+			get_amount_list(params) {
+				var _this = this
+				// _this.tableData = []
+				// _this.rows_total = 0
+				this.$axios.get('/jxch-smartmp/HotWaters/waterqueryRe.action', {
+						params: params
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
+							'{}') {
+							// _this.$message.success('数据加载成功！');
+							_this.tableData = res.data.rows
+							_this.rows_total = res.data.total
+
+							_this.amount = res.data.totalAccount.toFixed(2)
+							_this.total_times = res.data.total
+							_this.avg = res.data.avgAccount.toFixed(2)
+						} else {
+							_this.$message.success('【充值记录列表】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【充值记录列表】请求异常: ' + err);
+					})
+			},
+			/**
+			 * 充值记录列表改变页码
+			 * @param {Object} val
+			 */
+			handleCurrentChange(val) {
+				// console.log(val);
+				this.currentPage = val
+				var params = {
+					page: this.currentPage,
+					rows: this.pageRows,
+				}
+				if (this.startTime != '' && typeof(this.startTime) != 'undefined') {
+					params.begin_time = this.startTime
+				}
+				if (this.endTime != '' && typeof(this.endTime) != 'undefined') {
+					params.end_time = this.endTime
+				}
+				if (this.searchformUser != '' && typeof(this.searchformUser) != 'undefined') {
+					params.user_name = this.searchformUser
+				}
+				if (typeof this.selectItem.value == 'number' && this.selectItem.label != '') {
+					params.value = this.selectItem.value
+					// params.label = this.selectItem.label
+				}
+
+				// 获取充值记录列表
+				this.get_amount_list(params)
+			},
+			/**
+			 * 初始化日期时间
+			 */
+			initDate() {
+				//当前设定的日期时间
+				let d = new Date;
+				var year1 = d.getFullYear(); // 获取当前年份
+				var mon1 = d.getMonth() + 1; // 获取当前月份
+				var day1 = d.getDate(); // 获取当前日
+
+				//前一天设定的日期时间
+				d.setTime(d.getTime() - 24 * 60 * 60 * 1000);
+				var year2 = d.getFullYear(); // 获取当前年份
+				var mon2 = d.getMonth() + 1; // 获取当前月份
+				var day2 = d.getDate(); // 获取当前日
+
+				this.startTime = this.getDate(year2, mon2, day2)
+				this.endTime = this.getDate(year1, mon1, day1)
+
+				this.select_datetime.push(this.startTime)
+				this.select_datetime.push(this.endTime)
+
+				// 显示列表
+				this.handleCurrentChange(1)
+			},
+			/**
+			 * 获取指定格式 年、月、日
+			 * @param {Object} y
+			 * @param {Object} m
+			 * @param {Object} d
+			 */
+			getDate(y, m, d) {
+				m = m > 9 ? m : '0' + m;
+				d = d > 9 ? d : '0' + d;
+
+				return y + "-" + m + "-" + d;
+			},
+			/**
+			 * 选择起止日期
+			 * @param {Object} val
+			 */
+			dateChange(val) {
+				this.startTime = val[0]
+				this.endTime = val[1]
+
+				if (this.startTime == this.endTime) {
+					this.$message.error('起止日期不能为同一天！')
+				} else {
+					// 选择日期后，马上搜索
+					// this.handleCurrentChange(1)
+				}
+			},
+			/**
+			 * 查找姓名对应的 余额列表
+			 */
+			onSearch() {
+				this.currentPage = 1
+
+				this.handleCurrentChange(this.currentPage)
+			},
+			/**
+			 * 导出为Excel表格
+			 */
+			onExport() {
+				var _this = this;
+				let formData = new FormData();
+				if (typeof _this.startTime != 'undefined' && _this.startTime != '') {
+					formData.append("begin_time", _this.startTime);
+				}
+				if (typeof _this.endTime != 'undefined' && _this.endTime != '') {
+					formData.append("end_time", _this.endTime);
+				}
+				this.$axios.post('/jxch-smartmp/HotWaters/waterre_toExcel.action', formData)
+					.then(res => {
+						if (typeof res.data.downurl != 'undefined' && res.data.downurl != '' && JSON
+							.stringify(res.data) != '{}') {
+							// console.log(res.data.downurl);
+							window.open('https://jtishfw.ncjti.edu.cn/jxch-smartmp' + res.data.downurl);
+						} else {
+							_this.$message.error(res.data.message);
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【导出表格】请求异常: ' + err);
+					})
+			},
+			/**
+			 * 获取查看记录列表
+			 */
+			get_view_list(params) {
+				var _this = this
+				_this.view_tableData = []
+				// _this.view_rows_total = 0
+				this.$axios.get('/jxch-smartmp/HotWaters/waterfindRecharge.action', {
+						params: params
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
+							'{}') {
+							// _this.$message.success('数据加载成功！');
+							_this.view_tableData = res.data.rows
+							_this.view_rows_total = res.data.total
+						} else {
+							_this.$message.success('【获取查看记录列表】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【获取查看记录列表】请求异常: ' + err);
+					})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("tuikuan.css");
+</style>