483 lines
15 KiB
Markdown
483 lines
15 KiB
Markdown
|
||
## 前言
|
||
简介：
|
||
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 |用于翻牌，未选中时背景图片|
|
||
|
||
|
||
## 素材
|
||
[图片资源](https://pixabay.com)
|
||
|
||
## 示例项目可直接运行
|
||
## 开始使用
|
||
下载源码解压，复制`/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>
|
||
|
||
|
||
```
|
||
|
||
## 汇总组件
|
||
[组件汇总](https://ext.dcloud.net.cn/plugin?id=4276)
|
||
|
||
## 参考
|
||
[参考链接1](https://blog.csdn.net/qq_43764578/article/details/106329612)
|
||
[参考链接2](https://www.baidu.com/link?url=Vudt-1kEqZqAXnDyaw67FKE6qdANdkWOVl8OS9VSbezcql181qVYSar7PUdMPrzzM45XZnI4xF1deeIFbXMfTa&wd=&eqid=db15fd820008c60f000000065fafac6f)
|
||
[参考链接3](https://ext.dcloud.net.cn/plugin?id=1890)
|
||
[参考链接4](https://blog.csdn.net/qq_40101922/article/details/102463778)
|
||
[参考链接5](https://ext.dcloud.net.cn/plugin?id=3685)
|
||
[参考链接6](https://ext.dcloud.net.cn/plugin?id=2481)
|