刮一刮可重置

HelloWorldFFC · Jul 28, 2021 · 0eed6b6 · 0eed6b6
1 parent 4350cac
commit 0eed6b6
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 7 deletions.
diff --git a/Readme.md b/Readme.md
@@ -6,7 +6,9 @@
 2.自定义主题色，和显示内容、背景色和背景图等，开箱即用
 
 ## 有疑问
-微信搜索“慢慢向好”小程序，找客服反馈，相应问题。
+微信搜索“慢慢向好”小程序，可查看小程序效果，也可找客服反馈，相应问题。
+[“慢慢向好”小程序二维码](https://img-blog.csdnimg.cn/20210407132927718.png)
+
 
 ## 属性说明
 
@@ -57,6 +59,7 @@
 |bg_img	|String	|用于跑马灯，底部背景图片|
 |seled_img	|String	|用于翻牌，选中时背景图片|
 |un_seled_img	|String	|用于翻牌，未选中时背景图片|
+|init_show	|boolean	|用于刮一刮，重刮属性控制|
 				  
 
 ## 素材

diff --git a/components/ay-lottery/ay-lottery.vue b/components/ay-lottery/ay-lottery.vue
@@ -48,6 +48,7 @@
 		:result_txt="result_txt"
 		:txtFontSize="txtFontSize" 
 		:txtColor="txtColor"
+		:init_show="init_show"
 		@complete="complete"
 		@init="init"></blow>
 
@@ -72,6 +73,7 @@
 		:result_txt="result_txt"
 		:txtFontSize="txtFontSize" 
 		:txtColor="txtColor"
+		:init_show="init_show"
 		@complete="complete"
 		@init="init"></blowImg>
 
@@ -96,6 +98,7 @@
 		:result_txt="result_txt"
 		:txtFontSize="txtFontSize" 
 		:txtColor="txtColor"
+		:init_show="init_show"
 		@complete="complete"
 		@init="init">
 			<slot></slot>
@@ -299,6 +302,10 @@
 				type: String,
 				default: '',
 			},
+			init_show: { //是否初始化
+				type : Boolean ,
+				default : false 
+			},
 		},
 		computed: {
 

diff --git a/components/ay-lottery/blow.vue b/components/ay-lottery/blow.vue
@@ -100,6 +100,10 @@
 				type: Boolean,
 				default: false
 			},
+			init_show: { //是否初始化
+				type : Boolean ,
+				default : false 
+			},
 
 		},
 		data() {
@@ -114,6 +118,13 @@
 				storePoints: []
 			};
 		},
+		watch:{
+			init_show(e){
+				if(e){
+					this.initBlow();
+				}
+			},
+		},
 		mounted() {
 			ctx = uni.createCanvasContext(this.canvasId, this);
 			this.initBlow();

diff --git a/components/ay-lottery/blow_any.vue b/components/ay-lottery/blow_any.vue
@@ -66,6 +66,10 @@
 				type : Boolean ,
 				default : false 
 			},
+			init_show: { //是否初始化
+				type : Boolean ,
+				default : false 
+			},
 			
 		},
 		data() {
@@ -80,6 +84,13 @@
 				storePoints:[]
 			};
 		},
+		watch:{
+			init_show(e){
+				if(e){
+					this.initBlow();
+				}
+			},
+		},
 		mounted() {
 			ctx = uni.createCanvasContext(this.canvasId , this) ;
 			this.initBlow();

diff --git a/components/ay-lottery/blow_img.vue b/components/ay-lottery/blow_img.vue
@@ -80,6 +80,10 @@
 				type : Boolean ,
 				default : false 
 			},
+			init_show: { //是否初始化
+				type : Boolean ,
+				default : false 
+			},
 			
 		},
 		data() {
@@ -94,6 +98,13 @@
 				storePoints:[]
 			};
 		},
+		watch:{
+			init_show(e){
+				if(e){
+					this.initBlow();
+				}
+			},
+		},
 		mounted() {
 			ctx = uni.createCanvasContext(this.canvasId , this) ;
 			this.initBlow();

diff --git a/pages/index/index.vue b/pages/index/index.vue
@@ -25,12 +25,15 @@
 
 		<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">
+		 :result_txt="result_blow" themeColor="#33CCCC" :txtFontSize="txtFontSize_blow" :txtColor="txtColor_blow" :init_show="init_show_blow">
 		</aylottery>
-
+		<view class="reset-blow-box" @tap="reset_blow">
+			<button style="width: 400upx;" class="cf-bgcolorTheme">重置</button>
+		</view>
+
 		<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>
-
+		 :disabled="false" title="刮图片" watermark="刮一刮" @init="init_blow" :is_show="is_show_blow" :result_img="result_img_blow" :init_show="init_show_blow"></aylottery>
+		
 
 		<!-- <blowAny  canvasId="canvasId1" :height="200" :width="600" refs="card" style="margin: 0 40upx;"
 		  @complete="seatShow" :disabled="false" title="刮文本" watermark="刮一刮" @init="init_blow">
@@ -60,7 +63,7 @@
 
 
 		<aylottery :type="6" canvasId="canvasId3" :height="200" :width="600" refs="card" style="margin: 40upx;" @complete="seatShow"
-		 :disabled="false" title="刮自定义" watermark="刮一刮" @init="init_blow">
+		 :disabled="false" title="刮自定义" watermark="刮一刮" @init="init_blow" :init_show="init_show_blow">
 			<view style="position: absolute;" v-if="is_show_blow">
 
 				<view style="margin: 40upx;">
@@ -71,7 +74,8 @@
 
 
 		</aylottery>
-
+
+
 	</view>
 </template>
 
@@ -84,6 +88,7 @@
 
 		data() {
 			return {
+				init_show_blow:false ,//刮一刮重置
 				result_img_blow: 'https://cdn.pixabay.com/photo/2021/01/04/07/38/lily-5886728__340.jpg',
 				is_show_blow: false, //防止画布画好前闪烁
 				themeColor: '#33CCCC',
@@ -236,6 +241,14 @@
 
 		},
 		methods: {
+			//刮一刮重置
+			reset_blow: function() {
+				//this.$refs.card.init();
+				this.init_show_blow =true ;
+				setTimeout(() => {
+					this.init_show_blow = false;
+				}, 1000)
+			},
 			//刮一刮
 			init_blow() {
 				this.is_show_blow = true;
@@ -400,4 +413,13 @@
 		align-items: center;
 		width: 100%;
 	}
+	.cf-bgcolorTheme {
+		background-color: #33CCCC;
+		color: #FFFFFF;
+	}
+	.reset-blow-box{
+		width: 100%;
+		text-align: center;
+		margin: 50upx auto;
+	}
 </style>