Commit f5fbcc16 authored by 黄媛媛's avatar 黄媛媛

新增活动

parent cb3fab82
.ThemeActivities{
background: url('../images/acti/bg.jpg') no-repeat;
background-size: 100% 100%;
/* background-size: cover; */
position: relative;
top: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif;
padding-bottom: 12rem;
}
.ThemeActivities .head{
width: 100%;
padding-top: 5rem;
}
.ThemeActivities .head .zcdiv{
background:linear-gradient(0deg,rgba(255,139,48,1),rgba(253,69,0,1));
border-radius:12px;
color:#fff;
width: 95%;
margin: 0 auto;
padding: 6px 0;
position: relative;
}
.ThemeActivities .head .zcdiv li{
width: 70px;
display: inline-block;
text-align: center;
}
.ThemeActivities .head .t-ctn {
display: inline-block;
width: calc(100% - 130px);
overflow-x: auto;
position: relative;
}
.ThemeActivities .head .t-ctn .s-ctn {
white-space: nowrap;
font-size: 0;
min-width: 100%;
display: inline-flex;
align-items: center;
}
.ThemeActivities .head .t-ctn .s-ctn li {
font-size: 14px;
box-sizing: border-box;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
display: inline-block;
}
.ThemeActivities .head .t-ctn .s-ctn div{
display: inline-block;
}
.ThemeActivities .head .t-ctn .s-ctn div img{
width: 5px;
}
.ThemeActivities .head .guize{
position: absolute;
right: 6px;
top: 6px;
width:45px!important;
background:rgba(251,235,219,1);
box-shadow:-2px 0px 9px 1px rgba(187,56,0,0.3);
border-radius:8px;
padding: 3px 0;
font-size: 12px;
color:#FD520A;
}
.ThemeActivities .firstDiv{
width: 95%;
margin: 0 auto;
background: #fff;
margin-top: 21rem;
border-radius: 4px;
padding:1rem;
box-sizing: border-box;
position: relative;
padding-top: 3rem;
}
.ThemeActivities .firstDiv .scdImg{
position: absolute;
/* bottom: 0; */
left: -3%;
width: 8rem;
z-index: 200;
}
.ThemeActivities .xsmsHead{
text-align: center;
position: absolute;
top: -3rem;
}
.ThemeActivities .xsms{
display: flex;
align-items: center;
justify-content: space-between;
}
.ThemeActivities .itemDiv{
display: inline-block;
width: 49%;
}
.ThemeActivities .itemDiv .imgdiv{
position: relative;
height: 12rem;
}
.ThemeActivities .itemDiv .imgdiv img{
width: 100%;
max-height: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.ThemeActivities .itemDiv .imgdiv .ms{
position: absolute;
bottom: 0;
background: #FE4300;
color:#fff;
padding: 2px 6px;
border-top-right-radius: 12px;
font-size: 1.2rem;
}
.ThemeActivities .itemDiv .contentDiv{
background:#FFF1C2;
padding: 6px;
box-sizing: border-box;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.ThemeActivities .itemDiv .contentDiv .ljqg{
font-size:1rem;
float: right;
background: #FDBD01;
/* margin-top: -0.3rem; */
padding: 0.2rem 0.4rem;
border-radius: 0.5rem;
}
.ThemeActivities .zkDiv{
width: 95%;
margin: 0 auto;
background: #fff;
margin-top: 4rem;
border-radius: 4px;
padding:1rem;
box-sizing: border-box;
position: relative;
padding: 3rem 0;
}
.ThemeActivities .zkDiv .sale{
position: absolute;
top: 0;
right: 0.5rem;
}
.ThemeActivities .zkDiv .zkItem:after {
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
}
.ThemeActivities .zkDiv .zkItem{
height: 10rem;
margin-top: 1rem;
padding: 0 1rem;
box-sizing: border-box;
}
.ThemeActivities .zkDiv .zkItem>div{
float: left;
height: 100%;
}
.ThemeActivities .zkDiv .zkItem .div1{
width: 50%;
}
.ThemeActivities .zkDiv .zkItem .div1 img{
width: 100%;
height: 100%;
}
.ThemeActivities .zkDiv .zkItem .div2{
width: 40%;
background: #F1E1AE;
padding-left: 0.5rem;
box-sizing: border-box;
}
.ThemeActivities .zkDiv .zkItem .div3{
height: 100%;
width: 10%;
background: #FEBF00;
text-align: center;
}
.ThemeActivities .zkDiv .zkItem .ljqg{
background: #FEBF00;
padding: 0.4rem 0.3rem;
border-radius: 4px;
}
.ThemeActivities .zkDiv .zkItem .div3 .ckgd{
display: inline-block;
width: 1rem;
margin-top: 2rem;
}
.ThemeActivities .zkDiv .sxcdImg{
position: absolute;
bottom: -2rem;
right: -3%;
width: 8rem;
z-index: 200;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/cssReset.css">
<link rel="stylesheet" href="../../css/center.css">
<title>个人中心</title>
</head>
<body>
<div class="center">
<!-- <div class="top">
<div class="top_content">
<div class="left">
</div>
<div class="right">
<p class="name"></p>
<p class="address"></p>
</div>
</div>
<div class="login_out" onclick="loginOut()">退出</div>
</div> -->
<div class="row clearfix">
<div class="col-xs-4 active_" name="list_1">
<div>未发放</div>
<span></span>
</div>
<div class="col-xs-4" name="list_2">
<div>已发放</div>
<span></span>
</div>
<!-- <div class="col-xs-4">
<div>已过期</div>
<span></span>
</div> -->
</div>
<div class="list">
<ul class="list_1">
<div class="nothing">暂时没有奖品哦~</div>
<!-- <li>
<span class="logo">¥</span>
<div class="right_info">
<p><span class="name">优惠券</span></span><span class="rule">使用规则</span></p>
<p class="detail">满100减50</p>
<p class="time">有效期:2019年3月6日14:38:36</p>
</div>
</li> -->
</ul>
<ul class="list_2">
<div class="nothing">暂时没有奖品哦~</div>
<!-- <li>
<span class="logo logo_gray">¥</span>
<div class="right_info">
<p><span class="name">优惠券</span></span><span class="rule">使用规则</span></p>
<p class="detail">满100减50</p>
<p class="time">有效期:2019年3月6日14:38:36</p>
</div>
</li> -->
</ul>
</div>
</div>
<div id="layer_">
<div class="layer_content">
<p class="lct_name"></p>
<div class="lct_item">
<div>优惠说明</div>
<div class="useCondition"></div>
</div>
<div class="lct_item">
<div>有效日期</div>
<div class="time layer_time"></div>
</div>
<div class="lct_item">
<div>备注</div>
<div class="remark"></div>
</div>
</div>
</div>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<p>加载中...</p>
</div>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script type="text/javascript" src="../../js/mian.js"></script>
<script type="text/javascript" src="../../js/autosize.js"></script>
<script>
let pageIndex = 1;
let pageSize = 999;
let issuingState1 = '';
let issuingState2 = '';
$('.row .col-xs-4').click(function () { // 点击切换
$(this).addClass('active_').siblings().removeClass('active_')
$('.list_1').hide();
$('.list_2').hide();
let cl = $(this).attr('name')
$(`.${cl}`).show();
if (cl === 'list_1') {
getDataList(1, true)
} else {
getDataList(0, true)
}
})
setTimeout(() => {
$('.spinner').hide()
}, 1500)
$.ajax({ // 获取个人信息
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("b2b_get_GetCustomerInfo", {}),
async: false,
success: function (res) {
if (res.resultCode === 1) {
$('.name').html(res.data.customerName)
$('.address').html(res.data.address)
$('.top_content .left').html(`<img class="photo" src="${res.data.businessCardPhotos ? res.data.businessCardPhotos[0] : '../images/default_head_img.jpg'}" alt="">`)
}
},
error: function (res) {
}
});
getDataList(1, true)
function getDataList(type, clear) { // 获取数据
let issuingState = true
if (clear) {
pageIndex = 0;
issuingState = true
} else {
pageIndex = pageIndex + 1
issuingState = false
}
let msg = {
pageIndex: pageIndex,
pageSize: pageSize,
issuingState: type ? 0 : 1 // 发放状态 0:未发放,1:已发放
}
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getUserLotteryWinningList`,
contentType: "application/json",
data: getJavaData(msg),
async: false,
success: function (res) {
if (res.resultCode === 1) {
if (clear) {
issuingState1 = '';
issuingState2 = '';
}
let data = res.data.pageData;
console.log("data",data)
if (data.length < 1) {
$('.nothing').show()
return
}
if (type) {
data.forEach((x, index) => {
if (x.awardType === 3) {
issuingState1 += `
<li >
<span class="logo">¥</span>
<div class="right_info">
<p>
<span class="name">${x.lotteryName}</span>
<span class="rule" onclick="openDetail(${x.awardRelationId})">优惠券详情</span>
</p>
<p class="detail">${x.awardName}</p>
<p class="time">有效期:${x.winningDate}</p>
</div>
</li>`
} else {
issuingState1 += `
<li >
<span class="logo">¥</span>
<div class="right_info">
<p>
<span class="name">${x.lotteryName}</span>
</p>
<p class="detail">${x.awardName}</p>
<p class="time">有效期:${x.winningDate}</p>
</div>
</li>`
}
});
// issuingState1 += `
// <p class="loading_more" onclick="getDataList()">加载更多...</p>
// `
$('.list_1').html(issuingState1)
} else {
data.forEach((x, index) => {
if (x.awardType === 3) {
issuingState2 += `
<li >
<span class="logo">¥</span>
<div class="right_info">
<p>
<span class="name">${x.lotteryName}</span>
<span class="rule" onclick="openDetail(${x.awardRelationId})">优惠券详情</span>
</p>
<p class="detail">${x.awardName}</p>
<p class="time">有效期:${x.winningDate}</p>
</div>
</li>`
} else {
issuingState2 += `
<li >
<span class="logo">¥</span>
<div class="right_info">
<p>
<span class="name">${x.lotteryName}</span>
</p>
<p class="detail">${x.awardName}</p>
<p class="time">有效期:${x.winningDate}</p>
</div>
</li>`
}
});
// issuingState2 += `
// <p class="loading_more" onclick="getDataList()">加载更多...</p>
// `
$('.list_2').html(issuingState2)
}
}
},
error: function (res) {
}
});
}
function openDetail(id) {
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/coupon/getLotteryCoupon`,
contentType: "application/json",
data: getJavaData({ couponId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
let d = res.data
$('.lct_name').html(d.couponName);
if (d.couponsType === 1) { // 抵用券
$('.useCondition').html(`下单 ${d.lineteanName}${d.useCondition}元,抵用<span class="sale">${d.denomination}</span>元。`)
} else if (d.couponsType === 2) {
$('.useCondition').html(`下单 ${d.lineteanName}${d.useCondition}元,享受<span class="sale">${d.denomination}</span>折。`)
}
$('.layer_time').html(d.effectDate + '-' + d.expirationDate)
$('.remark').html(d.remark)
$('#layer_').show();
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
}
function loginOut() {
clearLocalStorage()
setTimeout(() => {
window.location.href = '../login.html';
}, 500)
}
$(function () {
$('#layer_').click(function () {
$(this).hide()
})
})
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<title>抽奖</title>
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/draw.css">
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
<link rel="stylesheet" href="../../css/cssReset.css">
</head>
<body class="choujiang">
<div class="banner">
<img class="top_bg" src="../../images/top_bg.png" alt="">
<!-- <a href="html/list.html"><div class="float_btn">抽奖收益</div></a> -->
<div class="turnplate"
style="background-image:url(../../images/cj_bg.png);background-size:100% 99%;background-repeat: no-repeat;">
<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
<img class="pointer" src="../../images/jt2.png" />
</div>
<div class="turntable">
<div class="turntable_font">
<div class="turn_font_left">
<img src="../../images/task_draw_reward_coin_icon.png" alt="task_draw_reward_coin_icon">
<span>剩余次数:</span>
<font id="remainingCount">1</font>
<span></span>
</div>
<div class="turn_font_right">
<img src="../../images/task_draw_reward_clock_icon.png" alt="task_draw_reward_clock_icon">
<span onclick="goCenter()"> 中奖纪录</span>
</div>
</div>
</div>
</div>
<div>
<div class="taskRules">
<div class="rules">
<div class="task_title">
<img src="../../images/task_draw_reward_rule_title_img.png" alt="task_draw_reward_rule_title_img">
</div>
<div class="rules_cover">
<img src="../../images/task_draw_reward_rule_white_img.png" alt="task_draw_reward_rule_white_img">
</div>
<div class="rules_con">
<ul>
<li>本次活动针对于印象之旅所有同行客户参与,活动规则说明如下</li>
<li>1、凡报名印象之旅“散拼跟团游“产品,并且付清尾款以后可获得1次抽奖机会。</li>
<li>2、抽奖次数在活动结束以后自动清空,请各位会员务必尽快抽奖,以免造成损失。</li>
<li>3、本次活动奖品包含电子优惠券,具有时效性,请各位会员注意查看有效期,过期将不能使用。</li>
<li>4、本次活动时间为2019年9月12日至2019年12月31日</span></li>
<li class="rules_li">温馨提醒:如果页面未及时显示您的免费机会,请尝试退出活动页面再重新进来哦。</li>
</ul>
<div id="rules_con_footer" class="rules_con_footer">本活动解释权归主办方所有</div>
</div>
<div class="rules_footer">点击查看规则</div>
</div>
</div>
</div>
<div class="tips">
<div class="bg">
<p class="status"></p>
<p class="your"></p>
<p onclick="goCenter()">点击查看奖品</p>
</div>
<div class="_close" onclick="closeTips()">
<img src="../../images/close.png" alt="">
</div>
</div>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<p>加载中...</p>
</div>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script type="text/javascript" src="../../js/mian.js"></script>
<script type="text/javascript" src="../../js/awardRotate.js"></script>
<script type="text/javascript" src="../../js/bts/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/appdraw.js"></script>
<script type="text/javascript" src="../../js/autosize.js"></script>
<script>
function goCenter() {
window.location.href = 'center.html';
}
function closeTips() {
$('.tips').hide();
}
// $('.rules_con').html(window.localStorage.rules)
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/cssReset.css">
<link rel="stylesheet" href="../../css/ThemeActivities.css">
<title>11.14活动</title>
</head>
<body>
<div class="ThemeActivities">
<div class="head">
<ul class="zcdiv">
<li style="border-right:1px dashed #fff">
<p><img style="width: 43px" src="../images/acti/img1.png" alt=""></p>
<p>态度旅游</p>
</li>
<div class="t-ctn">
<div class="s-ctn">
<li><p>今日</p><p>抵用券</p></li>
<div><img src="../images/acti/left.png" alt=""></div>
<li><p>11.15</p><p>日本专场</p></li>
<div><img src="../images/acti/left.png" alt=""></div>
<li><p>11.15</p><p>日本专场</p></li>
<div><img src="../images/acti/left.png" alt=""></div>
<li><p>11.15</p><p>日本专场</p></li>
<div><img src="../images/acti/left.png" alt=""></div>
<li><p>11.15</p><p>日本专场</p></li>
</div>
</div>
<li class="guize">
<p><img style="width: 20px" src="../images/acti/guize.png" alt=""></p>
<p>规则</p>
</li>
</ul>
</div>
<div class="firstDiv">
<div class="xsmsHead">
<img style="width: 55%" src="../images/acti/xsms.png" alt="">
</div>
<div class="xsms">
<div class="itemDiv">
<div class="imgdiv">
<img src="../images/acti/top_bg.png" alt="">
<div class="ms">3人秒杀</div>
</div>
<div class="contentDiv">
<p style="font-size:1.2rem">希尔顿精品6日</p>
<p style="font-size:0.6rem">京东小火车</p>
<p>
<span style="color:#FB4100;"></span>
<span style="font-size:1.7rem;color:#FB4100;font-weight: 600">1888</span>
<span class="ljqg">立即抢购 > </span>
</p>
</div>
</div>
<div class="itemDiv">
<div class="imgdiv">
<img src="../images/acti/top_bg.png" alt="">
<div class="ms">3人秒杀</div>
</div>
<div class="contentDiv">
<p style="font-size:1.2rem">希尔顿精品6日</p>
<p style="font-size:0.6rem">京东小火车</p>
<p>
<span style="color:#FB4100;"></span>
<span style="font-size:1.7rem;color:#FB4100;font-weight: 600">1888</span>
<span class="ljqg">立即抢购 > </span>
</p>
</div>
</div>
</div>
<img class="scdImg" src="../images/acti/scd.png" alt="">
</div>
<div class="firstDiv" style="margin-top:4rem">
<div class="xsmsHead">
<img style="width: 55%" src="../images/acti/cztj.png" alt="">
</div>
<div class="xsms">
<div class="itemDiv">
<div class="imgdiv">
<img src="../images/acti/top_bg.png" alt="">
<div class="ms">3人秒杀</div>
</div>
<div class="contentDiv">
<p style="font-size:1.2rem">希尔顿精品6日</p>
<p style="font-size:0.6rem">京东小火车</p>
<p>
<span style="color:#FB4100;"></span>
<span style="font-size:1.7rem;color:#FB4100;font-weight: 600">1888</span>
<span class="ljqg">立即抢购 > </span>
</p>
</div>
</div>
<div class="itemDiv">
<div class="imgdiv">
<img src="../images/acti/top_bg.png" alt="">
<div class="ms">3人秒杀</div>
</div>
<div class="contentDiv">
<p style="font-size:1.2rem">希尔顿精品6日</p>
<p style="font-size:0.6rem">京东小火车</p>
<p>
<span style="color:#FB4100;"></span>
<span style="font-size:1.7rem;color:#FB4100;font-weight: 600">1888</span>
<span class="ljqg">立即抢购 > </span>
</p>
</div>
</div>
</div>
</div>
<div class="zkDiv">
<img class="sxcdImg" src="../images/acti/xcd.png" alt="">
<img class="sale" style="width: 5rem" src="../images/acti/sale.png" alt="">
<div class="xsmsHead">
<img style="width: 55%" src="../images/acti/zkzq.png" alt="">
</div>
<div class="zkItem">
<div class="div1">
<img src="../images/acti/top_bg.png" alt="">
</div>
<div class="div2">
<p style="font-size:1.2rem;margin-top:1rem">希尔顿精品6日</p>
<p style="font-size:0.6rem;margin-top:0.5rem">京东小火车</p>
<p style="margin-top:0.5rem">
<span style="color:#FB4100;font-size:1.2rem;"></span>
<span style="font-size:2.5rem;color:#FB4100;font-weight: 600">1888</span>
</p>
<p style="margin-top:0.1rem"><span class="ljqg">立即抢购 > </span></p>
</div>
<div class="div3">
<span class="ckgd">查看更多<img style="width: 1rem" src="../images/acti/more.png" alt=""></span>
</div>
</div>
<div class="zkItem">
<div class="div1">
<img src="../images/acti/top_bg.png" alt="">
</div>
<div class="div2">
<p style="font-size:1.2rem;margin-top:1rem">希尔顿精品6日</p>
<p style="font-size:0.6rem;margin-top:0.5rem">京东小火车</p>
<p style="margin-top:0.5rem">
<span style="color:#FB4100;font-size:1.2rem;"></span>
<span style="font-size:2.5rem;color:#FB4100;font-weight: 600">1888</span>
</p>
<p style="margin-top:0.1rem"><span class="ljqg">立即抢购 > </span></p>
</div>
<div class="div3">
<span class="ckgd">查看更多<img style="width: 1rem" src="../images/acti/more.png" alt=""></span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script type="text/javascript" src="../../js/mian.js"></script>
<script type="text/javascript" src="../../js/autosize.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
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