{php define('MUI', true);}
{template 'common/header'}
{if $do == 'mobile'}
	{if $op == 'index'}
	<div class="mui-content mc-tel-bonded">
		<div class="mui-text-center">
			<img src="{$_W['siteroot']}app/resource/images/bonded-tel.png">
			<div class="mui-b">你的手机号:{$profile['mobile']}</div>
		</div>
		<div class="mui-content-padded">
			<a class="mui-btn mui-btn-success mui-btn-block" href="{php echo url('mc/bond/mobile', array('op' => 'mobilechange'))}">更换手机号</a>
		</div>
	</div>
	{/if}
	{if $op == 'mobilechange'}
	<div class="mui-content">
		<div class="sendcode">
			<div class="mui-content-padded mui-text-muted">请输入手机号,以收取验证码</div>
			<div class="mui-input-group mui-mt15">
				<div class="mui-input-row">
					<label class="mui-label-icon"><i class="fa fa-user"></i></label>
					<input name="mobile" type="text"  value="" placeholder="手机号"/>
				</div>
			</div>
			<div class="mui-content-padded mui-text-center">
				<button class="mui-btn mui-btn-success mui-btn-block send-code" uniacid="{$_W['uniacid']}">获取验证码</button>
			</div>
		</div>
		<div style="display:none;" class="codeverify">
			<div class="mui-content-padded mui-text-muted">您的手机号<span class="mui-text-success js-code"></span>会收到一条含有6位数字验证码的短息</div>
			<div class="mui-input-group mui-mt15">
				<div class="mui-input-row">
					<label class="mui-label-icon"><i class="fa fa-key"></i></label>
					<input name="code" type="text" placeholder="验证码"/>
				</div>
				{if !empty($reregister)}
				<div class="mui-input-row">
					<label class="mui-label-icon"><i class="fa fa-lock"></i></label>
					<input type="password" value="" name="password" placeholder="请输入您的新密码"/>
				</div>
				<div class="mui-input-row">
					<label class="mui-label-icon"><i class="fa fa-lock"></i></label>
					<input type="password" value="" name="repassword" placeholder="请再次输入您的新密码"/>
				</div>
				{/if}
			</div>
			<div class="mui-content-padded mui-text-center">
				<button class="mui-btn mui-btn-success mui-btn-block js-bond">确认</button>
				<div class="mui-mt15 mui-text-center">
					<span class="mui-text-muted js-timer">

					</span>
				</div>
			</div>
		</div>
		
	</div>
	<script>
		$(function(){
			$(document).on('click', '.send-code', function(){
				var username = $('input[name=mobile]').val();
				var oldmobile = '{$_W['member']['mobile']}';
				if (username == oldmobile) {
					util.toast('无法更改为当前手机号', '', 'error');
					return;
				}
				$('.js-code').text(username);
				option = {
					'btnElement' : $('.send-code'),
					'showElement' : $('.js-timer'),
					'btnTips' : '<a class="send-code">重新获取验证码</a>',
					'successCallback' : function(ret, message){
						if (ret == '0') {
							util.toast(message);
							$('.sendcode').hide();
							$('.codeverify').show();
						} else {
							util.toast(message);
							$('.sendcode').show();
							$('.codeverify').hide();
							return;
						}
					}
				};
				util.sendCode(username, option);
			});
			$('.js-bond').click(function() {
				var code = $('.codeverify input[name="code"]').val();
				var mobile = $('.sendcode input[name="mobile"]').val();
				var password = $('.codeverify input[name="password"]').val();
				var repassword = $('.codeverify input[name="repassword"]').val();
				if (!code) {
					util.toast('请填写验证码', '', 'error');
					return;
				}
				if (!mobile) {
					util.toast('请填写手机号', '', 'error');
					return;
				}
				if(!/^1[3|4|5|7|8][0-9]{9}$/.test(mobile)) {
					util.toast('手机格式错误', '', 'error');
					return;
				}
				if (!password || !repassword) {
					util.toast('请填写密码', '', 'error');
					return;
				}
				if (password !== repassword) {
					util.toast('密码不一致', '', 'error');
					return;
				}
				$.post('{php echo url("mc/bond/mobile")}', {'code' : code, 'mobile' : mobile, 'password' : password, 'repassword' : repassword}, function(data) {
					data = $.parseJSON(data);
					if (data.type == 'success') {
						util.toast('手机绑定成功', data.redirect, 'success');
					} else if (data.type == 'num_error') {
						util.toast('手机格式错误', '', 'error');
						location.reload();
					} else if (data.type == 'repeat_error') {
						util.toast(data.message, '', 'error');
						location.reload();
					} else {
						util.toast(data.message, '', 'error');
					}
				})
			})
		});
	</script>
	{/if}
{/if}

{if $do == 'settings'}
<div class="mui-content">
	<ul class="mui-table-view mui-table-view-chevron">
		<li class="mui-table-view-cell">
			<a href="{php echo url('mc/profile') . 'wxref=mp.weixin.qq.com#wechat_redirect'}" class="mui-navigate-right">个人资料</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="{php echo url('mc/profile/address') . 'wxref=mp.weixin.qq.com#wechat_redirect'}" class="mui-navigate-right">
				收货地址
				<span class="mui-pull-right">管理</span>
			</a>
		</li>
	</ul>
	<ul class="mui-table-view mui-table-view-chevron">
		{if $item !== 'mobile'}
		<li class="mui-table-view-cell">
			{if empty($reregister)}
			<a href="{php echo url('mc/bond/email', array('type' => '1'))}" class="mui-navigate-right">
				邮箱
				<span class="mui-pull-right"><span class="mui-mr10">{$_W['member']['email']}</span></span>
			{else}
			<a href="{php echo url('mc/bond/email', array('type' => '0'))}" class="mui-navigate-right">
				邮箱
				<span class="mui-pull-right"><span class="mui-mr10">请绑定邮箱</span></span>
			{/if}
			</a>
		</li>
		{/if}
		{if $item !== 'email'}
		<li class="mui-table-view-cell">
			{if empty($_W['member']['mobile'])}
			<a href="{php echo url('mc/bond/mobile', array('op' =>'mobilechange'))}" class="mui-navigate-right">
			{else}
			<a href="{php echo url('mc/bond/mobile', array('op' =>'index'))}" class="mui-navigate-right">
			{/if}
				手机号
				<span class="mui-pull-right"><span class="mui-mr10">{if empty($_W['member']['mobile'])}请绑定手机号{else}{$_W['member']['mobile']}{/if}</span></span>
			</a>
		</li>
		{/if}
		{if empty($reregister)}
		<li class="mui-table-view-cell">
			<a href="{php echo url('mc/bond/password') . 'wxref=mp.weixin.qq.com#wechat_redirect'}" class="mui-navigate-right">密码设置</a>
		</li>
		{/if}
	</ul>
	<ul class="mui-table-view mui-table-view-chevron">
		{if !empty($_W['setting']['copyright']['companyprofile'])}
		<li class="mui-table-view-cell">
			<a href="{php echo url('mc/bond/aboutus') . 'wxref=mp.weixin.qq.com#wechat_redirect'}" class="mui-navigate-right">关于我们</a>
		</li>
		{/if}
		<li class="mui-table-view-cell">
			<a href="tel:{$_W['setting']['copyright']['phone']}" class="mui-navigate-right" id='contact-us'>联系我们</a>
		</li>
	</ul>
	<div class="mui-content-padded">
		<a href="{php echo url('mc/home/login_out');}" class="mui-btn mui-btn-block mui-btn-outlined mui-btn-danger">退出登录</a>
	</div>
</div>
{/if}
{if $do == 'aboutus'}
<div class="mui-content mc-about-us">
	<div class="mui-text-center logo"><img src="{if $_W['setting']['copyright']['flogo']}{php echo tomedia($_W['setting']['copyright']['flogo']);}{else}resource/images/MicroEngine.ico{/if}" alt="" class="mui-img-rounded"/></div>
	<div class="mui-content-padded desc">
		{$_W['setting']['copyright']['companyprofile']}
	</div>
</div>
{/if}
{if $do == 'accountsecurity'}
<div class="mui-content mc-profile">
	<ul class="mui-table-view mui-table-view-chevron">
		<li class="mui-table-view-cell">
			{if empty($reregister)}
			<a href="{php echo url('mc/bond/email', array('type' => '1'))}" class="mui-navigate-right">
				邮箱
				<span class="mui-pull-right"><span class="mui-mr10">{$_W['member']['email']}</span></span>
			{else}
			<a href="{php echo url('mc/bond/email', array('type' => '0'))}" class="mui-navigate-right">
				邮箱
				<span class="mui-pull-right"><span class="mui-mr10">请绑定邮箱</span></span>
			{/if}
			</a>
		</li>
		<li class="mui-table-view-cell">
			{if empty($_W['member']['mobile'])}
			<a href="{php echo url('mc/bond/mobile', array('op' =>'mobilechange'))}" class="mui-navigate-right">
			{else}
			<a href="{php echo url('mc/bond/mobile', array('op' =>'index'))}" class="mui-navigate-right">
			{/if}
				手机号
				<span class="mui-pull-right"><span class="mui-mr10">{if empty($_W['member']['mobile'])}请绑定手机号{else}{$_W['member']['mobile']}{/if}</span></span>
			</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="{php echo url('mc/bond/password') . 'wxref=mp.weixin.qq.com#wechat_redirect'}" class="mui-navigate-right">密码设置</a>
		</li>
	</ul>
</div>
{/if}
{if $do == 'email'}
<form class="tab-content clearfix js-ajax-form {if $_W['container'] !== 'wechat'}profile-form{/if}" action="{url 'mc/bond/email'}" method="post" enctype="multipart/form-data">
	<div class="mui-content mc-email">
		<div class="mui-control-content mui-active" id="email">
			<div class="tips mui-content-padded">
				您可以使用邮箱作为登陆账号。
			</div>
			<div class="mui-input-group mui-mt15">
				<div class="mui-input-row">
					<label>邮箱</label>
					<input type="text" name="email" value="{if !empty($reregister)}{else}{$profile['email']}{/if}" placeholder="请输入邮箱" {if empty($reregister)}disabled{/if}/>
				</div>
				{if !empty($reregister)}
				<div class="mui-input-row">
					<label>登录密码</label>
					<input type="password" name="password" value="" placeholder="请输入登录密码"/>
				</div>
				{if $type == '1'}
				<div class="mui-input-row">
					<label>确认登录密码</label>
					<input type="password" name="repassword" value="" placeholder="请确认登录密码"/>
				</div>
				{/if}
				{/if}
			</div>

		</div>
		<div class="mui-content-padded">
			{if !empty($reregister)}
			<input type="hidden" name="token" value="{$_W['token']}">
			<input type="hidden" id="type" name="type" value="{$type}" />
			<button class="mui-btn mui-btn-success mui-btn-block" type="submit" name="submit" value="立刻绑定">立即绑定</button>
			{/if}
			<a class="mui-btn mui-btn-block" href="javascript:history.back(-1);">返回</a>
		</div>
	</div>
</form>
{/if}
{if $do == 'password'}
<form class="tab-content clearfix js-ajax-form {if $_W['container'] !== 'wechat'}profile-form{/if}" action="{url 'mc/bond/password'}" method="post" enctype="multipart/form-data">
	<div class="mui-content">
		<div class="mui-content-padded mui-text-muted">请设置密码</div>
		<div class="mui-input-group mui-mt15">
			{if empty($reregister)}
			<div class="mui-input-row">
				<label>旧密码</label>
				<input type="password" value="" name="oldpassword" placeholder="请输入您的旧密码"/>
			</div>
			{/if}
			<div class="mui-input-row">
				<label>新密码</label>
				<input type="password" value="" name="password" placeholder="请输入您的新密码"/>
			</div>
			<div class="mui-input-row">
				<label class="mui-ellipsis">重复新密码</label>
				<input type="password" value="" name="repassword" placeholder="请再次输入您的新密码"/>
			</div>
		</div>
		<div class="mui-content-padded">
			<input type="hidden" name="token" value="{$_W['token']}">
			<button class="mui-btn mui-btn-success mui-btn-block" type="submit" name="submit" value="确定">确定</button>
		</div>
	</div>
</form>
{/if}
{if $do == 'credits'}
	{if $_GPC['type'] == 'record'}
	<header class="mui-bar mui-bar-nav">
		{if $_W['container'] !== 'wechat'}
		<div class="mui-row fixed-bar">
			<div class="mui-col-xs-4">
				<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left mui-action-back">
					<span class="mui-icon mui-icon-left-nav"></span>
					返回
				</button>
			</div>
			<div class="mui-col-xs-4 mui-text-center">{if !empty($title)}{$title}{elseif !empty($_W['page']['title'])}{$_W['page']['title']}{/if}</div>
			<div class="mui-col-xs-4 mui-text-right">
				<a href="#consume-date">
					<span>{if $_GPC['period'] <= 0}{php echo date('Y.m', strtotime($_GPC['period'] . 'month'))}{else}查看全部{/if}</span>
					<span class="fa fa-angle-down mui-text-muted"></span>
				</a>
			</div>
		</div>
		{else}
		<div class="mui-row fixed-bar">
			<div class="mui-col-xs-6"></div>
			<div class="mui-col-xs-6 mui-text-right">
				<a href="#consume-date">
					<span>{if $_GPC['period'] <= 0}{php echo date('Y.m', strtotime($_GPC['period'] . 'month'))}{else}查看全部{/if}</span>
					<span class="fa fa-angle-down mui-text-muted"></span>
				</a>
			</div>
		</div>
		{/if}
	</header>
	<div class="mui-content">
		<div class="mui-table mui-table-inline mui-pa10">
			<div class="mui-table-cell">
				<div class="mui-text-muted ">充值</div>{$income}{if $_GPC['credittype'] == 'credit2'}元{else}积分{/if}
			</div>
			<div class="mui-table-cell">
				<div class="mui-text-muted">消费</div>{$pay}{if $_GPC['credittype'] == 'credit2'}元{else}积分{/if}
			</div>
		</div>
		<div class="credits-display">
		<ul class="mui-table-view mui-credits">
			{loop $data $row}
			<li class="mui-table-view-cell">
				<a href="{php echo murl('mc/bond/credits', array('type' => recorddetail, 'id' => $row['id'], 'credittype' => $_GPC['credittype']), true)}">
					<div class="mui-row">
						<div class="mui-col-xs-6 mui-ellipsis-2">
							{$row['remark']}
						</div>
						<div class="mui-col-xs-6 mui-text-right">
							<span class="mui-big {if $_GPC['credittype'] == 'credit2'}mui-rmb{/if}" style="color:{php echo $row['color']}">
								<span class="money" style="color:{php echo $row['color']}">{$row['num']}</span>
							</span>
							<span class="mui-block mui-text-muted mui-small">{$row['createtime']}</span>
						</div>
					</div>
				</a>
			</li>
			{/loop}
		</ul>
		</div>
		<div id="consume-date" class="mui-popover mui-popover-top">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="{php echo url('mc/bond/credits', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '1'))}">查看全部</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="{php echo url('mc/bond/credits', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '0'))}">{php echo date('Y.m', strtotime('today'))}</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="{php echo url('mc/bond/credits', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '-1'))}">{php echo date('Y.m', strtotime('-1month'))}</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="{php echo url('mc/bond/credits', array('credittype' => $_GPC['credittype'], 'type' => 'record', 'period' => '-2'))}">{php echo date('Y.m', strtotime('-2month'))}</a>
				</li>
			</ul>
		</div>
	</div>
	{/if}
	{if $_GPC['type'] == 'recorddetail'}
	<div class="mui-bg-white mc-record-detail">
		<div class="mui-bb1 mui-row sum">
			<div class="mui-col-xs-6 mui-text-muted">
				付款金额
			</div>
			<div class="mui-col-xs-6 mui-text-right">
				<span class="mui-big {if $_GPC['credittype'] == 'credit2'}mui-rmb{/if}" style="color:{php echo $row['color']}">
					<span class="money" style="color:{php echo $row['color']}">{$data['num']}</span>
				</span>
			</div>
		</div>
		<div class="detail-info">
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					操作人
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					{if $data['username']}{$data['username']}{else}本人{/if}
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					数量
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					{$data['num']}
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					当前状态
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					交易成功
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					时间
				</div>
				<div class="mui-col-xs-6 mui-text-right mui-ellipsis">
					{php echo date('Y-m-d H:i:s', $data['createtime'])}
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-text-muted">
					备注
				</div>
				<div class="mui-col-xs-6 mui-text-right">
					{$data['remark']}
				</div>
			</div>
		</div>
	</div>
	{/if}
<script>
require(['mui.pullrefresh'], function(mui) {
	mui.init();
	mui.ready(function() {
		var page = 2;
		var pagetotal = {$pagenums} + 1;
		if (page < pagetotal) {
			//循环初始化所有下拉刷新，上拉加载。
			mui.each(document.querySelectorAll('.credits-display'), function(index, pullRefreshEl) {
				mui(pullRefreshEl).pullToRefresh({
					up: {
						callback: function() {
							var self = this;
							setTimeout(function() {
								$('.mui-pull-bottom-tips').hide();
								var ul = self.element.querySelector('.mui-credits');
								ul.appendChild(createFragment(ul, index, 5));
								if (pagetotal <= page) {
									$('.mui-pull-bottom-tips').hide();
									self.endPullUpToRefresh(true);
								} else {
									self.endPullUpToRefresh(false);
								}
							}, 1000);
						}
					}
				});
			});

			var createFragment = function(ul, index, count, reverse) {
				var length = ul.querySelectorAll('li').length;
				var fragment = document.createDocumentFragment();
				var li;
				var url = "{php echo url('mc/bond/credits', array('credittype' => $_GPC['credittype'], 'type' => $_GPC['type'], 'period' => $_GPC['period']), true)}";
				mui.post(url, {'page' : page}, function(data){
					data = $.parseJSON(data);
					if (data.state == 'error') {
						return false;
					}
					for (var i in data) {
						var href = "{php echo url('mc/bond/credits', array('type' => 'recorddetail', 'credittype' => $_GPC['credittype']),true)}";
						li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a href="' + href + '&id=' + data[i].id + '" ><div class="mui-row"><div class="mui-col-xs-6 mui-ellipsis-2">' + data[i].remark + '</div><div class="mui-col-xs-6 mui-text-right"><span class="mui-big mui-rmb" style="color:' + data[i].color + '"><span class="money" style="color:' + data[i].color + '">' + data[i].num + '</span></span><span class="mui-block mui-text-muted mui-small">' + data[i].createtime + '</span></div></div></a>';
						ul.appendChild(li, ul.firstChild);
					}
					$('.mui-pull-bottom-tips').show();
				});
				page++;
				return fragment;
			};
		}
	});
});
</script>
{/if}
{template 'common/footer'}