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

<head>
	#include("/common/view/base_head.html")
	<script src="#(WX_HOST)/libs/exif.js"></script>
	<script src="#(WX_HOST)/js/info/memberinfo.js"></script>
	<script src="#(WX_HOST)/libs/jpeg_encoder_basic.js"></script>
	<script src="#(WX_HOST)/js/info/uploadFace.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

	<style>
		.mobile2 {
			margin: 16px 1px;
		}
		.info-top {
			border: 1px solid #4e7cd7;
			border-radius: 16px;
			font-size: 16px;
		}
		div.info-top > div:nth-child(1) {
			background: #4e7cd7;
			border-top-left-radius: 13px;
			border-top-right-radius: 13px;
			color: #ffffff;
		}
		.info-item {
			margin: 0px 32px;
		}
		div.info-item > div {
			display: inline;
			line-height: 48px;
		}
		.icon-img {
			max-width: 16px;
			max-height: 24px;
			margin-right: 4px;
		}
		.edit-img {
			max-width: 28px;
			float: right;
			margin-top: 10px;
		}
		.set-view {
			margin-top: 32px;
		}
		.set-view-item {
			display: inline-block;
			width: 30%;
			border: 1px solid #dfe0e1;
			padding: 32px 4px;
			font-size: 12px;
		}
		.set-view-item:hover {
			box-shadow: 0px 0px 4px #aaa;
		}
		.set-view-item img {
			width: 80%;
			height: 80%;
			max-width: 120px;
			max-height: 120px;
			margin-bottom: 16px;
		}

		.title {
			color: #959598;
			font-size: 12px;
		}
		.cell-list {
			margin-top: 32px;
		}
		.cell-list-item {
			line-height: 40px;
			background: #ffffff;
			color: #4879d8;
			border-radius: 20px;
			margin-bottom: 16px;
			border:1px solid #1662d1;
		}
		.cell-list-item div {
			display: inline;
		}
		.cell-sel {
			background: #4e7cd7;
			color: #ffffff;
			border:none;
		}
		.radio {
			width: 16px;
			height: 16px;
			border: 1px solid #4879d8;
			float: left;
			margin-left: 16px;
			border-radius: 10px;
			margin-top: 12px;
		}
		.cell-sel > .radio {
			border: 1px solid #ffffff;
			background: #ffffff;
			box-shadow: 0px 0px 1px #4e7cd7 inset;
		}
		.radio div {
			background: #ffffff;
			margin: 1px;
			width: 100%;
			height: 100%;
		}
		.backBtn {
			margin-top: 16px;
		}
	</style>
	<script>
        var appId = '#(appid)';
        var name = '#(name)';
        var phone = '#(phone)';
        var userId = '#(userId)';
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '#(appid)', // 必填，公众号的唯一标识
            timestamp: #(timestamp), // 必填，生成签名的时间戳
            nonceStr: '#(nonceStr)', // 必填，生成签名的随机串
            signature: '#(signature)',// 必填，签名，见附录1
            jsApiList: ['closeWindow'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
        wx.error(function(res){
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
	</script>
</head>

<body>
<div class="container-fluid">
	<div id="div_info" class="mobile2">
		<input type="hidden" id="hiddenFaceUrl" value="#(faceUrl)">
		<input type="hidden" id="hiddenUserId"  value="#(userId)">

		<div class="set-view text-center" style="margin-bottom:10px;">
			<div class="text-center">
				<div><img class="faceImage" src="#(WX_HOST)/images/face2.png" style="border-radius:30px;max-width: 200px;max-height: 200px;"></div>
				<div id="upload_tip" style="color: red;display: none;">正在上传，请稍后...</div>
			</div>
		</div>

		<div class="set-view text-center">
			<div>#(name)</div>
			<div>#(phone)</div>
			<div id="changeFaceBtn" class="btn mybtn-default" >更换人脸头像</div>
			<form name="uploadFaceForm" style="display: none" id="uploadFaceForm" enctype="multipart/form-data" method="post" action="#(WX_HOST)/info/uploadFaceImage">
				<input id="file_input" style="display:none" name="file_input" type="file" accept="jpg,png" onchange="changeFaceFile(this)" />
			</form>
		</div>
		<div style="letter-spacing:16px;text-indent:16px;margin-top: 16px;" class="btn mybtn-default" id="faceBackBtn" >返回</div>
	</div>

	<!-- 提示 -->
	#include("/common/view/result_tips.html")
</div>
</body>

</html>
