antissoft / wurenji

<template>
	<el-dialog :title="isDetail ? '审核详情' : '审核提现申请'" :close-on-click-modal="false" :visible.sync="visible" class="audit-dialog" lock-scroll width="900px" :show-close="true" :top="'5vh'">
		<div class="dialog-content" v-loading="loading">
			<!-- 申请信息 -->
			<div class="info-section">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-document"></i>
					</div>
					<div class="header-text">
						<h3>申请信息</h3>
						<p>提现申请的基本信息</p>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="120px" label-position="right">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="提现申请号">
									<el-input v-model="dataForm.walletNo" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="申请时间">
									<el-input :value="dataForm.applyTime ? new Date(dataForm.applyTime).toLocaleString() : '-'" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="提现金额">
									<el-input :value="'¥' + dataForm.amount" readonly class="amount-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="用户当前余额">
									<el-input :value="'¥' + userBalance" readonly class="balance-input" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 银行卡信息 -->
			<div class="info-section">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-credit-card"></i>
					</div>
					<div class="header-text">
						<h3>银行卡信息</h3>
						<p>收款账户详细信息</p>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="120px" label-position="right">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="收款账户户名">
									<el-input v-model="dataForm.bankAccountName" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="收款银行名称">
									<el-input v-model="dataForm.bankName" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="收款账户卡号">
									<el-input v-model="dataForm.bankAccountNumber" readonly class="bank-card-input" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 审核信息 -->
			<div class="info-section" v-if="dataForm.auditStatus !== 0">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-check"></i>
					</div>
					<div class="header-text">
						<h3>审核信息</h3>
						<p>审核结果和相关信息</p>
					</div>
				</div>
				<div class="section-content">
					<el-form :model="dataForm" size="small" label-width="120px" label-position="right">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="审核状态">
									<el-tag v-if="dataForm.auditStatus === 1" type="success" size="medium">
										<i class="el-icon-check"></i> 审核通过
									</el-tag>
									<el-tag v-else-if="dataForm.auditStatus === 2" type="danger" size="medium">
										<i class="el-icon-close"></i> 审核驳回
									</el-tag>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="审核时间">
									<el-input :value="dataForm.auditTime ? new Date(dataForm.auditTime).toLocaleString() : '-'" readonly class="readonly-input" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20" v-if="dataForm.auditStatus === 2">
							<el-col :span="24">
								<el-form-item label="驳回原因">
									<el-input v-model="dataForm.rejectReason" type="textarea" readonly class="readonly-textarea" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>

			<!-- 审核操作 -->
			<div class="action-section" v-if="!isDetail && dataForm.auditStatus === 0">
				<div class="section-header">
					<div class="header-icon">
						<i class="el-icon-edit"></i>
					</div>
					<div class="header-text">
						<h3>审核操作</h3>
						<p>请选择审核结果并填写相关信息</p>
					</div>
				</div>
				<div class="section-content">
					<el-form ref="auditForm" :model="auditForm" :rules="auditRules" size="small" label-width="120px" label-position="right">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="审核结果" prop="auditStatus">
									<el-radio-group v-model="auditForm.auditStatus" class="audit-radio-group">
										<el-radio :label="1" class="audit-radio">
											<i class="el-icon-check"></i>
											<span>审核通过</span>
										</el-radio>
										<el-radio :label="2" class="audit-radio">
											<i class="el-icon-close"></i>
											<span>审核驳回</span>
										</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20" v-if="auditForm.auditStatus === 2">
							<el-col :span="24">
								<el-form-item label="驳回原因" prop="rejectReason">
									<el-input v-model="auditForm.rejectReason" type="textarea" placeholder="请输入驳回原因" :rows="3" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="!isDetail && dataForm.auditStatus === 0" type="primary" @click="auditSubmit()" :loading="submitLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import request from '@/utils/request'
	
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				submitLoading: false,
				visible: false,
				isDetail: false,
				dataForm: {
					id: '',
					walletNo: '',
					amount: 0,
					bankAccountName: '',
					bankAccountNumber: '',
					bankName: '',
					applyTime: '',
					auditStatus: 0,
					auditTime: '',
					rejectReason: ''
				},
				userBalance: 0,
				auditForm: {
					auditStatus: 1,
					rejectReason: ''
				},
				auditRules: {
					auditStatus: [
						{ required: true, message: '请选择审核结果', trigger: 'change' }
					],
					rejectReason: [
						{ required: true, message: '驳回时必须填写驳回原因', trigger: 'blur' }
					]
				}
			}
		},
		computed: {},
		watch: {
			'auditForm.auditStatus'(newVal) {
				if (newVal === 1) {
					this.auditForm.rejectReason = ''
				}
			}
		},
		created() {},
		mounted() {},
		methods: {
			goBack() {
				this.$emit('refresh')
			},
			init(id, isDetail) {
				this.dataForm.id = id || 0
				this.visible = true
				this.isDetail = isDetail || false
				this.loading = true
				this.$nextTick(() => {
					if (this.dataForm.id) {
						// 获取审核详情
						request({
							url: '/api/Extend/UavWalletWithdrawApply/' + this.dataForm.id + '/AuditDetail',
							method: 'get'
						}).then(res => {
							this.dataForm = res.data
							this.userBalance = res.data.userBalance || 0
							this.loading = false
						}).catch(() => {
							this.loading = false
						})
					} else {
						this.loading = false
					}
				})
			},
			auditSubmit() {
				this.$refs['auditForm'].validate((valid) => {
					if (valid) {
						this.submitLoading = true
						request({
							url: '/api/Extend/UavWalletWithdrawApply/' + this.dataForm.id + '/Audit',
							method: 'put',
							data: this.auditForm
						}).then((res) => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.visible = false
									this.$emit('refresh', true)
								}
							})
						}).catch(() => {
							this.submitLoading = false
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
/* 弹窗整体样式 */
.audit-dialog {
	border-radius: 12px;
	overflow: hidden;
}

.audit-dialog >>> .el-dialog {
	border-radius: 12px;
	overflow: hidden;
}

.audit-dialog >>> .el-dialog__header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 20px 30px;
	margin: 0;
}

.audit-dialog >>> .el-dialog__title {
	color: white;
	font-size: 18px;
	font-weight: 600;
}

.audit-dialog >>> .el-dialog__headerbtn .el-dialog__close {
	color: white;
	font-size: 20px;
}

.audit-dialog >>> .el-dialog__body {
	padding: 0;
	background: #f8f9fa;
	max-height: 85vh;
	overflow-y: auto;
}

.dialog-content {
	padding: 20px;
	max-height: none;
	overflow: visible;
}

/* 信息区块样式 */
.info-section, .action-section {
	background: white;
	border-radius: 12px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.section-header {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 20px 30px;
	border-bottom: 1px solid #e9ecef;
	display: flex;
	align-items: center;
}

.header-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, #409EFF, #66b1ff);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.header-icon i {
	color: white;
	font-size: 20px;
}

.header-text h3 {
	margin: 0 0 5px 0;
	font-size: 18px;
	font-weight: 600;
	color: #303133;
}

.header-text p {
	margin: 0;
	font-size: 14px;
	color: #909399;
}

.section-content {
	padding: 20px;
}

/* 输入框样式 */
.readonly-input >>> .el-input__inner {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	color: #606266;
	cursor: not-allowed;
}

.amount-input >>> .el-input__inner {
	background-color: #fef0f0;
	border-color: #fbc4c4;
	color: #f56c6c;
	font-weight: bold;
	font-size: 16px;
	cursor: not-allowed;
}

.balance-input >>> .el-input__inner {
	background-color: #f0f9ff;
	border-color: #b3d8ff;
	color: #409EFF;
	font-weight: bold;
	cursor: not-allowed;
}

.bank-card-input >>> .el-input__inner {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	color: #606266;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	cursor: not-allowed;
}

.readonly-textarea >>> .el-textarea__inner {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	color: #606266;
	cursor: not-allowed;
}

/* 审核操作样式 */
.action-section {
	border: 2px solid #409EFF;
	background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
}

.audit-radio-group {
	display: flex;
	gap: 20px;
}

.audit-radio {
	display: flex;
	align-items: center;
	padding: 15px 25px;
	border: 2px solid #e4e7ed;
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.3s ease;
	flex: 1;
	justify-content: center;
}

.audit-radio:hover {
	border-color: #409EFF;
	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.audit-radio.is-checked {
	border-color: #409EFF;
	background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.audit-radio i {
	margin-right: 8px;
	font-size: 16px;
}

.audit-radio span {
	font-weight: 500;
}

/* 底部按钮样式 */
.dialog-footer {
	padding: 20px 30px;
	background: #f8f9fa;
	border-top: 1px solid #e9ecef;
	text-align: right;
}

.dialog-footer .el-button {
	padding: 10px 25px;
	border-radius: 6px;
	font-weight: 500;
}

.dialog-footer .el-button--primary {
	background: linear-gradient(135deg, #409EFF, #66b1ff);
	border: none;
}

.dialog-footer .el-button--primary:hover {
	background: linear-gradient(135deg, #66b1ff, #409EFF);
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

/* 响应式优化 */
@media (max-width: 768px) {
	.dialog-content {
		padding: 15px;
	}
	
	.section-header {
		padding: 15px 20px;
	}
	
	.section-content {
		padding: 15px;
	}
	
	.audit-radio-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.audit-radio {
		padding: 12px 20px;
	}
	
	.audit-dialog >>> .el-dialog__body {
		max-height: 90vh;
	}
}

/* 小屏幕优化 */
@media (max-width: 480px) {
	.audit-dialog >>> .el-dialog {
		width: 95% !important;
		margin: 0 auto;
	}
	
	.audit-dialog >>> .el-dialog__body {
		max-height: 95vh;
	}
}
</style>