385 lines
11 KiB
Vue
385 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="around">
|
|||
|
|
<!-- mask -->
|
|||
|
|
<view class="mask flex_items flex_center" v-if="ismask" @click="closemsk">
|
|||
|
|
<view class="mk plr50 pos flex_column flex_items" style="">
|
|||
|
|
<view class="f40 abs bold" style="color: #CA7340;top: 24rpx;">活动规则</view>
|
|||
|
|
<view class="plr50 flex_column f24" style="color: #2B6DA8;">
|
|||
|
|
<view class="" style="margin-top:130rpx;">1.【活动时间】2023年11月1日至2023年12月31日。</view>
|
|||
|
|
<view class="mt20">
|
|||
|
|
2.【活动内容】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
|||
|
|
<view class="mt20">
|
|||
|
|
3.【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
|||
|
|
<view class="mt20">4【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为。</view>
|
|||
|
|
</view>
|
|||
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'" style="width: 52rpx;height: 52rpx;bottom: -100rpx;"
|
|||
|
|
mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 中将 -->
|
|||
|
|
<view class="mask flex_items flex_center" v-if="ismask2">
|
|||
|
|
<view class="mk2 plr50 flex_column flex_items pos" style="">
|
|||
|
|
<view v-if="jiang!='很遗憾，未中奖'" class="f36 bold" style="color: #003A6E;margin-top:150rpx;">恭喜您获得</view>
|
|||
|
|
<view class="f40" style="color: #003A6E;margin-top: 150rpx;">{{jiang}}</view>
|
|||
|
|
<view class="mt30 f24" style="color: #003A6E;">请到【我的奖品】中查看</view>
|
|||
|
|
<view style="" class="flex_items flex_center btnl mt40" @click="gomyp">
|
|||
|
|
<text class="f32" style="color: #fff;">确认</text>
|
|||
|
|
</view>
|
|||
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'" style="width: 52rpx;height: 52rpx;bottom: -100rpx;"
|
|||
|
|
mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_column flex_items">
|
|||
|
|
<view class="mt80">
|
|||
|
|
<image :src="imgUrl+'zzz.png'" style="width: 600rpx;height: 126rpx;" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="mt20 f32" style="color: #fff;">刮出积分礼</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex_between flex_items">
|
|||
|
|
<view></view>
|
|||
|
|
<view class="flex_column flex_items mt30">
|
|||
|
|
<view @click="openmask" class="tagr flex_items flex_center" style="color: #fff;z-index: 8;">
|
|||
|
|
<text class="f24">活动规则</text>
|
|||
|
|
<image class="ml10" :src="imgUrl+'rightg.png'" style="width:22rpx;height:20rpx;" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="tagr flex_items flex_center mt20" style="color: #fff;z-index: 8" @click="gomyp">
|
|||
|
|
<text class="f24">我的奖品</text>
|
|||
|
|
<image class="ml10" :src="imgUrl+'rightg.png'" style="width:22rpx;height:20rpx;" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- t2 -->
|
|||
|
|
<view class="flex_center flex_items pos">
|
|||
|
|
<view class="abs tit f-center f22" style="color: #fff;">已有200000人参与</view>
|
|||
|
|
<view class="flex_warp flex_items abs"
|
|||
|
|
style="left: 50%;transform: translate(-50%);width:350rpx;height:300rpx;top:96rpx">
|
|||
|
|
<block v-for="(item, index) in prizeList" :key="index" v-if="index<6" class="flex_items flex_center"
|
|||
|
|
style="width:40rpx;height: 50rpx;">
|
|||
|
|
<image
|
|||
|
|
:style="{'width':'40rpx','height':'50rpx','margin-left':'20rpx','margin-right':index==2||index==5?'0':'80rpx'}"
|
|||
|
|
class="prize" :class="currentIndex==index?'active':''" :src="imgUrl+'hb.png'" />
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<view class="t2" style="color: #fff;" @click="start">
|
|||
|
|
<view class="flex_column flex_items abs" style="bottom: 112rpx;left: 50%;transform: translateX(-50%);">
|
|||
|
|
<text class="f44 bold" style="color: #fff;">点我开始</text>
|
|||
|
|
<text class="f20" style="color: #fff;">剩余{{times}}次抽奖机会</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- t3 -->
|
|||
|
|
<view class="flex_items flex_center">
|
|||
|
|
<view class="t3 pos">
|
|||
|
|
<text class="abs f32 bold"
|
|||
|
|
style="color: #E05942;left: 50%;transform: translate(-50%);top:10rpx;">中奖名单</text>
|
|||
|
|
<view class="mt30 ptb30">
|
|||
|
|
<div class="marquee">
|
|||
|
|
<div class="marquee_box" ref="marquee_box">
|
|||
|
|
<div class="marquee_list" :class="{marquee_top:animate}">
|
|||
|
|
<div class="flex_items flex_column">
|
|||
|
|
<div v-for="(item,index) in zjlist" :key="index" class="mt30 flex_start flex_items"
|
|||
|
|
style="width:100%;color: #E57524;">
|
|||
|
|
<text class="f24 ml10">恭喜：{{item.user_name}}的用户获得</text>
|
|||
|
|
<text class="f24">{{item.prize}}</text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 100%;height: 30rpx;"></view>
|
|||
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
zjlist: [],
|
|||
|
|
animate: false,
|
|||
|
|
showNum: 10, // 可见列表条数
|
|||
|
|
ismask: false,
|
|||
|
|
ismask2: false,
|
|||
|
|
acid: "",
|
|||
|
|
currentIndex: 0,
|
|||
|
|
runIndexList: [0, 1, 2, 4, 5, 3],
|
|||
|
|
lastRunStepList: [0, 1, 2, 3, 5, 4],
|
|||
|
|
btnDisabled: false,
|
|||
|
|
prizeList: [],
|
|||
|
|
jiang: "",
|
|||
|
|
chosejp: 0,
|
|||
|
|
times: 0,
|
|||
|
|
imgUrl:""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.acid = options.id
|
|||
|
|
this.imgUrl = this.api.imgUrl
|
|||
|
|
this.getData()
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// 页面显示
|
|||
|
|
setInterval(this.showMarquee, 2000)
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 可见数据高度
|
|||
|
|
this.$refs.marquee_box.style.height = this.showNum * 30 + 'px'
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getData(id) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "加载中..."
|
|||
|
|
})
|
|||
|
|
this.api.getdatas({
|
|||
|
|
id: this.acid
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
this.zjlist = res.data.data.win_list
|
|||
|
|
this.prizeList = res.data.data.prizes
|
|||
|
|
if (res.data.data.left_num.limit) {
|
|||
|
|
this.times = res.data.data.left_num.num
|
|||
|
|
uni.hideLoading()
|
|||
|
|
} else {
|
|||
|
|
this.times = 9999
|
|||
|
|
}
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.istrue = true
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
this.istrue = true
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.data.message,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getover() {
|
|||
|
|
let that = this
|
|||
|
|
that.api.getover({
|
|||
|
|
id: that.acid
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
if (res.data.data.length != 0) {
|
|||
|
|
that.prizeList.forEach((item, index) => {
|
|||
|
|
if (item.prize_id == res.data.data.prize_id) {
|
|||
|
|
that.chosejp = index
|
|||
|
|
that.startchou()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
that.chosejp = 3
|
|||
|
|
that.startchou('未中奖')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
that.istrue = true
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.data.message,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
startchou(jg) {
|
|||
|
|
let count = 10
|
|||
|
|
let currentIndex = 0
|
|||
|
|
let timer = setInterval(() => {
|
|||
|
|
count--
|
|||
|
|
currentIndex++
|
|||
|
|
this.currentIndex = (this.runIndexList[currentIndex % 6])
|
|||
|
|
if (count < this.prizeList.length * 2) {
|
|||
|
|
clearInterval(timer)
|
|||
|
|
let timer2 = setInterval(() => {
|
|||
|
|
count--
|
|||
|
|
currentIndex++
|
|||
|
|
this.currentIndex = (this.runIndexList[currentIndex % 6])
|
|||
|
|
if (count < this.prizeList.length * 1 - 3) {
|
|||
|
|
clearInterval(timer2)
|
|||
|
|
let timer3 = setInterval(() => {
|
|||
|
|
count--
|
|||
|
|
currentIndex++
|
|||
|
|
// this.currentIndex = (this.runIndexList[currentIndex % 6])
|
|||
|
|
this.currentIndex = this.chosejp
|
|||
|
|
if (count <= 0) {
|
|||
|
|
clearInterval(timer3)
|
|||
|
|
this.btnDisabled = false
|
|||
|
|
if (jg) {
|
|||
|
|
this.jiang = '很遗憾，未中奖'
|
|||
|
|
} else {
|
|||
|
|
this.jiang =
|
|||
|
|
`${this.prizeList[this.currentIndex].name}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.ismask2 = true
|
|||
|
|
}
|
|||
|
|
}, 400)
|
|||
|
|
}
|
|||
|
|
}, 200)
|
|||
|
|
}
|
|||
|
|
}, 100)
|
|||
|
|
},
|
|||
|
|
start() {
|
|||
|
|
this.getover()
|
|||
|
|
},
|
|||
|
|
// 返回抽奖结果奖品的index
|
|||
|
|
getResultIndex() {
|
|||
|
|
let totalChance = 0
|
|||
|
|
for (let i in this.prizeList) {
|
|||
|
|
totalChance += Number(this.prizeList[i].chance ? this.prizeList[i].chance : 1)
|
|||
|
|
}
|
|||
|
|
// 0 ~ 1
|
|||
|
|
let random = Math.random()
|
|||
|
|
let index = 0
|
|||
|
|
let num = 0
|
|||
|
|
for (let i in this.prizeList) {
|
|||
|
|
num += (Number(this.prizeList[i].chance) / totalChance)
|
|||
|
|
if (random < num) {
|
|||
|
|
index = Number(i)
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return index
|
|||
|
|
},
|
|||
|
|
// 处理数组方法
|
|||
|
|
showMarquee() {
|
|||
|
|
this.animate = true
|
|||
|
|
this.zjlist.push(this.zjlist[0])
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.zjlist.shift()
|
|||
|
|
this.animate = false
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
closemsk() {
|
|||
|
|
this.ismask = false
|
|||
|
|
this.ismask2 = false
|
|||
|
|
},
|
|||
|
|
openmask() {
|
|||
|
|
this.ismask = true
|
|||
|
|
},
|
|||
|
|
gomyp() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/my/prizes?acid=" + this.acid
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/zhuanbg.png') !important;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tagr {
|
|||
|
|
width: 159rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
background: linear-gradient(180deg, #FFF2BA 0%, #F14A1A 100%);
|
|||
|
|
border-radius: 22rpx 0rpx 0rpx 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.around .t2 {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/zhuant2.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 620rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.around .tit {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/tit.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 248rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
top: -40rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.around .t3 {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/md.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 694rpx;
|
|||
|
|
height: 586rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
height: 500rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marquee_list {
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%);
|
|||
|
|
width: calc(100% - 150rpx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.marquee_top {
|
|||
|
|
transition: all 1s;
|
|||
|
|
margin-top: -30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
opacity: 0.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mask {
|
|||
|
|
background: rgba(0, 0, 0, 0.60);
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mk2 {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/zj.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 494rpx;
|
|||
|
|
height: 684rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btnl {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/btn.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 218rpx;
|
|||
|
|
height: 76rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mk {
|
|||
|
|
background-image: url('https://pfapi.86698.cn/static/images/js.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 580rpx;
|
|||
|
|
height: 716rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|