146 lines
2.6 KiB
Vue
146 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="scratch" :style="style_wh">
|
|||
|
|
<view class="box" :style="{background: themeColor }">
|
|||
|
|
<!-- 结果-->
|
|||
|
|
<view class="result" :style="[{'font-size':txtFontSize+'rpx'},{color: txtColor }]">
|
|||
|
|
<text>{{result_txt}}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 刮奖canvas容器 -->
|
|||
|
|
<canvas class="canvas-box" :canvas-id="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import scratch from './scratch.js'
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
result_txt: {
|
|||
|
|
type: String,
|
|||
|
|
default: '结果',
|
|||
|
|
},
|
|||
|
|
// 绘制刮范围高
|
|||
|
|
height: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 150
|
|||
|
|
},
|
|||
|
|
// 绘制刮范围宽
|
|||
|
|
width: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 350
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
themeColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#33CCCC',
|
|||
|
|
},
|
|||
|
|
txtColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#FFFFFF',
|
|||
|
|
},
|
|||
|
|
txtFontSize: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 50,
|
|||
|
|
},
|
|||
|
|
canvasId: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'blow',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
scratchSize: 10, // 触手大小
|
|||
|
|
scratchScale: 0.30, // 需刮开百分比
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
style_wh() {
|
|||
|
|
let that = this;
|
|||
|
|
var height = parseInt(that.height);
|
|||
|
|
var width = parseInt(that.width);
|
|||
|
|
var style = '';
|
|||
|
|
if (height > 0) {
|
|||
|
|
style = `height:${height*1.5}rpx;`;
|
|||
|
|
}
|
|||
|
|
if (width > 0) {
|
|||
|
|
style += `width:${width*1.5}rpx;`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return style;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
touchStart(){},
|
|||
|
|
touchMove(){},
|
|||
|
|
touchEnd(){},
|
|||
|
|
initBlow() {
|
|||
|
|
// 刮初始化信息必须在onReady后，不然h5不支持（小程序可在onLoad执行）
|
|||
|
|
new scratch(this, {
|
|||
|
|
canvasId: this.canvasId,
|
|||
|
|
width: this.scratchWidth,
|
|||
|
|
height: this.scratchHeight,
|
|||
|
|
size: this.scratchSize,
|
|||
|
|
scale: this.scratchScale
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.scratch {
|
|||
|
|
|
|||
|
|
background-size: contain;
|
|||
|
|
margin: 20rpx auto;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
// background: #aaaa7f;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.result {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
// font-size: 50rpx;
|
|||
|
|
// color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.canvas-box {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip {
|
|||
|
|
position: fixed;
|
|||
|
|
text-align: center;
|
|||
|
|
top: 300rpx;
|
|||
|
|
left: 300rpx;
|
|||
|
|
width: 150rpx;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|