15 changed files with 114 additions and 744 deletions
@ -1,3 +1,6 @@ |
|||
<h2> |
|||
文档已移至 <a href="https://uniapp.dcloud.io/uniCloud/uni-starter.html" target="_blank">uni-starter文档</a> |
|||
</h2> |
|||
</h2> |
|||
|
|||
|
|||
// "echarts": "^5.4.3",无法在移动端使用Tooltip |
|||
@ -1,13 +0,0 @@ |
|||
{ |
|||
"name": "ggjuni", |
|||
"version": "2.1.4", |
|||
"lockfileVersion": 2, |
|||
"requires": true, |
|||
"packages": { |
|||
"node_modules/qrcodejs2": { |
|||
"version": "0.0.2", |
|||
"resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz", |
|||
"integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA==" |
|||
} |
|||
} |
|||
} |
|||
@ -1,232 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<view class="prizePage"> |
|||
<!--游玩区域--> |
|||
<div class="box"> |
|||
<p class="rule">活动规则</p> |
|||
<a href="../my.html" id="myWin"> |
|||
<p class="my">我的奖品</p> |
|||
</a> |
|||
<div class="panel"> |
|||
<canvas id="canvas" width="562" height="308" @touchstart="mousedown" @touchmove="mousemove" @touchend="mouseup"></canvas> |
|||
<div id="canvas-mask"> |
|||
<a id="btn" href="javascript:;" @click="btnClick"></a> |
|||
<p>您今天还有<span id="change">3</span>次刮奖机会</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<!--游戏规则弹窗--> |
|||
<div id="mask-rule"> |
|||
<div class="box-rule"> |
|||
<span class="star"></span> |
|||
<h2>活动规则说明</h2> |
|||
<span id="close-rule"></span> |
|||
<div class="con"> |
|||
<div class="text"> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
<p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--中奖提示--> |
|||
<div id="mask"> |
|||
<div class="blin"></div> |
|||
<div class="caidai"></div> |
|||
<div class="winning"> |
|||
<div class="red-head"></div> |
|||
<div class="red-body"></div> |
|||
<div id="card"> |
|||
<a href="" target="_self" class="win"></a> |
|||
</div> |
|||
<a href="" target="_self" class="btn"></a> |
|||
<span id="close"></span> |
|||
</div> |
|||
</div> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var $canvas = $("#canvas"),//canvas |
|||
clientWidth = document.documentElement.clientWidth, |
|||
canvasWidth = Math.floor(clientWidth * 562 / 750),//canvas宽 = 屏幕宽 * 设计稿里canvas宽 / 750 |
|||
canvasHeight = Math.floor(clientWidth * 308 / 750),//canvas高 = 屏幕宽 * 设计稿里canvas高 / 750 |
|||
ctx = $canvas[0].getContext("2d"),//获取canvas的2d绘制对象 |
|||
$canvasMask = $("#canvas-mask"),//canvas遮罩层 |
|||
$btn = $("#btn"),//刮奖按钮 |
|||
$change = $("#change"),//剩余次数 |
|||
data = {count: 5},//次数 |
|||
empty = false, |
|||
bool = false;//判断是否按下去，true为按下，false未按下 |
|||
export default { |
|||
data() { |
|||
return { |
|||
// w: 330, |
|||
// h: 280, |
|||
// isfinish:false, |
|||
// isClear:false, |
|||
// isWin: false, |
|||
// isThank: false |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
$canvasMask.show(); |
|||
$change.html(data.count);//显示剩余次数 |
|||
//设置canvas宽高 |
|||
$canvas.attr('width', canvasWidth); |
|||
$canvas.attr('height', canvasHeight); |
|||
|
|||
//canvas绘图 |
|||
ctx.beginPath(); |
|||
ctx.fillStyle = '#999';//刮刮乐图层的填充色 |
|||
ctx.lineCap = "round";//绘制的线结束时为圆形 |
|||
ctx.lineJoin = "round";//当两条线交汇时创建圆形边角 |
|||
ctx.lineWidth = 20;//单次刮开面积 |
|||
ctx.fillRect(0, 0, canvasWidth, canvasHeight); |
|||
ctx.closePath(); |
|||
|
|||
ctx.globalCompositeOperation = 'destination-out';//新图像和原图像重合部分变透明 |
|||
//下面3行代码是为了修复部分手机浏览器不支持destination-out |
|||
$canvas.css("display", "none"); |
|||
$canvas.outerHeight(); |
|||
$canvas.css("display", "inherit"); |
|||
}, |
|||
btnClick () {//点击开始刮奖按钮 |
|||
if (data.count > 0) { |
|||
data.count--;//设定中奖的图片 |
|||
$canvas.css("background-image", "url('../common/image/prize/prize2.png')"); |
|||
$canvasMask.hide(); |
|||
} else { |
|||
alert("没有次数了"); |
|||
} |
|||
}, |
|||
//鼠标按下 |
|||
mousedown (e) { |
|||
e = e || window.event; |
|||
e.preventDefault(); |
|||
if (typeof e.touches !== 'undefined') { |
|||
e = e.touches[0];//获取触点 |
|||
} |
|||
var x = e.pageX - $(this).offset().left, |
|||
y = e.pageY - $(this).offset().top; |
|||
ctx.moveTo(x, y); |
|||
//touchmove事件 |
|||
$canvas.on('touchmove', eventMove); |
|||
}, |
|||
mousemove (e) { |
|||
e = e || window.event; |
|||
e.preventDefault(); |
|||
if (typeof e.touches !== 'undefined') { |
|||
e = e.touches[0]; |
|||
} |
|||
var x = e.pageX - $(this).offset().left, |
|||
y = e.pageY - $(this).offset().top; |
|||
ctx.lineTo(x, y); |
|||
ctx.stroke(); |
|||
clear(); |
|||
}, |
|||
//鼠标按键抬起 |
|||
mouseup () { |
|||
|
|||
}, |
|||
clear() { |
|||
if (empty) return; |
|||
var data = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data,//得到canvas的全部数据 |
|||
half = 0; |
|||
|
|||
//length = canvasWidth * canvasHeight * 4，一个像素块是一个对象rgba四个值，a范围为0~255 |
|||
for (var i = 3, length = data.length; i < length; i += 4) {//因为有rgba四个值，下标0开始，所以初始i=3 |
|||
data[i] === 0 && half++;//存在imageData对象时half加1 PS:该像素区域透明即为不存在该对象 |
|||
} |
|||
//当刮开的区域大于等于20%时，则可以开始处理结果 |
|||
if (half >= canvasWidth * canvasHeight * 0.2) { |
|||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);//清空画布 |
|||
empty = true; |
|||
win();//调用中奖信息 |
|||
} |
|||
}, |
|||
|
|||
|
|||
}, |
|||
onReady(e) { |
|||
this.init(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.prizePage{ |
|||
width: 750rpx; |
|||
height: 1506rpx; |
|||
background: url("../../static/home/prize-bg.png") no-repeat; |
|||
background-size: contain; |
|||
} |
|||
.gift { |
|||
width: 330px; |
|||
height: 280px; |
|||
background-color: #FFF1B9; |
|||
position: absolute; |
|||
left: 50%; |
|||
// top: 50%; |
|||
margin-left: -165px; |
|||
// margin-top: 174px; |
|||
} |
|||
.mask{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
} |
|||
.winPrize{ |
|||
width: 375px; |
|||
height: 575px; |
|||
background-image: url("../../static/home/prize.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
line-height: 550px; |
|||
color: #FFF1B9; |
|||
font-weight: bold; |
|||
font-size: 60px; |
|||
animation: showPrize 1s ease-in-out; |
|||
|
|||
.close{ |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url("../../static/home/close.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 4; |
|||
} |
|||
} |
|||
@keyframes showPrize { |
|||
0%{ |
|||
transform: translate(-50%, -50%) scale(0.4); |
|||
} |
|||
100%{ |
|||
transform: translate(-50%, -50%) scale(1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,196 +0,0 @@ |
|||
<template> |
|||
<!-- 刮奖 --> |
|||
<view v-else class="scratch"> |
|||
<view class="box"> |
|||
<!-- 刮奖结果图片 --> |
|||
<image src="../../static/home/tem11.png" class="img"></image> |
|||
<!-- 刮奖canvas容器 --> |
|||
<canvas |
|||
class="canvas-box" |
|||
canvas-id="canvas-id" |
|||
:disable-scroll="true" |
|||
@touchstart="touchStart" |
|||
@touchmove="touchMove" |
|||
@touchend="touchEnd" |
|||
></canvas> |
|||
<!-- 刮奖前提示消息，开始刮奖后隐藏 --> |
|||
<cover-view class="tip" v-if="!toDraw"> |
|||
<cover-view class="text"> |
|||
<cover-view class="text-tip">你还有</cover-view> |
|||
<cover-view class="light">1</cover-view> |
|||
<cover-view class="text-tip">次刮奖机会</cover-view> |
|||
</cover-view> |
|||
<!-- 开始刮奖按钮 --> |
|||
<cover-view class="btn" @tap="scratchStart()"> |
|||
<cover-view class="text">立即刮奖</cover-view> |
|||
</cover-view> |
|||
</cover-view> |
|||
<!-- 如果后端没有不中奖的图，则不中奖时默认显示 --> |
|||
<!-- <view v-if="hasDraw" class="award-box"> |
|||
<text class="text">谢谢参与</text> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Scratch from './scratch.js' |
|||
export default { |
|||
data () { |
|||
return { |
|||
// domain: getApp().globalData.baseUrl, // 服务器域名 |
|||
toDraw: false, // 是否开始刮奖 |
|||
showResult: false, // 是否显示抽奖结果 |
|||
isWin: true, // 是否中奖 |
|||
scratchWidth: 350, // 绘制刮奖范围宽 |
|||
scratchHeight: 150, // 绘制刮奖范围高 |
|||
scratchSize: 10, // 触手大小 |
|||
scratchScale: 0.25, // 需刮开百分比 |
|||
prize_img: '', // 中奖图片 |
|||
isScratching: false ,// 是否正在刮奖, |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
initCanvas () { |
|||
// 刮奖初始化信息必须在onReady后，不然h5不支持（小程序可在onLoad执行） |
|||
new Scratch(this, { |
|||
canvasId: 'canvas-id', |
|||
width: this.scratchWidth, |
|||
height: this.scratchHeight, |
|||
size: this.scratchSize, |
|||
scale: this.scratchScale |
|||
}) |
|||
}, |
|||
// 请求刮奖结果 |
|||
doPrizeScratchTicketFun () { |
|||
if (this.isScratching) return false |
|||
this.isScratching = true |
|||
// 请求服务器刮奖结果信息 |
|||
this.$api.luckDraw |
|||
.doPrizeScratchTicket() |
|||
.then(res => { |
|||
this.prize_img = res.luckyPrize.prize_img |
|||
this.luckyPrize = res.luckyPrize |
|||
this.isWin = true |
|||
if (this.luckyPrize.is_winning === 2) this.isWin = false |
|||
this.isScratching = false |
|||
}) |
|||
.catch(() => { |
|||
this.isScratching = false |
|||
}, |
|||
// 点击按钮开始刮奖 |
|||
scratchStart () { |
|||
this.toDraw = true |
|||
this.initCanvas() |
|||
this.doPrizeScratchTicketFun() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.scratch { |
|||
width: 670upx; |
|||
height: 320upx; |
|||
background: url("../../static/home/tem11.png") no-repeat; |
|||
background-size: contain; |
|||
margin: 366upx auto 80upx; |
|||
padding: 29upx 25upx 21upx; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.box { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #ccc; |
|||
border-radius: 20upx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
.img { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
.canvas-box { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100.5%; |
|||
height: 100%; |
|||
border-radius: 20upx; |
|||
overflow: hidden; |
|||
} |
|||
.tip { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 999; |
|||
text-align: center; |
|||
.text { |
|||
font-size: 30upx; |
|||
font-weight: bold; |
|||
color: #444; |
|||
margin-top: 69upx; |
|||
.text-tip { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.light { |
|||
// color: $red; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 6upx !important; |
|||
} |
|||
} |
|||
.btn { |
|||
width: 360upx; |
|||
height: 82upx; |
|||
border: none; |
|||
border-radius: 41upx; |
|||
margin: 59upx auto 0; |
|||
position: relative; |
|||
background: none; |
|||
background: #000; |
|||
.btn-img { |
|||
border: none; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.text { |
|||
display: inline; |
|||
position: absolute; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: 30upx; |
|||
font-weight: bold; |
|||
margin: 0; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
.award-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20upx; |
|||
text-align: center; |
|||
line-height: 270upx; |
|||
background: #FFF1B9; |
|||
.text { |
|||
font-size: 40upx; |
|||
font-weight: bold; |
|||
color: #444; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,231 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<view class="prizePage"> |
|||
<view class=""> |
|||
|
|||
</view> |
|||
<view class="" style="position: relative;padding-top: 380px;width: 330px;margin: 0px auto;"> |
|||
<div id="gift" class="gift"></div> |
|||
<canvas canvas-id="guagua" id="guagua" @touchstart="start" @touchend="end" @touchmove="move" |
|||
style="width: 330px;height: 280px;"></canvas> |
|||
</view> |
|||
<view class="mask" v-if="isWin || isThank"> |
|||
|
|||
</view> |
|||
<view class="winPrize" v-if="isWin"> |
|||
20元 |
|||
<view class="close" @click="isWin = false"></view> |
|||
</view> |
|||
<view class="noPrize" v-if="isThank"> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var ctx; |
|||
var sx = 0, |
|||
sy = 0, |
|||
perNum = 0; |
|||
var giftWidth=0,giftHeight=0; |
|||
var canvasId = "guagua"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
w: 330, |
|||
h: 280, |
|||
isfinish:false, |
|||
isClear:false, |
|||
isWin: false, |
|||
isThank: false |
|||
} |
|||
}, |
|||
methods: { |
|||
giftWidth:function(){ |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.select('#gift').boundingClientRect(data => { |
|||
giftWidth=data.width; |
|||
giftHeight=data.height; |
|||
}).exec(); |
|||
}, |
|||
finish:function(){ |
|||
this.isfinish=true; |
|||
}, |
|||
done:function(){ |
|||
|
|||
if(1){ |
|||
this.isWin = true; |
|||
}else{ |
|||
this.isThank = true; |
|||
} |
|||
|
|||
}, |
|||
start: function(e) { |
|||
if(this.isfinish){ |
|||
if(!this.isClear){ |
|||
this.isClear=true; |
|||
this.done(); |
|||
ctx.moveTo(0, 0); |
|||
ctx.clearRect(0,0, 330, 280); |
|||
ctx.stroke() |
|||
ctx.draw(true); |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
sx = e.touches[0].x; |
|||
sy = e.touches[0].y; |
|||
ctx.moveTo(sx, sy); |
|||
console.log(e.touches[0].x + " " + e.touches[0].y) |
|||
// this.getFilledPercentage(); |
|||
|
|||
}, |
|||
end: function(e) { |
|||
if(this.isfinish) return false; |
|||
|
|||
}, |
|||
move: function(e) { |
|||
e = e || window.event; |
|||
e.preventDefault(); |
|||
|
|||
if(this.isfinish){ |
|||
if(!this.isClear){ |
|||
this.isClear=true; |
|||
this.done(); |
|||
ctx.moveTo(0, 0); |
|||
ctx.clearRect(0,0, 330, 280); |
|||
ctx.stroke() |
|||
ctx.draw(true); |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
ctx.lineTo(sx, sy); |
|||
ctx.moveTo(sx, sy); |
|||
// ctx.clearRect(sx-10, sy-10, 20, 20) |
|||
ctx.stroke() |
|||
// ctx.globalAlpha = 0; |
|||
|
|||
ctx.draw(true); |
|||
this.getFilledPercentage(); |
|||
|
|||
sx = e.touches[0].x; |
|||
sy = e.touches[0].y; |
|||
}, |
|||
createCtx: function() { |
|||
ctx = uni.createCanvasContext(canvasId); |
|||
this.createRect(); |
|||
|
|||
}, |
|||
createRect: function() { |
|||
ctx.setFillStyle('#646464'); |
|||
|
|||
ctx.fillStyle = '#999';//刮刮乐图层的填充色 |
|||
ctx.lineCap = "round";//绘制的线结束时为圆形 |
|||
ctx.lineJoin = "round";//当两条线交汇时创建圆形边角 |
|||
ctx.lineWidth = 40;//单次刮开面积 |
|||
|
|||
ctx.fillRect(0, 0, 330, 280); |
|||
// ctx.closePath(); |
|||
ctx.globalCompositeOperation = 'destination-out'; |
|||
ctx.draw(true) |
|||
}, |
|||
getFilledPercentage: function() { |
|||
var that=this; |
|||
uni.canvasGetImageData({ |
|||
canvasId: canvasId, |
|||
x: (that.w-giftWidth)/2-5, |
|||
y: (that.h-giftHeight)/2-5, |
|||
width: giftWidth, |
|||
height: giftHeight, |
|||
success: function(res) { |
|||
let pixels = res.data; |
|||
let transPixels = []; |
|||
for (let i = 0; i < pixels.length; i += 4) { |
|||
if (pixels[i + 3] < 128) { |
|||
transPixels.push(pixels[i + 3]); |
|||
} |
|||
} |
|||
perNum = (transPixels.length / (pixels.length / 4) * 100).toFixed(2); |
|||
if(perNum>=40){ |
|||
console.log("finish"); |
|||
that.finish();; |
|||
} |
|||
console.log(perNum) |
|||
} |
|||
}); |
|||
|
|||
} |
|||
}, |
|||
onReady(e) { |
|||
this.createCtx(); |
|||
this.giftWidth(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.prizePage{ |
|||
width: 750rpx; |
|||
height: 1506rpx; |
|||
background: url("../../static/home/prize-bg.png") no-repeat; |
|||
background-size: contain; |
|||
} |
|||
.gift { |
|||
width: 330px; |
|||
height: 280px; |
|||
background-color: #FFF1B9; |
|||
position: absolute; |
|||
left: 50%; |
|||
// top: 50%; |
|||
margin-left: -165px; |
|||
// margin-top: 174px; |
|||
} |
|||
.mask{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
position: fixed; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 2; |
|||
} |
|||
.winPrize{ |
|||
width: 375px; |
|||
height: 575px; |
|||
background-image: url("../../static/home/prize.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 3; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
line-height: 550px; |
|||
color: #FFF1B9; |
|||
font-weight: bold; |
|||
font-size: 60px; |
|||
animation: showPrize 1s ease-in-out; |
|||
|
|||
.close{ |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url("../../static/home/close.png"); |
|||
background-size: contain; |
|||
position: fixed; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 4; |
|||
} |
|||
} |
|||
@keyframes showPrize { |
|||
0%{ |
|||
transform: translate(-50%, -50%) scale(0.4); |
|||
} |
|||
100%{ |
|||
transform: translate(-50%, -50%) scale(1); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue