文件

1206 行
41 KiB
HTML
可执行文件

<!DOCTYPE html>
<html>
<!--[1.4.13]-->
<head>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
<title>幸运大转盘</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
/* background:-webkit-linear-gradient( #ff948a, #ff5c6d); */
background-color: #fd8b52;
width: 100%;
height: 100%;
overflow-X: hidden;
box-sizing: border-box;
}
.noscroll {
height: 100%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.flexcenter {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.wrap_a img {
width: 80%;
height: 80%;
}
img {
width: 90%;
height: 90%;
}
.wrap_a {
text-align: center;
margin-top: 10%;
width: 100%;
}
.wrap {
width: 100vw;
height: 100vh;
background-size: 100% 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.wrap_b {
width: auto;
height: auto;
box-sizing: border-box;
}
.wrap_b > div:nth-child(1) {
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.wrap_c {
width: 100%;
position: relative;
margin-top: 2vh;
}
.wrap_c > div:nth-child(1) {
position: absolute;
right: 0;
bottom: 140%;
width: 20vw;
height: 5vh;
text-align: center;
line-height: 5vh;
background-color: #FEA153;
border-radius: 50px 0 0 50px;
color: #fff;
}
.wrap_c > div:nth-child(2) {
text-align: center;
font-size: 1rem;
color: #874F22;
}
.wrap_d {
width: 90%;
height: 6vh;
margin-top: 3vh;
border: 5px solid #FEA153;
background-color: #fff;
border-radius: 5px;
font-size: 0.8rem;
text-align: center;
line-height: 6vh;
}
.wrap_e {
width: 90%;
height: 100%;
margin-top: 6vh;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8vh;
}
.taskCla,
.activityInfo,
.activityRules {
width: 100%;
height: 10vh;
border: 2px solid #fca354;
margin-top: 7vh;
background-color: #fff5f0;
border-radius: 5px;
}
.wrap_e > div:nth-child(2) {
height: auto;
}
.wrap_e > div:nth-child(3) {
height: auto;
}
.taskCla {
text-align: center;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
}
.taskCla > div:nth-child(2) {
margin-top: 9%;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 90%;
color: #999999;
}
.taskCla > div:nth-child(1) {
position: absolute;
bottom: 50%;
display: flex;
justify-content: center;
}
.taskCla > div img {
width: 80%;
}
.taskCla > div:nth-child(1) > div:nth-child(1) {
position: absolute;
top: 14.5%;
font-size: 1.3rem;
color: #E43F11;
}
.activityInfo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.activityInfo > div:nth-child(1) {
position: absolute;
top: -5vh;
display: flex;
justify-content: center;
}
.activityInfo > div:nth-child(2) {
margin-top: 7vh;
margin-bottom: 2vh;
width: 90%;
color: #999999;
}
.activityInfo > div:nth-child(1) > img {
width: 80%;
height: 80%;
}
.activityInfo > div:nth-child(1) > div:nth-child(1) {
position: absolute;
top: 14.5%;
font-size: 1.3rem;
color: #E43F11;
}
.activityRules {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.activityRules > div:nth-child(1) {
position: absolute;
text-align: center;
top: -5vh;
display: flex;
justify-content: center;
}
.activityRules > div:nth-child(1) > div:nth-child(1) {
position: absolute;
top: 14.5%;
font-size: 1.3rem;
color: #E43F11;
}
.activityRules > div:nth-child(1) > img {
width: 80%;
height: 80%;
}
.activityRules > div:nth-child(2) {
margin-top: 7vh;
margin-bottom: 2vh;
width: 90%;
height: auto;
color: #999999;
}
/* .activityRulesB >div:nth-child(1),
.activityRulesB >div:nth-child(2){
display: flex;
flex-direction: row;
} */
.activityRulesB_C {
display: flex;
flex-direction: row;
}
.myPrizeBox {
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: black;
background: rgba(0, 0, 0, 0.4)
}
.myPrizeBox > div:nth-child(1) {
width: 80%;
height: 80vh;
text-align: center;
position: relative;
}
.MyPrizeBoxSOffCls {
position: absolute;
top: 10%;
right: 0;
z-index: 101;
}
.MyPrizeBoxMain {
position: absolute;
width: 80%;
height: 62%;
bottom: 12%;
left: 9.5%;
display: flex;
flex-direction: column;
align-items: center;
}
.MyPrizeBoxMain > div:nth-child(1) {
color: #fff;
font-size: 1rem;
margin-bottom: 3%;
}
.MyPrizeBoxMain > div > div:nth-child(2),
.MyPrizeBoxMain > div > div:nth-child(3),
.MyPrizeBoxMain > div > div:nth-child(4) {
width: 100%;
height: 25%;
}
.MyPrizeBoxMainA {
overflow-y: auto;
}
.MyPrizeBoxMainA > div {
margin-top: 3vh;
width: 100%;
height: 12vh;
position: relative;
}
.MyPrizeBoxMainA:last-child {
margin-bottom: 6%;
}
.see {
margin-top: 0% !important;
height: 2% !important;
}
.MyPrizeBoxMainA_A {
display: flex;
flex-direction: row;
z-index: 102;
position: absolute;
width: 100%;
justify-content: space-between;
bottom: 2.5vh;
top: 1.5vh;
align-items: center;
}
.MyPrizeBoxMainA_A > div:nth-child(1) {
width: 25%;
}
.MyPrizeBoxMainA_A > div:nth-child(2) {
width: 75%;
}
.MyPrizeBoxMainA_A_A {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 8vh;
}
.MyPrizeBoxMainA_A_A > div:nth-child(1) {
width: 65%;
height: 6vh;
font-size: 0.8rem;
text-align: left;
color: #999999;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 7%;
font-size: 0.8rem;
}
.MyPrizeBoxMainA_A_A > div:nth-child(2) {
width: 40%;
}
.MyPrizeBoxMainA_A_A > div:nth-child(2) > button {
border: none;
border-radius: 10px 10px 10px 10px;
font-size: 0.7rem;
height: 4vh;
width: 15vw;
}
.buttonA {
border: none;
color: #fff;
background-color: #eee;
border-radius: 10px 10px 10px 10px;
font-size: 0.7rem;
height: 4vh;
width: 15vw;
}
.buttonB {
border: none;
color: #fff;
background-color: orange;
border-radius: 10px 10px 10px 10px;
font-size: 0.7rem;
height: 4vh;
width: 15vw;
background: -webkit-linear-gradient(left, #ff948a, #ff5c6d);
}
.prizePrompt {
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: black;
background: rgba(0, 0, 0, 0.5)
}
.prizePrompt > div:nth-child(1) {
width: 70%;
height: 40%;
background-color: #fff;
}
.prizePrompt > div:nth-child(1) > div:nth-child(1) {
height: 75%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
}
/* */
.prizePromptA {
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: black;
background: rgba(0, 0, 0, 0.5)
}
.prizePromptA > div:nth-child(1) {
width: 70%;
height: 40%;
background-color: #fff;
}
.prizePromptA > div:nth-child(1) > div:nth-child(1) {
height: 75%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
}
.prizePromptA > div:nth-child(1) > div:nth-child(1)
.prizePromptA > div:nth-child(1) > div:nth-child(2) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.prizePromptA > div:nth-child(1) > div:nth-child(2) {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 25%;
border-top: 1px solid #eee;
color: #ff5c6d;
}
.prizePromptA > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
margin-bottom: 8%;
}
/* */
.prizePrompt > div:nth-child(1) > div:nth-child(1) > div {
margin-bottom: 2.5%;
}
.prizePrompt > div:nth-child(1) > div:nth-child(1) > div > img {
width: 50%;
height: 100%;
}
.prizePrompt > div:nth-child(1) > div:nth-child(2) {
height: 25%;
border-top: 1px solid #eee;
color: #ff5c6d;
}
.zpclass {
position: absolute;
z-index: 20;
display: block;
width: 90%;
height: 100%;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.wheel-list {
transition: all 3s ease-in-out;
position: absolute;
z-index: 20;
width: 88%;
height: 88%;
overflow: hidden;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.wheel-list > .wheel-listA {
position: absolute;
top: 50%;
margin-top: -100%;
left: 50%;
margin-left: -50%;
width: 100%;
height: 100%;
-moz-transform-origin: center bottom;
-webkit-transform-origin: center bottom;
-o-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
/* background-color: #afd; */
box-sizing: border-box;
}
.wheel-list > .wheel-listA > .wheel-listB {
position: absolute;
top: 0;
left: 0;
margin-left: -50%;
display: block;
width: 100%;
height: 100%;
/* background: rgba(255,221,0,.3); */
content: '';
z-index: 30;
/* box-shadow: inset -1px 0 0 rgba(255,153,0,.7), inset 0 -1px 0 rgba(255,255,255,.4); */
-moz-transform-origin: right bottom;
-webkit-transform-origin: right bottom;
-o-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
}
.wheel-list > .wheel-listA > .wheel-listB {
position: absolute;
z-index: 25;
display: flex;
flex-direction: column;
justify-content: right;
align-items: flex-start;
}
.wheel-list > .wheel-listA .prize {
position: relative;
margin: 0 auto;
padding-top: 56%;
width: 50%;
overflow: hidden;
text-align: center;
line-height: 25px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
z-index: 100;
}
.wheel-list > .wheel-listA .prize > div:nth-child(2) > img {
width: 38%;
height: 38%;
}
.wheel-list > .wheel-listA .prize > div:nth-child(2) {
margin-top: 5%;
}
.zpzn {
position: absolute;
width: 25%;
height: 28%;
z-index: 100;
}
.wheel-list > .wheel-listA:nth-child(odd) > div:nth-child(1) {
background-color: #fcf9f0;
}
.wheel-list > .wheel-listA:nth-child(odd) > div:nth-child(2) {
color: #A8872A;
}
.wheel-list > .wheel-listA:nth-child(even) > div:nth-child(2) {
color: #FB6056;
}
.wheel-list > .wheel-listA:nth-child(even) > div:nth-child(1) {
background-color: #ffeaa7;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="wrap" style="background-image: url('__PUBLIC__/vip/images/turntable/zpbj.png');" id="app" v-cloak>
<!--我的奖品弹窗 -->
<div class="myPrizeBox" v-show="myPrizeBoxS">
<div>
<img src="__PUBLIC__/vip/images/turntable/myPrizeBox.png" alt="">
<div @click="MyPrizeBoxSOff" class="MyPrizeBoxSOffCls">
<img src="__PUBLIC__/vip/images/turntable/false.png" style="width: 38%;height: 38%;">
</div>
<div class="MyPrizeBoxMain">
<div>
我的奖品
</div>
<div class="MyPrizeBoxMainA"
>
<div v-for="(item, index) in myPrize ">
<img src="__PUBLIC__/vip/images/turntable/zplist.png" style="width: 100%;">
<div class="MyPrizeBoxMainA_A">
<div>
<img src="__PUBLIC__/vip/images/turntable/zplipin.png" alt=""
style="width: 55%;height: 75%;">
</div>
<div class="MyPrizeBoxMainA_A_A">
<div>
<span>{{ item.prize_name }}</span>
<span style="font-size: 0.7rem;">{{ item.add_time }}</span>
</div>
<div>
<button :class="item.status=='2'?'buttonA':'buttonB'">
<span v-if="item.status==2">已发放</span>
<span v-else-if="item.status==1" @click="goPrizeDetailed(item.id,item.status)">查看详情</span>
</button>
</div>
</div>
</div>
</div>
<div class="see" v-show="seeS">
<span style="text-align: center;color: #fff;">暂无更多</span>
</div>
</div>
</div>
</div>
</div>
<!-- 中奖白色弹窗 -->
<div class="prizePrompt" v-show="prizePromptS">
<div>
<div>
<div>
<img src="__PUBLIC__/vip/images/turntable/zplipin.png"/>
</div>
<div style="color: #999999;">恭喜您获得</div>
<div style="font-size: 1.3rem;">{{ winning.prize_name }}</div>
<div style="color: #999999;" v-if="winning.type ==1 ">实物</div>
<div style="color: #999999;" v-else-if="winning.type ==2 ">门店商品</div>
<div style="color: #999999;" v-else-if="winning.type ==3 ">积分</div>
<div style="color: #999999;" v-else-if="winning.type ==4 ">余额</div>
<div style="color: #999999;" v-else-if="winning.type ==5 ">不要气馁哦~</div>
</div>
<div class="flexcenter" @click="prizePromptOff">
<span v-if="winning.type ==1">去领取</span>
<span v-else-if="winning.type ==2">去领取</span>
<span v-else-if="winning.type ==3">确定</span>
<span v-else-if="winning.type ==4">确定</span>
<span v-else-if="winning.type ==5">确定</span>
</div>
</div>
</div>
<!-- 中奖白色弹窗2 -->
<div class="prizePromptA" v-show="prizePromptSA">
<div>
<div>
<div>
<img src="__PUBLIC__/vip/images/turntable/shangxin.png" style="width: 50%;">
</div>
<div>剩余次数不足了哦~</div>
</div>
<div @click="prizePromptAOff">
<span>确定</span>
</div>
</div>
</div>
<div class="wrap_a">
<img src="__PUBLIC__/vip/images/turntable/zptitle.png"/>
</div>
<div class="wrap_b">
<div>
<div class="zpclass">
<div class="wheel-list" :style="{transform:'rotateZ('+deg+'deg)'}"
v-if="TurntableArr.length==4">
<div style="transform: rotate(0deg);" class="wheel-listA">
<div style="transform: rotate(45deg) skewY(0deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[0].prize_name }}</div>
<div>
<img :src="TurntableArr[0].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(90deg);" class="wheel-listA">
<div style="transform: rotate(45deg) skewY(0deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[1].prize_name }}</div>
<div>
<img :src="TurntableArr[1].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(180deg);" class="wheel-listA">
<div style="transform: rotate(45deg) skewY(0deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[2].prize_name }}</div>
<div>
<img :src="TurntableArr[2].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(270deg);" class="wheel-listA">
<div style="transform: rotate(45deg) skewY(0deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[3].prize_name }}</div>
<div>
<img :src="TurntableArr[3].prize_img">
</div>
</div>
</div>
</div>
<div class="wheel-list" :style="{transform:'rotateZ('+deg+'deg)'}"
v-else-if="TurntableArr.length==6">
<div style="transform: rotate(0deg);" class="wheel-listA">
<div style="transform: rotate(30deg) skewY(30deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[0].prize_name }}</div>
<div>
<img :src="TurntableArr[0].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(60deg);" class="wheel-listA">
<div style="transform: rotate(30deg) skewY(30deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[1].prize_name }}</div>
<div>
<img :src="TurntableArr[1].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(120deg);" class="wheel-listA">
<div style="transform: rotate(30deg) skewY(30deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[2].prize_name }}</div>
<div>
<img :src="TurntableArr[2].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(180deg);" class="wheel-listA">
<div style="transform: rotate(30deg) skewY(30deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[3].prize_name }}</div>
<div>
<img :src="TurntableArr[3].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(240deg);" class="wheel-listA">
<div style="transform: rotate(30deg) skewY(30deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[4].prize_name }}</div>
<div>
<img :src="TurntableArr[4].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(300deg);" class="wheel-listA">
<div style="transform: rotate(30deg) skewY(30deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[5].prize_name }}</div>
<div>
<img :src="TurntableArr[5].prize_img">
</div>
</div>
</div>
</div>
<div class="wheel-list" :style="{transform:'rotateZ('+deg+'deg)'}"
v-else-if="TurntableArr.length==8">
<div style="transform: rotate(0deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[0].prize_name }}</div>
<div>
<img :src="TurntableArr[0].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(45deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[1].prize_name }}</div>
<div>
<img :src="TurntableArr[1].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(90deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[2].prize_name }}</div>
<div>
<img :src="TurntableArr[2].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(135deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[3].prize_name }}</div>
<div>
<img :src="TurntableArr[3].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(180deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[4].prize_name }}</div>
<div>
<img :src="TurntableArr[4].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(225deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[5].prize_name }}</div>
<div>
<img :src="TurntableArr[5].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(270deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[6].prize_name }}</div>
<div>
<img :src="TurntableArr[6].prize_img">
</div>
</div>
</div>
<div style="transform: rotate(315deg);" class="wheel-listA">
<div style="transform: rotate(21deg) skewY(45deg);" class="wheel-listB"></div>
<div class="prize">
<div>{{ TurntableArr[7].prize_name }}</div>
<div>
<img :src="TurntableArr[7].prize_img">
</div>
</div>
</div>
</div>
<div class="zpzn" id="button" href="javascript:;" @click="goprize">
<img style="width: 100%;height:100%;" src="__PUBLIC__/vip/images/turntable/zpzn.png"/>
</div>
</div>
<img src="__PUBLIC__/vip/images/turntable/turntable-bg.png"/>
</div>
</div>
<div class="wrap_c">
<div id="myPrize" @click="seeMyPrizeBoxS">
<span>我的奖品</span>
</div>
<div @click="prizePromptF">
<!-- <span>您有</span><span style="color:#cc4714">1</span><span>次抽奖机会</span> -->
</div>
</div>
<div class="wrap_d">
<span>活动时间:</span>
<span>
<span>
{{ activityTimeStart|formatDateS }}
</span>
<span>-</span>
<span>
{{ activityTimeEnd|formatDateS }}
</span>
</span>
</div>
<div class="wrap_e">
<div class="taskCla" v-show="taskShow">
<div>
<div>任务</div>
<img src="__PUBLIC__/vip/images/turntable/zpa.png"/>
</div>
<div>
<div>消费满30赠送一次</div>
<div>已完成 0 次</div>
</div>
</div>
<div class="activityInfo">
<div>
<div>活动说明</div>
<img src="__PUBLIC__/vip/images/turntable/zpa.png"/>
</div>
<div style="word-break:break-all">
{{ explain }}
</div>
</div>
<div class="activityRules">
<div>
<div>活动规则</div>
<img src="__PUBLIC__/vip/images/turntable/zpa.png"/>
</div>
<div class="activityRulesB">
{{ strategy }}
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/vip/js/window-reload.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
var app = new Vue({
el: "#app",
data: function () {
return {
myPrizeBoxS: false,
prizePromptS: false,
prizePromptSA: false,
//我的奖品假数据
myPrize: [],
// 中奖后的数组
winning: [],
TurntableArr: [],
page: '1',
seeS: false,
TurntableMyPrizeCode: '',
// 旋转度数
deg: '0',
// 点击抽奖状态
isStatr: false,
// 活动开始时间
activityTimeStart: '',
// 结束时间
activityTimeEnd: '',
// 活动规则
strategy: '',
// 活动说明
explain: '',
turntableType: '',
// 任务信息
taskShow: '',
codes: '',
}
},
mounted() {
this.rotaryTable()
this.installs()
},
methods: {
// 初始化
installs () {
this.turntable_id = getQueryVariable('turntable_id');
console.log(this.turntable_id)
},
// 获取转盘类型
rotaryTable() {
$.ajax({
type: 'post',
url: "{:U('Vip/Turntable/getTurntableInfo')}",
dataType: 'json',
data: {
turntable_id: 84
// turntable_id: this.turntable_id
},
success: (data) => {
console.log(data)
if (data.code == 0) {
this.TurntableArr = data.data.prize_list
this.activityTimeStart = data.data.start_time
this.activityTimeEnd = data.data.end_time
this.strategy = data.data.strategy
this.explain = data.data.explain
this.turntableType = data.data.turntableType
if (this.turntableType == 5) {
this.taskShow = true
} else {
this.taskShow = false
}
}
console.log(this.TurntableArr)
},
error: function () {
alert("数据请求失败")
}
})
},
// 我的奖品
seeMyPrizeBoxS() {
this.myPrizeBoxS = true
$('body').css({overflow: "hidden"})
console.log(this.page)
this.page = 1
this.pull()
$.ajax({
type: 'post',
url: "{:U('Vip/Turntable/TurntableMyPrize')}",
dataType: 'json',
data: {
turntable_id: this.turntable_id,
page: this.page,
page_size: '8'
},
success: (data) => {
console.log(data)
this.myPrize = data.data.data
console.log(this.myPrize)
},
error: function () {
alert("数据请求失败")
}
})
},
// 我的奖品底部刷新
pull() {
let el = document.querySelector('.MyPrizeBoxMainA')
let offsetHeight = el.offsetHeight;
el.onscroll = () => {
let scrollTop = el.scrollTop;
scrollTop += Number(10)
let scrollHeight = el.clientHeight;
let aaa = el.scrollLeft;
console.log(scrollTop)
console.log(scrollHeight)
if (scrollTop >= scrollHeight) {
setTimeout(() => {
console.log(this.TurntableMyPrizeCode)
if (this.TurntableMyPrizeCode == 44001) {
return
}
this.page++
console.log(this.page)
$.ajax({
type: 'post',
url: "{:U('Vip/Turntable/TurntableMyPrize')}",
dataType: 'json',
data: {
turntable_id: this.turntable_id,
page: this.page,
page_size: '8'
},
success: (data) => {
console.log(data)
if (data.code == 44001) {
this.TurntableMyPrizeCode = data.code
this.seeS = true
return
} else if (data.code == 0) {
for (let index = 0; index < data.data.data.length; index++) {
let forff = data.data.data[index]
this.myPrize.push(forff)
}
console.log(this.myPrize)
this.seeS = false
}
},
error: function () {
alert("数据请求失败")
}
})
}, 600);
}
}
},
MyPrizeBoxSOff() {
this.myPrizeBoxS = false
$('body').css({overflow: "initial"})
},
// 中奖提示
prizePromptF() {
this.prizePromptS = true
$('body').css({overflow: "hidden"})
},
prizePromptOff() {
this.prizePromptS = false
$('body').css({overflow: "initial"})
// this.$forceUpdate()
},
prizePromptAOff() {
this.prizePromptSA = false
$('body').css({overflow: "initial"})
// this.$forceUpdate()
},
goPrizeDetailed(id, status) {
console.log(id)
// console.log(status)
// window.location.href = "/Vip/Activity/prizeDetails?id={{id}}"
window.location.href = `{:U('Vip/Activity/prizeDetails')}?win_id=${id}`
},
// 点击抽奖
goprize() {
if (this.isStatr) {
return false
} else {
this.isStatr = true
$.ajax({
type: 'post',
url: "{:U('Vip/Turntable/getRunTurntable')}",
dataType: 'json',
data: {
turntable_id: 84,
merchant_id: '',
vid: '',
bill_order_id: ''
},
success: (data) => {
console.log(data)
if (data.code == 0) {
this.deg = 1200
this.winning = data.data
console.log(this.winning)
setTimeout(() => {
// console.log('66')
this.deg = 0
this.isStatr = false
if (this.codes == 48001) {
return
}
$('body').css({overflow:"initial"})
this.prizePromptS = true
this.deg = 0
}, 2400)
} else if (data.code == 48001) {
this.codes = 48001
this.deg = 0
this.prizePromptSA = true
this.prizePromptS = false
$('body').css({overflow: "hidden"})
return
} else if (data.code == 40005 || data.code == 48005) {
this.prizePromptS = false
}
},
error: function () {
alert("数据请求失败")
$('body').css({overflow:"initial"})
}
})
}
if (this.codes == 48001) {
return
}
// this.deg = 1200
$('body').css({overflow: "hidden"})
document.documentElement.scrollTop = 0
}
},
filters: {
formatDateS: function (value) {
let date = new Date(parseInt(value) * 1000)
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
}
})
</script>
</html>