webapp / GreenwayWeb

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">对账明细</span></div>
			</div>
			<div>

				<!-- 搜索 -->
				<div class="formSearch">
					<el-form :inline="true" :model="pageindex" label-position="left">
						<el-form-item label="账单金额">
							<div>
								<el-input placeholder="请输入" style="width: 168px" v-model="pageindex.minPrice">
								</el-input>
								至
								<el-input placeholder="请输入" style="width:168px" v-model="pageindex.maxPrice">
								</el-input>
							</div>
						</el-form-item>

						<el-form-item label="核对状态">
							<el-select v-model="pageindex.checkType" placeholder="请选择" style="width: 100px;">
								<el-option label="未对账" value="0" />
								<el-option label="平账" value="1" />
								<el-option label="金额不符" value="2" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button style="background-color: #3F9B6A;color: #fff;" @click="onSubmit">查询
							</el-button>
							<el-button class="buttonHover"
								style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
								@click="resetting">重置
							</el-button>
						</el-form-item>
					</el-form>

				</div>
				<!-- 表格 -->
				<el-table :data="tableData"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
					style="width: 100%">
					<el-table-column label="序号" min-width="4%">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column prop="orderFormId" label="订单号" width="auto" min-width="10%">
					
					</el-table-column>
					<el-table-column prop="payId" label="交易号" width="auto" min-width="10%" show-overflow-tooltip>
					
					</el-table-column>
					<el-table-column label="支付金额" prop="price" width="auto" min-width="12%">

					</el-table-column>
					
					
					<el-table-column prop="payChannel" label="支付渠道" width="auto" min-width="10%">

					</el-table-column>
				
					<el-table-column prop="payTime" label="支付完成时间" width="auto" min-width="10%" show-overflow-tooltip>
					<template slot-scope="scope">
						{{formatIsoToDateTime(scope.row.payTime)}}
					</template>
					</el-table-column>
					<el-table-column prop="reconciliationTime" label="对账日期" width="auto" min-width="10%" show-overflow-tooltip>

						<template slot-scope="scope">
							{{formatIsoToDateTime(scope.row.reconciliationTime)}}
						</template>
					</el-table-column>
					<el-table-column prop="checkType" label="核对状态" width="auto" min-width="10%">
<template slot-scope="scope">
						{{scope.row.checkType == '0'?'未对账':scope.row.checkType == '1'?'平账':scope.row.checkType == '2'?'金额不符':''}}
					</template>
					</el-table-column>
					
				</el-table>
				<div class="fenye">
					<div style="line-height: 34px">共{{total}}条</div>
					<el-pagination class="pagination" :hide-on-single-page="flag" background :current-page="currentPage"
						:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="prev, pager,next" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import {
		reconciliationDetail
	} from '../../../api/online.js'
	export default {
		data() {
			return {
				rules: {},
				currentPage: 1,
				total: 100,
				flag: false,
				pageSize: 10,
				ggXin: false,
				tableData: [],
				pageindex: {
					minPrice: '',
					maxPrice: '',
					checkType: '',
					pageSize: 10,
					pageNumber: 0,
				},
			}
		},
		computed: {},
		mounted() {
			this.getOrder()
		},
		methods: {
			async getOrder() {
				// this.getFirstDayOfYear()
				// this.getLastDayOfYear()
				const res = await reconciliationDetail(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.totalElements

			},
			getFirstDayOfYear() {
				const now = new Date();
				const year = now.getFullYear();
				const firstDay = new Date(year, 0, 1, 0, 0, 0, 0);
				this.pageindex.orderTimeStart = this.formatDate(firstDay);
			},
			getLastDayOfYear() {
				const now = new Date()
				const year = now.getFullYear()
				const lastDay = new Date(year, 11, 31, 23, 59, 59, 999)
				this.pageindex.orderTimeEnd = this.formatDate(lastDay)
			},
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			formatIsoToDateTime(isoTime) {
				// 1. 空值/非法值处理
				if (!isoTime) return '';
				if (typeof isoTime !== 'string') return '';

				// 2. 解析时间（兼容带时区的ISO格式，如2025-03-11T14:19:54+08:00）
				const date = new Date(isoTime.replace('T', ' ').replace(/-/g, '/'));
				if (isNaN(date.getTime())) return '时间格式错误';

				// 3. 补零函数（确保两位数）
				const pad = (num) => num.toString().padStart(2, '0');

				// 4. 提取时间分量（注意：月份从0开始，需+1）
				return  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
				// return [
				// 	date.getFullYear(), // 年
				// 	pad(date.getMonth() + 1), // 月（0→1月）
				// 	pad(date.getDate()), // 日
				// 	pad(date.getHours()), // 时
				// 	pad(date.getMinutes()), // 分
				// 	pad(date.getSeconds()) // 秒
				// ].join('-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$1-$2-$3 ').slice(0, 19);
				// 最终格式：YYYY-MM-DD HH:mm:ss（精确到秒，共19位）
			},
			onSubmit() {
				this.getOrder()
			},
			resetting() {

				this.pageindex = {
					minPrice: '',
					maxPrice: '',
					checkType: '',
					pageSize: 10,
					pageNumber: 0,
				}
				this.getOrder()


			},
			handleSizeChange() {

			},
			handleCurrentChange(val) {
				this.pageindex.pageNumber = val
				this.getOrder()
			}
		}
	}
</script>

<style scoped>
	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;
		position: relative;
	}

	/deep/ .el-form-item__content {
		line-height: 0;
	}

	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	::v-deep .formSearch {
		position: relative;
		margin-bottom: 20px;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 14px;
		justify-content: space-between;

	}

	.greens {
		color: #3F9B6A;
	}

	/deep/ .el-table__row {
		font-size: 14px;
	}

	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}

	::v-deep .btn .el-button:focus,
	.el-button:hover {
		border: 1px solid #3F9B6A;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}

	::v-deep .dialog_css_Xq {
		.el-dialog__header {
			background-color: #fafafa;

		}

		.el-dialog__title {
			color: #000
		}
	}
</style>