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>
|