大转盘
<template>
<view class="luckyWheel box">
<headervue name="back" title="幸运大转盘" v-if="tiaoz.headerTab"></headervue>
<view class="" :style="'height:'+tiaoz.hei+'px;'"></view>
<image src="../../static/images/4.png" mode="widthFix" class="image"></image>
<view class="roster" :style="'top:'+(250+tiaoz.hei)+'px;'">
<image src="../../static/images/9.png" mode="widthFix" class="img"></image>
<swiper class="mask" circular vertical :autoplay="true" :interval="3000">
<swiper-item v-for="(item,index) in 20" :key="index">
<view class="swiper-item uni-bg-red">
恭喜164********，抽中现金红包￥20
</view>
</swiper-item>
</swiper>
</view>
<view class="banner">
<LuckyWheel ref="myLucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks" :buttons="buttons"
:default-config="defaultConfig" @start="startCallback" @end="endCallback" />
</view>
<view class="con">
<view class="line">
</view>
<view class="txt">
抽奖机会：5次
</view>
<view class="line">
</view>
</view>
<view class="guiz" @click="toggle">
活动规则
</view>
<uni-popup ref="popup" type="bottom">
<view class="huod box">
<view class="tab ">
<u-tabs :list="items" @click="click" lineColor="#FF3D50" lineWidth='30' :current="current"></u-tabs>
</view>
<view class="" style="height: 80rpx;">
</view>
<view class="con" v-if="current==0">
<view class="title">
<image src="../../static/images/6.png" mode="widthFix" style="width: 30rpx; height: 30rpx;"
class="img">
</image>
活动奖品
</view>
<view v-for="(item,index) in prizes" :key="index" class="item">
<image :src="item.imgs[0].src" mode="widthFix" class="img"></image>
<view>{{item.fonts[0].text}}</view>
</view>
<view class="title">
<image src="../../static/images/7.png" mode="widthFix" style="width: 30rpx; height: 30rpx;"
class="img">
</image>
活动规则
</view>
<view class="guizcon">
<view class="time">
<view class="">
活动时间：
</view>
<view class="">
2023-07-05 12:00 至 2023-07-10 00:00
</view>
</view>
<view class="time">
<view class="">
规则说明：
</view>
<view class="">
规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则
</view>
</view>
<view class="time">
<view class="">
主办方信息：
</view>
<view class="">
XXXXXXXXXX
</view>
<view class="">
15000000000
</view>
</view>
</view>
</view>
<view class="con con2" v-if="current==1">
<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="height: 440px;">
<view v-for="(item,index) in 10" :key="index" class="item">
<view class="dis">
<image src="../../static/images/10.png" mode="widthFix" class="img"></image>
<view>垃圾桶一个</view>
</view>
<view class="">
垃圾桶一个1
</view>
</view>
</scroll-view>
</view>
</view>
</uni-popup>
<uni-popup ref="popup1" type="center">
<view class="success">
<view class="imgs">
<image src="../../static/images/12.png" mode="widthFix" class="close" @click="close"></image>
<image src="../../static/images/10.png" mode="widthFix" class="img"></image>
</view>
<view class="banner">
<image src="../../static/images/13.png" mode="widthFix" class="img"></image>
<view class="txt">
恭喜你，获得家用垃圾桶一个
</view>
<view class="btn" @click="close">
再来一次
</view>
</view>
</view>
</uni-popup>
<view class="auido">
<image src="../../static/images/25.png" mode="" class="picUrl pusah"
@click="playmusic" v-if="!start"></image>
<image src="../../static/images/25.png" mode="" class="picUrl "
@click="pausemusic" v-else></image>
</view>
</view>
</template>
<script>
import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel'; // 大转盘
import headervue from '@/components/headers/index.vue';
export default {
// 注册组件
components: {
LuckyWheel,
headervue,
},
onLoad() {
this.music()
},
onShow() {
},
onReachBottom() {
},
data() {
return {
blocks: [{
padding: '15px', //内转盘距离外转盘的距离
imgs: [{
src: '../../static/images/almost-lottery__bg.png',
width: '300',
height: '300',
rotate: true, //是否跟随旋转
}], //外转盘的背景图片
}],
prizes: [{
fonts: [{
text: '222', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#f8d384', //扇形转盘背景色
imgs: [{
src: '../../static/images/9.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '123', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#e9e8fe', //扇形转盘背景色
imgs: [{
src: '../../static/images/2.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '234', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#f8d384', //扇形转盘背景色
imgs: [{
src: '../../static/images/3.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '435', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#e9e8fe', //扇形转盘背景色
imgs: [{
src: '../../static/images/4.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '456', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#f8d384', //扇形转盘背景色
imgs: [{
src: '../../static/images/5.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '567', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#e9e8fe', //扇形转盘背景色
imgs: [{
src: '../../static/images/6.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '245', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#f8d384', //扇形转盘背景色
imgs: [{
src: '../../static/images/7.png',
width: '30',
height: '30',
top: '35'
}],
}, {
fonts: [{
text: '674', //扇形显示文字
top: '10', //距离顶部的高度
fontColor: '#fff', //字体颜色
}],
background: '#e9e8fe', //扇形转盘背景色
imgs: [{
src: '../../static/images/8.png',
width: '30',
height: '30',
top: '35'
}],
}],
buttons: [{
radius: '25%', //按钮半径
// background: '#8a9bf3',//按钮背景色
pointer: true, //是否显示指针
// fonts: [{
// text: '开始',
// top: '-10px'
// }],
imgs: [{
src: '../../static/images/almost-lottery__action.png',
top: '-50'
}],
}, ],
defaultConfig: {
gutter: '2', //扇形之间的缝隙
speed: 10, //旋转速度峰值
},
tiaoz: getApp().globalData,
items: [{
name: '活动说明',
}, {
name: '抽奖记录',
}],
current: 0,
// 当前音乐播放状态
start: false,
// 音乐实例对象
innerAudioContext: null,
}
},
methods: {
// 点击抽奖按钮会触发star回调
async startCallback() {
// 调用抽奖组件的play方法开始游戏
this.$refs.myLucky.play()
// 模拟调用接口异步抽奖
setTimeout(async () => {
// 假设后端返回的中奖索引是0
const index = 3
// 调用stop停止旋转并传递中奖索引
this.$refs.myLucky.stop(index)
}, 3000)
},
// 抽奖结束会触发end回调
endCallback(prize) {
this.result()
},
// 活动规则
toggle() {
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open('bottom')
},
// 抽奖完成弹窗
result() {
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup1.open('center')
},
// 关闭抽奖弹窗
close() {
this.$refs.popup1.close()
},
click(item) {
this.current = item.index
},
scrolltolower() {
console.log(11111111)
},
// 创建音频上下文对象
music() {
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = true;
this.innerAudioContext.loop = true;
this.innerAudioContext.src = 'https://webfs.ali.kugou.com/202307121105/b493e185abb6bbd0d46e35ee184805bc/v2/6e591557ef02e0e9025e5d94b51f9047/part/0/1018058/G060/M00/0C/0F/clip_HJQEAFap0pyAeQMdAENWp-SJ1s0274.mp3';
},
// 开始播放音乐
playmusic() {
this.innerAudioContext.play()
this.start = true
},
// 暂停播放音乐
pausemusic() {
this.innerAudioContext.pause()
this.start = false
}
},
}
</script>
<style lang="scss" scoped>
.luckyWheel {
background: url('../../static/images/3.png') no-repeat;
background-size: 100%;
height: 100vh;
background-color: rgb(255, 126, 100);
padding-top: 50rpx;
box-sizing: border-box;
position: relative;
.image {
margin: 0 auto;
display: block;
margin-bottom: 50rpx;
}
.roster {
position: absolute;
display: flex;
align-items: center;
z-index: 9;
left: 50%;
// top: 500rpx;
transform: translateX(-60%);
.img {
width: 100rpx;
}
.mask {
width: 430rpx;
height: 50rpx;
background: #000000;
opacity: 0.5;
border-radius: 25rpx;
margin-left: 30rpx;
color: #fff;
padding: 0 20rpx;
box-sizing: border-box;
font-size: 24rpx;
line-height: 50rpx;
}
}
.con {
width: 321rpx;
margin: 30rpx auto;
text-align: center;
.line {
width: 321rpx;
height: 2rpx;
background: linear-gradient(to right, rgba(255, 226, 169, 0), rgba(255, 226, 169, 1), rgba(255, 226, 169, 0));
}
.txt {
margin: 10rpx 0;
font-size: 24rpx;
}
}
.banner {
margin-top: 100rpx;
// position: absolute;
}
.guiz {
width: 328rpx;
height: 94rpx;
background: url('../../static/images/5.png') no-repeat;
background-size: 100%;
margin: 0rpx auto;
margin-top: 100rpx;
line-height: 94rpx;
text-align: center;
font-size: 26rpx;
color: #874F22;
}
}
.success {
position: relative;
.imgs {
position: absolute;
top: -40%;
width: 100%;
.img {
width: 100%;
}
.close {
width: 30rpx;
height: 30rpx;
display: block;
position: absolute;
right: 0;
z-index: 9;
}
}
.banner {
width: 550rpx;
height: 554rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding-top: 80rpx;
box-sizing: border-box;
text-align: center;
.img {
width: 250rpx;
height: 250rpx;
border-radius: 15rpx;
margin: 0rpx auto;
display: block;
margin-bottom: 40rpx;
}
.txt {
font-size: 30rpx;
}
.btn {
width: 328rpx;
height: 94rpx;
background: url('../../static/images/11.png') no-repeat;
background-size: 100%;
margin: 0rpx auto;
margin-top: 30rpx;
line-height: 94rpx;
font-size: 25rpx;
color: #FFFFFF;
}
}
}
.huod {
background-color: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
padding: 20rpx;
max-height: 1000rpx;
overflow-y: auto;
box-sizing: border-box;
.tab {
position: fixed;
top: 0;
z-index: 99;
width: calc(100% - 40rpx);
max-width: 1160rpx;
background-color: #fff;
box-sizing: border-box;
}
.con {
border-top: 1px solid #F1F1F1;
width: 100%;
margin-top: 0;
.title {
margin-top: 30rpx;
display: flex;
align-items: center;
.img {
margin-right: 10rpx;
}
}
.item {
height: 100rpx;
background: #F4F4F4;
border-radius: 10rpx;
margin-top: 30rpx;
line-height: 100rpx;
display: flex;
font-size: 28rpx;
align-items: center;
.img {
width: 80rpx;
height: 80rpx !important;
margin: 0 30rpx;
}
}
.guizcon {
width: 621rpx;
height: 491rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 36rpx;
margin: 30rpx auto;
text-align: left;
.time {
margin-bottom: 40rpx;
}
}
}
.con2 {
.item {
justify-content: space-between;
padding: 0 20rpx;
box-sizing: border-box;
}
}
}
.auido {
position: absolute;
top: 200rpx;
right: 100rpx;
.picUrl {
width: 100rpx;
height: 100rpx;
// border-radius: 50%;
/* 定义动画 */
animation: zhuan 10s linear infinite;
}
}
@keyframes zhuan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.pusah {
animation-play-state: paused !important;
}
</style>九宫格
<template>
<view class="LuckyGrid">
<view class="ban">
<view class="grid">
<image src="../../static/images/16.png" mode="" class="img"></image>
<LuckyGrid ref="myLucky" width="550rpx" height="550rpx" :prizes="prizes" :buttons="buttons"
@start="startCallBack" @end="endCallBack" />
</view>
</view>
</view>
</template>
<script>
import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid'; // 引入九宫格插件
export default {
components: {
LuckyGrid
},
data() {
return {
prizes: [{
x: 0,
y: 0,
// range: 0,
fonts: [{
text: '0',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 1,
y: 0,
range: 0,
fonts: [{
text: '1',
top: '35%',
fontColor: '#FF0C2E',
// fontSize: '30rpx'
}, ],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 2,
y: 0,
range: 0,
fonts: [{
text: '2',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 2,
y: 1,
range: 0,
fonts: [{
text: '3',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 2,
y: 2,
range: 0,
fonts: [{
text: '4',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 1,
y: 2,
range: 10,
fonts: [{
text: '5',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 0,
y: 2,
range: 0,
fonts: [{
text: '6',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
},
{
x: 0,
y: 1,
range: 0,
fonts: [{
text: '7',
top: '35%',
fontColor: '#FF0C2E',
}],
imgs: [{
src: require('../../static/images/18.png'),
width: '100%',
// top: '22%'
}],
background: '#E77697'
}
],
buttons: [{
x: 1,
y: 1,
imgs: [{
src: require('../../static/images/17.png'),
width: '100%',
}]
}],
};
},
methods: {
// 点击抽奖按钮触发回调
startCallBack(e, button) {
// 先开始旋转
// 先开始旋转
console.log('1-----------', this.$refs);
this.$refs.myLucky.play();
// 使用定时器来模拟请求接口
setTimeout(() => {
// 假设后端返回的中奖索引是0
const index = 0;
// 调用stop停止旋转并传递中奖索引
// this.$refs.myLucky.stop(index)
this.$refs.myLucky.stop();
}, 3000);
},
// 抽奖结束触发回调
endCallBack(prize) {
// 奖品详情
alert('恭喜中奖: ' + prize.fonts[0].text);
}
}
};
</script>
<style lang="less" scoped>
.LuckyGrid {
background: url('../../static/images/3.png') no-repeat;
background-size: 100%;
height: 100vh;
background-color: rgb(255, 126, 100);
padding-top: 50rpx;
box-sizing: border-box;
position: relative;
.ban {
// width: 730rpx;
height: 90vh;
background: url('../../static/images/15.png') no-repeat;
background-size: 100%;
position: relative;
.grid {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 30%;
.img {
width: 625rpx;
height: 73rpx;
margin-bottom: 46rpx;
}
}
}
}
</style>
3993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
