503 lines
14 KiB
Vue
503 lines
14 KiB
Vue
<template>
|
||
<view class="index" style="border:1px solid transparent">
|
||
<!-- 中将 -->
|
||
<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;">{{jiang}}</text>
|
||
<text 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>
|
||
<!-- 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="pos flex_center flex_items" style="margin-top:100rpx;">
|
||
<image src="../../static/ttchou.png" mode="" class="banner"></image>
|
||
<view class="abs flex_items flex_center" style="width: 254rpx;height: 77rpx;left:50rpx;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">
|
||
<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>
|
||
<view class="pos">
|
||
<almost-lottery :lotteryBg="lotteryBg" :actionBg="imgUrl+'zhi.png'" :colors="['#fff','#FFDFD4']"
|
||
:strFontColors="['#FF4100','#FF4100']" :strMarginOutside="30" :imgMarginStr="50" :imgWidth="62"
|
||
:imgHeight="38" :imgCircled="false" :lottery-size="lotteryConfig.lotterySize"
|
||
:action-size="lotteryConfig.actionSize" :ring-count="6" :duration="4" :self-rotaty="false"
|
||
:img-circled="true" :canvasCached="true" :prize-list="prizeList" :prize-index="prizeIndex"
|
||
@reset-index="prizeIndex = -1" @draw-before="handleDrawBefore" @draw-start="handleDrawStart"
|
||
@draw-end="handleDrawEnd" @finish="handleDrawFinish" v-if="prizeList.length" />
|
||
<view class="flex_items flex_center pos" style="">
|
||
<view @click="submit"
|
||
style="width:176rpx;height:80rpx;z-index: 2;left: 50%;transform: translate(-50%);top: 100rpx;"
|
||
class="abs"></view>
|
||
<image class="abs" :src="dizuo" style="width:80%;left: 50%;transform: translate(-50%);top: -700rpx;"
|
||
mode="widthFix">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<!-- 次数 -->
|
||
<view class="flex_items flex_center" style="margin-top:290rpx;">
|
||
<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;">
|
||
剩余抽奖次数: {{freeNum}}次
|
||
</view>
|
||
</view>
|
||
<!-- 中奖人员 -->
|
||
<view class="flex_items flex_center">
|
||
<view class="mt100 ptb30 flex_column flex_items"
|
||
style="width:calc(100% - 60rpx);background: linear-gradient(180deg, #FFFFFF 0%, #FFEED8 100%);border-radius: 24rpx;">
|
||
<text class="bold f28 mt10" style="color: #FF3C00;">中奖名单</text>
|
||
<view class="marquee mt50">
|
||
<view class="marquee_box" ref="marquee_box">
|
||
<view class="marquee_list" :class="{marquee_top:animate}">
|
||
<view class="">
|
||
<view v-for="(item,index) in zjlist" :key="index"
|
||
class="mt30 flex_between flex_items pb30 bbe9s" style="width:100%;">
|
||
<view 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>
|
||
</view>
|
||
<text class="f28" style="color: #808080">{{item.win_time}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;height: 40rpx;"></view>
|
||
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
|
||
import {
|
||
clearCacheFile,
|
||
clearStore
|
||
} from '@/uni_modules/almost-lottery/utils/almost-utils.js'
|
||
export default {
|
||
name: 'Home',
|
||
components: {
|
||
AlmostLottery
|
||
},
|
||
data() {
|
||
return {
|
||
// 开启调试模式
|
||
isDev: false,
|
||
// 以下是转盘配置相关数据
|
||
lotteryConfig: {
|
||
lotterySize: 600, // 抽奖转盘的整体尺寸，单位rpx
|
||
actionSize: 200 // 抽奖按钮的尺寸，单位rpx
|
||
},
|
||
lotteryBg: require('../../static/panpan.png'), // 转盘外环图，如有需要，请参考替换为自己的设计稿
|
||
prizeList: [], // 奖品数据
|
||
prizeIndex: -1, // 中奖下标
|
||
prizeing: false, // 是否正在抽奖中，避免重复触发
|
||
freeNum: 0, // 抽奖次数
|
||
loading: false,
|
||
rules: [],
|
||
acid: "",
|
||
dizuo: require('../../static/dizuo.png'),
|
||
jiang: "",
|
||
ismask2: false,
|
||
ismask: false,
|
||
isz: 1,
|
||
imgUrl: "",
|
||
zjlist: [],
|
||
animate: false,
|
||
showNum: 6, // 可见列表条数
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.acid = options.id
|
||
this.imgUrl = this.api.imgUrl
|
||
this.prizeList = []
|
||
this.getPrizeList()
|
||
},
|
||
created() {
|
||
setInterval(this.showMarquee, 2000)
|
||
},
|
||
mounted() {
|
||
this.$refs.marquee_box.style.height = this.showNum * 53 + 'px'
|
||
},
|
||
onShow() {},
|
||
onUnload() {
|
||
uni.hideLoading()
|
||
},
|
||
methods: {
|
||
// 获取奖品列表
|
||
async getPrizeList() {
|
||
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
|
||
if (res.data.data.left_num.limit) {
|
||
this.freeNum = res.data.data.left_num.num
|
||
} else {
|
||
this.freeNum = 9999
|
||
}
|
||
res.data.data.prizes.forEach(item => {
|
||
if (item.prize_id == -1) {
|
||
this.prizeList.push({
|
||
prizeId: item.prize_id,
|
||
prizeName: '谢谢参与',
|
||
name: item.name
|
||
})
|
||
} else {
|
||
this.prizeList.push({
|
||
prizeId: item.prize_id,
|
||
prizeName: item.name,
|
||
name: item.name
|
||
})
|
||
}
|
||
|
||
})
|
||
uni.hideLoading()
|
||
} else {
|
||
uni.hideLoading()
|
||
this.istrue = true
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 抽奖开始之前
|
||
handleDrawBefore(callback) {
|
||
// 还有免费数次或者剩余金币足够抽一次
|
||
if (this.freeNum > 0) {
|
||
this.handleDrawStart()
|
||
} else {
|
||
// this.$toast('抽奖次数已用完')
|
||
uni.showToast({
|
||
title: "抽奖次数已用完",
|
||
icon: "error"
|
||
})
|
||
}
|
||
},
|
||
// 本次抽奖开始
|
||
handleDrawStart() {
|
||
console.log('触发抽奖按钮')
|
||
if (this.prizeing) {
|
||
uni.showToast({
|
||
title: "抽奖还未结束",
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
this.prizeing = true
|
||
this.tryLotteryDraw()
|
||
},
|
||
// 尝试发起抽奖
|
||
tryLotteryDraw() {
|
||
let that = this
|
||
that.api.getover({
|
||
id: that.acid
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == 200) {
|
||
that.freeNum--
|
||
if (res.data.data.length == 0) {
|
||
that.prizeList.forEach((item, index) => {
|
||
if (item.prizeId == -1) {
|
||
that.prizeIndex = index; // 中奖的数据下标
|
||
}
|
||
})
|
||
} else {
|
||
that.prizeList.forEach((item, index) => {
|
||
if (item.prizeId == res.data.data.prize_id) {
|
||
that.prizeIndex = index; // 中奖的数据下标
|
||
}
|
||
})
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 本次抽奖结束
|
||
handleDrawEnd() {
|
||
console.log('旋转结束，执行拿到结果后到逻辑')
|
||
// 旋转结束后，开始处理拿到结果后的逻辑
|
||
let prizeName = this.prizeList[this.prizeIndex].name
|
||
let tipContent = ''
|
||
|
||
if (prizeName === '谢谢参与' || prizeName === '未中奖') {
|
||
tipContent = '很遗憾，没有中奖，请再接再厉！'
|
||
this.isz = 0
|
||
} else {
|
||
this.isz = 1
|
||
tipContent = `恭喜您，获得 ${prizeName} ！`
|
||
}
|
||
this.jiang = tipContent
|
||
this.prizeing = false
|
||
this.ismask2 = true
|
||
},
|
||
// 抽奖转盘绘制完成
|
||
handleDrawFinish(res) {
|
||
console.log('抽奖转盘绘制完成', res)
|
||
|
||
if (res.ok) {
|
||
// 计算结束绘制的时间
|
||
if (console.timeEnd) {
|
||
console.timeEnd('绘制转盘用时')
|
||
}
|
||
}
|
||
let stoTimer = setTimeout(() => {
|
||
stoTimer = null
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: res.msg,
|
||
mask: true,
|
||
icon: 'none'
|
||
})
|
||
}, 50)
|
||
},
|
||
|
||
submit() {
|
||
if (this.freeNum > 0) {
|
||
this.handleDrawStart()
|
||
} else {
|
||
// this.$toast('抽奖次数已用完')
|
||
uni.showToast({
|
||
title: '抽奖次数已用完',
|
||
icon: "error"
|
||
})
|
||
}
|
||
},
|
||
showMarquee() {
|
||
this.animate = true
|
||
this.zjlist.push(this.zjlist[0])
|
||
setTimeout(() => {
|
||
this.zjlist.shift()
|
||
this.animate = false
|
||
}, 1000)
|
||
},
|
||
mypre() {
|
||
uni.navigateTo({
|
||
url: "/pages/my/prizes?acid=" + this.acid
|
||
})
|
||
},
|
||
closemsk() {
|
||
this.ismask = false
|
||
this.ismask2 = false
|
||
},
|
||
openmask() {
|
||
this.ismask = true
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index {
|
||
height: 100vh;
|
||
background: url('https://pfapi.86698.cn/static/images/bg.png')no-repeat left top #D8231C;
|
||
background-size: 100% 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
overflow: auto;
|
||
|
||
.navRight {
|
||
width: 144rpx;
|
||
height: 46rpx;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
border-radius: 40rpx 0rpx 0rpx 40rpx;
|
||
padding-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
uni-text {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
uni-image {
|
||
width: 10rpx;
|
||
height: 17rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.banner {
|
||
display: block;
|
||
width: 586rpx;
|
||
height: 93rpx;
|
||
margin: 20rpx auto 40rpx;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
width: 596rpx;
|
||
height: 120rpx;
|
||
background: url('https://pfapi.86698.cn/static/images/zhi.png')no-repeat center;
|
||
background-size: 596rpx 120rpx;
|
||
margin: 40rpx auto 35rpx;
|
||
font-size: 40rpx;
|
||
color: #BF3100;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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: -53px;
|
||
}
|
||
|
||
.tips {
|
||
padding: 30rpx 30rpx;
|
||
|
||
.til {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.text {
|
||
line-height: 1.6;
|
||
margin-bottom: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style> |