487 lines
13 KiB
Vue
487 lines
13 KiB
Vue
<template>
|
|
<view>
|
|
<!-- <view class="box">
|
|
<view class="flex_items flex_center">11223344</view>
|
|
<canvas disable-scroll="false" canvas-id='ddmmo' @touchstart="touchStart" @touchmove="touchMove"
|
|
@touchend="touchEnd">
|
|
</canvas>
|
|
<cover-view v-if="showGjBth" class="gj_btn" @click="gj">
|
|
<button>点击刮奖</button>
|
|
</cover-view>
|
|
</view>
|
|
<button v-if="again" style="margin: 50rpx;" @click="gj">再刮一次</button> -->
|
|
<!-- t1 -->
|
|
<view class="content">
|
|
<view v-if="noq" class="noq"></view>
|
|
<!-- mask -->
|
|
<view class="mask flex_items flex_center" v-if="ismask" @click="closemsk">
|
|
<view class="mk plr50 pos flex_column flex_items">
|
|
<view class="f40 abs bold" style="color: #CA7340;top: 24rpx;">活动规则</view>
|
|
<view class="plr50 flex_column f24" style="color: #2B6DA8;">
|
|
<view class="" style="margin-top:130rpx;">1.【活动时间】2023年11月1日至2023年12月31日。</view>
|
|
<view class="mt20">
|
|
2.【活动内容】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。
|
|
</view>
|
|
<view class="mt20">
|
|
3.【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。
|
|
</view>
|
|
<view class="mt20">4【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为。</view>
|
|
</view>
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'"
|
|
style="width: 52rpx;height: 52rpx;bottom: -100rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<!-- 中将 -->
|
|
<view class="mask flex_items flex_center" v-if="ismask2">
|
|
<view class="mk2 plr50 flex_column flex_items pos">
|
|
<view v-if="jiang=='很遗憾，没有中奖'" class="f36 bold"
|
|
style="color: #003A6E;margin-top:150rpx;opacity: 0;">
|
|
未中奖
|
|
</view>
|
|
<view v-else class="f36 bold" style="color: #003A6E;margin-top:150rpx;">恭喜您获得</view>
|
|
<view class="mt40 f40" style="color: #003A6E;">{{jiang}}</view>
|
|
<view class="mt30 f24" style="color: #003A6E;">请到【我的奖品】中查看</view>
|
|
<view class="flex_items flex_center btnl mt40" @click="gomyp">
|
|
<text class="f32" style="color: #fff;">确认</text>
|
|
</view>
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'"
|
|
style="width: 52rpx;height: 52rpx;bottom: -100rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex_column flex_items t1" style="">
|
|
<view class="" style="margin-top:540rpx;">
|
|
<image :src="imgUrl+'xy.png'" style="width: 600rpx;height:126rpx;"></image>
|
|
</view>
|
|
<image :src="imgUrl+'chu.png'" style="width: 300rpx;height:60rpx;" mode=""></image>
|
|
<view class="flex_items flex_center mt60 pos" style="width: 100%;">
|
|
<view class="pos flex_column flex_items" style="width: 100%;">
|
|
<image :src="imgUrl+'lw.png'" style="width: 430rpx;height: 330rpx;z-index: 1;" mode=""></image>
|
|
<image class="abs" :src="imgUrl+'dp.png'"
|
|
style="width: 750rpx;height: 362rpx;left: 50%;transform: translate(-50%);top:180rpx;z-index: 0;"
|
|
mode=""></image>
|
|
<image class="abs" :src="imgUrl+'hua.png'"
|
|
style="width: 100%;height: 183rpx;z-index: 2;left: 0;top:320rpx;" mode=""></image>
|
|
</view>
|
|
<view class="flex_column flex_items mt30 abs" style="right: 0;top:0rpx;">
|
|
<view @click="openmask" class="tagr flex_items flex_center" style="color: #fff;z-index: 8;">
|
|
<text class="f24">活动规则</text>
|
|
<image class="ml10" :src="imgUrl+'rightg.png'" style="width:22rpx;height:20rpx;" mode="">
|
|
</image>
|
|
</view>
|
|
<view class="tagr flex_items flex_center mt20" style="color: #fff;z-index: 8" @click="gomyp">
|
|
<text class="f24">我的奖品</text>
|
|
<image class="ml10" :src="imgUrl+'rightg.png'" style="width:22rpx;height:20rpx;" mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="gw pos" style="margin-top:100rpx;background: #FCC988;z-index: 8;">
|
|
<view style="width: 600rpx;height: 360rpx;" class="flex_items flex_center neitu">
|
|
<view class="box flex_items flex_center">
|
|
<view class="flex_items flex_center">
|
|
<text class="bold f44" style="color: #FE5F38;">{{jiang}}</text>
|
|
</view>
|
|
<canvas disable-scroll="false" canvas-id='ddmmo' id="ddmmo" @touchstart="touchStart"
|
|
@touchmove="touchMove" @touchend="touchEnd">
|
|
</canvas>
|
|
</view>
|
|
</view>
|
|
<cover-view v-if="showGjBth" class="gj_btn" @click="gj"
|
|
style="z-index:5;width: 100%;height: 360rpx;background: transparent;">
|
|
<cover-view class="bold f50" style="color: #B79A94;">点击开始刮奖</cover-view>
|
|
</cover-view>
|
|
</view>
|
|
<view class="mt50 flex_column flex_items" style="width: 100%;">
|
|
<text class="bolder f40" style="color: #E57524;">
|
|
中奖名单
|
|
</text>
|
|
<view class="mt30 ptb30"
|
|
style="width:calc(100% - 120rpx);background: #FFE9B8;border-radius: 20rpx;border: 4rpx solid #fff;">
|
|
<div class="marquee">
|
|
<div class="marquee_box" ref="marquee_box">
|
|
<div class="marquee_list" :class="{marquee_top:animate}">
|
|
<div class="">
|
|
<div v-for="(item,index) in zjlist" :key="index"
|
|
class="mt30 flex_start flex_items pb30" style="width:100%;color: #E57524;">
|
|
<text class="f24 ml10">恭喜：{{item.user_name}}的用户获得</text>
|
|
<text class="f24">{{item.prize}}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="" style="width: 100%;height: 260rpx;margin-top: 12rpx;">
|
|
<image :src="imgUrl+'yun.png'" style="width: 100%;height: 260rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
methods
|
|
} from '../../uni_modules/uview-ui/libs/mixin/mixin.js'
|
|
// import Scratch from '@/util/scratch.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showGjBth: true,
|
|
again: false,
|
|
imgUrl: "",
|
|
freeNum: 0,
|
|
prizeList: [],
|
|
zjlist: [],
|
|
animate: false,
|
|
showNum: 3, // 可见列表条数
|
|
ismask: false,
|
|
ismask2: false,
|
|
jiang: "",
|
|
ctx: {},
|
|
show: false,
|
|
width: 300,
|
|
height: 300,
|
|
maskColor: "#ddd",
|
|
size: 15,
|
|
r: 15,
|
|
area: "",
|
|
scale: .5,
|
|
totalArea: 0,
|
|
clearPoints: []
|
|
}
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.acid = options.id
|
|
this.imgUrl = this.api.imgUrl
|
|
this.getPrizeList()
|
|
},
|
|
created() {
|
|
let that = this
|
|
setInterval(that.showMarquee, 2000)
|
|
},
|
|
mounted() {
|
|
this.ctx = uni.createCanvasContext("ddmmo", this);
|
|
this.totalArea = this.width * this.height;
|
|
this.area = this.r * this.r;
|
|
this.ctx.setFillStyle(this.maskColor);
|
|
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
this.ctx.draw();
|
|
this.show = false;
|
|
// 可见数据高度
|
|
this.$refs.marquee_box.style.height = this.showNum * 30 + 'px'
|
|
},
|
|
methods: {
|
|
// 获取奖品列表
|
|
async getPrizeList() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
this.api.getdatas({
|
|
id: this.acid
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.zjlist = res.data.data.win_list
|
|
this.prizeList = res.data.data.prizes
|
|
this.getover()
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getover() {
|
|
let that = this
|
|
that.api.getover({
|
|
id: that.acid
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
uni.hideLoading()
|
|
if (res.data.data.length == 0) {
|
|
that.jiang = "很遗憾，没有中奖"
|
|
} else {
|
|
that.jiang = "恭喜，获得" + res.data.data.name
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//刮奖设置
|
|
gj() {
|
|
let that = this;
|
|
// 开始刮奖
|
|
// new Scratch(that, {
|
|
// canvasId: 'ddmmo'
|
|
// })
|
|
// that.drawMask()
|
|
//请求获取结果图片
|
|
that.showGjBth = false
|
|
that.again = false
|
|
},
|
|
//刮到指定区域大小后 刮卡已刮干净
|
|
clearCanvas() {
|
|
if (!this.again) {
|
|
console.log('刮卡已刮干净啦！');
|
|
}
|
|
this.ismask2 = true
|
|
this.again = true
|
|
},
|
|
// 处理数组方法
|
|
showMarquee() {
|
|
this.animate = true
|
|
this.zjlist.push(this.zjlist[0])
|
|
setTimeout(() => {
|
|
this.zjlist.shift()
|
|
this.animate = false
|
|
}, 1000)
|
|
},
|
|
closemsk() {
|
|
this.ismask = false
|
|
this.ismask2 = false
|
|
},
|
|
openmask() {
|
|
this.ismask = true
|
|
},
|
|
gomyp() {
|
|
uni.navigateTo({
|
|
url: "/pages/my/prizes?acid=" + this.acid
|
|
})
|
|
},
|
|
// 222222222222222
|
|
drawMask() {
|
|
this.ctx.setFillStyle(this.maskColor);
|
|
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
this.ctx.draw();
|
|
},
|
|
touchStart(e) {
|
|
this.eraser(e, true);
|
|
},
|
|
touchMove(e) {
|
|
this.eraser(e, false);
|
|
},
|
|
touchEnd(e) {
|
|
if (this.show) {
|
|
this.clearCanvas();
|
|
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
this.ctx.draw();
|
|
}
|
|
},
|
|
eraser(e, bool) {
|
|
let len = this.clearPoints.length;
|
|
let count = 0;
|
|
let x = e.touches[0].x,
|
|
y = e.touches[0].y;
|
|
let x1 = x - this.size;
|
|
let y1 = y - this.size;
|
|
if (bool) {
|
|
this.clearPoints.push({
|
|
x1: x1,
|
|
y1: y1,
|
|
x2: x1 + this.r,
|
|
y2: y1 + this.r
|
|
})
|
|
}
|
|
for (let item of this.clearPoints) {
|
|
if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) {
|
|
count++;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
if (len === count) {
|
|
this.clearPoints.push({
|
|
x1: x1,
|
|
y1: y1,
|
|
x2: x1 + this.r,
|
|
y2: y1 + this.r
|
|
});
|
|
}
|
|
//添加计算已清除的面积，达到标准值后，设置刮卡区域刮干净
|
|
let clearNum = 0
|
|
clearNum = parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea);
|
|
if (!this.show) {
|
|
this.clearNum = parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea)
|
|
}
|
|
if (clearNum > .2) {
|
|
//if (len && this.r * this.r * len > this.scale * this.totalArea) {
|
|
this.show = true;
|
|
}
|
|
this.clearArcFun(x, y, this.r, this.ctx);
|
|
this.ctx.draw(true);
|
|
},
|
|
clearArcFun(x, y, r, ctx) {
|
|
let stepClear = 1;
|
|
clearArc(x, y, r);
|
|
|
|
function clearArc(x, y, radius) {
|
|
let calcWidth = radius - stepClear;
|
|
let calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);
|
|
|
|
let posX = x - calcWidth;
|
|
let posY = y - calcHeight;
|
|
|
|
let widthX = 2 * calcWidth;
|
|
let heightY = 2 * calcHeight;
|
|
|
|
if (stepClear <= radius) {
|
|
ctx.clearRect(posX, posY, widthX, heightY);
|
|
stepClear += 1;
|
|
clearArc(x, y, radius);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/* pages/scratch/scratch.wxss */
|
|
.box {
|
|
width: 552rpx;
|
|
height: 300rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.box image,
|
|
.box canvas,
|
|
.gj_btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.gj_btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #ddd;
|
|
}
|
|
|
|
.gj_btn button {
|
|
box-sizing: border-box;
|
|
background: none;
|
|
border: rgba(0, 0, 0, 0) solid 1px;
|
|
}
|
|
|
|
/* 222222222222222222222 */
|
|
page {
|
|
background: #F9AF64 !important;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
background-image: url('https://pfapi.86698.cn/static/images/bgg.png');
|
|
background-size: 100% 100%;
|
|
height: 1500rpx;
|
|
}
|
|
|
|
.t1 {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.marquee {
|
|
width: 100%;
|
|
align-items: center;
|
|
color: #3a3a3a;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.marquee_title {
|
|
padding: 0 20px;
|
|
height: 21px;
|
|
font-size: 14px;
|
|
border-right: 1px solid #d8d8d8;
|
|
align-items: center;
|
|
}
|
|
|
|
.marquee_box {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
height: 490rpx;
|
|
}
|
|
|
|
.marquee_list {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
width: calc(100% - 150rpx);
|
|
}
|
|
|
|
.marquee_top {
|
|
transition: all 1s;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
.tagr {
|
|
width: 159rpx;
|
|
height: 44rpx;
|
|
background: linear-gradient(180deg, #FFF2BA 0%, #F14A1A 100%);
|
|
border-radius: 22rpx 0rpx 0rpx 22rpx;
|
|
}
|
|
|
|
.mask {
|
|
background: rgba(0, 0, 0, 0.60);
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.mk2 {
|
|
background-image: url('https://pfapi.86698.cn/static/images/zj.png');
|
|
background-size: 100% 100%;
|
|
width: 494rpx;
|
|
height: 684rpx;
|
|
}
|
|
|
|
.btnl {
|
|
background-image: url('https://pfapi.86698.cn/static/images/btn.png');
|
|
background-size: 100% 100%;
|
|
width: 218rpx;
|
|
height: 76rpx;
|
|
}
|
|
|
|
.mk {
|
|
background-image: url('https://pfapi.86698.cn/static/images/js.png');
|
|
background-size: 100% 100%;
|
|
width: 580rpx;
|
|
height: 716rpx;
|
|
}
|
|
|
|
.noq {
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 555;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: none;
|
|
}
|
|
|
|
.neitu {
|
|
background-image: url('https://pfapi.86698.cn/static/images/gw.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
</style> |