{extend name="layout/layout" /}
{block name="title"}个人中心{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
	html,
	body{
		background-color: #f2f4f8;
	}
    .u_h_ltext,
    .u_h_rtext{
        float: left;
        padding-top: .1rem;
        width: 50%;
        height: .34rem;
        font-size: .13rem;
        line-height: .24rem;
        box-sizing: border-box;
    }
    .u_h_ltext{
        text-align: right;
        padding-right: .1rem;
        color: #5e6a94;
    }
    .u_h_rtext{
        text-align: left;
        padding-left: .1rem;
        color: #5e6a94;
    }
	/** S: 弹出层 **/
	.pop{
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.8);
		display: none;
	}
	.box{
		position: relative;
		width: 85%;
		margin: 50px auto;
		min-height: 2rem;
		border-radius: 0.1rem;
		background:rgba(255,249,235,1);
		padding-bottom: 1px;
	}
	.box-content-warp{
		max-height: 470px;
		overflow: auto;
	}
	.close{
		position: absolute;
		width: 0.22rem;
		height: 0.22rem;
		background:url({:asset('/img/close.png')}) no-repeat center center;
		background-size: 100% 100%;
		right: 0;
		top: -0.3rem;
	}
	.title{
		width: 100%;
		text-align: center;
		font-family:宋体,黑体;
		font-weight:900;
		color:rgba(34,40,49,1);
		font-size: 0.24rem;
		padding-top: 0.18rem;
	}
	.title .sign-success{
		display: block;
		color: rgba(237, 56, 63, 1);
	}
	.sign-already{
		display: none;
	}
	.sign-list{
		margin-top: 0.21rem;
		font-size: 0;
		text-align: center;
	}
	.sign-item{
		width: 0.7rem;
		height: 0.8rem;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		border-radius:  0.06rem;
		font-family:PingFangSC-Regular;
		font-weight:400;
		font-size: 0.13rem;
		text-align: center;
		margin: 0 0 0.16rem 0.1rem;
		display: inline-block;
	}
	.sign-item:first-of-type{
		margin-left: 0;
	}
	.sign-item-tip{
		width: 100%;
		height: 0.24rem;
		line-height: 0.24rem;
		color: #fff;
		background:rgba(207,210,216,1);
		border-radius: 0.06rem 0.06rem 0 0;
		font-weight: bold;
	}
	.sign-item-img{
		width: 0.3rem;
		height: 0.3rem;
		margin: 0.06rem 0 0.025rem 0.19rem;
	}
	.sign-item-price{
		color: rgba(134, 139, 149, 1);
	}
	.signed-active .sign-item {
		background: rgba(255, 241, 242, 1);
	}
	.signed-active .sign-item-tip{
		background: rgba(248, 111, 116, 1);
	}
	.signed-active .sign-item-price{
		color: rgba(248, 111, 116, 1);
	}

	.text-tip{
		width: 100%;
		height: 0.44rem;
		line-height: 0.44rem;
		text-align: center;
		background:rgba(252,242,222,1);
		font-family: 宋体,STSongti-SC-Bold;
		font-weight:bold;
		color:rgba(69,59,37,1);
		font-size: 0.17rem;
	}
	.text-tip span{
		color: rgba(248, 111, 116, 1);
	}
	.rule{
		width: 100%;
		height: 1.15rem;
		border-radius: 0.12rem;
		background: #fff;
		padding: 0.13rem 0.16rem;
		box-sizing: border-box;
		font-size: 0.12rem;
		font-family:PingFangSC-Semibold;
		color:rgba(34,40,49,1);
		letter-spacing: 0.005rem;
		line-height: 0.16rem;
	}
	.rule-title{
		font-weight: 600;
	}
	.rule .rule-text{
		margin-top: 0.05rem;
	}
	/** E: 弹出层 **/

	/** S: 弹出层 **/
	.share-pop{
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.8);
		display: none;
	}
	.share-pop .box{
		position: relative;
		width: 3.2rem;
		min-height: 2rem;
		border-radius: 0.2rem;
		background:rgba(255,249,235,1);
		left: 50%;
		top: 3rem;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
	}
	.share-pop-close{
		position: absolute;
		width: 0.22rem;
		height: 0.22rem;
		background:url({:asset('/img/close.png')}) no-repeat center center;
		background-size: 100% 100%;
		right: 0;
		top: -0.3rem;
	}
	/** E: 弹出层 **/

</style>
<style type="text/css">
	.read_popup_box, .custom_popup_box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0,0,0,.5);
		font-size: 0;
		text-align: center;
		white-space: nowrap;
	}
	.rpb_main,
	.rpb_jgb{
		display: inline-block;
		vertical-align: middle;
	}
	.rpb_jgb{
		overflow: hidden;
		height: 100%;
		margin-left: -1px;
		width: 1px;
	}
	.rpb_main{
		overflow: hidden;
		width: 100%;
	}
	.rpbm_box{
		padding: .3rem .16rem .1rem;
		position: relative;
		left: 0;
		top: 0;
		overflow: hidden;
		background-color: #fff;
		margin: .14rem .48rem;
		border-radius: .16rem;
		white-space: normal;
		-webkit-box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
		box-shadow: 0 .03rem .1rem rgba(0, 0, 0, 1);
	}
	.rpbm_box a{
		display: block;
	}
	.rpb_img{
		overflow: hidden;
		margin: 0 auto .16rem;
		height: 1.39rem;
		width: 1.04rem;
		border-radius: .04rem;
		-webkit-box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
		box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.4);
	}
	.rpb_img a,
	.rpb_img img{
		overflow: hidden;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: .04rem;
	}
	.rpb_tit{
		overflow: hidden;
		margin: 0 0 .16rem;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
	}
	.rpb_tit a{
		overflow: hidden;
		display: block;
		height: .26rem;
		font-size: .18rem;
		color: #000;
		line-height: .26rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.rpb_p{
		margin-bottom: .1rem;
		overflow: hidden;
		max-height: .72rem;
	}
	.rpb_p a{
		overflow: hidden;
		display: block;
		font-size: .14rem;
		color: rgba(0,0,0,.5);
		text-align: left;
		line-height: .24rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	.rpb_but{
		text-align: center;
		height: .3rem;
	}
	.rpb_but a{
		display: block;
		height: .3rem;
		text-align: center;
		font-size: .16rem;
		color: #007aff;
		line-height: .3rem;
	}

	.rpbm_close_but{
		display: block;
		position: absolute;
		right: .1rem;
		top: .1rem;
		height: .2rem;
		width: .2rem;
		background: url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
		background-size: .14rem .14rem;
		border-radius: .2rem;
	}

</style>
<link href="{:asset('/css/frontend/ad/image.css')}" rel="stylesheet" type="text/css">
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}个人中心{/block}
{block name="main"}
<!-- 这是正文 body_sytle_girl -->
<div class="body_sytle">
	<div class="u_head_box">
		{present name="user"}
        {if $user['vip_endtime'] > time()}
            <div class="u_head_img_vip">
                <img alt="VIP头像" src="{$user['avatar']}" />
				<span></span>
            </div>
        {else /}
            <div class="u_head_img">
                <img alt="头像" src="{$user['avatar']}" />
            </div>
        {/if}
		<div class="u_head_txt">
			<strong>{$user['nickname']}</strong>
			<em><span>ID: </span>{$site['theme']??''}{$user['id']}</em>
            {if $user['vip_endtime'] > time()}
                <i>VIP:{$user['vip_endtime']|date="Y-m-d H:i:s",###}</i>
            {/if}
			<div class="u_h_ltext"><span>永久书币：</span><span>{$kandian_permanent}</span></div>
			<div class="u_h_rtext"><span>赠送书币：</span><span>{$kandian_fee}</span></div>
		</div>
		{/present}
	</div>
	<!--u_head_box 用户信息-->

	<div class="u_list_box">
		<ul class="u_list_ul">
			<li>
				<a href="/index/recharge/pay?from=wechat">
					<strong>充值</strong>
					<div class="u_list_li u_list_li_icon_1">余额：{$kandian} 书币</div>
				</a>
			</li>
			<!--广告 个人中心-->
			<div class="ad_position_13"></div>
			{if !empty($latestCampaign) && !empty($latestCampaign['banner_img'])}
			<li id="banner_campaign" class="ad_other_item">
				<a href="/index/recharge/campaignIndex?from=wechat&active_id={$latestCampaign['id']}" >
					<img src='{$latestCampaign["banner_img"]}' />
				</a>
			</li>
			{elseif !empty($subBannerImg)}
			<li id="" class="ad_other_item">
				<a href="/index/recharge/subscription?type=4&from=wechat" >
					<img src="{$subBannerImg}" />
				</a>
			</li>
			{elseif !empty($cardInfo)}
			<li id="card_banner">
				<a href="/index/activity/cardFlip?type=banner&actId={$cardInfo['id']}" >
					<img src="{$cardInfo['banner_img']}" />
				</a>
			</li>
			{elseif ($vip) }
			<li class="ad_other_item">
				<a href="/index/recharge/vip?from=wechat">
					<div style='width: 100%; height: 100%; background-image: url({:asset("/img/frontend/vip_pay_banner/".$adminconfig['vip_pay_tpl']."_v1.png")});background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;'>
						{if condition="$adminconfig['vip_pay_tpl'] == 'default'"}
						<span style="line-height: 4.64em; text-align: center; display: block; color: #FFFFFF;font-weight: bold;">{$good_desc}</span>
						{else}
						<span style="line-height: 6.64em; text-align: center; display: block; color: #57341D;">{$good_desc}</span>
						{/if}
					</div>
				</a>
			</li>
			{/if}
			<li>
				<a href="/index/recharge/record?from=wechat">
					<div class="u_list_li u_list_li_icon_2">充值记录</div>
				</a>
			</li>
			<li>
				<a href="/index/user/recent?from=wechat">
					<div class="u_list_li u_list_li_icon_4">阅读记录</div>
				</a>
			</li>
		</ul>
	</div>
	<!-- 测试用:上线可删除 -->

	{if condition='$flag eq 1'}
	<!--<a class="u_sign" href="/index/user/sign?from=wechat">签到</a>-->
	<a class="u_sign" id="dosign" href="javascript:void(0);">签到</a>
	{/if}

	<!--u_list_box 用户列表-->
	{if condition="$is_show_tabbar" }
	{include file="public/tabbar" /}
	{/if}
	{if condition="$isSubActUser == 1"}
	<div class="u_list_box">
		<ul class="u_list_ul">
			<li>
				<a href="/index/activity/subscribe?from=wechat">
					<div class="u_list_li u_list_li_icon_4">阅读打卡记录</div>
				</a>
			</li>
		</ul>
	</div>
	{/if}
<!--占位div-->
<div style="height:50px"></div>
</div>

<!-- 签到弹窗 -->
<div class="pop">
	<div class="box">
		<div class="box-content-warp">
			<div class="close"></div>
			<div class="title">
				<span class="sign-success">签到成功</span>
				<span class="sign-already">您今天已签到过啦</span>
			</div>
			<div class="sign-list">
			</div>
			<div class="text-tip">
				连续签到<span>7天</span>合计得<span>350个</span>书币
			</div>
			<!-- 三期签到弹窗天降福利广告 -->
			<div class="ad_welfare_toast">
				恭喜获得XX书币
			</div>
			<div class="ad_welfare_sign ad_welfare">
				<img class=" ad_welfareclcik " src="{:asset('/img/frontend/chapter/signwelfare.png')}" />
			</div>
			<div class="rule">
				<div class="rule-title">签到说明:</div>
				<div class="rule-text">1、本签到为累积签到，用户若中途中断签到，签到记录自动从新开始。<br></div>
				<div class="rule-text">2、签到周期为7天。</div>
				<div class="rule-text">3、签到领取的书币有效期为3天。</div>
			</div>
		</div>
		<!--广告 个人中心 签到成功-->
		<div class="ad_position_12"></div>
	</div>
</div>

{/block}
{block name="footer"}
<div style="display: none" id="poptype" data-poptype="yunying,activity,continue,camp,subscribe,custom"></div>
{/block}
{block name="js"}
<!-- 这里引入js -->
<script>
    $(function () {
        var n = 0;
        $('.u_head_box img').click(function () {
            n++;
            if (n > 4) {
                window.location.href = '/index/index/dev'
            }
        })
    });

    // 关闭弹窗
    $('.close').click(function(){
        $('.pop').hide();
		$.post('/index/popup/window', {path: "/index/user/sign", poptype: 'yunying'}, function (data) {
			if (typeof data == 'string') {
				$('body').append(data)
			}
		})
    });

    var isClick = false;
    $('#dosign').click(function(){
        $.post('/api/user/signcontinuous',
			{
			    'actionfrom':'page',
			},function(data){
            if (data.err == 0){
                showSignInfo(data.continue_days);
            }else {
            	if (data.err == 1) {
					//isClick = false;
					$(".sign-success").html("您今天已经签到过啦").css('color', "#222831");
					showSignInfo(data.continue_days);
				} else {
					$(".sign-success").html(data.msg).css('color', "#222831");
					showSignInfo(-1);
				}
            }
        })
    });

    function showSignInfo(continue_days){
        var mod = 7;
        continue_days = (continue_days % mod) == 0 ? mod : (continue_days % mod);
        var signdays = new Array()
        signdays[1] = "第一天";
        signdays[2] = "第二天";
        signdays[3] = "第三天";
        signdays[4] = "第四天";
        signdays[5] = "第五天";
        signdays[6] = "第六天";
        signdays[7] = "第七天";
        var base_num = 30;
        var html = '';
        for(var i = 1; i <= mod; i ++ ){
            if (i < continue_days) {
                html += "<div class=\"sign-item signed-active\">";
                html += "<div class=\"sign-item-tip\">已签到</div>";
                html += "<img class='sign-item-img' src=\"{:asset('/img/sign.png')}\" alt=\"\">";
            } else if (i == continue_days) {
                html += "<div class=\"sign-item signed-active\">";
                html += "<div class=\"sign-item-tip\">今日已签</div>";
                html += "<img class='sign-item-img' src=\"{:asset('/img/sign.png')}\" alt=\"\">";
            } else {
                html += "<div class=\"sign-item\">";
                html += "<div class=\"sign-item-tip\">" + signdays[i] + "</div>";
                html += "<img class='sign-item-img' src=\"{:asset('/img/unsign.png')}\" alt=\"\">";
            }
            html += "<div class=\"sign-item-price\">" + (base_num + i * 5) + "书币</div>";
            html += "</div>";
        }
        $(".sign-list").html(html);
        $(".pop").show();
	}
</script>

<!-- 这里引入js -->
<script type="text/javascript" src="{:asset('/js/frontend/common_tips.js')}"></script>
<!-- 多条广告如下脚本只需引入一次 -->
{if condition="$isAdPick"}
{include file="public/ad_common_js"}
<script type="text/javascript" src="{:asset('/js/frontend/ad/ad_welfare.js')}"></script>
{/if}
<script>
	window.$isAdPick = '{$isAdPick}'
	window.$adLatestVersion = '{$ad_latest_version}'
	$(function(){
		window.$isAdPick == '1' && window.simpleAD.render(window.AD_PAGE_CODE.MY)
	})
</script>
{/block}