change_detailed.html
9.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<script type="text/javascript" src="__PUBLIC__/js/rem_new.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邀请明细</title>
<script type="text/javascript" src="__STATIC__/js/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/js/layer.js" ></script>
<link rel="stylesheet" href="__STATIC__/css/public.css?v=__CSSVERSION__">
<link rel="stylesheet" href="__STATIC__/css/small_change_detailed.css?v=__CSSVERSION__">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="applicable-device" content="mobile">
<script src="__STATIC__/teamstyle/js/html2canvas.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/user_new_vipcard.css?v=__CSSVERSION__"/>
</head>
<style>
.no_invitation{
position: fixed;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.no_invitation .word{
color: #999;
margin-top: 0.3rem;
}
.oncilk{
width:1.6rem;
height: 0.35rem;
border-radius: 0.2rem;
background: #e4374d;
margin-top: 0.6rem;
}
.invitation-img{
width: 0.9rem;
height: 0.9rem;
}
</style>
<body>
<!--头部标题-->
<div class="title_top flex ai_center jc_sa" id="title">
<div class="fs028 fg">会员昵称</div>
<div class="fs028 fg">手机号码</div>
<div class="fs028 fg">奖励明细</div>
</div>
<div id="invitation_list" style="margin-bottom: 10px"></div>
<!-- 加载更多的效果 -->
<a href="javascript:;" class="get_more" style="text-align:center; display:none;">
<img src='__STATIC__/images/category/loader.gif' width="12" height="12"></a>
<div class="no_invitation" style="display: none">
<div style="text-align: center">
<img class="invitation-img"src="__STATIC__/images/user_card/on_invitation.png">
<div class="fs026 word t_c">暂无邀请明细!</div>
<div class="oncilk flex jc_center ai_center fs026 fc" onclick="invite_friends(event)">去邀请</div>
</div>
</div>
<!-- 邀请好友的分享图片的html-->
<div class="invitation-img-div"></div>
<div class="invitation-img-frame">
<div id="invitation" class="invitation_content_img t_c"
style="background:url({:get_bg()}) no-repeat;background-size:100% 100%; margin-top:30px">
<div class="top-user-frame">
<div class="flex ai_center frame">
<img class="b_circle" src="{$share_head_pic}">
<div class="fs020 user-name ellipsis-1 ">{$user.nickname}</div>
<div class="recommend flex ai_center jc_center fs015 fc">强烈推荐</div>
</div>
</div>
<div class="confirm_cards" style="background: url({:mb_img_curl_url($max_card.CardImg,2)['data']}) no-repeat;background-size:100% 100%;
color:{$max_card.CardColor} ">
<div class="flex jc_sb card_name_frame ai_center">
<div class=" fs025 word-letter">{:cut_word($max_card.CardName,5)}</div>
<div class="immediate_renewal_new flex ai_center fs012" style="background-color:{$max_card.CardColor}">立即开通</div>
</div>
<div class="due-time fs012">
开通会员年卡仅{$max_card.CardFee}元
</div>
<div class="flex jc_sb xc-confirm-dibus">
<div class="flex fs012 ai_fe ">
<!--<img class="user-vip-new" src="__STATIC__/images/user_card/privilege_o.png">-->
<!--<div class="sw_tb_img_box">-->
<!--<div class="img" style="filter:drop-shadow( 0.2rem 0 0px {$max_card.CardColor});"></div>-->
<!--</div>-->
按去年用户消费计算，开卡后一年预计省￥3031
</div>
</div>
</div>
<div>
<div class="division_frame rel">
<div class="abs diamond-frame flex ai_center">
<div class="diamond">
</div>
</div>
</div>
<div class="equity-frame flex ai_center jc_sb">
<div class="flex ai_center jc_sb">
<div class="diamond-new"></div>
<div class="li-height">
<div class="fs025 share-img-color">超级VIP权益</div>
<div class="fs018 share-img-color-vice">超级会员专属权益</div>
</div>
</div>
<img class="img-share" src="{:get_dj_hg()}">
</div>
<div class="equity-frame flex ai_center jc_sb">
<div class="flex ai_center jc_sb">
<div class="diamond-new"></div>
<div class="li-height">
<div class="fs025 share-img-color t_l">超级VIP标识</div>
<div class="fs018 share-img-color-vice">彰显尊贵身份的象征</div>
</div>
</div>
<img class="img-shares" src="{:get_dj_dun()}">
</div>
<div class="equity-frame flex ai_center jc_sb">
<div class="flex ai_center jc_sb">
<div class="diamond-new"></div>
<div class="li-height">
<div class="fs025 share-img-color t_l">超级VIP价格</div>
<div class="fs018 share-img-color-vice">享受专属会员低价格</div>
</div>
</div>
<img class="img-shares" src="{:get_dj_yuan()}">
</div>
<div class="qr-code-frame flex ai_center jc_sb">
<img class="code-qr" src="{$shareurlimg}">
<div class="code-qr-etailed fs018">
<div>解锁新权益 精彩享不停</div>
<div> 长按识别二维码，立即开通!</div>
</div>
</div>
</div>
</div>
<div class="invitation-close-frame">
<img class="invitation-close "src="__STATIC__/images/user_card/close_layui.png" onclick="close_invitation()">
</div>
</div>
</body>
<script>
var page=1,is_nomore=0,is_loading=0;
$(function (){
$("#title").hide();
$("#getmore").hide();
getInvitationList();
});
//邀请明细列表
function getInvitationList(){
if(is_nomore==1) return false;
if(is_loading==1) return false;
is_loading=1;
//var ui= layer.open({type:2,shadeClose: false});
$(".get_more").show();
$.ajax({
type: "get",
url: "/index.php?m=Mobile&c=User&a=ajax_invitation_list&p=" + page + "&stoid=<?php echo getMobileStoId()?>",
success: function (data) {
//layer.close(ui);
$('.get_more').hide();
if(data.length==0 && page==1) {
$("#title").hide();
$("#getmore").hide();
$(".no_invitation").show();
return false;
}
if (data){
$("#title").show();
$("#invitation_list").append(data);
page++;
} else {
is_nomore=1;
}
is_loading=0;
},
error:function(XMLHttpRequest, textStatus, errorThrown){
$("#ferweimap").hide();
}
});
}
///滑动到底部事件
$(document).unbind("scroll");
$(document).bind("scroll", function (event) {
if ($(document).scrollTop() >= $(document).height() - window.innerHeight) {
if(is_loading!=1) getInvitationList()
}
});
</script>
<script>
//点击邀请好友的图片
function invite_friends(e){
$(".invitation-img-div").show();
$(".invitation-img-frame").show();
var w2=$(".invitation-img-frame").width();
$(".invitation-img-frame").fadeIn(3);
//return false;
e.stopPropagation();
if (!$("#invitation").hasClass('hasqr')) {
var ui= layer.open({type:2,shadeClose: false});
setTimeout(function () {
//var canvas = document.querySelector("canvas");
html2canvas(document.getElementById("invitation"),{y:30,scrollY:0,backgroundColor: 'transparent'}).then(function (canvas) {
document.getElementById("invitation").appendChild(canvas);
// $("canvas").hide();
$("#invitation").html('').addClass('hasqr');
document.getElementById("invitation").appendChild(convertCanvasToImage(canvas));
$(".invitation-img-frame").find("img").width(w2);
layer.close(ui);
});
},100);
}
}
function convertCanvasToImage(canvas) {
var image = new Image();image.src = canvas.toDataURL("image/png");
$(".invitation_content_img").addClass("imgs");
return image;
}
//关闭邀请好友弹窗
function close_invitation(){
$(".invitation-img-div").hide();
$(".invitation-img-frame").hide();
}
</script>
</html>