Skip to content

S
SURPRISED
Commit 57638f8f authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 70d54492
Show whitespace changes
Inline Side-by-side
Showing with 1505 additions and 403 deletions
css/huikui.css
View file @ 57638f8f
......@@ -11,17 +11,26 @@
padding: 12.34% 0 0 0;
box-sizing: border-box;
background-color: #fff8f5;
position: relative;
}
.page .tit,.page .content,.page .tit2{
padding-left: 12.4%;
}
.fan{position: fixed;width: 100%;text-align: center;z-index: 2;}
.fan{
position: fixed;
width: 100%;
text-align: center;
z-index: 2;
}
.fan img{
width: .15rem;
}
.fan-up{
top: .2rem;
top: .1rem;
font-size: .16rem;
}
.fan-down{
bottom: .2rem;
bottom: .1rem;
font-size: .16rem;
}
.page .tit img{
......@@ -44,9 +53,10 @@
text-align: center;
color: white;
font-weight:bold;
-webkit-text-stroke:1px #A52924;
text-stroke:1px #A52924;
/* -webkit-text-stroke:1px #A52924;
text-stroke:1px #A52924; */
font-size: .15rem;
margin-bottom: .08rem;
}
.page1 .rili-box {
height: 2.5rem;
......@@ -57,7 +67,7 @@
margin: .3rem auto;
}
.page1 .rili-box>div{
padding: .6rem .4rem .4rem .4rem;
padding: .5rem .4rem .4rem .4rem;
transform: rotate(6deg);
-ms-transform: rotate(6deg);
-moz-transform: rotate(6deg);
......@@ -75,15 +85,18 @@
text-align: center;
color: #FFFFFF;
font-weight:bold;
-webkit-text-stroke:1px #A52924;
text-stroke:1px #A52924;
/* -webkit-text-stroke:1px #A52924; */
/* text-stroke:1px #A52924; */
}
.today_box{
position: relative;
}
.page1 .rili .today{
border: solid 2px #fff;
border-radius: 50%;
min-width: .21rem;
min-height: .21rem;
display: inline-block;
position: absolute;
left: -6px;
}
.page .font-c04-s3{
color: #C04843;
......@@ -188,3 +201,169 @@
background-repeat: no-repeat;
background-size: 100% 100%;
}
.page6 #xianluEchart, .page6 #nianlingEchart{
padding-top: 0.2rem;
}
.page7 .page7_img, .page8 .page8_img{
width: 100%;
}
.page7 .page7_img img,.page8 .page8_img img{
width: 100%;
}
.page9{
background:url('../images/huikui/bg2-img.png');
font-size:.12rem;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.page9 .page9_img{
width: 96%;
/* width: 80%; */
margin: 0 auto;
}
.page9 .page9_img img{
width: 100%;
}
.page9 .shuoming{
width: 90%;
margin: 0 auto;
}
.page9 .shuoming .shuoming_box{
width: 100%;
background-color: rgba(255,255,255, .8);
border: 1px solid rgba(226, 126, 110, 1);
border-radius: .1rem;
padding: .1rem .15rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.page9 .shuoming .shuoming_box .tiaokuan{
height: 1rem;
overflow: auto;
}
.shuoming_box .more{
display: flex;
align-items: center;
color: #999999;
}
.shuoming_box .more img{
width: .1rem;
margin-left: .1rem;
}
.circleProgress_wrapper{
width: 200px;
height: 200px;
position: absolute;
zoom: 0.1;
left: -60px;
top: -10px;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(255, 255, 255);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid rgb(255, 255, 255);
border-right:20px solid rgb(255, 255, 255);
right:0;
-webkit-animation: circleProgressLoad_right 1s linear 1;
}
.leftcircle{
border-bottom:20px solid rgb(255, 255, 255);
border-left:20px solid rgb(255, 255, 255);
left:0;
-webkit-animation: circleProgressLoad_left 1s linear 1;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgba(255, 255, 255, 0);
border-right:20px solid rgba(255, 255, 255, 0);
border-left:20px solid rgba(255, 255, 255, 1);
border-bottom:20px solid rgba(255, 255, 255, 1);
-webkit-transform: rotate(225deg);
}
100%{
border-left:20px solid rgb(255, 255, 255);
border-bottom:20px solid rgb(255, 255, 255);
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgba(255, 255, 255, 1);
border-right:20px solid rgba(255, 255, 255, 1);
border-left:20px solid rgba(255, 255, 255, 0);
border-bottom:20px solid rgba(255, 255, 255, 0);
-webkit-transform: rotate(45deg);
}
100%{
border-top:20px solid rgb(255, 255, 255);
border-right:20px solid rgb(255, 255, 255);
border-bottom:20px solid rgb(255, 255, 255);
border-left:20px solid rgb(255, 255, 255);
-webkit-transform: rotate(225deg);
}
}
.tanchuang{
position: absolute;
top: 6%;
left: 3.5%;
width: 93%;
background-color: rgba(255,255,255, 1);
border: 1px solid rgba(226, 126, 110, 1);
border-radius: .1rem;
padding: .1rem .15rem;
box-sizing: border-box;
}
.tanchuang .tit3{
text-align: center;
margin-bottom: .1rem;
}
.tanchuang img{
position: absolute;
right: .1rem;
width: .2rem;
font-size: .18rem;
font-family: 'PingFangR';
}
.tiaokuan{
color: #4E5870;
line-height: .2rem;
}
.jieshi{
padding: .1rem 0;
text-align: center;
}
.rule{
color: #647DE4;
}
\ No newline at end of file
html/billPage.html 0 → 100644
View file @ 57638f8f
<!DOCTYPE html>
<html>
<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>
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/cssReset.css">
<script type="text/javascript" src="../js/autosize2.js"></script>
<link rel="stylesheet" href="../css/huikui.css">
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="fan fan-up animated bounceInDown" id="fan-up">
<img src="../images/huikui/arr2.png" alt="">
</div>
<div class="wrap2" id="wrap2">
<div class="page page1" id="page1">
<div class="tit animated fadeInLeft">
<img src="../images/huikui/page1_tit.png" alt="">
</div>
<div class="content">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日</p>
<p>成为印象同行</p>
<div>
<p>由<span id="CreateBy"></span>销售经理录入</p>
<p>您的资料</p>
<p>正式成为印象会员同行</p>
</div>
</div>
<div class="rili-box">
<div>
<p class="rili-tit" id="rili-tit"></p>
<div class="rili clearfix" id="rili">
</div>
</div>
</div>
</div>
<div class="page page2" id="page2">
<div class="tit">
<img src="../images/huikui/page2_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year"></span>年里</p>
<p>销售经理上门拜访您<span class="num font-c04-s3"></span>次</p>
<div class="margint-20">
我们十分的愿意
<br>
倾听您的声音
</div>
</div>
<div class="bottom-box">
<p class="baifangjihua">
拜访
<br>
计划
</p>
<img class="page2_ren" src="../images/huikui/page2_ren.png" alt="">
<img class="page2_tanzi" src="../images/huikui/page2_tanzi.png" alt="">
</div>
</div>
<div class="page page3" id="page3">
<div class="tit">
<img src="../images/huikui/page3_tit.png" alt="">
</div>
<div class="content dingdany">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日 <span class="red" id="time"></span>分</p>
<p>我们收到了您的第<span class="num3 font-c04-s3">1</span>单</p>
<div class="margint-20">
<p>怀着无比激动与感恩的心</p>
</div>
</div>
<div class="content dingdann">
<p>我们暂未收到您的订单</p>
<div class="margint-20">
<p>我们待着与您的合作</p>
</div>
</div>
<div class="page3_shiz" >
<img src="../images/huikui/page3_shiz.png" alt="">
</div>
</div>
<div class="page page4" id="page4">
<div class="tit">
<img src="../images/huikui/page4_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year4"></span>年</p>
<p class="margint-20">您累计交客<span class="num3 font-c04-s3" id="renshu"></span>人</p>
<p class="margint-20">交易额累计<span class="num3 font-c04-s3" id="jiaoyie"></span>万</p>
<p class="margint-20">感恩您对印象之旅的大力支持与信任</p>
</div>
<div class="page4_shiz" >
<img src="../images/huikui/page4_shiz.png" alt="">
</div>
</div>
<div class="page page5" id="page5">
<div class="tit2">
<span id="fenshu"></span>分
</div>
<div class="content">
<p id="pingjiaY">这是您的客人对我们的总体评价</p>
<p id="pingjiaN">还未收到您的客人评价</p>
</div>
<div class="danmu" id="danmu">
</div>
<div class="page5_img">
<img src="../images/huikui/page5_img.png" alt="">
</div>
</div>
<div class="page page6" id="page6">
<div class="tit">
<img src="../images/huikui/page6_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year6"></span>年，您的客户来自哪里</p>
</div>
<div class="line_box">
<div class="xianlu">
<div id="xianluEchart">
</div>
</div>
<div class="nianling">
<div id="nianlingEchart">
</div>
</div>
</div>
</div>
<div class="page page7" id="page7">
<div class="tit">
<img src="../images/huikui/page7_tit.png" alt="">
</div>
<div class="content">
<p>印象之旅 <span class="red" id="allYear">10</span> 年</p>
<p><span class="font-c04-s3" id="Country"></span> 个国家 <span class="font-c04-s3" id="City"></span> 座城市 <span class="font-c04-s3" id="Company"></span> 个分公司</p>
<p class="margint-20">我们的目标是走得更远<br>让我们的线路覆盖全球...</p>
</div>
<div class="page7_img margint-20">
<img src="../images/huikui/page7_map.png" alt="">
</div>
</div>
<div class="page page8" id="page8">
<div class="tit">
<img src="../images/huikui/page8_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year8"></span> 年</p>
<p>已有同行<span class="font-c04-s3" id="allTH"></span>个</p>
<p class="margint-20">印象之旅感动与世界同步</p>
</div>
<div class="page8_img margint-20">
<img src="../images/huikui/page8_map.png" alt="">
</div>
</div>
<div class="page page9" id="page9">
<div class="tit">
<img src="../images/huikui/page9_tit.png" alt="">
</div>
<div class="content">
<p>年底<span class="red">大红包</span>来啦！</p>
<p>您目前已累计<span class="red">￥</span><span class="font-c04-s3" id="dahongbao"></span>元大红包</p>
</div>
<div class="page9_img">
<img src="../images/huikui/page9_img.png" alt="">
</div>
<div class="shuoming" onclick="showTk(1)">
<div class="shuoming_box margint-20">
<p class="tit3 red">大红包活动及使用说明</p>
<div class="more">
<span>查看更多</span>
<img src="../images/huikui/more.png" alt="">
</div>
</div>
</div>
<div class="tanchuang" onclick="showTk(2)">
<img src="../images/huikui/close.png" alt="">
<div class="tiaokuan">
<p class="tit3 red">大红包活动及使用说明</p>
<p>为答谢广大同行在即将过去的2019年里对印象之旅的厚爱与支持，公司将在新的一年来临之际奉上年底大红包，活动具体说明如下：</p>
<p>1、2019年12月25日至2020年1月2日，同行可在印象之旅APP、小程序、H5站点查阅2019年度账单，并及时查阅预计红包金额。</p>
<p>2、2020年1月2日至2020年1月20日，用户进入活动页面后可以直接领取年底大红包，若用户逾期未领取，则视为主动放弃年底大红包。大红包的具体金额依据同行报名参加印象之旅2019年内的跟团游产品产生的实际交易额来计算。具体计算规则请参照：<span class="rule" onclick="goRule()">《印象之旅2019年底大红包规则》</span></p>
<p>3、大红包一旦领取成功，金额将自动转入用户的幸福存折中并且不能取现。</p>
<p>4、用户可以使用幸福存折的余额对跟团游，自由行，机票，签证，酒店等订单金额进行抵扣，每次最多能使用1000元，且账户余额必须保留9元。</p>
<p>5、幸福存折目前只能在印象相关的同业平台使用，包含同业网站（www.oytour.com）,同业APP（印象同业），同业小程序（行程助理）。</p>
<p>6、幸福存折可以和优惠券一起使用。</p>
<p>7、若为联盟客户，我们将会把大红包转入联盟的主体账户中。如需做红包拆分，请联系您的印象之旅销售客服专员。</p>
</div>
<p class="jieshi red">本活动最终解释权在法律允许范围内归本公司所有。</p>
</div>
</div>
</div>
<div class="fan fan-down animated bounceInUp" id="fan-down">
<img src="../images/huikui/arr1.png" alt="">
</div>
</div>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery.animateNumber.js"></script>
<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 type="text/javascript">
var userInfo = {
customerId: 0,
token: "",
secretKey: "",
};
$(".tanchuang").hide()
// 1 判断地址栏是否有参数
var billPage = localStorage.billPage ? JSON.parse(localStorage.billPage) : ''
if(window.location.href.split('?')[1]){
let param = window.location.href.split('?')[1].split("&") ? window.location.href.split('?')[1].split("&") : null;
userInfo.customerId = param ? param[1].split('=')[1] : 0;
userInfo.token = param ? param[2].split('=')[1] : 0;
userInfo.secretKey = param ? param[3].split('=')[1] : 0;
let userJson = JSON.stringify(userInfo);
localStorage.billPage = userJson;
} else if (billPage){ // 2 获取本地缓存
userInfo.customerId = billPage.customerId
userInfo.token = billPage.token
userInfo.secretKey = billPage.secretKey
} else { // 否则就去登录
window.location.href = '../login.html?page=billPage';
}
var str = location.href,
param = str.substr(str.indexOf("?")+1),
dataObj = {},
FirstOrderCreateStr = [],
TextContentList = [],
danmuIndex = 0;
param = param.split('&');
let customerId = param[0].split('=')[1];
var myChart1 = echarts.init(document.getElementById('xianluEchart'));
var myChart2 = echarts.init(document.getElementById('nianlingEchart'));
getData();
function getData(){
let msg = {
customerId: userInfo.customerId,
}
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("app_get_GetPersonalBills", msg, userInfo.token, userInfo.secretKey),
async: false,
success: function(res) {
if (res.resultCode === 1) {
var CreateTime = res.data.CreateTime.split('-'),
year = CreateTime[0],
month = CreateTime[1],
day = CreateTime[2];
//最后一个参数为0,意为获取2018年10月一共多少天
var monthAllDay = new Date(year, month,0);
creatRili(day, monthAllDay.getDate());
dataObj = res.data;
localStorage.dataObj = JSON.stringify(dataObj);
$("#year").text(year);
$("#month").text(month);
$('#day').animateNumber({ number: day });
$("#CreateBy").text(res.data.CreateBy.split('（')[0])
$("#rili-tit").text( year + '年' + month + '月')
if (dataObj.FirstOrderCreateStr == '') {
$(".dingdany").hide()
$(".dingdann").show()
} else {
FirstOrderCreateStr = res.data.FirstOrderCreateStr.replace(' ', '-').replace(':', '-').split('-');
$(".dingdany").show()
$(".dingdann").hide()
}
// 弹幕
var danmu=document.getElementById('danmu');
var winH=danmu.clientHeight;
if(dataObj.evaluateList.TextContentList && dataObj.evaluateList.TextContentList.length) {
TextContentList = dataObj.evaluateList.TextContentList
createDM()
}
//客户 & 线路
var LineOrder = {
LineName: [],
TotalGuest: []
}
if(dataObj.LineOrder && dataObj.LineOrder.length) {
dataObj.LineOrder.map(x=>{
LineOrder.LineName.push(x.LineName)
LineOrder.TotalGuest.push(x.TotalGuest)
})
creatEchart(LineOrder)
}
var ageData = {
LineName: ['老人', '成年人', '小孩'],
TotalGuest: [dataObj.OldGuest, dataObj.TotalGuest, dataObj.ChildrenGuest]
}
if ((dataObj.OldGuest + dataObj.TotalGuest + dataObj.ChildrenGuest) > 0) {
creatEchart2(ageData)
}
} else {
layer.msg(res.message)
setTimeout(function(){
window.location.href = '../login.html?page=billPage';
},500)
}
}
})
};
function creatRili(day, maxDay) {
$(".rili-box>div").hide()
let htmlStr = ''
for(let i = 1; i <= maxDay; i++) {
if (i == day) {
htmlStr += '<div class="animated today_box"><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div><span class="today">'+ i +'</span></div>'
} else {
htmlStr += '<div class="animated"><span>'+ i +'</span></div>'
}
}
$("#rili").html(htmlStr)
riliAnimated()
}
function riliAnimated(){
$("#rili div").each(function (index, ele) {
setTimeout(function (){
$(".rili-box>div").show()
$(ele).addClass('fadeIn')
}, 500)
})
}
$("#fan-up").hide()
var pages = function(obj) {
var box = document.getElementById(obj.wrap);
var box2 = document.getElementById(obj.wrap2);
var pageUp = document.getElementById('fan-up')
var pageDown = document.getElementById('fan-down')
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function() {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touchStart
var touchstart = function(event) {
if(!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
};
//touchEnd
var touchend = function(event) {
//位移小于+-50的不翻页
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前页控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
// 翻页 加载页面动画
if (moveY < -50 || moveY > 50) {
$("#page" + (n+1) + ">div.tit").addClass('animated fadeInLeft')
$("#page" + (n+1) + " .year").text(dataObj.Year)
$("#page" + (n+1) + " .num").animateNumber({ number: dataObj.VisiteCount });
$("#page" + (n+1) + " .baifangjihua").addClass('animated fadeIn')
if (FirstOrderCreateStr.length) {
$("#page" + (n+1) + " #year").text(FirstOrderCreateStr[0])
$("#page" + (n+1) + " #month").text(FirstOrderCreateStr[1])
$("#page" + (n+1) + " #day").text(FirstOrderCreateStr[2])
$("#page" + (n+1) + " #time").text(FirstOrderCreateStr[3] + ':' + FirstOrderCreateStr[4])
}
if(dataObj.TotalGuest == '0') {
$("#page" + (n+1) + " #renshu").text('-');
} else {
$("#page" + (n+1) + " #renshu").animateNumber({ number: dataObj.TotalGuest });
}
if(dataObj.TotalPrice == '0') {
$("#page" + (n+1) + " #jiaoyie").text('-');
} else {
$("#page" + (n+1) + " #jiaoyie").animateNumber({ number: dataObj.TotalPrice });
}
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
if(dataObj.evaluateList.ScoreNum == '0') {
$("#page" + (n+1) + " #fenshu").text('-')
$("#pingjiaY").hide()
$("#pingjiaN").show()
} else {
$("#pingjiaY").show()
$("#pingjiaN").hide()
$("#page" + (n+1) + " #fenshu").animateNumber({ number: dataObj.evaluateList.ScoreNum })
}
$("#page" + (n+1) + " #allYear").animateNumber({ number: 10})
$("#page" + (n+1) + " #Country").animateNumber({ number: 3})
$("#page" + (n+1) + " #City").animateNumber({ number: 16})
$("#page" + (n+1) + " #Company").animateNumber({ number: 17})
$("#page" + (n+1) + " #allTH").animateNumber({ number: 14100})
$("#page" + (n+1) + " #dahongbao").animateNumber({ number: dataObj.yearTotalPrice})
}
if (n == 0) {
$("#fan-up").hide()
} else {
$("#fan-up").show()
}
if (n == len - 1) {
$("#fan-down").hide()
} else {
$("#fan-down").show()
}
$("#fan-up").removeClass('bounceInDown')
$("#fan-down").removeClass('bounceInUp')
setTimeout(()=>{
$("#fan-up").addClass('bounceInDown')
$("#fan-down").addClass('bounceInUp')
}, 500)
};
//touch事件绑定
box.addEventListener("touchstart", function(event) {
touchstart(event)
}, false);
box.addEventListener("touchmove", function(event) {
touchmove(event)
}, false);
box.addEventListener("touchend", function(event) {
touchend(event)
}, false);
pageUp.addEventListener("click", function (event) {
moveY = 100
touchend(event)
}, false)
pageDown.addEventListener("click", function (event) {
moveY = -100
touchend(event)
}, false)
};
pages({
wrap: 'wrap', //.wrap的id
wrap2: 'wrap2', //.wrap2的id
len: 9, //一共有几页
n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
});
// insert();
var timer2=setInterval(function(){
createDM();
},2000);
function createDM(){
if (!TextContentList.length) return
var randomS=Math.floor(Math.random()*TextContentList.length);
var newli=document.createElement('div');
newli.innerHTML= TextContentList[randomS].TextContent;
newli.className='newli';
var newliL=danmu.clientWidth;
newli.style.left=newliL +'px';
if (danmuIndex == 0) {
newliT = '.1rem'
danmuIndex = 1
} else if (danmuIndex == 1){
newliT = '.6rem'
danmuIndex = 2
} else if (danmuIndex == 2){
newliT = '1.1rem'
danmuIndex = 0
}
newli.style.top= newliT;
danmu.appendChild(newli);
move(newli);
}
function move(obj){
var timer1=setInterval(function(){
// var danmu=document.getElementById('danmu');
var newliW=obj.clientWidth;
var run=obj.offsetLeft;
run--;
if (run<=-newliW) {
danmu.removeChild(obj);
clearInterval(timer1);
}
obj.style.left=run +'px';
}, 20)
}
function creatEchart(Datas){
var option = {
legend: {
icon: "circle",
bottom: '20%',
left:'10%',
itemWidth: 7,
itemHeight: 7,
itemGap: 40,
textStyle:{
color:'#89A7AF',
},
data:[{
name : Datas.LineName[0]
},
{
name : Datas.LineName[1]
},
{
name : Datas.LineName[2]
}
]
},
xAxis: [{
type :'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false,
}
}],
yAxis: [{
//type: 'category',
data: [''],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [
{
name: Datas.LineName[0],
type:'bar',
barWidth:16,
stack: '危货种类占比',
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E8A61F',
backgroundColor: '#E8A61F',
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
},
itemStyle: {
color: '#E8A61F'
},
data:[{
value: Datas.TotalGuest[0],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1,
color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1, color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[1],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#E67C26'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E67C26',
backgroundColor: '#E67C26',
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[1],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E67C26' // 0% 处的颜色
}, {
offset: 1,
color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'危化品三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E67C26' // 0% 处的颜色
}, {
offset: 1, color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[2],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#0CD8A7'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#0CD8A7',
backgroundColor: '#0CD8A7',
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[2],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1,
color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'其他三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1, color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1] + Datas.TotalGuest[2]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
}
]
};
myChart1.setOption(option);
}
function creatEchart2(Datas){
var option = {
legend: {
icon: "circle",
bottom: '20%',
left:'10%',
itemWidth: 7,
itemHeight: 7,
itemGap: 40,
textStyle:{
color:'#89A7AF',
},
data:[{
name : Datas.LineName[0]
},
{
name : Datas.LineName[1]
},
{
name : Datas.LineName[2]
}
]
},
xAxis: [{
type :'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false
},
splitLine: {
show: false,
}
}],
yAxis: [{
//type: 'category',
data: [''],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
}
}
}],
series: [
{
name: Datas.LineName[0],
type:'bar',
barWidth:16,
stack: '危货种类占比',
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E8A61F',
backgroundColor: '#E8A61F',
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
},
itemStyle: {
color: '#E8A61F'
},
data:[{
value: Datas.TotalGuest[0],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1,
color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E8A61F' // 0% 处的颜色
}, {
offset: 1, color: '#E8A61F' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[1],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#E67C26'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#E67C26',
backgroundColor: '#E67C26',
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[1],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#E67C26' // 0% 处的颜色
}, {
offset: 1,
color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'危化品三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#E67C26' // 0% 处的颜色
}, {
offset: 1, color: '#E67C26' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
},
{
name: Datas.LineName[2],
type:'bar',
barWidth:16,
stack: '危货种类占比',
itemStyle: {
color: '#0CD8A7'
},
label: {
normal: {
borderWidth: 10,
distance: 20,
align: 'center',
verticalAlign: 'middle',
borderRadius: 1,
borderColor: '#0CD8A7',
backgroundColor: '#0CD8A7',
show: true,
position: 'top',
formatter: '{c}%',
color: '#fff'
}
},
data:[{
value: Datas.TotalGuest[2],
itemStyle: {
normal: {
color: {
type: 'bar',
colorStops: [{
offset: 0,
color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1,
color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false, // 缺省为 false
}
}
}
}]
},
{
name:'其他三角形',
type:'line',
barWidth:0,
markPoint: {
symbol:'triangle',
symbolRotate:'180',
itemStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#0CD8A7' // 0% 处的颜色
}, {
offset: 1, color: '#0CD8A7' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
symbolSize:[6,5],// 容器大小
symbolOffset:[0,-15],//位置偏移
data:[{
coord: [Datas.TotalGuest[0] + Datas.TotalGuest[1] + Datas.TotalGuest[2]/2]
}],
label: {
normal: {
show: false
},
offset: [0, 0],
}
}
}
]
};
myChart2.setOption(option);
}
function showTk(type){
if (type == 1 ) {
$('.tanchuang').show()
} else {
$('.tanchuang').hide()
}
}
function goRule(){
window.location.href = 'rule.html';
}
</script>
</body>
</html>
html/ddddmoe.html 0 → 100644
View file @ 57638f8f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆环运动</title>
<style>
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
border:1px solid #ddd;
zoom: 0.1;
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid rgb(232, 232, 12);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:20px solid green;
border-right:20px solid green;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear 1;
}
.leftcircle{
border-bottom:20px solid green;
border-left:20px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear 1;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:20px solid #ED1A1A;
border-right:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:20px solid rgb(232, 232, 12);
border-right:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(81, 197, 81);
border-bottom:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(225deg);
}
100%{
border-left:20px solid green;
border-bottom:20px solid green;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:20px solid #ED1A1A;
border-left:20px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-bottom:20px solid rgb(232, 232, 12);
border-left:20px solid rgb(232, 232, 12);
border-top:20px solid rgb(81, 197, 81);
border-right:20px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
100%{
border-top:20px solid green;
border-right:20px solid green;
border-bottom:20px solid green;
border-left:20px solid green;
-webkit-transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
html/rule.html 0 → 100644
View file @ 57638f8f
<!DOCTYPE html>
<html>
<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>
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/cssReset.css">
<script type="text/javascript" src="../js/autosize2.js"></script>
<link rel="stylesheet" href="../css/huikui.css">
<style>
.rule-page{
width: 100%;
height: 100%;
background:url('../images/huikui/bg-img.png');
font-size:.12rem;
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 12.34% .2rem;
box-sizing: border-box;
font-family: 'PingFangR';
color: #475165;
}
.rule-page>p{
font-size: .18rem;
margin-bottom: .1rem;
}
.content-box .item{
padding-top: .1rem;
}
.content-box .item .progress-bg{
width: 100%;
background-color: #ebeef5;
position: relative;
border-radius: 10px;
height: .2rem;
margin-top: .05rem;
}
.content-box .item .progress-bg .progress-line{
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #f56c6c;
text-align: right;
border-radius: 10px;
line-height: 1;
white-space: nowrap;
transition: width .6s ease;
}
</style>
</head>
<body>
<div class="rule-page">
<p>预计红包金额：<span class="red" id="price"></span></p >
<div class="content-box">
</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script>
var dataObj = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : ''
$("#price").text(dataObj.yearTotalPrice)
var CommissionRatioList = dataObj.CommissionRatioList
var html = ''
console.log(dataObj)
$.each(CommissionRatioList, function(index, item){
var width = 0
if (dataObj.TotalPrice/item.Money>1) {
width = 100
} else {
width = (dataObj.TotalPrice/item.Money)*100
}
if (item.ActivateState == 0) {
width = 0
}
if (item.ActivateState == 2) {
width = 100
}
html += ' <div class="item"> '+
' <p class="name">年交易额已达￥'+ item.Money +'返'+ item.Ratio +'‰</p> '+
' <div class="progress-bg"> ' +
' <div class="progress-line" style="width: '+ width +'%;"></div></div></div>'
})
$('.content-box').html(html)
</script>
</html>
\ No newline at end of file
html/testpage.html deleted 100644 → 0
View file @ 70d54492
<!DOCTYPE html>
<html>
<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>
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/cssReset.css">
<script type="text/javascript" src="../js/autosize2.js"></script>
<link rel="stylesheet" href="../css/huikui.css">
</head>
<body>
<div class="wrap" id="wrap">
<div class="fan fan-up animated fadeInDownBig" id="fan-up">上翻</div>
<div class="wrap2" id="wrap2">
<div class="page page1" id="page1">
<div class="tit animated fadeInLeft">
<img src="../images/huikui/page1_tit.png" alt="">
</div>
<div class="content">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日</p>
<p>成为印象同行</p>
<div>
<p>由<span id="CreateBy"></span>销售经理录入</p>
<p>您的资料</p>
<p>正式成为印象会员同行</p>
</div>
</div>
<div class="rili-box">
<div>
<p class="rili-tit" id="rili-tit"></p>
<div class="rili clearfix" id="rili">
</div>
</div>
</div>
</div>
<div class="page page2" id="page2">
<div class="tit">
<img src="../images/huikui/page2_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year"></span>年里</p>
<p>销售经理上门拜访您<span class="num font-c04-s3"></span>次</p>
<div class="margint-20">
我们十分的愿意
</br>
倾听您的声音
</div>
</div>
<div class="bottom-box">
<p class="baifangjihua">
拜访
</br>
计划
</p>
<img class="page2_ren" src="../images/huikui/page2_ren.png" alt="">
<img class="page2_tanzi" src="../images/huikui/page2_tanzi.png" alt="">
</div>
</div>
<div class="page page3" id="page3">
<div class="tit">
<img src="../images/huikui/page3_tit.png" alt="">
</div>
<div class="content dingdany">
<p><span class="red" id="year"></span>年<span class="red" id="month"></span>月<span class="red" id="day"></span>日 <span class="red" id="time"></span>分</p>
<p>我们收到了您的第<span class="num3 font-c04-s3">1</span>单</p>
<div class="margint-20">
<p>怀着无比激动与感恩的心</p>
</div>
</div>
<div class="content dingdann">
<p>我们暂未收到您的订单</p>
<div class="margint-20">
<p>我们待着与您的合作</p>
</div>
</div>
<div class="page3_shiz" >
<img src="../images/huikui/page3_shiz.png" alt="">
</div>
</div>
<div class="page page4" id="page4">
<div class="tit">
<img src="../images/huikui/page4_tit.png" alt="">
</div>
<div class="content dingdany">
<p><span class="red year4"></span>年</p>
<p class="margint-20">您累计交客<span class="num3 font-c04-s3" id="renshu"></span>人</p>
<p class="margint-20">交易额累计<span class="num3 font-c04-s3" id="jiaoyie"></span>万</p>
<p class="margint-20">感恩您对印象之旅的大力支持与信任</p>
</div>
<div class="page4_shiz" >
<img src="../images/huikui/page4_shiz.png" alt="">
</div>
</div>
<div class="page page5" id="page5">
<div class="tit2">
<span id="fenshu"></span>分
</div>
<div class="content">
<p>这是您的客人对我们的总体评价</p>
</div>
<div class="danmu" id="danmu">
</div>
<div class="page5_img">
<img src="../images/huikui/page5_img.png" alt="">
</div>
</div>
<div class="page page6" id="page6">
<div class="tit">
<img src="../images/huikui/page6_tit.png" alt="">
</div>
<div class="content">
<p><span class="red year6"></span>年，您的客户来自哪里</p>
</div>
<div class="line_box">
<div class="xianlu">
<div id="xianluEchart">
</div>
</div>
<div class="nianling">
<div id="nianlingEchart">
</div>
</div>
</div>
</div>
<div class="page page7" id="page7">我是第六屏内容</div>
<div class="page page8" id="page8">我是第六屏内容</div>
<div class="page page9" id="page9">我是第六屏内容</div>
</div>
<div class="fan fan-down animated fadeInUpBig" id="fan-down">下翻</div>
</div>
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery.animateNumber.js"></script>
<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 type="text/javascript" src="https://www.echartsjs.com/zh/dist/echarts-gl.min.js"></script>
<script type="text/javascript">
var str = location.href,
param = str.substr(str.indexOf("?")+1),
dataObj = {},
FirstOrderCreateStr = [],
TextContentList = [],
danmuIndex = 0;
param = param.split('&');
let customerId = param[0].split('=')[1];
getData();
function getData(){
let msg = {
customerId: customerId
}
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("app_get_GetPersonalBills", msg),
async: false,
success: function(res) {
if (res.resultCode === 1) {
var CreateTime = res.data.CreateTime.split('-'),
year = CreateTime[0],
month = CreateTime[1],
day = CreateTime[2];
//最后一个参数为0,意为获取2018年10月一共多少天
var monthAllDay = new Date(year, month,0);
creatRili(day, monthAllDay.getDate());
dataObj = res.data;
$("#year").text(year);
$("#month").text(month);
$('#day').animateNumber({ number: day });
$("#CreateBy").text(res.data.CreateBy.split('（')[0])
$("#rili-tit").text( year + '年' + month + '月')
if (dataObj.FirstOrderCreateStr === '') {
$(".dingdany").hide()
$(".dingdann").show()
} else {
FirstOrderCreateStr = res.data.FirstOrderCreateStr.replace(' ', '-').replace(':', '-').split('-');
$(".dingdany").show()
$(".dingdann").hide()
}
// 弹幕
var danmu=document.getElementById('danmu');
var winH=danmu.clientHeight;
if(dataObj.evaluateList.TextContentList.length) {
TextContentList = dataObj.evaluateList.TextContentList
createDM()
}
//客户
var LineOrder = {
LineName: [],
TotalGuest: []
}
if(dataObj.LineOrder.length) {
dataObj.LineOrder.map(x=>{
LineOrder.LineName.push(x.LineName)
LineOrder.TotalGuest.push(x.TotalGuest)
})
creatEchart(LineOrder)
}
} else {
layer.msg(res.message)
}
}
})
};
function creatRili(day, maxDay) {
$(".rili-box>div").hide()
let htmlStr = ''
for(let i = 1; i <= maxDay; i++) {
if (i == day) {
htmlStr += '<div class="animated"><span class="today">'+ i +'</span></div>'
} else {
htmlStr += '<div class="animated"><span>'+ i +'</span></div>'
}
}
$("#rili").html(htmlStr)
riliAnimated()
}
function riliAnimated(){
$("#rili div").each(function (index, ele) {
setTimeout(function (){
$(".rili-box>div").show()
$(ele).addClass('fadeIn')
}, 500)
})
}
$("#fan-up").hide()
var pages = function(obj) {
var box = document.getElementById(obj.wrap);
var box2 = document.getElementById(obj.wrap2);
var pageUp = document.getElementById('fan-up')
var pageDown = document.getElementById('fan-down')
var len = obj.len;
var n = obj.n;
var startY, moveY, cliH;
//获取屏幕高度
var getH = function() {
cliH = document.body.clientHeight
};
getH();
window.addEventListener('resize', getH, false);
//touchStart
var touchstart = function(event) {
if(!event.touches.length) {
return;
}
startY = event.touches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!event.touches.length) {
return;
}
moveY = event.touches[0].pageY - startY;
box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
};
//touchEnd
var touchend = function(event) {
//位移小于+-50的不翻页
if(moveY < -50) n++;
if(moveY > 50) n--;
//最后&最前页控制
if(n < 0) n = 0;
if(n > len - 1) n = len - 1;
//重定位
box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
// 翻页 加载页面动画
$("#page" + (n+1) + ">div.tit").addClass('animated fadeInLeft')
$("#page" + (n+1) + " .year").text(dataObj.Year)
$("#page" + (n+1) + " .num").animateNumber({ number: dataObj.VisiteCount });
$("#page" + (n+1) + " .baifangjihua").addClass('animated fadeIn')
if (FirstOrderCreateStr.length) {
$("#page" + (n+1) + " #year").text(FirstOrderCreateStr[0])
$("#page" + (n+1) + " #month").text(FirstOrderCreateStr[1])
$("#page" + (n+1) + " #day").text(FirstOrderCreateStr[2])
$("#page" + (n+1) + " #time").text(FirstOrderCreateStr[3] + ':' + FirstOrderCreateStr[4])
}
$("#page" + (n+1) + " #renshu").animateNumber({ number: dataObj.TotalGuest });
$("#page" + (n+1) + " #jiaoyie").animateNumber({ number: dataObj.TotalPrice });
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
$("#page" + (n+1) + " .year" + (n+1)).text(dataObj.Year)
$("#page" + (n+1) + " #fenshu").animateNumber({ number: dataObj.evaluateList.ScoreNum })
if (n == 0) {
$("#fan-up").hide()
} else {
$("#fan-up").show()
}
if (n == len - 1) {
$("#fan-down").hide()
} else {
$("#fan-down").show()
}
$("#fan-up").removeClass('fadeInDownBig')
$("#fan-down").removeClass('fadeInUpBig')
setTimeout(()=>{
$("#fan-up").addClass('fadeInDownBig')
$("#fan-down").addClass('fadeInUpBig')
}, 500)
};
//touch事件绑定
box.addEventListener("touchstart", function(event) {
touchstart(event)
}, false);
box.addEventListener("touchmove", function(event) {
touchmove(event)
}, false);
box.addEventListener("touchend", function(event) {
touchend(event)
}, false);
pageUp.addEventListener("click", function (event) {
moveY = 100
touchend(event)
}, false)
pageDown.addEventListener("click", function (event) {
moveY = -100
touchend(event)
}, false)
};
pages({
wrap: 'wrap', //.wrap的id
wrap2: 'wrap2', //.wrap2的id
len: 9, //一共有几页
n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
});
// insert();
var timer2=setInterval(function(){
createDM();
},2000);
function createDM(){
var randomS=Math.floor(Math.random()*TextContentList.length);
var newli=document.createElement('div');
newli.innerHTML= TextContentList[randomS].TextContent;
newli.className='newli';
var newliL=danmu.clientWidth;
newli.style.left=newliL +'px';
if (danmuIndex == 0) {
newliT = '.1rem'
danmuIndex = 1
} else if (danmuIndex == 1){
newliT = '.6rem'
danmuIndex = 2
} else if (danmuIndex == 2){
newliT = '1.1rem'
danmuIndex = 0
}
newli.style.top= newliT;
danmu.appendChild(newli);
move(newli);
}
function move(obj){
var timer1=setInterval(function(){
// var danmu=document.getElementById('danmu');
var newliW=obj.clientWidth;
var run=obj.offsetLeft;
run--;
if (run<=-newliW) {
danmu.removeChild(obj);
clearInterval(timer1);
}
obj.style.left=run +'px';
}, 20)
}
var myChart1 = echarts.init(document.getElementById('xianluEchart'));
var myChart2 = echarts.init(document.getElementById('nianlingEchart'));
function creatEchart(data){
myChart1.setOption(option);
}
</script>
</body>
</html>
js/mian.js
View file @ 57638f8f
......@@ -2,8 +2,8 @@ let locationName = window.location.hostname;
function getApiUrl() {
let url = {
urlPost: "https://reborn.oytour.com/api/common/post",
// urlPost: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://192.168.2.65:8025/api/common/post",
// urlPost: "https://reborn.oytour.com/api/common/post",
urlPost: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://192.168.2.65:8025/api/common/post",
//urlJava: locationName.indexOf('oytour') !== -1 ? "https://efficient.oytour.com/" : "http://192.168.2.215:9000/"
urlJava: "https://efficient.oytour.com/"
}
......@@ -36,7 +36,7 @@ function clearLocalStorage() {
window.localStorage.removeItem('userInfo')
}
function getAjaxData(cmd, msg, tk) {
function getAjaxData(cmd, msg, tk, serKey) {
if (msg == null || msg == "") {
msg = {}
}
......@@ -47,6 +47,12 @@ function getAjaxData(cmd, msg, tk) {
token = getLocalStorage().token;
key = getLocalStorage().secretKey;
}
if (tk) {
token = tk
}
if (serKey) {
key = serKey
}
let encodeMsg = encodeURIComponent(JSON.stringify(msg)).toLowerCase();
let md5Str = hex_md5(`cmd=${cmd}&msg=${encodeMsg}&timestamp=${timestamp}&token=${token}&key=${key}`);
let postData = {
......
login.html
View file @ 57638f8f
......@@ -93,6 +93,10 @@
let phoneReg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
let isSendCode = false;
let userInfo = getLocalStorage()
let isbillPage = false
if (window.location.href.split('?')[1] && window.location.href.split('?')[1] == "page=billPage") {
isbillPage = true
}
if (userInfo) {
window.location.href='html/ActivityList.html';
}
......@@ -232,9 +236,16 @@
layer.msg(res.message)
let userJson = JSON.stringify(res.data);
localStorage.userInfo = userJson;
if(isbillPage){
localStorage.billPage = userJson;
setTimeout(function(){
window.location.href='html/billPage.html';
},500)
} else {
setTimeout(function(){
window.location.href='html/ActivityList.html';
},500)
}
} else {
layer.msg(res.message)
}
......
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