Skip to content

7
7-Eleven
Commit 61f23af3 by 谢中龙
Options

刮刮乐

parent 2ce448be
Showing with 149 additions and 50 deletions
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment