Skip to content

S
SURPRISED
Commit f5fbcc16 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

新增活动

parent cb3fab82
Hide whitespace changes
Inline Side-by-side
Showing with 1125 additions and 0 deletions
css/ThemeActivities.css 0 → 100644
View file @ f5fbcc16
.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
html/Appmd/center.html 0 → 100644
View file @ f5fbcc16
<!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
html/Appmd/draw.html 0 → 100644
View file @ f5fbcc16
<!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
html/ThemeActivities.html 0 → 100644
View file @ f5fbcc16
<!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
js/appdraw.js 0 → 100644
View file @ f5fbcc16
var turnplate = {
restaraunts: [], //大转盘奖品名称
colors: [], //大转盘奖品区块对应背景颜色
outsideRadius: 192, //大转盘外圆的半径
textRadius: 155, //大转盘奖品位置距离圆心的距离
insideRadius: 68, //大转盘内圆的半径
startAngle: 0, //开始角度
bRotate: false, //false:停止;ture:旋转
time: 2000,
noBegun: false,
};
// console.log("window",window.location.href.split('?')[1].split("&"))
let useInfo={
accountId:0,
token:"",
SecretKey:"",
};
let id=11;
if(window.location.href.split('?')[1].split("&")){
let param = window.location.href.split('?')[1].split("&") ? window.location.href.split('?')[1].split("&") : null;
useInfo.accountId=param ? param[1].split('=')[1] : 0;
useInfo.token=param ? param[2].split('=')[1] : 0;
useInfo.SecretKey=param ? param[3].split('=')[1] : 0;
// id = param ? param[4].split('=')[1] : 0;
}
let userJson = JSON.stringify(useInfo);
localStorage.userInfo = userJson;
// let id = param ? param[0].split('=')[1] : 0;
// let type = param ? param[1].split('=')[1] : 0;
let remainingCount = 0;
let LotteryAward = [];
let colors = [];
getRemainingCount()
getLotteryAwardItem()
function getRemainingCount() { // 获取用户剩余抽奖次数
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getLotteryRemainingCount`,
contentType: "application/json",
data: getJavaData({ lotteryId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
remainingCount = res.data.remainingCount
$('#remainingCount').html(res.data.remainingCount)
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
}
function getLotteryAwardItem() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getLotteryAwardItem`,
contentType: "application/json",
data: getJavaData({ lotteryId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
if (res.resultCode === 1) {
// LotteryAward.push("开始")
// colors.push("#ffbe04")
let data = res.data
if (data.length > 0) {
data.forEach((x, index) => {
LotteryAward.push({
name: x.awardName,
id: x.awardType
})
colors.push((index % 2 == 0) ? "#ffeebe" : "#ffbe04")
turnplate.noBegun = false
});
} else {
for (let i = 0; i < 6; i++) {
LotteryAward.push({
name: '暂无奖项',
id: 0
})
colors.push((i % 2 == 0) ? "#ffeebe" : "#ffbe04")
turnplate.noBegun = true
}
}
setTimeout(() => {
$('.spinner').hide()
}, 1000)
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
}
$(document).ready(function () {
//动态添加大转盘的奖品与奖品区域背景颜色
console.log(LotteryAward)
turnplate.restaraunts = LotteryAward;
turnplate.colors = colors;
//旋转转盘 item:奖品位置; txt：提示语;
var rotateFn = function (item, txt) {
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
if (angles < 270) {
angles = 270 - angles;
} else {
angles = 360 - angles + 270;
}
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle: 0,
animateTo: angles + 1800,
duration: turnplate.time,
callback: function () { //回调
turnplate.bRotate = false
}
});
};
$('.pointer').click(function () {
if (turnplate.bRotate || turnplate.noBegun) return;
if (remainingCount === 0 || !remainingCount) return layer.msg("抽奖次数已用完")
// if (!type || type === '2' || remainingCount < 1) {
// if (!type || type === '2') {
// return layer.msg("请在活动时间内参与！")
// } else {
// return layer.msg("抽奖次数已用完!")
// }
// }
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/sell/lottery/getLotteryAward`,
contentType: "application/json",
data: getJavaData({ lotteryId: id }),
async: false,//使用同步的方式,true为异步方式
success: function (res) {
console.log("res",res);
if (res.resultCode === 1) {
remainingCount = remainingCount - 1
$('#remainingCount').html(remainingCount)
if (res.data.winningType === 2) {
LotteryAward.forEach((x, index) => {
if (x.id === 1) {
rotateFn(index + 1, res.data.awardName);
turnplate.bRotate = !turnplate.bRotate;
setTimeout(() => {
$('.status').html(`很遗憾`)
$('.your').html(`未中奖`)
$('.tips').show()
}, turnplate.time)
}
})
} else {
LotteryAward.forEach((x, index) => {
if (x.name === res.data.awardName) {
rotateFn(index + 1, res.data.awardName);
turnplate.bRotate = !turnplate.bRotate;
setTimeout(() => {
if (res.data.winningType === 0) {
$('.status').html(`很遗憾`)
$('.your').html(`未中奖`)
} else if (res.data.winningType === 1) {
$('.status').html(`恭喜你`)
$('.your').html(`获得奖品 <span class="reward">${res.data.awardName}</span>`)
}
$('.tips').show()
}, turnplate.time)
}
})
}
} else if (res.resultCode === 0) {
layer.msg(res.message)
}
},
error: function (res) {
// alert("提交失败" + JSON.stringify(res));
}
});
// turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
// var item = rnd(1, turnplate.restaraunts.length);
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
// rotateFn(item, turnplate.restaraunts[item - 1]);
});
});
$(".rules_footer").click(function () {
$(".rules_cover,.rules_footer").hide();
$(".rules_con").css("height", "95vw");
});
function rnd(n, m) {
var random = Math.floor(Math.random() * (m - n + 1) + n);
return random;
}
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload = function () {
drawRouletteWheel();
};
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (turnplate.restaraunts.length / 2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0, 0, 422, 422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = 'bold 18px Microsoft YaHei';
for (var i = 0; i < turnplate.restaraunts.length; i++) {
var angle = turnplate.startAngle + i * arc;
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//改变画布文字颜色
var b = i + 2;
if (b % 2) {
ctx.fillStyle = "#E5302F";
} else {
ctx.fillStyle = "#E5302F";
};
//----绘制奖品开始----
var text = turnplate.restaraunts[i].name;
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
// if (text.indexOf("盘") > 0) {//判断字符进行换行
// var texts = text.split("盘");
// for (var j = 0; j < texts.length; j++) {
// ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : 'bold 18px Microsoft YaHei';
// if (j == 0) {
// ctx.fillText(texts[j] + "盘", -ctx.measureText(texts[j] + "盘").width / 2, j * line_height);
// } else {
// ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height * 1.2); //调整行间距
// }
// }
// } else if (text.indexOf("盘") == -1 && text.length > 8) {//奖品名称长度超过一定范围
// text = text.substring(0, 8) + "||" + text.substring(8);
// var texts = text.split("||");
// for (var j = 0; j < texts.length; j++) {
// ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
// }
// } else {
//在画布上绘制填色的文本。文本的默认颜色是黑色
//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
// }
//添加对应图标
// if(text.indexOf(turnplate.restaraunts[0])>=0){
// var img= document.getElementById("diy1-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[1])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[2])>=0){
// var img= document.getElementById("diy5-img");
// img.onload=function(){
// ctx.drawImage(img,-25,35);
// };
// ctx.drawImage(img,-30,35);
// };
// if(text.indexOf(turnplate.restaraunts[3])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[4])>=0){
// var img= document.getElementById("diy3-img");
// img.onload=function(){
// ctx.drawImage(img,-30,20);
// };
// ctx.drawImage(img,-30,20);
// };
// if(text.indexOf(turnplate.restaraunts[5])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
// if(text.indexOf(turnplate.restaraunts[6])>=0){
// var img= document.getElementById("diy2-img");
// img.onload=function(){
// ctx.drawImage(img,-30,20);
// };
// ctx.drawImage(img,-30,20);
// };
// if(text.indexOf(turnplate.restaraunts[7])>=0){
// var img= document.getElementById("shan-img");
// img.onload=function(){
// ctx.drawImage(img,-35,20);
// };
// ctx.drawImage(img,-35,20);
// };
//把当前画布返回（调整）到上一个save()状态之前
ctx.restore();
//----绘制奖品结束----
}
}
};
\ No newline at end of file
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