quick-pay
/
pay.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <meta http-equiv="Content-Language" content="zh-cn">
	    <meta name="apple-mobile-web-app-capable" content="no"/>
	    <meta name="apple-touch-fullscreen" content="yes"/>
	    <meta name="format-detection" content="telephone=no,email=no"/>
	    <meta name="apple-mobile-web-app-status-bar-style" content="white">
	    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	    <meta http-equiv="Expires" content="0">
	    <meta http-equiv="Pragma" content="no-cache">
	    <meta http-equiv="Cache-control" content="no-cache">
	    <meta http-equiv="Cache" content="no-cache">
	    <meta name="viewport"
	          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>商品支付</title>
		<link rel="stylesheet" href="css/pay.css" />
	</head>
	<body>

		<div id='main-container' v-cloak>
			<h1 class="mod-title">
		        <span class="ico_log ico-3" v-if="isWeixin"></span>
		        <span class="ico_log ico-1" v-if="isAlipay"></span>
		    </h1>

		    <div class="mod-ct">
		        <div class="order"></div>
		        <!--待支付金额-->
		        <div class="amount" id="money">￥{{ payData.money }}</div>
		        <!--支付宝移动端-->
		        <div class="paybtn" v-if="showAlipayMobile">
		        	<a :href="qrcodeUrl" id="alipaybtn" class="btn btn-primary" target="_blank">启动支付宝App支付</a>
		        </div>
		        <!--/支付宝移动端-->
		        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
		            <div data-role="qrPayImg" class="qrcode-img-area">
		                <div class="show-qr-container">
		                    <div ref='show_qrcode_container' v-if="!isExpired"></div>
		                    <!--过期-->
		                    <img id="show_qrcode" width="300" height="210"
		                    	 src="./images/qrcode_timeout.png" v-if="isExpired">
		                    <!--微信icon-->
		                    <img onclick="$('#pay-icon').hide()" id="pay-icon"
		                    	 src="./images/logo_weixin.png" v-if="isWeixin && !isExpired">
		                    <!--支付宝icon-->
		                    <img onclick="$('#pay-icon').hide()" id="pay-icon"
		                    	 src="./images/logo_alipay.png" v-if="isAlipay && !isExpired">
		                </div>
		            </div>
		        </div>

		        <!--微信手机端-->

		        <!--Android-->
		        <div class="payweixinbtn" v-if="showWeixinAndroid">
		        	<a :href="'http://mobile.qq.com/qrcode?url=' + qrcodeUrl"
		        	   target="_blank" id="downloadbtn" class="btn btn-primary">1.先保存二维码到手机</a>
		        </div>

		        <div class="payweixinbtn dom-interval" v-if="showWeixinAndroid">
		        	<a href="weixin://" class="btn btn-primary">2.打开微信，扫一扫本地图片</a>
		        </div>

		        <!--IOS-->
		        <div class="iospayweixinbtn" v-if="showWeixinIOS">
		        	1.长按上面的图片然后"存储图像"<br>注：苹果系统请截图保存二维码
		        </div>
		        <div class="iospayweixinbtn dom-interval" v-if='showWeixinIOS'>
		        	<a href="weixin://scanqrcode" class="btn btn-primary">2.打开微信，扫一扫本地图片</a>
		        </div>
		        <!--/微信手机端-->

				<!--公共模块-->
		        <div class="time-item dom-interval">
		            <div class="time-item" id="msg">
		            	<h1 v-if="!isExpired">{{ showAlipayMobile ? '支付完成后，请返回此页' : '付款即时到账 未到账可联系我们' }}</h1>
		            	<h1 v-if="isExpired">{{isExpired ? '请刷新页面后重试！' : ''}}</h1>
		            </div>
                    <div class="time-item"><h1>订单:{{ payData.orderId }}</h1> </div>
                    <strong id="hour_show"><s id="h"></s>{{countdownData.hours}}时</strong>
		            <strong id="minute_show"><s></s>{{countdownData.minutes}}分</strong>
		            <strong id="second_show"><s></s>{{countdownData.seconds}}秒</strong>
		        </div>
		        <!--/公共模块-->

		        <!--微信PC端-->
		        <div class="tip" v-if="showWixinPC">
		            <div class="ico-scan"></div>
		            <div class="tip-text">
		               <p id="showtext" v-if="showWixinPC">打开微信 [扫一扫]</p>
		            </div>
		        </div>
		        <!--/微信PC端-->
		        <!--支付宝PC端-->
		        <div class="tip" v-if="showAlipayPC">
		            <div class="ico-scan"></div>
		            <div class="tip-text">
		               <p id="showtext" v-if="showAlipayPC">打开支付宝 [扫一扫]</p>
		            </div>
		        </div>
		        <!--/支付宝PC端-->

		        <!--微信移动端-->
		        <div class="tip" v-if="showWeixinMobile">
		            <div class="ico-scan"></div>
		            <div class="tip-text">
		                <p id="showtext">请保存二维码到手机<br>微信扫一扫点右上角-从相册选取</p>
		            </div>
		        </div>
		        <!--/微信移动端-->

		        <div class="tip-text"></div>
		    </div>
		    <!--倒计时组建-->
			<comp-count-down
		      v-on:countdowndata="countDownEventHandle"
		      v-on:countdownstart="countDownStart"
		      v-on:countdownend="countDownEnd"
		      v-on:initdata="getInitData"></comp-count-down>
		</div>
	<script type="text/javascript" src="js/require.js" data-main="js/pay.js"></script>
	</body>
</html>