1206 行
41 KiB
HTML
可执行文件
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> |