{template 'mobile/header'}
{php $avatar_url = 'source/modules/wxwall/template/avatar/';}
<div data-role="page" data-theme="b">
<div class="ui-body-b ui-body header">
	<a href="#" data-icon="grid" data-role="button" data-theme="b" data-inline="true" class="index">首页</a>
	<h3 class="title">良缘婚礼微信墙{$title}</h3>
</div>
<script>
jQuery(function($){
	$('.avatar_android,.avatar_ios').hide();
	//判断手机系统
	if(_isAndroid){
		$('.avatar_android').show();
	}else {
		$('.avatar_ios').show();
	}

	//选择头像后的操作
	$("#avatar_radio").val($("#popupDialog").find("img:eq(0)").attr("src"));
	$("#popupDialog input").change(function() {
		$("#avatar_radio").val($(this).parent().find("img").attr("src"));
		$("#popupDialog").popup("close");
	});
});
</script>
<style>
.header .index{float:right;}
.header .title{float:left; max-width:180px; height:35px; overflow:hidden;}
.fieldcontain label{vertical-align: middle;display: inline-block;width: 18%;}
.fieldcontain input,.fieldcontain div{width:77%;display: inline-block;}
#footer{padding:0;width:100%; height:40px; line-height:40px; text-align:center;}
.avatar_radio img{width:50px; height:50px;}
.ui-controlgroup-horizontal .ui-radio{margin:5px;}
.ui-checkbox .ui-btn-icon-left .ui-btn-inner, .ui-radio .ui-btn-icon-left .ui-btn-inner{padding:5px;}
.ui-controlgroup-horizontal .ui-btn.ui-first-child,.ui-controlgroup-horizontal .ui-btn.ui-last-child{-webkit-border-radius:0;border-radius:0; border:0;}
.ui-controlgroup-horizontal .ui-btn.ui-btn-up-a,.ui-controlgroup-horizontal .ui-btn.ui-btn-hover-a{border:0;}
</style>
	<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" class="ui-corner-all">
		<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">关闭</a>
		<fieldset data-role="controlgroup" data-type="horizontal" class="avatar_radio">
			<input data-theme="a" type="radio" name="avatar" id="avatar_1" value="on" checked="checked">
			<label for="avatar_1"><img src="{$avatar_url}avatar_1.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_2" value="off">
			<label for="avatar_2"><img src="{$avatar_url}avatar_2.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_3" value="other">
			<label for="avatar_3"><img src="{$avatar_url}avatar_3.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_4" value="other">
			<label for="avatar_4"><img src="{$avatar_url}avatar_4.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_5" value="other">
			<label for="avatar_5"><img src="{$avatar_url}avatar_5.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_6" value="other">
			<label for="avatar_6"><img src="{$avatar_url}avatar_6.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_7" value="other">
			<label for="avatar_7"><img src="{$avatar_url}avatar_7.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_8" value="other">
			<label for="avatar_8"><img src="{$avatar_url}avatar_8.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_9" value="other">
			<label for="avatar_9"><img src="{$avatar_url}avatar_9.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_10" value="other">
			<label for="avatar_10"><img src="{$avatar_url}avatar_10.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_11" value="other">
			<label for="avatar_11"><img src="{$avatar_url}avatar_11.jpg" /></label>
			<input data-theme="a" type="radio" name="avatar" id="avatar_12" value="other">
			<label for="avatar_12"><img src="{$avatar_url}avatar_12.jpg" /></label>
		</fieldset>
	</div>

	<div class="main">
		 <div data-role="collapsible-set">
			<div data-role="collapsible" data-collapsed="{if $member['nickname']}true{else}false{/if}">
				<h3>微信墙相关说明</h3>
				<p>尊敬的用户您好，欢迎良缘婚礼微信墙，在使用之前请务必认真填写您的个人信息，以便更好的在微信墙中与大家交流！谢谢！祝您工作顺利！</p>
			</div>
			{if $member['nickname']}
			<div data-role="collapsible" data-collapsed="false">
				<h3>您已经登记完成</h3>
				<p style="color:red;"><img src="{if strexists($member['avatar'], 'source/modules')}{$_W['siteroot']}{else}{$_W['attachurl']}{/if}{$member['avatar']}" style="float:left; border:1px #CCC solid; padding:1px; margin-right:10px; width:55px; height:55px;" />您已经登记完成，点【返回】按钮直接进入话题！如果需要修改信息，请再次提交更改。</p>
			</div>
			{/if}
		</div>
		<form action="{$_W['siteroot']}{php echo create_url('index/module', array('name' => 'wxwall', 'do' => 'register'))}" method="post" enctype="multipart/form-data" data-ajax="false">
		<input type="hidden" name="avatar_radio" id="avatar_radio" value="" />
		<input type="hidden" name="from" value="{$_GPC['from']}" />
		<div class="fieldcontain"><label for="name">昵称：</label><input type="text" id="name" name="nickname" value="{$member['nickname']}" /></div>
		<div class="fieldcontain"><label for="avatar">头像：</label><span class="avatar_ios"><a href="#popupDialog" id="avatar" data-icon="search" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-theme="b" style="width:80%;margin:10px 0;">选择系统头像</a><label></label><input type="file" data-clear-btn="false" id="avatar" name="avatar" /></span><span class="avatar_android"><a href="#popupDialog" id="avatar" data-icon="search" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="search" data-theme="b" style="width:80%;margin:10px 0;">选择系统头像</a></span></div>
		<div style="margin:20px 0;"><input type="submit" name="submit" data-theme="a" data-icon="check" value="提交登记" /></div>
		<input type="hidden" name="token" value="{$_W['token']}" />
		</form>
	</div>
{template 'mobile/footer'}