刮刮乐

src/subPackageMarketing/page/components/scratch/scratch.js

@@ -46,7 +46,9 @@ class Scratch {
         this.maskColor = opts.maskColor
         // this.canvasId = opts.canvasId
         this.r = opts.r || 4
-        this.endCallBack = opts.callback
+        this.endCallBack = opts.callback,
+        this.initOkCallBack = opts.initOkCallBack,
+
         this.lastX = 0
         this.lastY = 0
         this.minX = ''
@@ -86,15 +88,29 @@ class Scratch {
                 success: res => {
                     self.ctx.drawImage(res.tempFilePath, 0, 0, canvasWidth, canvasHeight)
                     self.ctx.draw()
+                    setTimeout(() => {
+                        self.initOkCallBack && self.initOkCallBack();
+                    },100);
                 }
             })
         } else {
             self.ctx.setFillStyle(maskColor)
             self.ctx.fillRect(0, 0, canvasWidth, canvasHeight)
             self.ctx.draw()
+            setTimeout(() => {
+                self.initOkCallBack && self.initOkCallBack();
+            },100);
         }
     }
 
+    //设置中奖文案
+    setAwardText(awardTxt){
+        this.page.data.scratch.awardTxt = awardTxt;
+        this.page.setData({
+            scratch : this.page.data.scratch
+        });
+    }
+
     drawRect (x, y) {
         const { r, minX, minY, maxX, maxY } = this
         const x1 = x - r > 0 ? x - r : 0
@@ -132,8 +148,10 @@ class Scratch {
         this.maxX = ''
         this.maxY = ''
         this.isStart = true
+        this.page.data.scratch.awardTxt = '开奖中...';
         this.page.setData({
-            'isScroll': false
+            'isScroll': false,
+            scratch : this.page.data.scratch,
         })
     }
 

src/subPackageMarketing/page/components/scratch/scratch.wxml

 <template name="scratch" >
 	<view class="scratch_wp" style="position:relative;width: {{scratch.width}}px; height: {{scratch.height}}px;margin: 0 auto;" >
-		<canvas style="margin: 0 auto;width: {{scratch.width}}px; height: {{scratch.height}}px; background: transparent" canvas-id="scratch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" disable-scroll ="{{isScroll}}"></canvas>
-		<view class="scratch_txt" style="position:absolute;top:0;left:0;width: 100%;height:100%;text-align: center;line-height: {{scratch.awardTxtLineHeight}}px;color: {{scratch.awardTxtColor}};font-size: {{scratch.awardTxtFontSize}};pointer-events:none;z-index: -1">{{scratch.awardTxt}}</view>
+		<canvas style="position:absolute;top:0;left:0;margin: 0 auto;width: {{scratch.width}}px; height: {{scratch.height}}px; background: transparent;z-index:1;" canvas-id="scratch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" disable-scroll ="{{isScroll}}"></canvas>
+		<view class="scratch_txt" 
+		style="position:absolute;top:0;left:0;width: 100%;height:100%;display: flex;align-items: center;justify-content: center;color: {{scratch.awardTxtColor}};font-size: {{scratch.awardTxtFontSize}};pointer-events:none;z-index: 0">
+		{{scratch.awardTxt}}</view>
 	</view>
 </template> 
\ No newline at end of file

src/subPackageMarketing/page/pages/scratch/scratch.js

@@ -2,14 +2,16 @@
 const wxService = require('../../../../utils/wxService')
 const utils = require('../../../../utils/util')
 import Scratch from '../../components/scratch/scratch.js'
-
+const app = getApp();
 wxService.page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    
+    loading : true,
+    btnName : '开始刮奖',
+    leftNum : 2,
   },
 
   /**
@@ -19,36 +21,55 @@ wxService.page({
     this.initScratch();
   },
 
+  //开始刮奖或重新刮奖
+  onClickStartScratch(){
+    if(this.data.leftNum <= 0){
+      wx.showToast({
+        title: '对不起,您没有刮奖机会了',
+        icon : 'none'
+      });
+      return;
+    }
+
+    if(this.data.btnName == '开始刮奖'){
+      this.scratch.start();
+      this.setData({
+        btnName : '重新刮奖'
+      });
+    }
+    else{
+      this.scratch.restart();
+    }
+  },
+
   //初始化刮刮卡
   initScratch(){
+    let width = app.globalData.systemInfo.screenWidth;
+    let self = this;
     this.scratch = new Scratch(this, {
-        canvasWidth: 197,
-        canvasHeight: 72,
+        canvasWidth: width*0.9 - 30,
+        canvasHeight: 130,
         imageResource: 'https://img3.bigaka.com/test/1002/202004/20200413/100208b0fbce-b73d-4af9-bd74-47d1ea5311d5.png',
-        maskColor: 'red',
-        r: 4,
-        awardTxt: '中大奖',
-        awardTxtColor: '#3985ff',
-        awardTxtFontSize: '24px',
+        // maskColor: 'red',
+        r: 10,
+        awardTxt: '开奖中...',
+        awardTxtColor: '#333333',
+        awardTxtFontSize: '22px',
         callback: () => {
-            wx.showModal({
-                title: '提示',
-                content: `您中奖了`,
-                showCancel: false,
-                success: res => {
-                    // this.scratch.reset()
-                    if (res.confirm) {
-                        console.log('用户点击确定')
-                    } else if (res.cancel) {
-                        console.log('用户点击取消')
-                    }
-                }
+            console.log('提示语')
+            this.scratch.setAwardText('恭喜您,中了100积分')
+            this.data.leftNum --;
+            this.setData({
+              leftNum : this.data.leftNum
+            });
+        },
+        initOkCallBack(){
+          self.setData({
+            loading : false
           })
-        }
+        },
     });
-    //this.scratch.start()
-
-    this.scratch.start()
+    // this.scratch.start()
     //this.scratch.restart()
   },
 

src/subPackageMarketing/page/pages/scratch/scratch.json

 {
+  "disableScroll": true,
   "navigationBarTitleText": "刮刮卡",
   "usingComponents": {}
 }
\ No newline at end of file

src/subPackageMarketing/page/pages/scratch/scratch.wxml

 <!--subPackageMarketing/page/pages/scratch/scratch.wxml-->
 <import src="../../components/scratch/scratch.wxml" />
 <!--  布局 -->
-<view class="acticity-bg"></view>
-
-<view class="index">
-  <view class="index-hd">
-    <view class="index-desc">以下是小程序刮刮乐组件，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见开发文档。</view>
+<!-- style="background-image:url(https://img3.bigaka.com/test/1002/202004/20200413/10021096c17c-fbc6-49a8-a53c-8bbf0502df44.jpg)" -->
+<view class="acticity-bg" style="background-image:url(https://img3.bigaka.com/test/1002/202004/20200413/10021096c17c-fbc6-49a8-a53c-8bbf0502df44.jpg)">
+  <!-- 展示还有几次 -->
+  <view class="scratch-count">您还有{{leftNum}}次刮奖机会</view>
+  <view class="scratch-area" style="background-image:url(https://img3.bigaka.com/test/1002/202004/20200413/1002cc8ea3b2-7697-48e7-85e5-76e937f611e8.png)">
+      <view class="index">
+        <template is = "scratch" data = "{{scratch, isScroll}}"></template> 
+      </view>
   </view>
   
-  <template is = "scratch" data = "{{scratch, isScroll}}"></template> 
-  <button bindtap = "onStart">{{txt}}</button> 
+  <view class="scratch-btn" bindtap="onClickStartScratch">{{btnName}}</view>
 </view>
+<!-- 查看规则 -->
+<view class="view-rule">查看规则</view>
+
+<!-- loading -->
+<loading wx:if="{{loading}}"/>
+
+
+
+

src/subPackageMarketing/page/pages/scratch/scratch.wxss

@@ -11,27 +11,70 @@ view{
   -webkit-box-sizing: border-box;
 }
 
+.view-rule{
+  position: fixed;
+  z-index: 2;
+  right: 0;
+  top: 5vh;
+  background: #ffffff;
+  height: 60rpx;
+  width: auto;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #333333;
+  border-top-left-radius: 30rpx;
+  border-bottom-left-radius: 30rpx;
+}
+
+
+
+
 .acticity-bg{
   width: 100vw;
   height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  /* position: relative; */
+  padding-top: 35vh;
 }
 
-.index-hd {
-  padding: 80rpx;
-  text-align: center;
-  padding: 20rpx 26rpx 40rpx;
+.scratch-area{
+  width: 90vw;
+  height: 330rpx;
+  margin: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  /* background-color: transparent; */
+  padding: 50rpx 30rpx;
 }
 
-.index-desc {
-  margin-top: 20rpx;
-  color: #888888;
-  font-size: 28rpx;
+.scratch-count{
+  background: rgba(0,0,0,0.5);
+  color: #ffffff;
+  font-size: 24rpx;
+  height: 56rpx;
+  margin: auto;
+  width: 50vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 28rpx;
+  margin-bottom: 20rpx;
 }
 
-button{
-  margin-top: 40rpx;
-  width: 400rpx;
+.scratch-btn{
+  width: 35vw;
+  height: 70rpx;
+  background: #ffffff;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  margin-top: 60rpx;
+  border-radius: 35rpx;
 }
\ No newline at end of file