359 lines
8.5 KiB
Vue
359 lines
8.5 KiB
Vue
<template>
|
|
<view>
|
|
<touch-popup ref="popup" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
|
|
<scroll-view scroll-y>
|
|
<view class="top">
|
|
<view class="top-left">
|
|
今日活动
|
|
</view>
|
|
<view v-if="userInfo" class="top-right">
|
|
<view class="price-bck">
|
|
<view class="logo-bck">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix"></image>
|
|
</view>
|
|
{{userInfo.amount}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="top-icon">
|
|
<!-- <image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo.png" mode="heightFix"></image> -->
|
|
</view>
|
|
<view class="hint">
|
|
<view class="center">
|
|
橡果大转盘
|
|
</view>
|
|
<view class="center">
|
|
轻松解锁更多踪迹
|
|
</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="lottery">
|
|
<view v-for="(item,index) in lotteryList" key="lottery" class="center">
|
|
<view class="lottery-item" :class="{check: item.check}">
|
|
<view class="">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo-black.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="">
|
|
{{item.amount}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="center" style="padding: 15px;">
|
|
<view class="btn center" @click="startLottery">
|
|
<text v-if="lotteryFree">{{!isLottery ? '免费抽奖' : '正在抽奖...'}}</text>
|
|
<text v-else>{{!isLottery ? (lotteryPrice + '橡果抽一次') : '正在抽奖...'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-terms">
|
|
<view @click="openTerms1Popup">
|
|
使用条款
|
|
</view>
|
|
<view @click="openTerms2Popup">
|
|
隐私政策
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</touch-popup>
|
|
<touch-popup ref="terms1Popup" :backShow="true"
|
|
background="linear-gradient(180deg, #FFFFFB -19.14%, #FFFEEB 50.07%)">
|
|
<scroll-view scroll-y style="height: 100%;margin-top: 25px;">
|
|
<view class="terms-text">
|
|
这里是使用条款
|
|
</view>
|
|
</scroll-view>
|
|
</touch-popup>
|
|
<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
const app = getApp()
|
|
import {
|
|
ref,
|
|
defineExpose
|
|
} from 'vue'
|
|
const popup = ref() // ref组件
|
|
const terms1Popup = ref()
|
|
const pAgreementPrivate = ref()
|
|
|
|
const userInfo = ref(false)
|
|
const lotteryList = ref(false) // 抽奖列表
|
|
const lotteryPrice = ref(0) // 抽奖价格
|
|
const lotteryFree = ref(false) // 是否免费抽奖
|
|
|
|
// 抽奖开始闪烁
|
|
const isLottery = ref(false) // 正在抽奖标识
|
|
var interval = false
|
|
const startLottery = () => {
|
|
if (isLottery.value) return
|
|
for (let i = 0; i < lotteryList.value.length; i++) {
|
|
lotteryList.value[i].check = false
|
|
}
|
|
isLottery.value = true
|
|
if (!lotteryFree.value) {
|
|
userInfo.value.amount -= lotteryPrice.value
|
|
}
|
|
let i = 0,
|
|
k = 30 // 执行30次时请求后台
|
|
interval = setInterval(() => {
|
|
if (k === 0) {
|
|
golottery()
|
|
}
|
|
k--
|
|
if (i - 1 >= 0) lotteryList.value[i - 1].check = false // 上一个熄灭
|
|
if ((i + 1) > lotteryList.value.length) i = 0 // 到底重置
|
|
lotteryList.value[i++].check = true
|
|
}, 100)
|
|
}
|
|
const golottery = () => {
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/lottery/go',
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
method: 'POST',
|
|
success(res) {
|
|
if (res.data.code === 200) {
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/user',
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
success: (resuser) => {
|
|
app.globalData.userinfo = resuser.data.data
|
|
userInfo.value = resuser.data.data
|
|
|
|
}
|
|
}) // 重新请求余额
|
|
for (let i = 0; i < lotteryList.value.length; i++) {
|
|
let item = lotteryList.value[i]
|
|
if (res.data.data.id === item.id) {
|
|
lotteryList.value[i].check = true
|
|
} else {
|
|
lotteryList.value[i].check = false
|
|
}
|
|
}
|
|
isLottery.value = false
|
|
lotteryFree.value = false
|
|
uni.showToast({
|
|
title: '抽奖完成，奖励' + res.data.data.amount,
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail() {
|
|
uni.showToast({
|
|
title: '抽奖失败',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
complete() {
|
|
clearInterval(interval)
|
|
}
|
|
})
|
|
}
|
|
const openTerms1Popup = () => {
|
|
terms1Popup.value.open()
|
|
}
|
|
const openTerms2Popup = () => {
|
|
pAgreementPrivate.value.open()
|
|
}
|
|
const open = () => {
|
|
userInfo.value = app.globalData.userinfo
|
|
if (lotteryList.value) {
|
|
popup.value.open()
|
|
return
|
|
}
|
|
uni.showLoading()
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/lottery/get',
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
success(res) {
|
|
console.log(res.data.data)
|
|
if (res.data.code === 200) {
|
|
lotteryList.value = res.data.data.list
|
|
lotteryPrice.value = res.data.data.price
|
|
lotteryFree.value = res.data.data.free
|
|
popup.value.open()
|
|
} else {
|
|
uni.showToast({
|
|
title: '获取奖品信息失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
fail() {
|
|
uni.showToast({
|
|
title: '获取奖品信息失败',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
complete() {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
|
|
}
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
.check {
|
|
border: 4px solid #8F00FF;
|
|
}
|
|
|
|
.btn text {
|
|
background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
|
|
color: transparent;
|
|
-webkit-background-clip: text;
|
|
}
|
|
|
|
.btn {
|
|
width: 180px;
|
|
height: 44px;
|
|
font-size: 14px;
|
|
background-color: #000;
|
|
box-shadow: 0px 4px 0px 0px #7F720040;
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.bottom-terms view {
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
.bottom-terms {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 12px;
|
|
color: #626262;
|
|
}
|
|
|
|
.lottery-item image {
|
|
width: 25px;
|
|
height: auto;
|
|
}
|
|
|
|
.lottery-item view {
|
|
font-weight: bold;
|
|
display: flex;
|
|
}
|
|
|
|
.lottery-item {
|
|
margin: 8px;
|
|
width: 75px;
|
|
height: 75px;
|
|
border-radius: 17px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lottery {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
background: linear-gradient(119.74deg, #C1FF90 0.63%, #13FFB7 100%);
|
|
box-shadow: 0px 4px 4px 0px #00000080;
|
|
border-radius: 24px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.hint view:first-child {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.hint {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-weight: bold;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.top-icon image {
|
|
height: 180px;
|
|
}
|
|
|
|
.top-icon {
|
|
height: 150px;
|
|
background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo.png) no-repeat,
|
|
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/TreasureHunter.png) no-repeat,
|
|
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star1.png) no-repeat,
|
|
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star2.png) no-repeat,
|
|
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star3.png) no-repeat,
|
|
url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star4.png) no-repeat;
|
|
background-size: 180px, auto 90px, 28px, 52px, 38px, 13px;
|
|
background-position: center, center, calc(50% - 104px) 18px, left bottom, calc(50% + 120px) 18px, bottom 25px right 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.price-bck image {
|
|
width: 18px;
|
|
}
|
|
|
|
.logo-bck {
|
|
height: 26px;
|
|
width: 26px;
|
|
background: #FFCC18;
|
|
border-radius: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.price-bck {
|
|
height: 26px;
|
|
background: rgba(255, 255, 255, .8);
|
|
border-radius: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.top-left {
|
|
flex: 1;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.top-right {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
scroll-view {
|
|
padding-top: 15px;
|
|
position: relative;
|
|
height: calc(100% - 15px);
|
|
}
|
|
|
|
.terms-text {
|
|
height: calc(100% - 15px);
|
|
}
|
|
</style> |