362 lines
7.0 KiB
Vue
362 lines
7.0 KiB
Vue
<template>
|
||
<view>
|
||
<turnLottery v-if="type==1"
|
||
:themeColor="themeColor"
|
||
:btn_Color="btn_Color"
|
||
:seled_Color="seled_Color"
|
||
:seled_t_Color="seled_t_Color"
|
||
:un_seled_Color="un_seled_Color"
|
||
:un_seled_t_Color="un_seled_t_Color"
|
||
:show_again="show_again"
|
||
:again_txt="again_txt"
|
||
:result_txt="result_txt"
|
||
:tips_init="tips_init"
|
||
:no_z_init="no_z_init"
|
||
@show="show"
|
||
@again="again"
|
||
:seled_img="seled_img"
|
||
:un_seled_img="un_seled_img"></turnLottery>
|
||
|
||
|
||
<marquee v-if="type==2" :list="list" :themeColor="themeColor" :bgColor="bgColor" :bg_sd_Color="bg_sd_Color" @result="result" @toDetailPage="toDetailPage"
|
||
:theme_img_bg="theme_img_bg"
|
||
:is_img_bg="is_img_bg"
|
||
:box_shadow_Color="box_shadow_Color"
|
||
:bg_img="bg_img"
|
||
:stay_index="stay_index"
|
||
:availableSurplusNum="availableSurplusNum"
|
||
@Recharge="Recharge"
|
||
></marquee>
|
||
|
||
<turnplate v-if="type==3" :list="list" :chance_num_init="chance_num_init" :height="height" :width="width" @result="result" @toDetailPage="toDetailPage" :stay_index="stay_index"></turnplate>
|
||
|
||
<blow v-if="type==4"
|
||
ref="blowRef"
|
||
:canvasId="canvasId"
|
||
:height="height"
|
||
:width="width"
|
||
:percentage="percentage"
|
||
:touchSize="touchSize"
|
||
:fillColor="fillColor"
|
||
:watermark="watermark"
|
||
:watermarkColor="watermarkColor"
|
||
:watermarkSize="watermarkSize"
|
||
:title="title"
|
||
:titleColor="titleColor"
|
||
:titleSize="titleSize"
|
||
:disabled="disabled"
|
||
|
||
:is_show="is_show"
|
||
:result_img="result_img"
|
||
:result_txt="result_txt"
|
||
:txtFontSize="txtFontSize"
|
||
:txtColor="txtColor"
|
||
:init_show="init_show"
|
||
@complete="complete"
|
||
@init="init"></blow>
|
||
|
||
<blowImg v-if="type==5"
|
||
ref="blowRef"
|
||
:canvasId="canvasId"
|
||
:height="height"
|
||
:width="width"
|
||
:percentage="percentage"
|
||
:touchSize="touchSize"
|
||
:fillColor="fillColor"
|
||
:watermark="watermark"
|
||
:watermarkColor="watermarkColor"
|
||
:watermarkSize="watermarkSize"
|
||
:title="title"
|
||
:titleColor="titleColor"
|
||
:titleSize="titleSize"
|
||
:disabled="disabled"
|
||
|
||
:is_show="is_show"
|
||
:result_img="result_img"
|
||
:result_txt="result_txt"
|
||
:txtFontSize="txtFontSize"
|
||
:txtColor="txtColor"
|
||
:init_show="init_show"
|
||
@complete="complete"
|
||
@init="init"></blowImg>
|
||
|
||
<blowAny v-if="type==6"
|
||
ref="blowRef"
|
||
:canvasId="canvasId"
|
||
:height="height"
|
||
:width="width"
|
||
:percentage="percentage"
|
||
:touchSize="touchSize"
|
||
:fillColor="fillColor"
|
||
:watermark="watermark"
|
||
:watermarkColor="watermarkColor"
|
||
:watermarkSize="watermarkSize"
|
||
:title="title"
|
||
:titleColor="titleColor"
|
||
:titleSize="titleSize"
|
||
:disabled="disabled"
|
||
|
||
:is_show="is_show"
|
||
:result_img="result_img"
|
||
:result_txt="result_txt"
|
||
:txtFontSize="txtFontSize"
|
||
:txtColor="txtColor"
|
||
:init_show="init_show"
|
||
@complete="complete"
|
||
@init="init">
|
||
<slot></slot>
|
||
</blowAny>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import marquee from './marquee.vue';
|
||
import turnplate from './turnplate.vue';
|
||
import turnLottery from './turnLottery.vue';
|
||
import blow from './blow.vue';
|
||
import blowImg from './blow_img.vue';
|
||
import blowAny from './blow_any.vue';
|
||
export default {
|
||
components: {
|
||
marquee,
|
||
turnplate,
|
||
turnLottery,
|
||
blow,
|
||
blowImg,
|
||
blowAny,
|
||
},
|
||
props: {
|
||
type: {
|
||
type: Number,
|
||
default: 1, //1:翻牌 2:跑马灯 3：转盘 4： 刮一刮（文本） 5： 刮一刮（图片）6： 刮一刮（随便定义）
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
availableSurplusNum:{
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
height: {
|
||
type: Number,
|
||
default: 150
|
||
},
|
||
width: {
|
||
type: Number,
|
||
default: 150
|
||
},
|
||
themeColor: {
|
||
type: String,
|
||
default: '#33CCCC',
|
||
},
|
||
btn_Color: {
|
||
type: String,
|
||
default: '#ffffff',
|
||
},
|
||
seled_Color: {
|
||
type: String,
|
||
default: '#f43f3b',
|
||
},
|
||
seled_t_Color: {
|
||
type: String,
|
||
default: '#98FB98',
|
||
},
|
||
un_seled_Color: {
|
||
type: String,
|
||
default: '#00BFFF',
|
||
},
|
||
un_seled_t_Color: {
|
||
type: String,
|
||
default: '#33CCCC',
|
||
},
|
||
result_txt: {
|
||
type: String,
|
||
default: '中奖结果',
|
||
},
|
||
show_again: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
again_txt: {
|
||
type: String,
|
||
default: '重新开始',
|
||
},
|
||
tips_init: {
|
||
type: String,
|
||
default: '点击',
|
||
},
|
||
no_z_init: {
|
||
type: String,
|
||
default: '谢谢参与',
|
||
},
|
||
bgColor: {
|
||
type: String,
|
||
default: '#1E90FF',
|
||
},
|
||
bg_sd_Color: {
|
||
type: String,
|
||
default: '#4169E1',
|
||
},
|
||
|
||
chance_num_init :{
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
height: {
|
||
type: Number,
|
||
default: 700
|
||
},
|
||
width: {
|
||
type: Number,
|
||
default: 700
|
||
},
|
||
txtColor: {
|
||
type: String,
|
||
default: '#FFFFFF',
|
||
},
|
||
txtFontSize: {
|
||
type: Number,
|
||
default: 50,
|
||
},
|
||
canvasId: {
|
||
type: String,
|
||
default: 'blow',
|
||
},
|
||
//停留位置
|
||
stay_index :{
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
percentage : { //刮开百分之多少的时候开奖
|
||
type : Number ,
|
||
default : 45
|
||
},
|
||
touchSize : { //触摸画笔大小
|
||
type : Number ,
|
||
default : 20
|
||
},
|
||
fillColor : { //未刮开图层时的填充色
|
||
type : String ,
|
||
default : '#ddd'
|
||
},
|
||
watermark : { //水印文字
|
||
type : String ,
|
||
default : '刮一刮'
|
||
},
|
||
watermarkColor : { //水印文字颜色
|
||
type : String ,
|
||
default : '#c5c5c5'
|
||
},
|
||
watermarkSize : { //水印文字大小
|
||
type : Number ,
|
||
default : 14
|
||
},
|
||
title : { //提示文字
|
||
type : String ,
|
||
default : '刮一刮开奖'
|
||
},
|
||
titleColor : { //提示文字颜色
|
||
type : String ,
|
||
default : '#888'
|
||
},
|
||
titleSize : { //提示文字大小
|
||
type : Number ,
|
||
default : 24
|
||
},
|
||
disabled : { //是否禁止刮卡
|
||
type : Boolean ,
|
||
default : false
|
||
},
|
||
|
||
is_show : { //防止画布画好前闪烁
|
||
type : Boolean ,
|
||
default : false
|
||
},
|
||
result_img: {
|
||
type: String,
|
||
default: 'https://cdn.pixabay.com/photo/2021/01/04/07/38/lily-5886728__340.jpg',
|
||
},
|
||
//跑马灯启用图片背景
|
||
is_img_bg: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//背景图片
|
||
theme_img_bg: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
box_shadow_Color: {
|
||
type: String,
|
||
default: '#fcc8d0',
|
||
},
|
||
//底部背景图片
|
||
bg_img: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
//翻牌选中的图片背景
|
||
seled_img: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
//翻牌未选中的图片背景
|
||
un_seled_img: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
init_show: { //是否初始化
|
||
type : Boolean ,
|
||
default : false
|
||
},
|
||
},
|
||
computed: {
|
||
|
||
|
||
},
|
||
|
||
watch: {
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
Recharge(){
|
||
this.$emit('Recharge');
|
||
},
|
||
initBlow(){
|
||
this.$refs.blowRef.initBlow()
|
||
},
|
||
show(e){
|
||
this.$emit('show', e);
|
||
},
|
||
again(e){
|
||
this.$emit('again', e);
|
||
},
|
||
result(e){
|
||
this.$emit('result', e);
|
||
},
|
||
toDetailPage(e){
|
||
this.$emit('toDetailPage', e);
|
||
},
|
||
complete(e){
|
||
this.$emit('complete', e);
|
||
},
|
||
init(e){
|
||
this.$emit('init', e);
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
</style>
|