592 lines
16 KiB
Vue
592 lines
16 KiB
Vue
<template>
|
||
<!-- <page-meta :root-font-size="rootFontSize + 'px'">
|
||
</page-meta> -->
|
||
<view class="content">
|
||
<!-- mask -->
|
||
<view class="mask flex_items flex_center" v-if="ismask" @click="closemsk">
|
||
<view class="mk plr50" style="">
|
||
<view class="flex_between flex_items mt40 mlr30">
|
||
<view></view>
|
||
<text class="f30 bold" style="color: #003A6E;">活动规则</text>
|
||
<image :src="imgUrl+'guan.png'" @click="closemsk" style="width: 36rpx;height: 36rpx;" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="f24 mt30 mlr30" style="color: #2B6DA8;">
|
||
<view>1.【活动时间】2023年11月1日至2023年12月
|
||
31日</view>
|
||
<view class="mt20">
|
||
2.【活动内容】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
||
<view class="mt20">
|
||
3.【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 中将 -->
|
||
<view class="mask flex_items flex_center" v-if="ismask2">
|
||
<view class="mk2 plr50 flex_column flex_items" style="">
|
||
<view class="flex_between flex_items" style="width: 100%;">
|
||
<text style="opacity: 0;">站位</text>
|
||
<text v-if="isz==1" class="f36 bold" style="color: #003A6E;margin-top: 150rpx;">恭喜您获得</text>
|
||
<text v-if="isz==0" class="f36 bold" style="color: #003A6E;margin-top: 150rpx;">很遗憾</text>
|
||
<image :src="imgUrl+'guan.png'" @click="closemsk"
|
||
style="width: 36rpx;height: 36rpx;margin-top: 150rpx;" mode=""></image>
|
||
</view>
|
||
<text class="f40 mt20" style="color: #003A6E;">{{prizeList[prizeIndex - 1].name}}</text>
|
||
<text v-if="isz==1" class="f24 mt10" style="color: #003A6E;">请到【我的奖品】中查看并使用</text>
|
||
<view v-if="isz==1" @click="mypre" class="mt50 f-center f28"
|
||
style="width: 336rpx;height: 72rpx;line-height: 72rpx;background:#DB8267;border-radius: 68rpx;color: #fff;">
|
||
去查看</view>
|
||
</view>
|
||
</view>
|
||
<view class="pos flex_center flex_items" style="margin-top:100rpx;">
|
||
<text style="color: #FAFDE2;" class="f58 bolder">天天抽奖-赚不停</text>
|
||
<view class="abs flex_items flex_center" style="width: 254rpx;height: 77rpx;left: 100rpx;top:-68rpx;">
|
||
<text class="f22 pos mb20" style="color: #FF5F14;z-index: 2;">抽奖机会 每日8点刷新</text>
|
||
<image class="abs" :src="imgUrl+'qp.png'" mode="" style="width: 100%;height: 77rpx;left: 0;top: 0;">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="flex_items flex_center mt30">
|
||
<view class="t2 flex_items flex_center">
|
||
<text class="f22" style="color: #FAFDE2;">每天分享一位好友获取一次抽奖资格</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex_between">
|
||
<view></view>
|
||
<view class="flex_column flex_items mt30">
|
||
<view @click="openmask" class="tagr flex_items flex_center" style="color: #F67B24;z-index: 8;">
|
||
<text class="f24">活动规则</text>
|
||
<image class="ml10" :src="imgUrl+'right.png'" style="width:22rpx;height:20rpx;" mode=""></image>
|
||
</view>
|
||
<view @click="mypre" class="tagr flex_items flex_center mt20" style="color: #F67B24;z-index: 8">
|
||
<text class="f24">我的奖品</text>
|
||
<image class="ml10" :src="imgUrl+'right.png'" style="width:22rpx;height:20rpx;" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- zhuanpan -->
|
||
<view class="turntable-box pos">
|
||
<div class="abs" style="width: 170rpx;height:80rpx;background:none;bottom:100rpx;left:290rpx;z-index: 5;"
|
||
@click="onStart"></div>
|
||
<view class="content-box">
|
||
<view class="zhuanpan flex_items flex_center"
|
||
:style="{transition:'transform ' + rotationTime / 1000 + 's ease',transform:'rotate(' + rotate + 'deg)'}">
|
||
<!-- <view class="bck-box" :style="`transform: rotate(${-90+180/prizeList.length}deg)`">
|
||
<view class="bck" v-for="(i,index) in prizeList" :key="index"
|
||
:style="`transform: rotate(${-index*360/prizeList.length}deg) skew(${-90 + 360/prizeList.length}deg);`">
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="prize"
|
||
:style="`transform: rotate(${-index*360/prizeList.length}deg) translateY(-110rpx);`"
|
||
v-for="(i,index) in prizeList" :key="index">
|
||
<span v-if="i.prize_id!=-1" :class="['f22']">{{index+1}}等奖</span>
|
||
<span v-else :class="['f22']">{{i.name}}</span>
|
||
<view class="img">
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="pointer-box" @click="onStart">
|
||
<img src="https://pfapi.86698.cn/static/images/zhi.png" alt="">
|
||
<!-- <view class="hand" v-if="isHand"></view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 次数 -->
|
||
<view class="flex_items flex_center">
|
||
<view class="f28 f-center"
|
||
style="color: #fff;width: 300rpx;height: 72rpx;line-height: 72rpx; background: linear-gradient(135deg, #E9533B 0%, #F8A797 100%);border-radius:16rpx;">
|
||
剩余抽奖次数: {{times}}次
|
||
</view>
|
||
</view>
|
||
<!-- 名单 -->
|
||
<view class="plr30 mt100">
|
||
<view class="plr30 ptb20 flex_column flex_items"
|
||
style="background: linear-gradient(180deg, #FFFFFF 0%, #FFEED8 100%);;border-radius: 24rpx;">
|
||
<view class="f28 bold mt20" style="color: #FF3C00;">中将名单</view>
|
||
<!-- <view class="mt30 flex_between flex_items pb30 bbe9s" style="width: calc(100% - 200rpx);">
|
||
<view class="flex_start flex_items">
|
||
<image :src="txximg" style="width: 74rpx;height: 74rpx;border-radius: 50%;" mode=""></image>
|
||
<text class="f24 ml10" style="color: #531719;">188****8888</text>
|
||
</view>
|
||
<text class="f28" style="color: #808080">2022-12-23</text>
|
||
</view> -->
|
||
<div class="marquee">
|
||
<div class="marquee_box" ref="marquee_box">
|
||
<div class="marquee_list" :class="{marquee_top:animate}">
|
||
<div class="">
|
||
<div v-for="(item,index) in zjlist" :key="index"
|
||
class="mt30 flex_between flex_items pb30 bbe9s" style="width:100%;">
|
||
<div class="flex_start flex_items">
|
||
<image :src="imgUrl+'txx.png'"
|
||
style="width: 74rpx;height: 74rpx;border-radius: 50%;" mode=""></image>
|
||
<text class="f24 ml10" style="color: #531719;">{{item.user_name}}</text>
|
||
</div>
|
||
<text class="f28" style="color: #808080">{{item.win_time}}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;height: 40rpx;"></view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'LuckyTurntable',
|
||
data() {
|
||
return {
|
||
rootFontSize: 14,
|
||
rotate: 0, // 旋转角度,通过控制旋转角度来指定指向哪个奖品
|
||
rotNum: 1, // 旋转圈数基数
|
||
isHand: true, //手指是否显示
|
||
isManyClick: false, //未出结果频繁点击提示
|
||
animate: false,
|
||
showNum: 6, // 可见列表条数
|
||
ismask: false,
|
||
ismask2: false,
|
||
prizeIndex: 1,
|
||
isz: 1,
|
||
imgUrl: ""
|
||
}
|
||
},
|
||
props: {
|
||
// 数据列表
|
||
prizeList: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
// 转圈时间毫秒
|
||
rotationTime: {
|
||
type: Number,
|
||
default: 3000,
|
||
},
|
||
// 抽奖剩余次数
|
||
times: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
// 中将人员
|
||
zjlist: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
// id
|
||
acid: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.lastTimes = this.times
|
||
this.imgUrl = this.api.imgUrl
|
||
let srceenNunber = 375;
|
||
let that = this;
|
||
uni.onWindowResize((res) => {
|
||
that.rootFontSize = parseFloat(res.size.windowWidth / srceenNunber) * 14
|
||
})
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.rootFontSize = parseFloat(res.screenWidth / srceenNunber) * 14;
|
||
}
|
||
})
|
||
},
|
||
created() {
|
||
setInterval(this.showMarquee, 2000)
|
||
},
|
||
mounted() {
|
||
this.$refs.marquee_box.style.height = this.showNum * 53 + 'px'
|
||
},
|
||
methods: {
|
||
showMarquee() {
|
||
this.animate = true
|
||
this.zjlist.push(this.zjlist[0])
|
||
setTimeout(() => {
|
||
this.zjlist.shift()
|
||
this.animate = false
|
||
}, 1000)
|
||
},
|
||
onStart() {
|
||
this.getstart()
|
||
},
|
||
getstart() {
|
||
if (this.isManyClick) {
|
||
uni.showToast({
|
||
title: "结果还没出现,请稍后",
|
||
icon: "none"
|
||
})
|
||
return false
|
||
}
|
||
this.api.getover({
|
||
id: this.acid
|
||
}).then((res) => {
|
||
if (res.data.code == 200) {
|
||
if (res.data.data.length == 0) {
|
||
for (let i = 0; i < this.prizeList.length; i++) {
|
||
if (this.prizeList[i].prize_id == -1) {
|
||
this.prizeIndex = i + 1
|
||
}
|
||
}
|
||
this.isz = 0
|
||
this.startToRotate(this.prizeIndex)
|
||
return false
|
||
}
|
||
this.isz = 1
|
||
for (let i = 0; i < this.prizeList.length; i++) {
|
||
if (this.prizeList[i].prize_id == res.data.data.prize_id) {
|
||
this.prizeIndex = i + 1
|
||
}
|
||
}
|
||
if (this.times <= 0) {
|
||
uni.showToast({
|
||
title: "次数已用完",
|
||
icon: "none"
|
||
})
|
||
return false
|
||
}
|
||
if (this.isManyClick) {
|
||
uni.showToast({
|
||
title: "结果还没出现,请稍后",
|
||
icon: "none"
|
||
})
|
||
return false
|
||
} else {
|
||
this.isHand = false
|
||
this.startToRotate(this.prizeIndex);
|
||
}
|
||
} else {
|
||
this.istrue = true
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
startToRotate(val) {
|
||
const self = this;
|
||
self.getPrize(val, () => {
|
||
self.completePrize();
|
||
});
|
||
},
|
||
getPrize(index, complete) {
|
||
let angle = 360 / this.prizeList.length
|
||
this.rotate = 1800 * this.rotNum + (index - 1) * angle;
|
||
clearTimeout(this.timer);
|
||
if (this.timer) {
|
||
this.isManyClick = true
|
||
}
|
||
this.timer = setTimeout(() => {
|
||
complete();
|
||
clearTimeout(this.timer);
|
||
this.timer = null;
|
||
// 结束后可以再次点击
|
||
this.isManyClick = false
|
||
this.rotNum++;
|
||
}, this.rotationTime);
|
||
},
|
||
mypre() {
|
||
uni.navigateTo({
|
||
url: "/pages/my/prizes?acid=" + this.acid
|
||
})
|
||
},
|
||
completePrize() {
|
||
this.isHand = true
|
||
this.$emit('timesChange');
|
||
this.ismask2 = true
|
||
},
|
||
closemsk() {
|
||
this.ismask = false
|
||
this.ismask2 = false
|
||
},
|
||
openmask() {
|
||
this.ismask = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@keyframes likes {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(0.85);
|
||
}
|
||
|
||
75% {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.content {
|
||
font-family: SF Pro Text;
|
||
box-sizing: border-box;
|
||
padding: 1px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
.t2 {
|
||
width: 540rpx;
|
||
height: 62rpx;
|
||
background-image: url('https://pfapi.86698.cn/static/images/k1.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.tagr {
|
||
width: 159rpx;
|
||
height: 44rpx;
|
||
background: linear-gradient(180deg, #FFF9DE 0%, #FFD96E 100%);
|
||
border-radius: 22rpx 0rpx 0rpx 22rpx;
|
||
}
|
||
|
||
.turntable-box {
|
||
width: 100%;
|
||
height: 865rpx;
|
||
margin: -188rpx auto;
|
||
background: url('https://pfapi.86698.cn/static/images/quanp.png') center center;
|
||
background-size: cover;
|
||
// padding-top: 1.357rem;
|
||
box-sizing: border-box;
|
||
|
||
// 转盘主体
|
||
.content-box {
|
||
user-select: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0 auto;
|
||
|
||
// 指针盒子
|
||
.pointer-box {
|
||
position: absolute;
|
||
top: 300rpx;
|
||
|
||
img {
|
||
width: 119rpx;
|
||
height: 142rpx;
|
||
}
|
||
|
||
.hand {
|
||
top: 3.857rem;
|
||
left: 4.5rem;
|
||
position: absolute;
|
||
width: 6.643rem;
|
||
height: 7.429rem;
|
||
background: url('https://pfapi.86698.cn/static/images/hand.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
animation-name: likes; // 动画名称
|
||
animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
|
||
animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
|
||
animation-delay: 0s; // 动画延迟时间
|
||
animation-iteration-count: infinite; // 动画播放次数，infinite：一直播放
|
||
animation-duration: 1s; // 动画完成时间
|
||
}
|
||
}
|
||
|
||
/* 转盘样式 */
|
||
.zhuanpan {
|
||
overflow: hidden;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: -62rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
|
||
/* 每个奖项的样式 */
|
||
.prize {
|
||
position: absolute;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #FF501C;
|
||
}
|
||
|
||
.img {
|
||
margin: 0.5rem auto;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
line-height: 2.5rem;
|
||
overflow: hidden;
|
||
color: white;
|
||
|
||
img {
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bck-box {
|
||
overflow: hidden;
|
||
// position: absolute;
|
||
width: 446rpx;
|
||
height: 448rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
// top: 148rpx;
|
||
|
||
/* 转盘扇形背景 */
|
||
.bck {
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 1;
|
||
top: -50%;
|
||
left: 50%;
|
||
transform-origin: 0% 100%;
|
||
// transform:skew(30deg);
|
||
}
|
||
|
||
/* 转盘背景色 */
|
||
// .bck:nth-child(2n) {
|
||
// background: #FDEFE4;
|
||
// }
|
||
|
||
// .bck:nth-child(2n+1) {
|
||
// background: #FFD1AE;
|
||
// }
|
||
// }
|
||
.bck:nth-child(1) {
|
||
background: #FFD1AE;
|
||
}
|
||
|
||
.bck:nth-child(2) {
|
||
background: #FDEFE4;
|
||
}
|
||
|
||
.bck:nth-child(3) {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.bck:nth-child(4) {
|
||
background: #FDEFE4;
|
||
}
|
||
|
||
.bck:nth-child(5) {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.bck:nth-child(6) {
|
||
background: #FDEFE4;
|
||
}
|
||
|
||
.bck:nth-child(7) {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.bck:nth-child(8) {
|
||
background: #FDEFE4;
|
||
}
|
||
|
||
.bck:nth-child(9) {
|
||
background: #faf5f0;
|
||
}
|
||
|
||
.bck:nth-child(10) {
|
||
background: #FDEFE4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.remainder-times {
|
||
margin: 5.429rem auto 1.786rem;
|
||
width: 9.714rem;
|
||
height: 1rem;
|
||
line-height: 1rem;
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-weight: 500;
|
||
font-size: 0.857rem;
|
||
}
|
||
}
|
||
|
||
.marquee {
|
||
width: 100%;
|
||
align-items: center;
|
||
color: #3a3a3a;
|
||
// background-color: white;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.marquee_title {
|
||
padding: 0 20px;
|
||
height: 21px;
|
||
font-size: 14px;
|
||
border-right: 1px solid #d8d8d8;
|
||
align-items: center;
|
||
}
|
||
|
||
.marquee_box {
|
||
display: block;
|
||
position: relative;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.marquee_list {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
width: calc(100% - 150rpx);
|
||
}
|
||
|
||
.marquee_top {
|
||
transition: all 1s;
|
||
margin-top: -53px;
|
||
}
|
||
|
||
.mk {
|
||
background-image: url('https://pfapi.86698.cn/static/images/mk.png');
|
||
background-size: 100% 100%;
|
||
width: 550rpx;
|
||
height: 900rpx;
|
||
}
|
||
|
||
.mk2 {
|
||
background-image: url('https://pfapi.86698.cn/static/images/zj.png');
|
||
background-size: 100% 100%;
|
||
width: 494rpx;
|
||
height: 684rpx;
|
||
}
|
||
|
||
.mask {
|
||
background: rgba(0, 0, 0, 0.60);
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
</style>
|