<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ">
	<title id=" idtitle"> 恒昌个体户材料审核 </title>
	<link rel="stylesheet" href="/css/ele/chalk.css">
	<link rel="stylesheet" href="/css/main.css">
	<link rel="stylesheet" href="/css/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/autocomplete.css">

	<script src="/js/vue/vue.min.js"></script>
	<script src="/js/vue/vue-router.min.js"></script>
	<script src="/js/vue/vuex.min.js"></script>
	<script src="/js/ele/index.js"></script>
	<style>
		body {
			padding: 0px;
			margin: 0px;
		}

		#loading {
			background-color: #2c3e50;
			height: 100%;
			width: 100%;
			position: fixed;
			z-index: 9999;
			margin-top: 0px;
			top: 0px;
		}

		#loading-center {
			width: 100%;
			height: 100%;
			position: relative;
		}

		#loading-center-absolute {
			position: absolute;
			left: 50%;
			top: 50%;
			height: 50px;
			width: 50px;
			margin-top: -25px;
			margin-left: -25px;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			-webkit-animation: loading-center-absolute 1.5s infinite;
			animation: loading-center-absolute 1.5s infinite;

		}

		.object {
			width: 25px;
			height: 25px;
			background-color: #FFF;
			float: left;

		}

		#object_one {
			-webkit-animation: object_one 1.5s infinite;
			animation: object_one 1.5s infinite;
		}

		#object_two {
			-webkit-animation: object_two 1.5s infinite;
			animation: object_two 1.5s infinite;
		}

		#object_three {
			-webkit-animation: object_three 1.5s infinite;
			animation: object_three 1.5s infinite;
		}

		#object_four {
			-webkit-animation: object_four 1.5s infinite;
			animation: object_four 1.5s infinite;
		}


		@-webkit-keyframes loading-center-absolute {
			100% {
				-webkit-transform: rotate(-45deg);
			}

		}

		@keyframes loading-center-absolute {
			100% {
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		@-webkit-keyframes object_one {
			25% {
				-webkit-transform: translate(0, -50px) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}

		}

		@keyframes object_one {
			25% {
				transform: translate(0, -50px) rotate(-180deg);
				-webkit-transform: translate(0, -50px) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_two {
			25% {
				-webkit-transform: translate(50px, 0) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_two {
			25% {
				transform: translate(50px, 0) rotate(-180deg);
				-webkit-transform: translate(50px, 0) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_three {
			25% {
				-webkit-transform: translate(-50px, 0) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_three {
			25% {
				transform: translate(-50px, 0) rotate(-180deg);
				-webkit-transform: translate(-50px, 0) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_four {
			25% {
				-webkit-transform: translate(0, 50px) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_four {
			25% {
				transform: translate(0, 50px) rotate(-180deg);
				-webkit-transform: translate(0, 50px) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}
	</style>
</head>

<body style="overflow: auto;">
	<div id="loading">
		<div id="loading-center">
			<div id="loading-center-absolute">
				<div class="object" id="object_one"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_three"></div>
				<div class="object" id="object_four"></div>
			</div>
		</div>
	</div>
	<div id="app" style="padding:20px;">
		<div style="height: auto;min-width: 1000px; max-width: 1500px;">
			<el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
				<div style="width:100%;line-height: 40px;">
					<div style="float:left;width: 300px;">
						<span style="font-size: 14px;color: 2F2F2F;" >法人姓名： </span>
						<el-input v-model="search.legalName" placeholder="姓名" maxlength="100" clearable style="max-width:200px;height: 36px;" ></el-input>
					</div>
					<div style="float:left;width: 300px;">
						<span style="font-size: 14px;color: 2F2F2F;" >审核状态： </span>
						<el-select v-model="search.auditStatus" style="max-width:200px;height: 36px;" clearable>
							<el-option
									v-for="item in auditStatusList"

									:key="item.value"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
					</div>

					<div style="float:left;margin-top:5px;">
						<el-button @click="resetSearch()" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;" >重置</el-button>
						<el-button @click="opSearch()" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;margin-right: 10px;" >搜索</el-button>
					</div>
				</div>
			</el-card>
			<el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
				<div>
					<div style="line-height: 36px;padding-bottom: 20px;">
						<span style="float:left;color:#2F2F2F;font-size: 14px;">共{{search.total}}条记录</span>
						<el-button @click="exportAll()" style="float:right;width:110px;height:36px;color: #FFFFFF;font-weight: 400;border-radius: 4px;font-size: 14px;background-color: #59C1A6;padding-top:11px">导出全部</el-button>
					</div>
					<div>
						<el-table
								stripe
								fix="true"
								:data="search.list"
								tooltip-effect="light"
								style="min-width: 1000px;max-width: 1500px;margin-top: 23px;min-height: 500px;"
								empty-text="暂无待审核材料"
								header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
								row-style="height:50px;" >
							<el-table-column prop="id" label="序号" :formatter="onColFormater" width="80" align="center"  ></el-table-column>
							<el-table-column prop="legal_name" label="姓名" :formatter="onColFormater" align="center" ></el-table-column>
							<el-table-column prop="legal_mobile" label="手机号" :formatter="onColFormater" align="center" ></el-table-column>
							<el-table-column prop="idcard" label="身份证" :formatter="onColFormater" align="center" ></el-table-column>
							<el-table-column prop="audit_status_name" label="审核状态" :formatter="onColFormater" align="center" ></el-table-column>
							<el-table-column prop="reject_reason" label="审核备注" :formatter="onColFormater" align="center" ></el-table-column>
							<el-table-column label="操作" align="center" >
								<template slot-scope="scope">
									<a  v-if="scope.row.audit_status == 0" href="javascript:;" @click="openAudit(scope.row, 'edit')" style="text-decoration: none;color:#59C1A6;font-size: 14px;">审核</a>
									<a  v-if="scope.row.audit_status != 0" href="javascript:;" @click="openAudit(scope.row, 'view')" style="text-decoration: none;font-size: 14px;">详情</a>
								</template>
							</el-table-column>
						</el-table>
						<div style="width:100%;text-align: center;margin-top: 20px">
							<el-pagination
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="search.currentPage"
									:page-sizes="[10, 20, 50, 100]"
									:page-size="search.pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="search.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-card>

			<el-dialog width="862px" :visible.sync="showAudit">
				<div slot="title">
					<span style="margin-left:9px;margin-top:-3px;;width:72px; height:25px; font-size:18px; font-family:PingFangSC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:25px;">个体户材料审核</span>
				</div>
				<div style="padding:0px;" >
					<el-card style=" line-height: 15px;">
						<span style="font-size:15px;color: #333333;font-weight:bold;margin-left: 7px;">订单信息</span>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">订单编号： {{auditItem.orderNo}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 5px;">订单状态： {{auditItem.audit_status_name}}</div>
                        <div style="font-size:13px;margin-left: 40px;margin-top: 5px;">创建时间： {{auditItem.created_at}}</div>
                        <div v-if="auditItem.audit_status == 2" style="font-size:13px;margin-left: 40px;margin-top: 5px;color: red;">驳回原因： {{auditItem.reject_reason}}</div>
					</el-card>

					<el-card style="line-height: 15px;margin-top: 15px;">
						<span style="font-size:15px;color: #333333;font-weight:bold;margin-left: 7px;">公司信息</span>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">所属公司： {{auditItem.companyName}}（恒昌）</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">申请名称： {{auditItem.companyNames}}</div>
					</el-card>
					<el-card style="line-height: 15px;margin-top: 15px;">
						<span style="font-size:15px;color: #333333;font-weight:bold;margin-left: 7px;">法人信息</span>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">法人姓名： {{auditItem.legal_name}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">联系方式： {{auditItem.legal_mobile}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">身份证号： {{auditItem.idcard}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">
							身份证图：
							<div style="margin-left: 70px;">
								<img style="width: 80px;height:80px;cursor: pointer;" :src="auditItem.idcard_front" alt @click="topic_preview('idcard_front')" />
								<img style="width: 80px;height:80px;cursor: pointer;margin-left: 10px;" :src="auditItem.idcard_back" alt @click="topic_preview('idcard_back')" />
							</div>
						</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">
							半身照：
							<div style="margin-left: 70px;">
								<img style="width: 80px;cursor: pointer;height:80px;" :src="auditItem.front_half_img" alt @click="topic_preview('front_half_img')" />
							</div>
						</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">
							声明书：
							<div style="margin-left: 70px;">
								<img style="width: 80px;cursor: pointer;" :src="auditItem.declaration_file" alt @click="topic_preview('declaration_file')" />
							</div>
						</div>
					</el-card>
					<el-card style="line-height: 15px;margin-top: 15px;">
						<span style="font-size:15px;color: #333333;font-weight:bold;margin-left: 7px;">银行卡信息</span>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">开 户 行： {{auditItem.bank}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">银行卡号： {{auditItem.bankno}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">预留手机号： {{auditItem.bankMobile}}</div>
						<div style="font-size:13px;margin-left: 40px;margin-top: 10px;">
							照片：
							<div style="margin-left: 70px;">
								<img style="width: 80px;height:80px;cursor: pointer;" :src="auditItem.bank_back" alt @click="topic_preview('bank_back')" />
								<img style="width: 80px;height:80px;cursor: pointer;margin-left: 10px;" :src="auditItem.bank_front" alt @click="topic_preview('bank_front')" />
							</div>
						</div>
					</el-card>

					<el-card v-if="showTag == 'edit'" style="line-height: 15px;margin-top: 15px;">
						<span style="font-size:15px;color: #333333;font-weight:bold;margin-left: 7px;">审核结果</span>
						<el-input
								type="textarea"
								:rows="3"
								placeholder="输入审核内容"
								style="padding: 5px;margin-top: 15px;"
								v-model="auditReason">
						</el-input>
						<div style="margin-left: 200px;margin-top: 10px;">
							<el-button :loading="auditLoading" @click="saveAudit('1')" style="width:120px;height:36px; background:#54C4A7; border-radius:4px;color: #FFFFFF;font-size: 16px;padding-top: 10px;">通过</el-button>
							<el-button :loading="auditLoading" @click="saveAudit('2')" style="width:120px;height:36px; background:#54C4A7; border-radius:4px;color: #FFFFFF;font-size: 16px;padding-top: 10px;">驳回</el-button>
						</div>
					</el-card>
				</div>
			</el-dialog>


		</div>

	<script src="/js/vue/jquery.min.js"></script>
	<script src="/js/vue/base64.js"></script>
	<script src="/js/vue/axios.min.js"></script>
	<script src="/js/audit_page.js"></script>
</html>
