huahuibao/app/mobile/views/pay/active.php

<link href="/css/active/hdx.min.css?version=<?= $this->context->version ?>" rel="stylesheet" type="text/css">
<style type="text/css">
#event_content img {
	max-width: 100% !important;
	height: auto !important;
}

.navbar-fixed-bottom {
	border-top: 1px solid #bcbcbc;
	box-sizing: border-box;
	height: 50px;
	z-index:90;
}

.navbar-bottom-small {
	background: #fff;
}

.navbar-bottom-small a.btn {
	padding-top: 5px;
	height: 50px;
	color: #999999
}

.navbar-bottom-small a.btn span {
	margin-right: 0px;
}

#reg_event_btn_enabled {
	height: 50px;
	line-height: 50px;
	padding: 0;
}

.open-app-img {
	width: 20px;
}

.navbar-bottom-small:nth-of-type(1) {
	border-right: 1px solid #bcbcbc;
}

@media all and (max-width:400px) {
	.modal.pay-complete.in .modal-dialog {
		width: 100% !important;
	}
}

@media all and (max-width:320px) {
	.modal.pay-complete.in .go-ticket {
		padding-top: 220px !important;
	}
}

@media all and (min-width:350px) and (max-width:400px) {
	.modal.pay-complete.in .modal-dialog {
		width: 350px !important;
	}
}

@media all and (min-width:401px) and (max-width:450px) {
	.modal.pay-complete.in .modal-dialog {
		width: 85% !important;
	}
}
.activeContent {
	position: relative;
	margin-top: 15px;
	z-index:1;
}
.activeContent img{
	width:100%;
}
</style>

<div name="activeBeCenterMask" class="xhMask" ></div>
<div name="activeBeCenter" class="xhBeCenterBox" style="border-radius:3px;z-index:1040">
    <div class="lay-body" id="J_MainBody" style="padding-top:0px;">
    <div style="text-align:right;" id="close"><img src="/images/close.png" style="margin-right:10px;margin-top:8px;" /></div>
        <div class="reg">
            <div class="reg-form" style="padding-top:3px;">
                <form action="" method="post">
                    <div class="m-form reg-name">
                        <input type="text" class="m-full-txt " id="J_name" name="activeName" placeholder="姓名">
                    </div>
                    <div class="m-form reg-phone">
                        <input type="text" name="activeMobile" class="m-full-txt reg-phone-number J_Phone" placeholder="手机号">
                    </div>
                    <div class="m-form reg-msg">
                        <input type="text" class="m-full-txt reg-msg-code" name="activeCode" id="J_mcode" placeholder="短信验证码">
                        <button type="button" class="reg-phone-sure J_Code" getmobilemsgstatus="yes" name="activeCreateCode">
                        <span name="getActiveCodeText">获取验证码</span>
                        <span style="display:none;" name="reGetActiveCode"><i style="color:white;font-size:12px;">120</i>秒后重新获取</span>
                        </button>
                    </div>
                    <div style="margin:0 5%;font-size:12px;color:red;" name="activeHint"></div>
                    <div class="login-btn clearfix"><button type="button" onclick="registerInfo()" style="border-radius:3px;">确认报名</button></div>
                </form>
            </div>
        </div>
    </div>
</div>
<section class="event-details event-details2" id="event-details">
	<h1><?= $active['title'] ?></h1>
	<div class="org-name">
		<div style="clear: both;"></div>
	</div>
	<div class="text-right" style="padding: 8px 0 0;">
		<span>报名人数：<?= $active['applyNum'] ?></span>
		<!-- <span>报名：0</span> -->
	</div>
	<div class="event-info">
		<div>
			<span><span class="icon-time"></span>时间</span>
			<?php if(date("m月d日",$active['startTime']) == date("m月d日",$active['endTime'])){
				echo date("m月d日 H:i",$active['startTime']).' - '.date("H:i",$active['endTime']);
			}else{ 
				echo date("m月d日 H:i",$active['startTime']).' - '.date("m月d日 H:i",$active['endTime']);
			} ?>
		</div>
		<div class="place">
			<span><span class="icon-place"></span>地点</span><a href="http://api.map.baidu.com/geocoder?address=<?= $active['address'] ?>&output=html"><?= $active['address'] ?></a>
			<div class="icon-gps"></div>
		</div>
		<div style="border-bottom: 0;">
			<span><span class="icon-ticket"></span>票价</span> <span class="text-warning"><?php if($ticketClass['price'] > 0){ echo $ticketClass['price'].'元'; }else{ echo'免费'; }?></span>
		</div>
	</div>
	<div class="activeContent">
		<?= $active['content'] ?>
	</div>
	<section>
		<div id="event_content">
		<div id="home_event_description" class="home_event_summary">
		</div>
		</div>
		<div style="padding-bottom:45px;"></div>
	</section>
	<div id="event_register_step1">
		<div class="navbar-fixed-bottom btn-signup-lg">
			<div class="col-3  navbar-bottom-small">
				<a class="btn" href="<?= $this->context->frontUrl ?>/mobile/index?account=<?= $this->context->merchant['id'] ?>"> <img src="/images/active/openApp.png" class="open-app-img">
					<p style="font-size:12px;">首页</p>
				</a>
			</div>
			<div class="col-3 navbar-bottom-small">
                <?php if($this->context->merchant['id'] == 16063078666){  ?>
                <a href="http://www.fjglhs.com/" class="btn" name="eventFollowSpan">
                <?php }else{ ?>
				    <a href="<?= $this->context->frontUrl ?>/mobile/index?account=<?= $this->context->merchant['id'] ?>" class="btn" name="eventFollowSpan">
                <?php } ?>
				<span class="icon-like-before" id="b_like"></span>
					<p style="font-size:12px;">关于我们</p>
				</a>
			</div>
			<?php if($this->context->isLogin){ ?>
				<!-- 还未报名 -->
				<?php if(empty($apply)){ ?>
					<!-- 没有手机号 -->
					<?php if(empty($user['mobile'])){ ?>
						<div id="fillUserInfo" class="col-6">
							<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" style="padding:14px 0">我要报名</a>
						</div>
					<!-- 可以报名 -->
					<?php }else{ ?>
					<div id="activeApply" class="col-6">
						<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" style="padding:14px 0">我要报名</a>
					</div>
					<?php } ?>
				<!-- 已经报过名 -->
				<?php }else{ ?>
					<div class="col-6">
						<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" style="padding:14px 0">已经报名</a>
					</div>
				<?php } ?>
			<!-- 没有登陆 -->
			<?php }else{ ?>
				<div class="col-6" onclick="goToLogin('<?= $_SERVER['REQUEST_URI'].'&wantLogin=yes' ?>')">
					<a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" style="padding:14px 0">我要报名</a>
				</div>
			<?php } ?>
		</div>

		<div class="modal fade ticket-modal ticket-modal-bottom in" id="ticket-modal" data-scroll="true" aria-hidden="false" style="display:none; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <div class="modal-dialog">
                <div class="modal-content">
                    <h3 class="modal-header">
                       	 活动信息
                        <div class="close" name="activeClose" data-dismiss="modal"><span class="icon-close-bubble"></span></div>
                    </h3>
                    <div class="media">
                        <img class="pull-left" src="/images/active/cover2.jpg" alt="">
                        <div class="media-body">
                            <h4><?= $active['title'] ?></h4>
                            <div><?= $active['address'] ?></div>
                            <div><?= date("m月d日 H:i",$active['startTime']) ?></div>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div id="">
                            <div class="popover-box" id="event_tickets_area">
                                <ul name="event_tickets_thumbs">
                            <?php if($ticketClass['price'] > 0){ ?>
                                <li class="class info active" style="padding-top:2px;padding-bottom:2px;"><div><div class="title">报名费</div><span class="text-primary"><?= floatval($ticketClass['price']) ?>元</span><p id="event_ticket_tips_0" style="display: block;"></p></div><b class="round-top"></b><b class="round-bottom"></b><b class="round-left"></b><b class="round-right"></b></li>
                            <?php }else{ ?>
                                <li class="class info active" style="padding-top:2px;padding-bottom:2px;"><div><div class="title">免费票</div><span class="text-primary">免费</span><p id="event_ticket_tips_0" style="display: block;"></p></div><b class="round-top"></b><b class="round-bottom"></b><b class="round-left"></b><b class="round-right"></b></li>
                            <?php } ?>
                                </ul>
                            </div>
                            <div class="clearfix" style="padding-top: 10px;">
                                <div class="col-6" style="padding-right: 10px; display: none;" id="event_ticket_order_number">
                                    <select id="event_ticket_order_number_sel" class="simpleinput"><option value="1">1 张</option></select>
                                </div>
                                <div class="" id="event_ticket_order_btn">
                                    <button class="btn btn-primary btn-block" onclick="applyActive()">确认报名</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</section>
<script>


<?php if($this->context->isWeixin){ ?>
//微信分享
var shareTitle = '<?= $active['title'] ?>';
var descContent = '<?= $active['title'] ?>';
var lineLink = '<?= Yii::$app->params['frontUrl'] ?>/pay/active?id=<?= $active['id'] ?>&account=<?= $this->context->merchant['id'] ?>&weixinShare=yes';
var imgUrl = '<?= Yii::$app->params['imgUrl'].$this->context->merchant['logo'] ?>';
wx.config({
debug:false,
 appId: '<?= $this->context->signPackage['appId'] ?>',
 timestamp: <?= $this->context->signPackage['timestamp'] ?>,
 nonceStr: '<?= $this->context->signPackage['nonceStr'] ?>',
 signature: '<?= $this->context->signPackage['signature'] ?>',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
]
});
wx.ready(function () {
var shareData = {
	  title: shareTitle,
	      link: lineLink,
	      imgUrl: imgUrl,
	      desc:descContent,
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline({
	  	  title: shareTitle,
      link: lineLink,
      imgUrl: imgUrl,
      desc:descContent,
      success: function () { 
		//分享成功后的操作
      },
	cancel: function () { 
		// 用户取消分享后执行的回调函数
	}
});
wx.onMenuShareQQ({
	  	  title: shareTitle,
      link: lineLink,
      imgUrl: imgUrl,
      desc:descContent,
      success: function () { 
		//分享成功后的操作
      },
	cancel: function () { 
		// 用户取消分享后执行的回调函数
	}
});
wx.onMenuShareWeibo(shareData);
});
<?php } ?>


			
var activeBeCenter		= $("div[name=activeBeCenter]");
var activeBeCenterMask 	= $("div[name=activeBeCenterMask]"); 
var activeHeight		= activeBeCenter.outerHeight();//取div标签的高宽
var activeWidth			= activeBeCenter.outerWidth();//取浏览器高宽
var wWidth				= $(window).width(); 
var wHeight				= $(window).height();
var _scrollHeight		= $(document).scrollTop();//获取当前窗口距离页面顶部高度 
var rH 					= (wHeight - activeHeight) / 2 + _scrollHeight; 
var rW					= (wWidth - activeWidth) /2; 
activeBeCenter.css({"z-index":998,"position":"absolute","left":rW,"top":rH,});

//验证流程
var activeName			= $("input[name=activeName]");
var activeMobile 		= $("input[name=activeMobile]");
var activeCode			= $("input[name=activeCode]");
var needValidate 		= [activeName,activeMobile,activeCode];

setStats(activeName, '请填写姓名', function(val, mess){
	var info=[false, mess];
	if(val.length <= 0){
		info[1] = '请填写姓名';
	}else if(getLength(val) >=0 && getLength(val) <=40){
		info[0] = true;
		info[1] = '填写正确';					
	}else{
		info[0] = false;
		info[1] = '填写错误';
	}
	return info;
});

setStats(activeMobile,'请填写手机号',function(val,msg){
	var info	= [false,msg];
	val			= $.trim(val);
	if(val.length <= 0){
		info[1] = '请填写手机号';
	}else if((/^1[0-9]\d{9}$/.test(val)) == false){
		info[1] = '手机号填写不正确';
	}else{
		$.ajax({type:"GET",url:"/active/mobile-not-use?account=<?= $this->context->merchant['id'] ?>&mobile="+val,dataType:'json',async:false,success:function(data){
			if(data.code == 'A0001'){
				info[0] = true;
			}else{
				info[1] = data.msg;
			}
		}});
	}
	return info;
});

setStats(activeCode, '请填写验证码', function(val, mess){
	var info=[false, mess];
	if(getLength(val) > 0){
		$.ajax({type:"GET",url:"/active/check-auth-code?account=<?= $this->context->merchant['id'] ?>&code="+val,dataType:'json',async:false,success:function(data){
			if(data.code == 'A0001'){
				info[0] = true;
			}else{
				info[1] = data.msg;
			}
		}});
	}else{
		info[1] = '请填写验证码';
	}
	return info;
});

function registerInfo()
{
	var verifyStatus	= true;
	for(var m=0;m<needValidate.length;m++){
		var singleObj	= needValidate[m];
		if(singleObj.attr('activeinputstatus') == undefined){
			singleObj.blur();
		}
		if(singleObj.attr('activeinputstatus') == 'no'){
			verifyStatus = false;
			singleObj.blur();
			break;
		}
	}
	if(verifyStatus == false){
		return;
	}
	var data = "_csrf=<?= Yii::$app->request->csrfToken ?>&mobile="+activeMobile.val()+"&realName="+activeName.val()+"&code="+activeCode.val();
	$.ajax({
	    type:"POST",
        url:'/active/register-info?account=<?= $this->context->merchant['id'] ?>',
        data:data,
        dataType:'json',
        async:false,
        success:function(data){
            if(data.code =='A0001'){
                applyActive();
            }
        }
	});
}

function setStats(obj,mess,check)
{
	obj.focus(function(){
		$("div[name=activeHint]").html('');
	});
	obj.blur(function(){
		var objVal = obj.val();
		var info = check(objVal,mess);
		if(info[0]){
			$(this).attr('activeinputstatus','yes');
			$("div[name=activeHint]").html('');
		}else{
			$(this).attr('activeinputstatus','no');
			$("div[name=activeHint]").html(info[1]).css('color','red');
		}
	});
}

var activeCreateCode	= $("button[name=activeCreateCode]");
var getActiveCodeText	= $("span[name=getActiveCodeText]");
var reGetActiveCode		= $("span[name=reGetActiveCode]");
activeCreateCode.click(function(){//获取手机验证码
	var mobileVal		= activeMobile.val();
	if(mobileVal.length <= 0){
		$("div[name=activeHint]").html('请填写手机号').css("color","red");
	}
	if(activeMobile.attr('activeinputstatus') == undefined){//手机未验证
		return;
	}
	if(activeMobile.attr('activeinputstatus') == 'no'){//手机验证未通过
		return;
	}
	//防止连续点击
	if(activeCreateCode.attr('clicked') == 'yes'){
		xhPopMsg('请稍候…',1600);
		return;
	}
	activeCreateCode.attr('clicked','yes');
	setTimeout(function(){
		activeCreateCode.attr('clicked','no');	
	},3000);
	$("p[name=authCodeHint]").html('');
	if(activeCreateCode.attr('getMobileMsgStatus') == 'yes'){
		$.ajax({type:"GET",url:"/active/generate-auth-code?account=<?= $this->context->merchant['id']?>&mobile="+mobileVal,dataType:'json',async:false,success:function(data){
			if(data.code == 'A0001'){
				activeCreateCode.attr('getMobileMsgStatus','no');
				getActiveCodeText.css("display","none");
				reGetActiveCode.css("display","block").parent().css("background-color","#CCCCCC").css("border-color","#CCCCCC");
				var timeSupport 		= reGetActiveCode.find('i');
				var beginTimeNum		= timeSupport.text();//记录一开始时间
				var timeNumDecrease		= parseInt(beginTimeNum);//用于减少的时间
				var setInt 				= setInterval(function(){
					timeNumDecrease--;
					timeSupport.text(timeNumDecrease);
					if(timeNumDecrease == 0){
						clearInterval(setInt);
						getActiveCodeText.css('display','block').parent().css("background-color","#18a8df").css("border-color","#1590be");
						reGetActiveCode.css('display','none');
						timeSupport.text(beginTimeNum);
						activeCreateCode.attr('getMobileMsgStatus','yes');
					}
				},1200);
			}else{
				activeMobile.siblings('p').css("color","red").html(data.msg);
			}
		}});
	}
});


$("#apply").click(function(){
	activeBeCenter.css('display','block');
	activeBeCenterMask.css('display','block');
});
$("#close").click(function(){
	activeBeCenter.css('display','none');
	activeBeCenterMask.css('display','none');
	$('html').removeClass('noscroll');//去除浮层允许底部滚动
});
$("#activeApply").click(function(){
	$("#ticket-modal").css('display','block');
	activeBeCenterMask.css('display','block');
	$('html').addClass('noscroll');//有浮层不允许底部滚动
});
$("#fillUserInfo").click(function(){
	activeBeCenter.css('display','block');
	activeBeCenterMask.css('display','block');
	$('html').addClass('noscroll');//有浮层不允许底部滚动
});
$("div[name=activeClose]").click(function(){
	$("#ticket-modal").css('display','none');
	activeBeCenterMask.css('display','none');
	$('html').removeClass('noscroll');//允许底部滚动
});


<?php if($this->context->isWeixin){?>

var appId,nonceStr,package,paySign,signType,timeStamp,orderId;

//确定并开始走报名流程
function applyActive()
{
	var data	=	'activeId=<?= $active['id'] ?>&_csrf=<?= Yii::$app->request->csrfToken ?>&classId=<?= $ticketClass['id'] ?>';
	$.ajax({type:"POST",url:'/active/apply?account=<?= $this->context->merchant['id'] ?>',data:data,dataType:'json',async:false,success:function(data){
		if(data.code == 'A0001'){
			if(data.data.fee == 'free'){
				xhPopMsg(data.msg);
				setTimeout(function(){
window.location.href='<?= Yii::$app->params['frontUrl'] ?>/active/result?status=success&orderId='+data.data.orderId+'&account=<?= $this->context->merchant['id'] ?>';
				},1800);		
			}else{
				appId		= data.data.appId;
				nonceStr	= data.data.nonceStr;
				package		= data.data.package;
				paySign		= data.data.paySign;
				signType	= data.data.signType;
				timeStamp	= data.data.timeStamp;
				orderId		= data.data.orderId;
				if (typeof WeixinJSBridge == "undefined"){
				    if( document.addEventListener ){
				        document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
				    }else if (document.attachEvent){
				        document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
				        document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
				    }
				}else{
				    jsApiCall();
				}
			}
		}else{
			xhPopMsg(data.msg,2000);
		}
	}});

}

//调用微信JS api 支付
function jsApiCall()
{
	WeixinJSBridge.invoke(
		'getBrandWCPayRequest', {
	           "appId":appId,     //公众号名称，由商户传入     
	           "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数     
	           "nonceStr" : nonceStr, //随机串     
	           "package" : package,     
	           "signType" : signType,         //微信签名方式：     
	           "paySign" : paySign //微信签名 
		},
		function(res){
			WeixinJSBridge.log(res.err_msg);
			//alert(res.err_code+'|'+res.err_desc+'|'+res.err_msg);
			if(res.err_msg == 'get_brand_wcpay_request:ok'){
window.location.href='<?= Yii::$app->params['frontUrl'] ?>/active/result?status=success&orderId='+orderId+'&account=<?= $this->context->merchant['id'] ?>';
			}
		}
	);
}

<?php } ?>

</script>