uniapp lottery component - various lottery (jumping) for animation effects

Welcome to the ay lottery plug-in

Recently, I'm interested in lucky draw. The plugin code is as follows:

1. Ay lottery plug-in

You can go to the uniapp plug-in market Various lucky draw (jump) for animation effects Page download

preface

Introduction:
1. Lottery effect component:
There are 4 types: 1: flop 2: running lamp 3: turntable 4: scratch (text) 5: scratch (picture) 6: scratch (random definition)
2. Customize the theme color, display content, background color and background map, etc., which can be used out of the box

In doubt

Wechat searches for the "slowly getting better" applet to view the effect of the applet, or find customer service feedback and corresponding problems.
"Slowly getting better" applet QR code

Attribute description

attribute	type	explain
type	Number	1: Flop 2: running lamp 3: turntable 4: scratch (text) 5: scratch (picture) 6: scratch (arbitrarily defined), default 1
list	Array	Control the transmission value of multiple times, control the picture path, and control the text
–	img	Prompt picture
–	name	name
–	img_bg	Background map
width	Number	wide
height	Number	high
themeColor	String	Theme color
seled_Color	String	For flop, select background gradient 1, default #f43f3b
seled_t_Color	String	For flop, select background gradient 2, default #98FB98
un_seled_Color	String	Used for flop. Background gradient 1 is not selected. Default #00BFFF
un_seled_t_Color	String	Used for flop. Background gradient 2 is not selected. Default #33CCCC
result_txt	String	Used to flip cards, flip out text definitions, and default results
show_again	boolean	It is used to determine whether the restart button is displayed for flop. It is not displayed by default
again_txt	String	It is used to define the text of the flop and restart button, and restart by default
btn_Color	String	Used for flop, restart font color, default #ffffff
tips_init	String	It is used for the definition of flop and flop prompt text. It is clicked by default
no_z_init	String	It is used to flip cards. No text definition is turned out. Thank you for participating by default
bgColor	String	Used for running light, background color, default #1E90FF
bg_sd_Color	String	It is used for the running lamp. The background color at the bottom is the default #4169E1
chance_num_init	Number	Used for turntable, remaining opportunities, default 5
stay_index	Number	Used for turntable, running lamp, parking position, default 1
@result	function	Used for turntable and running light to complete callback events
canvasId	String	Canvas id
percentage	Number	It is used for scraping. When the percentage is scraped, it is 45 by default
touchSize	Number	Used for scraping. The width of the scratch is 20 by default
fillColor	String	Used to scrape the fill color when the layer is not scraped
watermark	String	It is used for scraping watermark text. The default is "scraping"
watermarkColor	String	For scraping, watermark text color
watermarkSize	Number	Used for scraping. The watermark text size is 14 by default
title	String	Used for scraping and scraping, title, default: scraping and scraping
titleColor	String	For scraping, title color
titleSize	Number	Used for scraping. The title text size is 24 by default
disabled	boolean	For scraping, is scraping prohibited
is_show	boolean	Used for scraping to prevent the canvas from flickering before painting
result_img	String	Used for scraping and scraping out the path of the picture
result_txt	String	Used for scraping and scraping out text
@complete	function	It is used for scraping and card scraping to complete the callback event
@init	function	Used to scrape and initialize the completion callback event
is_img_bg	boolean	Used for the running light, which enables the picture background
theme_img_bg	String	For running lights, background pictures
box_shadow_Color	String	For running lights, unselected bottom color
bg_img	String	Used for running lamp, bottom background picture
seled_img	String	Used for flop, background picture when selected
un_seled_img	String	Used for flop, background picture when not selected
init_show	boolean	Used for scraping and re scraping attribute control

source material

Picture resources

The sample project can be run directly

Start using

Download the source code, unzip it, and copy the components under / components to the / components folder in the root directory of the project

index.vue is to add the following parts (select the parts to be displayed):

<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="restart" :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="Scratch text" watermark="Scrape" @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="Scraping pictures" watermark="Scrape" @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="Scratch text" watermark="Scrape" @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="Scraping pictures" watermark="Scrape" @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="Scrape custom" watermark="Scrape" @init="init_blow">
			<view style="position: absolute;" v-if="is_show_blow">

				<view style="margin: 40upx;">
					Custom content needs to be written by yourself
				</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, //Prevent the canvas from flickering before painting
				themeColor: '#33CCCC',
				txtFontSize_blow: 50,
				txtColor_blow: '#FFFFFF',

				stay_index_m : 1 ,//horse race lamp
				stay_index_r_init: 4,
				stay_index_r: 1,
				stay_index_m_init : 4,
				tips_init_turn: 'click',
				no_z_init_turn: 'click',
				result_turn: '',
				result_blow: 'Thank you for your participation',
				chance_num_init: 6,
				list: [{
					img: "https://cdn.pixabay.com/photo/2017/01/21/13/55/nature-1997282__340.jpg",
					name: "Don't count on him",
					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: "Are you kidding?",
					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: "dreadful",
					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: "probably",
					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: "never mind",
					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: "The answer is by your side",
					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: "Be bold",
					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: "Good luck will come",
					img_bg: "https://cdn.pixabay.com/photo/2021/02/13/10/26/snow-6011069__340.jpg",
				}],
				list_r: [{
						index: 0,
						name: '1 Second chance',
						isAward: true,
						val: 1,
						type: 1,

						img: 'https://cdn.pixabay.com/photo/2020/11/23/15/00/butterfly-5770034__340.jpg',
					},
					{
						index: 1,
						name: 'Thank you for your participation',
						isAward: false,
						type: 0,
						img: 'https://cdn.pixabay.com/photo/2021/01/07/15/02/york-minster-5897525__340.jpg',
					},
					{

						index: 2,
						name: 'It will be particularly smooth',
						val: 2,
						isAward: true,
						type: 2,
						img: 'https://cdn.pixabay.com/photo/2021/01/20/21/03/purple-5935577__340.jpg',
					},
					{

						index: 3,
						name: 'Thank you for your participation',
						isAward: false,
						type: 0,
						img: 'https://cdn.pixabay.com/photo/2021/01/13/18/07/tree-5914851__340.jpg',
					},
					{
						index: 4,
						name: '2 Second chance',
						val: 2,
						isAward: true,
						type: 1,

						img: 'https://cdn.pixabay.com/photo/2021/01/11/18/41/snowfall-5909261__340.jpg',
					},
					{
						index: 5,
						name: 'Thank you for your participation',
						isAward: false,
						type: 0,
						img: 'https://cdn.pixabay.com/photo/2021/01/05/19/55/winter-5892335__340.jpg',
					},
					{

						index: 6,
						name: '4 Second chance',
						val: 4,
						isAward: true,
						type: 1,

						img: 'https://cdn.pixabay.com/photo/2018/11/11/19/46/christmas-3809544__340.jpg',
					},
					{
						index: 7,
						name: 'Thank you for your participation',
						isAward: false,
						type: 0,
						img: 'https://cdn.pixabay.com/photo/2020/12/15/20/50/christmas-5834904__340.jpg',
					},
					{
						index: 8,
						name: 'Will pay the price',
						val: 5,
						isAward: true,
						type: 2,
						img: 'https://cdn.pixabay.com/photo/2016/11/14/16/20/snowflake-1823942__340.jpg',
					},
					{
						index: 9,
						name: 'Thank you for your participation',
						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: {
			//Scrape
			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], //  Incompatibility at Number H5 end
						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 = 'Thank you for your participation';
				}

			},
			getShowTxt() {
				let that = this;
				//Get the value of list randomly
				let num = Math.floor(Math.random() * 10); //Random integers from 0 to 9 can be obtained evenly
				let legth = that.list.length || 0;
				let index = num < legth ? num : (legth - 1);
				return that.list[index].name || 'ha-ha'
			},
			resultFun(e) {
				let that = this;
				let item = e.item;
				let list = e.list;
				
				this.msg_modal("Yes" + item.name, 'Congratulations')
				//Define the position of the next revolution
				that.stay_index_m = Math.round(Math.random() * (list.length - 1)); //random number
				
			},
			resultFun_chance(e) {
				let that = this;

				let item = e.item;
				let index = e.curIndex;
				let list = e.list;

				//Define the position of the next revolution
				that.stay_index_r = Math.round(Math.random() * (list.length - 1)); //random number

				if (e.isAward) {
					this.msg_modal('get' + (item.name), 'congratulations')
					let type = item.type;
					if (type == 1) {
						that.chance_num_init += item.val;
					}
				}
			},
			async loadData() {
				let that = this;

				uni.showLoading({
					title: 'Loading',
					mask: true,
				})

				that.result_blow = that.getShowTxt();
				that.result_blow = that.getShowTxt();

				uni.hideLoading();

				//Position of the first turntable stop
				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 = 'reminder') {
				//Unified prompt to facilitate global modification
				if (Boolean(content) === false) {
					return;
				}
				uni.showModal({
					title: title,
					content: content,
					confirmText: 'determine',
					showCancel: false,
					confirmColor: '#33CCCC',
					success(res) {
						if (res.confirm) {

						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	// Scrape custom
	.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>