增加支付查单功能

src/components/congzhijilu/congzhijilu.css

@@ -284,4 +284,63 @@
 	font-size: 14px;
 }
 
-/* dev-mgr */
+.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(180, 0, 0, 0.5);
+	color: rgba(180, 0, 0, 0.5);
+}

src/components/congzhijilu/congzhijilu.vue

@@ -54,11 +54,27 @@
 					</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 prop="pay_state" label="支付状态" align="center" :formatter="formatStatus">
+					<!-- <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>
@@ -71,6 +87,31 @@
 				</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>
 
@@ -104,8 +145,14 @@
 				tableData: [], // 余额列表
 				rows_total: 0, // 余额列表总记录数
 				currentPage: 1, // 余额列表当前页
-
-				pageRows: 8 // 每页记录数
+				pageRows: 8, // 每页记录数
+				viewdialogFormVisible: false,
+				showOrderStatus: {
+					userName: '',
+					orderState: '',
+					balance: 0,
+					result: -1
+				}
 			}
 		},
 		created() {
@@ -121,6 +168,64 @@
 			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('/shuidian/HotWaters/wpqueryOrder.action', formData)
+					.then(res => {
+						// console.log(res.data);
+						if (res.data.code == 200) {
+							// _this.$message.success('数据加载成功！');
+							_this.showOrderStatus.userName = userName;
+							_this.showOrderStatus.balance = res.data.balance.toFixed(2);
+							_this.showOrderStatus.orderState = res.data.message;
+							if (_this.showOrderStatus.orderState.indexOf('已支付') != -1) {
+								_this.showOrderStatus.result = 0
+							} else{
+								_this.showOrderStatus.result = 1
+							}
+						} else {
+							_this.$message.warning('【获取订单状态】暂无数据！');
+						}
+					})
+					.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
@@ -225,9 +330,9 @@
 				}
 				if (typeof this.selectItem.value == 'number' && this.selectItem.label != '') {
 					params.value = this.selectItem.value
-					params.label = this.selectItem.label
+					// params.label = this.selectItem.label
 				}
-				
+
 				// 获取充值记录列表
 				this.get_amount_list(params)
 			},