欢迎使用ay-lottery插件
最近对抽奖感兴趣,整理插件代码如下:
1.ay-lottery插件
可去uniapp插件市场的动画效果之各类抽奖(跳跃)
页面下载.
前言
简介:
1.抽奖效果组件:
有4个类型:1:翻牌 2:跑马灯 3:转盘 4: 刮一刮(文本) 5: 刮一刮(图片)6: 刮一刮(随便定义)
2.自定义主题色,和显示内容、背景色和背景图等,开箱即用
有疑问
微信搜索“慢慢向好”小程序,可查看小程序效果,也可找客服反馈,相应问题。
“慢慢向好”小程序二维码
属性说明
属性 | 类型 | 说明 |
---|---|---|
type | Number | 1:翻牌 2:跑马灯 3:转盘 4: 刮一刮(文本) 5: 刮一刮(图片)6: 刮一刮(随便定义),默认1 |
list | Array | 控制多个时的传值,可控制图片路径,可文字 |
– | img | 提示图片 |
– | name | 名称 |
– | img_bg | 背景图 |
width | Number | 宽 |
height | Number | 高 |
themeColor | String | 主题色 |
seled_Color | String | 用于翻牌,选中背景渐变色1,默认#f43f3b |
seled_t_Color | String | 用于翻牌,选中背景渐变色2,默认#98FB98 |
un_seled_Color | String | 用于翻牌,未选中背景渐变色1,默认#00BFFF |
un_seled_t_Color | String | 用于翻牌,未选中背景渐变色2,默认#33CCCC |
result_txt | String | 用于翻牌,翻出文字定义,默认结果 |
show_again | boolean | 用于翻牌,重新开始按钮是否显示,默认不显示 |
again_txt | String | 用于翻牌,重新开始按钮文字定义,默认重新开始 |
btn_Color | String | 用于翻牌,重新开始字体颜色,默认#ffffff |
tips_init | String | 用于翻牌,翻牌提示文字定义,默认点击 |
no_z_init | String | 用于翻牌,未翻出文字定义,默认谢谢参与 |
bgColor | String | 用于跑马灯,背景色,默认#1E90FF |
bg_sd_Color | String | 用于跑马灯,底部背景色,默认#4169E1 |
chance_num_init | Number | 用于转盘,剩余机会,默认5 |
stay_index | Number | 用于转盘,跑马灯,停留位置,默认1 |
@result | function | 用于转盘、跑马灯,完成回调事件 |
canvasId | String | 画布id |
percentage | Number | 用于刮一刮,刮开百分之多少的时候开奖 ,默认45 |
touchSize | Number | 用于刮一刮,刮痕的宽度,默认20 |
fillColor | String | 用于刮一刮,未刮开图层时的填充色 |
watermark | String | 用于刮一刮,水印文字,默认“刮一刮” |
watermarkColor | String | 用于刮一刮,水印文字颜色 |
watermarkSize | Number | 用于刮一刮,水印文字大小,默认14 |
title | String | 用于刮一刮,标题,默认:刮一刮开奖 |
titleColor | String | 用于刮一刮,标题颜色 |
titleSize | Number | 用于刮一刮,标题文字大小,默认24 |
disabled | boolean | 用于刮一刮,是否禁止刮卡 |
is_show | boolean | 用于刮一刮,防止画布画好前闪烁 |
result_img | String | 用于刮一刮,刮出图片的路径 |
result_txt | String | 用于刮一刮,刮出文字的文字 |
@complete | function | 用于刮一刮,刮卡完成回调事件 |
@init | function | 用于刮一刮,初始化完成回调事件 |
is_img_bg | boolean | 用于跑马灯,跑马灯启用图片背景 |
theme_img_bg | String | 用于跑马灯,背景图片 |
box_shadow_Color | String | 用于跑马灯,未选中的底部颜色 |
bg_img | String | 用于跑马灯,底部背景图片 |
seled_img | String | 用于翻牌,选中时背景图片 |
un_seled_img | String | 用于翻牌,未选中时背景图片 |
init_show | boolean | 用于刮一刮,重刮属性控制 |
素材
示例项目可直接运行
开始使用
下载源码解压,复制/components
下的组件至项目根目录的 /components
文件夹下
index.vue
的是加入如下部分(自行选择需要展示的部分):
<template>
<view class="content">
<aylottery :type="1" themeColor="#33CCCC" btn_Color="#ffffff" seled_Color="#DB7093" seled_t_Color="#98FB98"
un_seled_Color="#00BFFF" un_seled_t_Color="#33CCCC" :result_txt="result_turn" @show="show_turn" @again="again_turn"
:show_again="true" again_txt="重新开始" :tips_init="tips_init_turn" :no_z_init="no_z_init_turn"></aylottery>
<aylottery :type="2" :list="list" themeColor="#33CCCC" bgColor="#1E90FF" bg_sd_Color="#4169E1" @result="resultFun"
@toDetailPage="toDetailPage"
:stay_index="stay_index_m"></aylottery>
<aylottery :type="2" :list="list" themeColor="#33CCCC" bgColor="#1E90FF" bg_sd_Color="#F4A460" @result="resultFun"
@toDetailPage="toDetailPage" theme_img_bg="https://cdn.pixabay.com/photo/2021/02/17/12/04/winter-6024017__340.jpg" :is_img_bg="true" box_shadow_Color="#F0F8FF" bg_img="https://cdn.pixabay.com/photo/2018/05/12/03/18/love-3392348__340.jpg"
:stay_index="stay_index_m"></aylottery>
<aylottery :type="3" :list="list_r" :height="600" :width="600" :chance_num_init="chance_num_init" @result="resultFun_chance"
@toDetailPage="toDetailPage" :stay_index="stay_index_r"></aylottery>
<aylottery :type="4" canvasId="canvasId1" :height="200" :width="600" refs="card" style="margin: 20upx 40upx;"
@complete="seatShow" :disabled="false" title="刮文本" watermark="刮一刮" @init="init_blow" :is_show="is_show_blow"
:result_txt="result_blow" themeColor="#33CCCC" :txtFontSize="txtFontSize_blow" :txtColor="txtColor_blow">
</aylottery>
<aylottery :type="5" canvasId="canvasId2" :height="200" :width="600" refs="card" style="margin: 0 40upx;" @complete="seatShow"
:disabled="false" title="刮图片" watermark="刮一刮" @init="init_blow" :is_show="is_show_blow" :result_img="result_img_blow"></aylottery>
<!-- <blowAny canvasId="canvasId1" :height="200" :width="600" refs="card" style="margin: 0 40upx;"
@complete="seatShow" :disabled="false" title="刮文本" watermark="刮一刮" @init="init_blow">
<view class="blow" v-if="is_show_blow" style="height:200rpx;width:600rpx;position: absolute;">
<view class="box" :style="{background: themeColor }">
<view class="result" :style="[{'font-size':txtFontSize_blow+'rpx'},{color: txtColor_blow }]">
<text>{{result_blow}}</text>
</view>
</view>
</view>
</blowAny> -->
<!-- <blowAny canvasId="canvasId2" :height="200" :width="600" refs="card" style="margin: 0 40upx;" @complete="seatShow"
:disabled="false" title="刮图片" watermark="刮一刮" @init="init_blow">
<view style="position: absolute;" v-if="is_show_blow" >
<view>
<image style="height:200rpx;width:600rpx;" :src="result_img_blow"></image>
</view>
</view>
</blowAny> -->
<aylottery :type="6" canvasId="canvasId3" :height="200" :width="600" refs="card" style="margin: 40upx;" @complete="seatShow"
:disabled="false" title="刮自定义" watermark="刮一刮" @init="init_blow">
<view style="position: absolute;" v-if="is_show_blow">
<view style="margin: 40upx;">
自定义内容需自己编写
</view>
</view>
</aylottery>
</view>
</template>
<script>
import aylottery from '@/components/ay-lottery/ay-lottery.vue';
export default {
components: {
aylottery,
},
data() {
return {
result_img_blow: 'https://cdn.pixabay.com/photo/2021/01/04/07/38/lily-5886728__340.jpg',
is_show_blow: false, //防止画布画好前闪烁
themeColor: '#33CCCC',
txtFontSize_blow: 50,
txtColor_blow: '#FFFFFF',
stay_index_m : 1 ,//跑马灯
stay_index_r_init: 4,
stay_index_r: 1,
stay_index_m_init : 4,
tips_init_turn: '点击',
no_z_init_turn: '点击',
result_turn: '',
result_blow: '谢谢参与',
chance_num_init: 6,
list: [{
img: "https://cdn.pixabay.com/photo/2017/01/21/13/55/nature-1997282__340.jpg",
name: "不要指望他",
img_bg: "https://cdn.pixabay.com/photo/2021/02/17/12/04/winter-6024017__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2021/01/11/21/39/temple-5909803__340.jpg",
name: "你在开玩笑么?",
img_bg: "https://cdn.pixabay.com/photo/2021/02/17/12/04/winter-6024017__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2020/01/13/23/15/snowboarding-4763731__340.jpg",
name: "可怕",
img_bg: "https://cdn.pixabay.com/photo/2021/02/17/12/04/winter-6024017__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2019/11/30/21/37/stars-4664313__340.jpg",
name: "可能",
img_bg: "https://cdn.pixabay.com/photo/2021/02/13/10/26/snow-6011069__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2020/12/23/14/41/forest-5855196_640.jpg",
name: "不用担心",
img_bg: "https://cdn.pixabay.com/photo/2021/02/13/01/29/woman-6010056__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2021/01/24/21/52/grand-canyon-5946657__340.jpg",
name: "答案就在你身边",
img_bg: "https://cdn.pixabay.com/photo/2021/02/13/01/29/woman-6010056__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2021/01/14/20/32/fish-5917864__340.jpg",
name: "大胆一点",
img_bg: "https://cdn.pixabay.com/photo/2021/02/13/01/29/woman-6010056__340.jpg",
}, {
img: "https://cdn.pixabay.com/photo/2020/01/03/21/32/field-4739176__340.jpg",
name: "好运将会降临",
img_bg: "https://cdn.pixabay.com/photo/2021/02/13/10/26/snow-6011069__340.jpg",
}],
list_r: [{
index: 0,
name: '1次机会',
isAward: true,
val: 1,
type: 1,
img: 'https://cdn.pixabay.com/photo/2020/11/23/15/00/butterfly-5770034__340.jpg',
},
{
index: 1,
name: '谢谢参与',
isAward: false,
type: 0,
img: 'https://cdn.pixabay.com/photo/2021/01/07/15/02/york-minster-5897525__340.jpg',
},
{
index: 2,
name: '会特别顺利',
val: 2,
isAward: true,
type: 2,
img: 'https://cdn.pixabay.com/photo/2021/01/20/21/03/purple-5935577__340.jpg',
},
{
index: 3,
name: '谢谢参与',
isAward: false,
type: 0,
img: 'https://cdn.pixabay.com/photo/2021/01/13/18/07/tree-5914851__340.jpg',
},
{
index: 4,
name: '2次机会',
val: 2,
isAward: true,
type: 1,
img: 'https://cdn.pixabay.com/photo/2021/01/11/18/41/snowfall-5909261__340.jpg',
},
{
index: 5,
name: '谢谢参与',
isAward: false,
type: 0,
img: 'https://cdn.pixabay.com/photo/2021/01/05/19/55/winter-5892335__340.jpg',
},
{
index: 6,
name: '4次机会',
val: 4,
isAward: true,
type: 1,
img: 'https://cdn.pixabay.com/photo/2018/11/11/19/46/christmas-3809544__340.jpg',
},
{
index: 7,
name: '谢谢参与',
isAward: false,
type: 0,
img: 'https://cdn.pixabay.com/photo/2020/12/15/20/50/christmas-5834904__340.jpg',
},
{
index: 8,
name: '会付出代价',
val: 5,
isAward: true,
type: 2,
img: 'https://cdn.pixabay.com/photo/2016/11/14/16/20/snowflake-1823942__340.jpg',
},
{
index: 9,
name: '谢谢参与',
isAward: false,
type: 0,
img: 'https://cdn.pixabay.com/photo/2020/12/01/16/11/ornaments-5794746__340.jpg',
},
],
}
},
onLoad() {
let that = this;
that.loadData();
},
onShow() {
},
onReady: function() {
let that = this;
//#ifndef MP-WEIXIN
setTimeout(function() {
//that.$refs.blowRef.initBlow()
}, 50)
// #endif
},
methods: {
//刮一刮
init_blow() {
this.is_show_blow = true;
},
reset: function() {
this.$refs.card.init();
},
seatShow: function() {
},
toDetailPage(e) {
let list = e.list;
let idx = e.curIndex;
let list_img = [];
let item = e.item;
list.forEach(item => {
list_img.push(item.img)
})
if (list_img && list_img.length > 0) {
uni.previewImage({
current: list_img[idx], // 传 Number H5端出现不兼容
urls: list_img,
indicator: "number",
loop: true,
});
}
},
again_turn(e) {
let that = this;
that.result_turn = '';
that.no_z_init_turn = that.tips_init_turn;
},
show_turn(e) {
let that = this;
if (e.result == 1) {
that.result_turn = that.getShowTxt();
} else {
that.no_z_init_turn = '谢谢参与';
}
},
getShowTxt() {
let that = this;
//随机获取list的值
let num = Math.floor(Math.random() * 10); //可均衡获取0到9的随机整数
let legth = that.list.length || 0;
let index = num < legth ? num : (legth - 1);
return that.list[index].name || '哈哈'
},
resultFun(e) {
let that = this;
let item = e.item;
let list = e.list;
this.msg_modal("抽中了" + item.name, '恭喜您')
//定义下一次转的位置
that.stay_index_m = Math.round(Math.random() * (list.length - 1)); //随机数
},
resultFun_chance(e) {
let that = this;
let item = e.item;
let index = e.curIndex;
let list = e.list;
//定义下一次转的位置
that.stay_index_r = Math.round(Math.random() * (list.length - 1)); //随机数
if (e.isAward) {
this.msg_modal('获得' + (item.name), '恭喜')
let type = item.type;
if (type == 1) {
that.chance_num_init += item.val;
}
}
},
async loadData() {
let that = this;
uni.showLoading({
title: '加载中',
mask: true,
})
that.result_blow = that.getShowTxt();
that.result_blow = that.getShowTxt();
uni.hideLoading();
//第一次转盘停的位置
that.stay_index_r = that.stay_index_r_init;
that.stay_index_m = that.stay_index_m_init;
that.isLoaded = true;
},
msg_modal(content, title = '温馨提示') {
//统一提示方便全局修改
if (Boolean(content) === false) {
return;
}
uni.showModal({
title: title,
content: content,
confirmText: '确定',
showCancel: false,
confirmColor: '#33CCCC',
success(res) {
if (res.confirm) {
}
}
})
}
}
}
</script>
<style lang="scss">
// 刮自定义
.blow {
background-size: contain;
margin: 0rpx auto;
box-sizing: border-box;
position: relative;
overflow: hidden;
.box {
width: 100%;
height: 100%;
// background: #aaaa7f;
border-radius: 10rpx;
position: relative;
overflow: hidden;
.result {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
// font-size: 50rpx;
// color: #FFFFFF;
}
}
}
.box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
</style>
微信小程序预览效果
效果图
扫描公众号,了解更多实例分享: