gain.html 9.57 KB
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有货&可口可乐</title>
	<meta name="apple-mobile-web-app-title" content="SUMMER SALE">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" media="(device-height: 568px)">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="grey">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			font-size: 14px;
		}
		html,body{
			width: 100%; 
			height: 100%;
		}
		.page{
			width: 100%; 
			height: 100%;
			overflow: hidden;
			background: #e10c1e;
		}
		.banner{
			width: 100%;
			height: auto;
			overflow: hidden;
		}
		.banner img{
			width: 100%;
			height: auto;
		}
		.centent{
			width: 100%; 
			height: auto;
			overflow: hidden;
			padding-top: 2rem;
			padding-bottom: .6rem;
		}
		.centent p{
			width: 100%;
			height: auto;
			overflow: hidden;
			text-align: center;
			color: #fff;
			line-height: 2rem;
			font-size: .9rem
		}
		.centent p.phone{
			font-size: 1.3rem;
			font-weight: bold;
			line-height: 2.6rem;
		}
		.coupon{
			width: 81.25%;
			height: auto;
			overflow: hidden;
			margin: 0 auto;
		}
		.coupon img{
			width: 100%; 
			height: auto;
		}
		.dialog{
			width: 82%;
			height: 14rem;
			position: absolute;
			background: #fff;
			border-radius: .6rem;
			left:9%;
			top: 45%;
			margin-top: -7rem;
			z-index: 2;
		}
		.dialog .close{
			width: 1.4rem;
			height: 1.4rem;
			background: #444;
			color: #f1f1f1;
			border-radius: 50%;
			position: absolute;
			top: -.5rem;
			right: -.5rem;
			line-height: 1.4rem;
			text-align: center;
		}
		.dialog .inform{
			width: 100%;
			height: 6rem;
			overflow: hidden;
			text-align: center;
			padding-top: 1.5rem;
			line-height: 2.4rem;
		}
		.dialog .inform h3{
			font-size: 1.5rem;
		}
		.dialog .inform span{
			font-size: 1rem;
		}
		.dialog .btn-list{
			width: 110%;
			height: 3.4rem;
			overflow: hidden;
			border-top: 1px solid #c5c5c5;
		}
		.btn-list span{
			width: 45.5%;
			height: 3.4rem;
			overflow: hidden;
			float: left;
			border-right: 1px solid #c5c5c5;
			line-height: 3.4rem;
			text-align: center;
			font-size: 1.2rem;
		}
		.hidden{
			display: none;
		}
		.keep-out{
			width: 100%; 
			height: 100%;
			overflow: hidden;
			background-color: #000;
			opacity: 0.4;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.activity-message{
			overflow: auto;
		}
		.activity-message h3{
			width: 100%;
			height: 3.4rem;
			padding-top: .6rem;
			line-height: 3.4rem;
			font-size: 1.2rem;
			text-align: center;
		}
		.activity-message p{
			width: 85%;
			height: auto;
			overflow: hidden;
			margin:0 auto;
			line-height: 2rem;
		}
		.footer{
			width: 100%;
			height: auto;
			overflow: hidden;
		}
		.footer .btn{
			width: 81.25%;
			height:auto;
			margin: 0 auto .6rem;
		}
		.footer .btn img{
			width: 100%;
			height: auto;
		}
		.footer span{
			font-weight: bold;
			display: inline-block;
			width: 20%;
			height: auto;
			text-align: center;
			color: #fff;
			margin: 0 40%;
		}
		.btn-list a{
			text-decoration:none;
			color: #000;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="banner">
            <img src="/activity/cocacola/images/cokeBanner.jpg">
		</div>
		<div class="centent">
			<div class="coupon">
                <img src="/activity/cocacola/images/cokeCoupon.png">                
			</div>
            <p class="phone">优惠券已放至账户<span id="mobile"></span></p>
			<p>登录Yoho!Buy有货客户端即可使用</p>
		</div>
		<div class="footer">
			<div class="btn">
                <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho"><img src="/activity/cocacola/images/cokeBtn.png"></a>    
			</div>
			<span>活动说明</span>
		</div>
	</div>
	<div class="dialog hidden" style="height: 11rem;" id="dialog">
		<div class="content" style="overflow: hidden;">
			<div class="inform">
				<h3>恭喜您成功领取</h3>
				<span>Yoho!Buy有货优惠券</span>
			</div>
			<div class="btn-list">
				<span><a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho">下载Yoho!Buy有货</a></span>
				<span style="color: red;">我知道了</span>
			</div>
		</div>
	</div>
	<div class="keep-out hidden"></div>
	<div class="dialog hidden" id="message">
		<span class="close">X</span>
		<div class="activity-message">
			<h3>活动说明</h3>
			<div class="message">
				<P>1、活动时间:2016年4月7日到2016年7月7日</P>
				<P>2、仅限新注册用户以及首次购买用户使用</P>
				<P>3、同一手机号限领一次优惠券</P>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/activity/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
(function(w, d, s, j, f) {
    var a = d.createElement(s);
    var m = d.getElementsByTagName(s)[0];

    w.YohoAcquisitionObject = f;

    w[f] = function() {
        w[f].p = arguments;
    };

    a.async = 1;
    a.src = j;
    m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'http://cdn.yoho.cn/yas-jssdk/1.0.14/yas.js', '_yas');
(function() {
    if (window._yas) {
        window._yas(1 * new Date(), '1.0.14', '', '', '', '');
    }
}());
</script>
<script type="text/javascript">
	
	function getQueryStr(key){
	    var svalue = location.search.match(new RegExp("[\?\&]" + key + "=([^\&]*)(\&?)","i"));
	    var str = svalue ? svalue[1] : svalue;
	    return str == null ? "" : str;
	}
	$(function() {
	    $("#mobile").html(getQueryStr("mobile"));
	});

	
	$('.close').on('click', function(){
		$('.dialog').addClass('hidden');
		$('.keep-out').addClass('hidden');
		$('#dialog .content').html(' ')
	})
	$('.footer span').on('click',function(){
		$('#message').removeClass('hidden');
		$('.keep-out').removeClass('hidden');
	})
	setTimeout(function(){
		$('#dialog').removeClass('hidden');
		$('.keep-out').removeClass('hidden');
	},1000)
	$('.btn').on('click',function(){
		if (window._yas) {
			window._yas.sendCustomInfo({
    			'downApp': 'Y'
			}, true);
		}
		setTimeout(function(){
			console.log(1);
		}, 2000)
	})
	$('.btn-list span:eq(1)').on('click',function(){
		$('.dialog').addClass('hidden');
		$('.keep-out').addClass('hidden');
	})
	$('.btn-list span:eq(0)').on('click',function(){
		if (window._yas) {
			window._yas.sendCustomInfo({
    			'downApp': 'Y'
			}, true);
		}
		setTimeout(function(){
			console.log(1);
		}, 2000)
	})
</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script type="text/javascript">
/**
 * 微信分享 
 */
(function($) {
    if (typeof(wx) == "undefined") {
        return;
    }
    var shareUrl = "";
    $.ajax({
    	async : false,
    	url : "/activity/cocacola/CocacolaController/getWechatShareUrl",
    	dataType : "json",
    	success : function(data) {
    		if (!data || data.code != 200) {
    			return;
    		}
    		shareUrl = data.data.wechatShareUrl;
    	}
    });
    var _weChatInterface = 'http://www.yohoshow.com/api/wechat/getSignPackage';
    var shareTitle = '来Yoho!Buy有货玩潮流,潮流逛不停';
    var shareImg = 'http://img12.static.yhbimg.com/activity/2016/04/07/11/02b3b297581ace1ca6251f7f9e67ca7937.jpg';
    var shareDesc = '揭盖赢福利,潮流逛不停';
    var shareLink = shareUrl;
    $.getJSON(_weChatInterface + '?pageurl=' +
            encodeURIComponent(location.href.split('#')[0]) + '&callback=?', function(json) {
        var _appId, _timestamp, _nonceStr, _signature;
        if (json !== undefined && json !== '') {
            _appId = json.appId.toString();
            _timestamp = json.timestamp;
            _nonceStr = json.nonceStr.toString();
            _signature = json.signature.toString();

            wx.config({
                debug: false,
                appId: _appId,
                timestamp: _timestamp,
                nonceStr: _nonceStr,
                signature: _signature,
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'
                ]
            });
        }
    });
    wx.ready(function() {
    
        var shareData = {
            title: shareTitle,
            desc: shareDesc,
            imgUrl: shareImg,
            link: shareLink
        };
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);
    });
}(jQuery));
</html>