Skip to content

S
SURPRISED
Commit 392088ae authored by Mac's avatar Mac
Browse files
Options

开红包页面

parent 70d54492
Hide whitespace changes
Inline Side-by-side
Showing with 337 additions and 0 deletions
html/openRedPacket.html 0 → 100644
View file @ 392088ae
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>年底大红包</title>
<script type="text/javascript" src="../js/autosize2.js"></script>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
background: #EDC1AF;
overflow-x: hidden;
height: 100%;
}
.box{width:100%;height:100%;position: relative}
.text_bg{
width: 2.51rem;
height: 0.97rem;
background-image:url('../images/redPacket/text_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 0.25rem;
}
.box_img{
width:100%;height:100%;
background-image:url('../images/redPacket/open_red.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
}
.red_img{
width: 2.31rem;
height: 3.1rem;
background-image:url('../images/redPacket/red_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 0.33rem;
position: relative;
}
.img_up{
width: 2.31rem;
height: 1.3rem;
}
.img_down{
width: 2.31rem;
height: 2.33rem;
position: absolute;
left: 0;
bottom: 0;
}
.open_btn{
width: 1.15rem;
height: 1.15rem;
position: absolute;
left: 0.58rem;
top: 0.5rem;
}
.bg_rw{
width: 3.51rem;
height: 3rem;
background-image:url('../images/redPacket/red_rw.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: -0.45rem;
top: 0.56rem;
}
.open_redP{
width: 2.26rem;
height: 1.2rem;
background-image:url('../images/redPacket/open_je.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0.05rem;
top: 1rem;
opacity: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.open_money{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
.open_money span{color: #FB412C}
.open_money span:nth-child(1){font-size: 0.16rem ;margin-top: 0.15rem}
.open_money span:nth-child(2){font-size: 0.4rem}
.open_money span:nth-child(3){font-size: 0.16rem;margin-top: 0.35rem}
.readXieyi{
width: 100%;
height: 0.5rem;
margin-top: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: white;
}
.rushNocheckTwo{
width: 0.15rem;
height: 0.15rem;
border-radius: 0.02rem;
border:1px solid #FFFFFF;
}
.rush_img{
width: 0.15rem;
height: 0.15rem;
/*display: none;*/
display: flex;
}
.readXieyi span{
font-size: 0.14rem;
margin-left: 0.05rem;
}
.benciXieyi {
color: #E27E6E;
text-decoration: underline;
}
.activeXieyi {
position: absolute;
width: 100%;
height: 100%;
display: none;
top: 0;
left: 0;
background: rgba(0, 0, 0, .6);
color: #333333;
}
.xieyiContent {
width: 80%;
height: 3.8rem;
background-color: #fff;
margin: 0 auto;
margin-top: 1.4rem;
border-radius: 0.1rem;
padding: 0.15rem;
}
.xieyiTitle {
font-size: 0.14rem;
width: 100%;
text-align: center;
}
.xieyiNei {
width: 100%;
margin-top: 0.1rem;
overflow-y: auto;
font-size: 0.14rem;
color: #333333;
height: 3rem;
}
.xieyiNei span {
line-height: 0.22rem;
}
.xieyiNei::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.xieyiNei::-webkit-scrollbar-thumb {
border-radius: 4px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.xieyiNei::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #EDEDED;
}
.readBtn {
width: 1.1rem;
height: 0.35rem;
background-color: #FFC430;
color: #A76104;
border: none;
outline: none;
font-size: 0.16rem;
border-radius: 0.05rem;
margin-top: 0.1rem;
}
</style>
</head>
<body>
<div class="box">
<div class="box_img">
<div class="text_bg"></div>
<div class="red_img">
<img src="../images/redPacket/red_gai.png" alt="" class="img_up"> <!--红包盖盖-->
<div class="open_redP">
<div class="open_money">
<span>￥</span>
<span>99999</span>
<span>元</span>
</div>
</div>
<img src="../images/redPacket/red_s.png" alt="" class="img_down"> <!--红包底部-->
<img src="../images/redPacket/open.gif" alt="" class="open_btn"> <!--开的按钮-->
<div class="bg_rw"></div>
</div>
<div class="readXieyi">
<div class="rushNocheckTwo">
<img src="../images/redPacket/goug.jpg" alt="" class="rush_img"/>
</div>
<span>我已阅读并同意</span><span class="benciXieyi">《本次活动说明》</span>
</div>
</div>
<div class="activeXieyi">
<div class="xieyiContent">
<div class="xieyiTitle">年底大红包活动说明</div>
<div class="xieyiNei">
<span>为答谢广大同行在即将过去的2019年里对印象之旅的厚爱与支持，公司将在新的一年来临之际奉上年底大红包，活动具体说明如下：<br>
1、2019年12月25日至2020年1月2日，同行可在印象之旅APP、小程序、H5站点查阅2019年度账单，并及时查阅预计红包金额。<br>
2、2020年1月2日至2020年1月20日，用户进入活动页面后可以直接领取年底大红包，若用户逾期未领取，则视为主动放弃年底大红包。大红包的具体金额依据同行报名参加印象之旅2019年内的跟团游产品产生的实际交易额来计算。具体计算规则请参照：<a
href="#" style="color: #E27E6E;text-decoration: underline;">《印象之旅2019年底大红包规则》</a><br>
3、大红包一旦领取成功，金额将自动转入用户的幸福存折中并且不能取现。<br>
4、用户可以使用幸福存折的余额对跟团游，自由行，机票，签证，酒店等订单金额进行抵扣，每次最多能使用1000元，且账户余额必须保留9元。<br>
5、幸福存折目前只能在印象相关的同业平台使用，包含同业网站（www.oytour.com）,同业APP（印象同业），同业小程序（行程助理）。<br>
6、幸福存折可以和优惠券一起使用。<br>
7、若为联盟客户，我们将会把大红包转入联盟的主体账户中。如需做红包拆分，请联系您的印象之旅销售客服专员。<br>
本活动最终解释权在法律允许范围内归本公司所有。
</span>
</div>
<div style="width:100%;text-align:center;height: 0.5rem;display: flex;justify-content: center;align-items: center">
<button class="readBtn">我已阅读</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../js/md5.js"></script>
<script type="text/javascript" src="../js/mian.js"></script>
<script type="text/javascript" src="../js/layer/layer.js"></script>
<script>
let userInfo = {}
userInfo = {
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1NzY1NzIwMzkuMCwiZXhwIjoxNTc5MTY0MDM5LjAsInVzZXJJbmZvIjp7InVpZCI6IjcwNTQiLCJyZXF1ZXN0RnJvbSI6M319.uBvrEFp3YHg0qOHEYv2kmRdIIAYlBibDMx067Vo4Nv0',
secretKey: '0d3d144d53af47d5af918e213cb66dbe'
}
localStorage.userInfo = JSON.stringify(userInfo)
var isChecke = true; //是否阅读
$('.readXieyi').click(function() {
isChecke = !isChecke
if (!isChecke) {
$('.rush_img').css({
'display': 'none'
})
} else {
$('.rush_img').css({
'display': 'block'
})
}
})
//点击本次协议弹出窗
$(".benciXieyi").click(function(e) {
e.stopPropagation();
$('.activeXieyi').css({
'display': 'block'
});
});
//关闭弹窗
$('.readBtn').click(function() {
$('.activeXieyi').css({
'display': 'none'
});
})
$('.red_img').click(function () {
if(isChecke == true){
getData();
}else {
layer.msg('请先阅读并同意活动说明')
}
})
function getData(){
let msg = {
customerId: '7244'
}
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("app_get_YearCloseRedPacket", msg),
async: false,
success: function(res) {
if (res.resultCode === 1) {
$(".img_up").css({display:"none"});
$(".open_btn").css({display:"none"});
$(".open_redP").animate({opacity:"1"},600).animate({top:"0.18rem"},1000);
} else {
layer.msg(res.message)
}
}
})
};
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment