礼包界面
zyx
5 years ago
parent
5d454e5429
commit
0d090ded9b
@ -1,155 +1,56 @@
|
||||
<extend name="Public/bases" />
|
||||
<block name="css">
|
||||
<link href="__CSS__/user.css" rel="stylesheet" >
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<script src="__JS__/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" src="__JS__/getRem.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/foot_tabbar.css">
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/myBag.css">
|
||||
</block>
|
||||
<block name="body" >
|
||||
<body class="user">
|
||||
<header class="header">
|
||||
<div class="">
|
||||
<a href="{:U('User/index')}" class="hbtn back"><i class="iconfont icon-drop-left"></i></a>
|
||||
<h1 class="caption">我的礼包</h1>
|
||||
<body style="background-image:none;">
|
||||
<div class="myBag">
|
||||
<!-- 子页公共头部 -->
|
||||
<div class="subpage-heard" style="width: 100%;position: fixed;top:0;margin-bottom: 1rem;z-index: 999">我的礼包
|
||||
<a href="#" class="arrows"></a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="occupy"></div>
|
||||
<section class="trunker">
|
||||
<section class="container">
|
||||
<div class="trunker-section user-gift-list">
|
||||
<ul class="t-content clearfix" id="ajaxContainer" currentpage="{$page}">
|
||||
<volist name="data" id="vo">
|
||||
<li>
|
||||
<div class="item">
|
||||
<a href="{:U('Gift/detail',array('id'=>$vo['gift_id']))}" class="za_iconmygift">
|
||||
<img src="{$vo['icon']}" class="icon" onerror="this.src='__IMG__/empty.jpg';this.onerror=null">
|
||||
<div style="height: 1.4rem"></div>
|
||||
<!-- 没有内容时显示 -->
|
||||
<empty name="data">
|
||||
|
||||
</a>
|
||||
<div class="delbox jsbutton touch">
|
||||
<span> </span>
|
||||
<a href="javascript:;" class="del jsdel"><span><i>删除</i></span></a>
|
||||
<div class="not-play" >
|
||||
<img src="__IMG__/not_play.png" alt="">
|
||||
<span>您还没有相关内容哦</span>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="namebox">
|
||||
<a href="{:U('Gift/detail',array('id'=>$vo['gift_id']))}" class="name">{$vo.gift_name}</a>
|
||||
</div>
|
||||
<div class="info">有效期：{$vo.start_time|date="Y-m-d",###}~{$vo['end_time']}</div>
|
||||
<else/>
|
||||
|
||||
<div class="copybtntb">
|
||||
<div class="copybtntable">
|
||||
<span class="prefix"><p>礼包码：</p></span>
|
||||
<span class="middle">
|
||||
<input type="text" class="input copytext" readonly="" value="{$vo['novice']}">
|
||||
</span>
|
||||
<span class="subfix">
|
||||
<button class="btn notice_btn jsgetgiftcopy" data-clipboard-text="{$vo.novice}">复制</button>
|
||||
</span>
|
||||
<volist name="data" id="data">
|
||||
<div class="myBag-box">
|
||||
<div class="myBag-info">
|
||||
<div class="infoBox">
|
||||
<div class="title">特权礼包</div>
|
||||
<div class="gift-bag">
|
||||
<img src="__IMG__/libao.png" alt="">
|
||||
<span>《天宫计》至尊礼包</span>
|
||||
</div>
|
||||
<div class="describe">[高级宝图*2、财神银匙*1]</div>
|
||||
<div class="redeem">
|
||||
<div>兑换码：<span>GNHNW6WJS</span></div>
|
||||
<a>复制兑换码</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</volist>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="loading ms-none hidden" id="moreBtn"><a href="javascript:" class="link"></a></div>
|
||||
<div class="pop pop-dialog"></div>
|
||||
<div class="popmsg pop-dialog"></div>
|
||||
<div class="space"></div>
|
||||
<script src="__JS__/ajaxload.js"></script>
|
||||
<script src="__JS__/pop.lwx.min.js"></script>
|
||||
<script src="__JS__/clipboard.min.js"></script>
|
||||
<script src="__JS__/slider.lwx.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var pmsg = $('.popmsg').pop();
|
||||
|
||||
var clipboard = new Clipboard('.jsgetgiftcopy');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
pmsg.msg('复制成功');
|
||||
e.clearSelection();
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
pmsg.msg('此浏览器不支持此操作，请长按礼包码复制');
|
||||
});
|
||||
|
||||
|
||||
$('.jscopy').click(function(event) {
|
||||
var elem = $(this).siblings('input');
|
||||
if (window.clipboarData) {
|
||||
window.clipboarData.clearData();
|
||||
window.clipboarData.setData('text',elem.val());
|
||||
alert('已经成功复制');
|
||||
} else {
|
||||
elem.select();
|
||||
alert('请长按礼包号码上选择');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
</empty>
|
||||
|
||||
slider.init('.jsbutton');
|
||||
var pop = $('.pop').pop();
|
||||
$('.jsdel').click(function() {
|
||||
pop.msg('dddd');
|
||||
});
|
||||
|
||||
var popmsg = $('.loading').pop();
|
||||
|
||||
<?php if(!$data){?>
|
||||
pmsg.msg('暂无数据');
|
||||
<?php }?>
|
||||
var ac = $('#ajaxContainer');
|
||||
ajaxload('{:U("ajaxUserGift")}',{},function(data) {
|
||||
if (data.status == 1) {
|
||||
ac.attr('currentpage',data.page);
|
||||
var html = '',d = data.lists;
|
||||
for (var i in d) {
|
||||
var item = d[i];
|
||||
html += '<li>'+
|
||||
' <div class="item"><a href="'+item.url+'" class="za_iconmygift">'+
|
||||
' <img src="'+item.icon+'" class="icon" onerror="this.src=\'__IMG__/empty.jpg\';this.onerror=null">'+
|
||||
' </a><div class="delbox jsbutton touch">'+
|
||||
' <span> </span>'+
|
||||
' <a href="javascript:;" class="del jsdel"><span><i>删除</i></span></a>'+
|
||||
' </div>'+
|
||||
' <div class="text">'+
|
||||
' <div class="namebox">'+
|
||||
' <a href="'+item.url+'" class="name">'+item.gift_name+'</a>'+
|
||||
' </div>'+
|
||||
' <div class="info">有效期'+item.start_time+'~'+item.end_time+'</div>'+
|
||||
' <div class="copybtntb">'+
|
||||
' <div class="copybtntable">'+
|
||||
' <span class="prefix"><p>礼包码：</p></span>'+
|
||||
' <span class="middle">'+
|
||||
' <input type="text" class="input copytext" readonly="" value="'+item.novice+'">'+
|
||||
' </span>'+
|
||||
' <span class="subfix">'+
|
||||
' <button class="btn notice_btn jsgetgiftcopy" data-clipboard-text="'+item.novice+'">复制</button>'+
|
||||
' </span>'+
|
||||
' </div>'+
|
||||
' </div>'+
|
||||
' </div>'+
|
||||
' </div>'+
|
||||
'</li>';
|
||||
}
|
||||
ac.append(html);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$('.loading').addClass('ms-none');
|
||||
$('#moreBtn').removeClass('ms-none');loads = false;
|
||||
} else {
|
||||
$('.loading').removeClass('hidden').addClass('ms-none');
|
||||
pmsg.msg('已经到底了~');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>
|
||||
<script type="text/javascript" src="__JS__/myBag.js"></script>
|
||||
</block>
|
||||
<block name="footer"></block>
|
||||
@ -0,0 +1,91 @@
|
||||
|
||||
.myBag{
|
||||
width: 100%;
|
||||
font-family:PingFang SC;
|
||||
}
|
||||
.not-play{
|
||||
position:fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.not-play>img{
|
||||
width: 3rem;
|
||||
height: 2.1rem;
|
||||
}
|
||||
.not-play>span{
|
||||
font-size: 0.28rem;
|
||||
margin-top: 0.28rem;
|
||||
color: #A9A9A9;
|
||||
}
|
||||
.myBag-box{
|
||||
margin-top: 0.3rem;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.myBag-info{
|
||||
width: 100%;
|
||||
height: 3.6rem;
|
||||
background:rgba(255,255,255,1);
|
||||
box-shadow:0px 0px 0.1rem 0px rgba(0, 0, 0, 0.15);
|
||||
border-radius:0.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.myBag-info .infoBox{
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.myBag-info .infoBox .title{
|
||||
font-size:0.32rem;
|
||||
font-weight:500;
|
||||
color:rgba(41,41,41,1);
|
||||
padding-bottom: 0.29rem;
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
}
|
||||
.myBag-info .infoBox .gift-bag{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.28rem;
|
||||
color: #292929;
|
||||
font-weight: 500;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.myBag-info .infoBox .gift-bag>img{
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
margin-right: 0.14rem;
|
||||
}
|
||||
.myBag-info .infoBox .describe{
|
||||
margin-top: 0.3rem;
|
||||
font-size:0.2rem;
|
||||
font-weight:400;
|
||||
color:rgba(169,169,169,1);
|
||||
}
|
||||
.myBag-info .infoBox .redeem{
|
||||
margin-top: 0.3rem;
|
||||
width: 99.8%;
|
||||
height: 0.6rem;
|
||||
background: url("../images/juxing.png");
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.24rem;
|
||||
font-weight:400;
|
||||
color:rgba(169,169,169,1);
|
||||
line-height: 0.6rem;
|
||||
padding-left: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
.myBag-info .infoBox .redeem>a{
|
||||
width: 1.78rem;
|
||||
height: 0.6rem;
|
||||
background: url("../images/juxing2.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 0.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.28rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,18 @@
|
||||
$(function() {
|
||||
//复制
|
||||
$(".redeem>a").click(function(){
|
||||
var qrcodeLink = $(this).parent().children("div").children("span").text();
|
||||
var clipboard = new Clipboard('.redeem>a', {
|
||||
text: function() {
|
||||
return qrcodeLink;
|
||||
}
|
||||
});
|
||||
clipboard.on('success', function(e) {
|
||||
console.log("复制成功");
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log("复制失败");
|
||||
});
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue