340 lines
8.5 KiB
Vue
340 lines
8.5 KiB
Vue
<template>
|
||
|
||
<view class="">
|
||
<view class="custom-navbar">
|
||
<text style="font-size: 40rpx;" @click="back()" class="cuIcon-back"></text>
|
||
<view class="title">幸运大抽奖</view>
|
||
<view class="back-button">
|
||
</view>
|
||
</view>
|
||
<choujian style="position: absolute;" ref='choujian' :nImg='nImg' :AwardList="AwardList" :sjNum="sjNum"
|
||
:lotteryType="lotteryType" @updateMoney="updateMoney" @lookAd="lookAd" @noChance="noChance">
|
||
</choujian>
|
||
<view class="tip-box">100%中奖，积分中不停</view>
|
||
<view class="log-box">
|
||
<!-- 通知 -->
|
||
<view class="inform">
|
||
<view class="inform-info">
|
||
<view class="info">
|
||
<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
|
||
:autoplay="true" :interval="3000" :duration="1000">
|
||
<swiper-item v-for="(item,index) in lotteryLog" :key="index">
|
||
<view class="swiper-item"><text class="one-omit">
|
||
<text class="cuIcon-vip"
|
||
style="margin-right: 10rpx;font-size: 23rpx;color: #fcc600;"></text>
|
||
微信用户_{{item.lotteryUserId}} 抽中了 {{item.name}}</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
|
||
<view style="border-radius: 30rpx;" class="cu-dialog">
|
||
<view class="cu-bar bg-white justify-end">
|
||
<view style="color: black;font-size: 38rpx;margin-top: 50rpx;" class="content">提示</view>
|
||
</view>
|
||
<view class=" bg-white">
|
||
<view style="font-size: 35rpx;color: #6a6a6a;padding: 40rpx 60rpx 60rpx 60rpx;">
|
||
{{lotteryMsg}}
|
||
</view>
|
||
|
||
<button @tap="hideModal" style="margin-bottom: 50rpx;width: 55%;height: 90rpx;font-size: 38rpx;"
|
||
class="cu-btn bg-green">知道了</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cu-modal" :class="modalName=='nowLookAd'?'show':''">
|
||
<view style="border-radius: 30rpx;" class="cu-dialog">
|
||
<view class="cu-bar bg-white justify-end">
|
||
<view style="color: black;font-size: 38rpx;margin-top: 50rpx;" class="content">提示</view>
|
||
<view class="action" @tap="hideModal">
|
||
<text class="cuIcon-close text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class=" bg-white">
|
||
<view style="font-size: 35rpx;color: #6a6a6a;padding: 40rpx 60rpx 60rpx 60rpx;">
|
||
今日免费抽奖次数已用完，观看视频后可额外获得一次抽奖机会哟
|
||
</view>
|
||
|
||
<button @tap="nowLookAd" style="margin-bottom: 50rpx;width: 55%;height: 90rpx;font-size: 38rpx;"
|
||
class="cu-btn bg-green">观看视频</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-guard"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
lottery,
|
||
lotteryAdd,
|
||
listLottery,
|
||
listLotteryLog
|
||
} from "@/api/app/index.js"
|
||
import config from '@/config'
|
||
import Choujian from '@/components/gb-choujiang/gb-choujiang';
|
||
let videoAd = null;
|
||
export default {
|
||
components: {
|
||
Choujian
|
||
},
|
||
data() {
|
||
return {
|
||
adUnitId: "",
|
||
baseUrl: config.baseUrl,
|
||
modalName: "",
|
||
userid: null,
|
||
// 背景图，可网络地址，可本地
|
||
nImg: 'https://img.yidaima.cn/luck-1752b306ed4b480b9258b22983a859f6',
|
||
// 中奖的索引，也就是AwardList数组的索引，sjNum不能等于4，4是立即抽奖
|
||
sjNum: 0,
|
||
// false前端，true前端
|
||
isQd: true,
|
||
// 可自己后端获取，也可以后端 percentage为概率 10代表10% 100代表100% 注意：必须要有一个概率为100%，
|
||
AwardList: [],
|
||
lotteryType: 0,
|
||
lotteryMsg: "",
|
||
index: -1,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 6,
|
||
},
|
||
lotteryLog: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
var that = this
|
||
this.adUnitId = uni.getStorageSync("sysSet").adVideoAd
|
||
//初始化激励广告
|
||
this.CreateAd()
|
||
this.userid = uni.getStorageSync("userInfo").userId
|
||
listLottery().then(response => {
|
||
// for (var i = 0; i < response.rows.length; i++) {
|
||
// response.rows[i].image = that.baseUrl + response.rows[i].image
|
||
// }
|
||
that.AwardList = response.rows
|
||
})
|
||
listLotteryLog(this.queryParams).then(response => {
|
||
that.lotteryLog = response.rows
|
||
})
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
// 中奖后的逻辑
|
||
updateMoney(money) {
|
||
var that = this
|
||
lotteryAdd({
|
||
source: '抽奖',
|
||
userId: this.userid,
|
||
isAdd: 0,
|
||
integralNumber: that.AwardList[money].reward,
|
||
fId: that.AwardList[money].id
|
||
}).then(response => {
|
||
that.lotteryMsg = "恭喜获得：" + that.AwardList[money].name
|
||
setTimeout(() => {
|
||
that.modalName = "Modal"
|
||
}, 500);
|
||
|
||
// 中奖后获取最新状态
|
||
that.getData()
|
||
})
|
||
|
||
|
||
|
||
},
|
||
lookAd(index) {
|
||
// this.$refs.choujian.nowBegin(index);
|
||
this.index = index
|
||
this.modalName = 'nowLookAd'
|
||
},
|
||
nowLookAd() {
|
||
this.modalName = ''
|
||
if (videoAd) {
|
||
videoAd.show().catch(() => {
|
||
// 失败重试
|
||
videoAd.load()
|
||
.then(() => videoAd.show())
|
||
.catch(err => {
|
||
console.error('激励视频 广告显示失败', err)
|
||
})
|
||
})
|
||
}
|
||
},
|
||
noChance() {
|
||
this.lotteryMsg = "今日抽奖次数已用完，请明日再来 !"
|
||
this.modalName = "Modal"
|
||
},
|
||
hideModal() {
|
||
this.modalName = null
|
||
},
|
||
// 获取本次中奖的
|
||
getData() {
|
||
var that = this
|
||
// 概率指定，如果是前端控制，如果后端控制下面步骤判断步骤可以省略 直接后端获取sjNum值即可
|
||
if (this.isQd) {
|
||
// ------------------------------这里写获取后端中奖索引
|
||
// 后端赋值控制概率
|
||
lottery({}).then(response => {
|
||
that.lotteryType = response.lotteryType
|
||
that.sjNum = response.sjNum
|
||
console.log("后端随机数: ", response.sj);
|
||
console.log("后端中奖索引: ", response.sjNum);
|
||
|
||
})
|
||
} else {
|
||
// 概率控制 概率100%
|
||
console.log(Math.random())
|
||
let sj = Math.round(Math.random() * 99 + 1)
|
||
}
|
||
},
|
||
back() {
|
||
uni.navigateBack()
|
||
},
|
||
CreateAd() {
|
||
var that = this;
|
||
if (this.adUnitId != '') {
|
||
if (wx.createRewardedVideoAd) {
|
||
videoAd = wx.createRewardedVideoAd({
|
||
adUnitId: this.adUnitId
|
||
})
|
||
videoAd.onLoad(() => {})
|
||
videoAd.onError((err) => {
|
||
that.$refs.uToast.show({
|
||
type: 'error',
|
||
title: '',
|
||
message: "请使用移动端设备访问",
|
||
icon: false
|
||
})
|
||
})
|
||
videoAd.onClose((res) => {
|
||
if (res && res.isEnded) {
|
||
// that.$refs.uToast.show({
|
||
// type: 'success',
|
||
// title: '',
|
||
// message: "╮(๑•́ ₃•̀๑)╭ 谢谢您的支持 ",
|
||
// icon: false
|
||
// })
|
||
that.$refs.choujian.nowBegin(that.index);
|
||
} else {}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tip-box {
|
||
position: relative;
|
||
background: linear-gradient(to right, #FE1C62, #FC8524);
|
||
height: 55rpx;
|
||
width: 70%;
|
||
left: 15%;
|
||
top: 235rpx;
|
||
text-align: center;
|
||
line-height: 55rpx;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
border-radius: 15rpx;
|
||
letter-spacing: 10rpx;
|
||
box-shadow:
|
||
0 -2px 2px rgba(255, 255, 255, 0.4),
|
||
/* 上阴影 */
|
||
0 2px 2px rgba(255, 255, 255, 0.4),
|
||
/* 下阴影 */
|
||
2px 0 2px rgba(255, 255, 255, 0.4),
|
||
/* 左阴影 */
|
||
-2px 0 2px rgba(255, 255, 255, 0.4);
|
||
/* 右阴影 */
|
||
}
|
||
|
||
.log-box {
|
||
position: relative;
|
||
height: 65rpx;
|
||
width: 56%;
|
||
left: 22%;
|
||
top: 1150rpx;
|
||
}
|
||
|
||
/* 通知 */
|
||
.inform {
|
||
|
||
.inform-info {
|
||
display: flex;
|
||
padding: 0 20rpx;
|
||
height: 65rpx;
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
border-radius: 50rpx;
|
||
|
||
.picture {
|
||
width: 20%;
|
||
height: 100%;
|
||
|
||
image {
|
||
width: 93rpx;
|
||
height: 84rpx;
|
||
margin-top: -20rpx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-item {
|
||
line-height: 65rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.custom-navbar {
|
||
/* 自定义导航栏样式 */
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 60px 10px 10px 10px;
|
||
background-color: #F118E3;
|
||
color: #FFFFFF;
|
||
}
|
||
.title {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
.back-button {
|
||
padding: 10px;
|
||
}
|
||
page {
|
||
background-color: #1015F2;
|
||
--safe-area-inset-bottom: env(safe-area-inset-bottom); /* 设置底部安全区域 */
|
||
}
|
||
page {
|
||
}
|
||
|
||
.bottom-guard {
|
||
height: calc(var(--safe-area-inset-bottom)); /* 假设你需要的底部保护区域高度是100px */
|
||
background-color: #1015F2; /* 设置你想要的颜色 */
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
</style> |