Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 qiushanhe
|
3d6252d5cb | 8 months ago |
@ -1,28 +0,0 @@ |
|||||||
{ |
|
||||||
"appid": "wx24c1b58020a5ce66", |
|
||||||
"compileType": "miniprogram", |
|
||||||
"libVersion": "3.3.3", |
|
||||||
"packOptions": { |
|
||||||
"ignore": [], |
|
||||||
"include": [] |
|
||||||
}, |
|
||||||
"setting": { |
|
||||||
"coverView": true, |
|
||||||
"es6": true, |
|
||||||
"postcss": true, |
|
||||||
"minified": true, |
|
||||||
"enhance": true, |
|
||||||
"showShadowRootInWxmlPanel": true, |
|
||||||
"packNpmRelationList": [], |
|
||||||
"babelSetting": { |
|
||||||
"ignore": [], |
|
||||||
"disablePlugins": [], |
|
||||||
"outputPath": "" |
|
||||||
} |
|
||||||
}, |
|
||||||
"condition": {}, |
|
||||||
"editorSetting": { |
|
||||||
"tabIndent": "insertSpaces", |
|
||||||
"tabSize": 2 |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
{ |
|
||||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", |
|
||||||
"projectname": "jwl-applet", |
|
||||||
"setting": { |
|
||||||
"compileHotReLoad": true |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,118 +0,0 @@ |
|||||||
import request from '../request/index.js'; |
|
||||||
|
|
||||||
//查询活动列表
|
|
||||||
export function queryActivityList(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/list', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
//查询活动详情
|
|
||||||
export function queryActivityDetail(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/detail', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
//查询抽奖次数
|
|
||||||
export function queryLuckyNum(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/lucky/num', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
//查询中奖结果
|
|
||||||
export function queryLuckyResult(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/lucky/result', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
//录入中奖结果
|
|
||||||
export function saveWinner(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/winner/save', |
|
||||||
method: 'POST', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
//核销
|
|
||||||
export function receiveWinner(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/winner/receive', |
|
||||||
method: 'POST', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
//查询中奖记录
|
|
||||||
export function getLuckyRecord(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/lucky/record', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//查询中奖记录
|
|
||||||
export function canRecieveGift(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/receive/user', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//查询中奖信息
|
|
||||||
export function queryWinnerInfo(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/winner/info', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//查询助力信息
|
|
||||||
export function queryHelpInfo(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/help/info', |
|
||||||
method: 'get', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
//保存助力信息
|
|
||||||
export function saveHelpInfo(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/help/save', |
|
||||||
method: 'post', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//微信登录获取手机号
|
|
||||||
export function wxLogin(data) { |
|
||||||
return request({ |
|
||||||
url: 'activity/applet/activity/wx/login', |
|
||||||
method: 'post', |
|
||||||
data, |
|
||||||
noToken: true |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@ -1,280 +1,266 @@ |
|||||||
<template> |
<template> |
||||||
<view class="scraping-happy" id="container"> |
<view class="scraping-happy" id="container"> |
||||||
<canvas canvas-id="scraping-happy" class="scraping__canvas" :disable-scroll="true" @touchstart="touchstart" |
<canvas |
||||||
@touchmove="touchmove" @touchend="touchend" /> |
canvas-id="scraping-happy" |
||||||
|
class="scraping__canvas" |
||||||
|
:disable-scroll="true" |
||||||
|
@touchstart="touchstart" |
||||||
|
@touchmove="touchmove" |
||||||
|
@touchend="touchend" |
||||||
|
/> |
||||||
<cover-view class="scraping__view"> |
<cover-view class="scraping__view"> |
||||||
{{ showText }} |
{{ showText }} |
||||||
</cover-view> |
</cover-view> |
||||||
<slot></slot> |
|
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
/** @name 水印配置默认值 **/ |
/** @name 水印配置默认值 **/ |
||||||
const WATERMARK = { |
const WATERMARK = { |
||||||
text: '刮一刮', |
text: '刮一刮', |
||||||
fontSize: 14, |
fontSize: 14, |
||||||
color: '#C5C5C5', |
color: '#C5C5C5', |
||||||
} |
} |
||||||
/** @name 标题配置默认值 **/ |
/** @name 标题配置默认值 **/ |
||||||
const TITLE = { |
const TITLE = { |
||||||
text: '刮一刮', |
text: '刮一刮', |
||||||
fontSize: 16, |
fontSize: 16, |
||||||
color: '#333', |
color: '#333', |
||||||
} |
} |
||||||
/** |
/** |
||||||
* @name 涂层配置默认值 |
* @name 涂层配置默认值 |
||||||
* @property { string } color 涂层颜色 |
* @property { string } color 涂层颜色 |
||||||
* @property { number } drawSize 清除涂层的画笔大小 |
* @property { number } drawSize 清除涂层的画笔大小 |
||||||
*/ |
*/ |
||||||
const MASK = { |
const MASK = { |
||||||
color: '#DDDDDD', |
color: '#DDDDDD', |
||||||
drawSize: 20, |
drawSize: 20, |
||||||
} |
} |
||||||
/** @name 容错值，解决部分机型涂层没有覆盖满的情况，主要原因是由于像素尺寸不同导致的，应尽可能让width与height保持整数 **/ |
/** @name 容错值，解决部分机型涂层没有覆盖满的情况，主要原因是由于像素尺寸不同导致的，应尽可能让width与height保持整数 **/ |
||||||
const TOLERANT = 3; |
const TOLERANT = 3; |
||||||
|
|
||||||
let ctx = null; |
let ctx = null; |
||||||
|
|
||||||
export default { |
export default { |
||||||
props: { |
props: { |
||||||
/** @name 涂层设置 **/ |
/** @name 涂层设置 **/ |
||||||
mask: { |
mask: { |
||||||
type: [String, Object], |
type: [String, Object], |
||||||
}, |
}, |
||||||
/** @name 水印设置 **/ |
/** @name 水印设置 **/ |
||||||
watermark: { |
watermark: { |
||||||
type: [String, Object], |
type: [String, Object], |
||||||
}, |
}, |
||||||
/** @name 提示文字 **/ |
/** @name 提示文字 **/ |
||||||
title: { |
title: { |
||||||
type: [String, Object], |
type: [String, Object], |
||||||
}, |
}, |
||||||
/** @name 刮开百分之多少直接消除图层，为0的时候不消除 **/ |
/** @name 刮开百分之多少直接消除图层，为0的时候不消除 **/ |
||||||
percentage: { |
percentage: { |
||||||
type: Number, |
type: Number, |
||||||
default: 40, |
default: 60, |
||||||
}, |
|
||||||
result: { |
|
||||||
type: String, |
|
||||||
default: '' |
|
||||||
} |
|
||||||
}, |
}, |
||||||
data() { |
result: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
width: 0, |
||||||
|
height: 0, |
||||||
|
touchX: 0, |
||||||
|
touchY: 0, |
||||||
|
showText: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
maskSetting() { |
||||||
return { |
return { |
||||||
width: 0, |
...MASK, |
||||||
height: 0, |
...(typeof this.mask === 'object' ? this.mask : { text: this.mask }), |
||||||
touchX: 0, |
|
||||||
touchY: 0, |
|
||||||
showText: '' |
|
||||||
} |
} |
||||||
}, |
}, |
||||||
computed: { |
watermarkSetting() { |
||||||
maskSetting() { |
return { |
||||||
return { |
...WATERMARK, |
||||||
...MASK, |
...(typeof this.watermark === 'object' ? this.watermark : { text: this.watermark }), |
||||||
...(typeof this.mask === 'object' ? this.mask : { |
}; |
||||||
text: this.mask |
}, |
||||||
}), |
titleSetting() { |
||||||
|
return { |
||||||
|
...TITLE, |
||||||
|
...(typeof this.title === 'object' ? this.title : { text: this.title }), |
||||||
|
}; |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// 获取画布实例 |
||||||
|
ctx = uni.createCanvasContext('scraping-happy', this); |
||||||
|
this.init(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** @name 初始化 **/ |
||||||
|
init() { |
||||||
|
const query = uni.createSelectorQuery().in(this); |
||||||
|
query |
||||||
|
.select('#container') |
||||||
|
.boundingClientRect(({ width, height }) => { |
||||||
|
this.width = width; |
||||||
|
this.height = height; |
||||||
|
setTimeout(() => { |
||||||
|
this.initCanvas(); |
||||||
|
this.showText = this.result |
||||||
|
}, 20) |
||||||
|
}) |
||||||
|
.exec(); |
||||||
|
}, |
||||||
|
/** @name 初始化canvas状态 **/ |
||||||
|
initCanvas() { |
||||||
|
const { width, height } = this; |
||||||
|
// 清空矩形内容 |
||||||
|
ctx.clearRect(0, 0, width, height); |
||||||
|
// 设置画笔颜色 |
||||||
|
ctx.setFillStyle(this.maskSetting.color); |
||||||
|
// 绘制矩形 |
||||||
|
ctx.fillRect(0, 0, width, height + TOLERANT); |
||||||
|
// 绘制水印 |
||||||
|
this.drawWatermark(); |
||||||
|
// 绘制提示文字 |
||||||
|
this.drawTitle(); |
||||||
|
// 绘制到canvas身上 |
||||||
|
ctx.draw(); |
||||||
|
}, |
||||||
|
/** @name 绘制水印 **/ |
||||||
|
drawWatermark() { |
||||||
|
if (!this.watermarkSetting.text) return; |
||||||
|
// 保存当前的绘图上下文 |
||||||
|
ctx.save(); |
||||||
|
// 旋转 |
||||||
|
ctx.rotate((-10 * Math.PI) / 180); |
||||||
|
// 水印具体绘制过程 |
||||||
|
const { width, height } = this; |
||||||
|
const watermarkWidth = this.watermarkSetting.text.length * this.watermarkSetting.fontSize; |
||||||
|
let x = 0; |
||||||
|
let y = 0; |
||||||
|
let i = 0; |
||||||
|
while ((x <= width * 5 || y <= height * 5) && i < 300) { |
||||||
|
ctx.setFillStyle(this.watermarkSetting.color); |
||||||
|
ctx.setFontSize(this.watermarkSetting.fontSize); |
||||||
|
ctx.fillText(this.watermarkSetting.text, x, y); |
||||||
|
x += watermarkWidth + watermarkWidth * 1.6; |
||||||
|
if (x > width && y <= height) { |
||||||
|
x = -Math.random() * 100; |
||||||
|
y += this.watermarkSetting.fontSize * 3; |
||||||
} |
} |
||||||
}, |
i++; |
||||||
watermarkSetting() { |
|
||||||
return { |
|
||||||
...WATERMARK, |
|
||||||
...(typeof this.watermark === 'object' ? this.watermark : { |
|
||||||
text: this.watermark |
|
||||||
}), |
|
||||||
}; |
|
||||||
}, |
|
||||||
titleSetting() { |
|
||||||
return { |
|
||||||
...TITLE, |
|
||||||
...(typeof this.title === 'object' ? this.title : { |
|
||||||
text: this.title |
|
||||||
}), |
|
||||||
}; |
|
||||||
} |
} |
||||||
|
ctx.restore(); |
||||||
}, |
}, |
||||||
mounted() { |
/** @name 绘制提示文字 **/ |
||||||
// 获取画布实例 |
drawTitle() { |
||||||
ctx = uni.createCanvasContext('scraping-happy', this); |
if (!this.titleSetting.text) return; |
||||||
this.init(); |
ctx.setTextAlign('center'); |
||||||
|
ctx.setTextBaseline('middle'); |
||||||
|
ctx.setFillStyle(this.titleSetting.color); |
||||||
|
ctx.setFontSize(this.titleSetting.fontSize); |
||||||
|
ctx.fillText(this.titleSetting.text, this.width / 2, this.height / 3); |
||||||
}, |
}, |
||||||
methods: { |
/** @name 触摸事件 **/ |
||||||
/** @name 初始化 **/ |
touchstart(e) { |
||||||
init() { |
this.touchX = e.touches[0].x; |
||||||
const query = uni.createSelectorQuery().in(this); |
this.touchY = e.touches[0].y; |
||||||
query |
}, |
||||||
.select('#container') |
async touchmove(e) { |
||||||
.boundingClientRect(({ |
// 把画笔到画布中的指定点 |
||||||
width, |
ctx.moveTo(this.touchX, this.touchY); |
||||||
height |
// 清除涂层 |
||||||
}) => { |
ctx.clearRect(this.touchX, this.touchY, this.maskSetting.drawSize, this.maskSetting.drawSize); |
||||||
this.width = width; |
ctx.draw(true); |
||||||
this.height = height; |
// 记录移动点位 |
||||||
setTimeout(() => { |
this.touchX = e.touches[0].x; |
||||||
this.initCanvas(); |
this.touchY = e.touches[0].y; |
||||||
this.showText = this.result |
|
||||||
}, 20) |
|
||||||
}) |
|
||||||
.exec(); |
|
||||||
}, |
|
||||||
/** @name 初始化canvas状态 **/ |
|
||||||
initCanvas() { |
|
||||||
const { |
|
||||||
width, |
|
||||||
height |
|
||||||
} = this; |
|
||||||
// 清空矩形内容 |
|
||||||
ctx.clearRect(0, 0, width, height); |
|
||||||
// 设置画笔颜色 |
|
||||||
ctx.setFillStyle(this.maskSetting.color); |
|
||||||
// 绘制矩形 |
|
||||||
ctx.fillRect(0, 0, width, height + TOLERANT); |
|
||||||
// 绘制水印 |
|
||||||
this.drawWatermark(); |
|
||||||
// 绘制提示文字 |
|
||||||
this.drawTitle(); |
|
||||||
// 绘制到canvas身上 |
|
||||||
ctx.draw(); |
|
||||||
}, |
|
||||||
/** @name 绘制水印 **/ |
|
||||||
drawWatermark() { |
|
||||||
if (!this.watermarkSetting.text) return; |
|
||||||
// 保存当前的绘图上下文 |
|
||||||
ctx.save(); |
|
||||||
// 旋转 |
|
||||||
ctx.rotate((-10 * Math.PI) / 180); |
|
||||||
// 水印具体绘制过程 |
|
||||||
const { |
|
||||||
width, |
|
||||||
height |
|
||||||
} = this; |
|
||||||
const watermarkWidth = this.watermarkSetting.text.length * this.watermarkSetting.fontSize; |
|
||||||
let x = 0; |
|
||||||
let y = 0; |
|
||||||
let i = 0; |
|
||||||
while ((x <= width * 5 || y <= height * 5) && i < 300) { |
|
||||||
ctx.setFillStyle(this.watermarkSetting.color); |
|
||||||
ctx.setFontSize(this.watermarkSetting.fontSize); |
|
||||||
ctx.fillText(this.watermarkSetting.text, x, y); |
|
||||||
x += watermarkWidth + watermarkWidth * 1.6; |
|
||||||
if (x > width && y <= height) { |
|
||||||
x = -Math.random() * 100; |
|
||||||
y += this.watermarkSetting.fontSize * 3; |
|
||||||
} |
|
||||||
i++; |
|
||||||
} |
|
||||||
ctx.restore(); |
|
||||||
}, |
|
||||||
/** @name 绘制提示文字 **/ |
|
||||||
drawTitle() { |
|
||||||
if (!this.titleSetting.text) return; |
|
||||||
ctx.setTextAlign('center'); |
|
||||||
ctx.setTextBaseline('middle'); |
|
||||||
ctx.setFillStyle(this.titleSetting.color); |
|
||||||
ctx.setFontSize(this.titleSetting.fontSize); |
|
||||||
ctx.fillText(this.titleSetting.text, this.width / 2, this.height / 3); |
|
||||||
}, |
|
||||||
/** @name 触摸事件 **/ |
|
||||||
touchstart(e) { |
|
||||||
this.touchX = e.touches[0].x; |
|
||||||
this.touchY = e.touches[0].y; |
|
||||||
}, |
|
||||||
async touchmove(e) { |
|
||||||
// 把画笔到画布中的指定点 |
|
||||||
ctx.moveTo(this.touchX, this.touchY); |
|
||||||
// 清除涂层 |
|
||||||
ctx.clearRect(this.touchX, this.touchY, this.maskSetting.drawSize, this.maskSetting.drawSize); |
|
||||||
ctx.draw(true); |
|
||||||
// 记录移动点位 |
|
||||||
this.touchX = e.touches[0].x; |
|
||||||
this.touchY = e.touches[0].y; |
|
||||||
|
|
||||||
// if (this.percentage > 0) { |
// if (this.percentage > 0) { |
||||||
// const clearPercent = await this.getClearMaskPercent(); |
// const clearPercent = await this.getClearMaskPercent(); |
||||||
// } |
// } |
||||||
}, |
}, |
||||||
async touchend() { |
async touchend() { |
||||||
if (this.percentage > 0) { |
if (this.percentage > 0) { |
||||||
const clearPercent = await this.getClearMaskPercent(); |
const clearPercent = await this.getClearMaskPercent(); |
||||||
if (clearPercent >= this.percentage) { |
if (clearPercent >= this.percentage) { |
||||||
ctx.moveTo(0, 0); |
ctx.moveTo(0, 0); |
||||||
ctx.clearRect(0, 0, this.width, this.height); |
ctx.clearRect(0, 0, this.width, this.height); |
||||||
ctx.stroke(); |
ctx.stroke(); |
||||||
ctx.draw(true); |
ctx.draw(true); |
||||||
this.$emit('complete') |
|
||||||
} |
|
||||||
} |
} |
||||||
}, |
|
||||||
/** @name 计算被清除的涂层百分比 **/ |
|
||||||
getClearMaskPercent() { |
|
||||||
return new Promise(resolve => { |
|
||||||
uni.canvasGetImageData({ |
|
||||||
canvasId: 'scraping-happy', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
width: this.width, |
|
||||||
height: this.height, |
|
||||||
success: res => { |
|
||||||
// 区域内所有点的像素信息，它是一个数组，数组中每 "4" 项表示一个点的 rgba 值 |
|
||||||
const allPointPixels = res.data; |
|
||||||
// 储存被清除的点-点的透明度 |
|
||||||
const clearPoint = []; |
|
||||||
// 取透明度来判断，如果透明度值小于一半，则判断为该点已经被清除 |
|
||||||
for (let i = 0; i < allPointPixels.length; i += 4) { |
|
||||||
if (allPointPixels[i + 3] < 128) { |
|
||||||
clearPoint.push(allPointPixels[i + 3]); |
|
||||||
} |
|
||||||
} |
|
||||||
// 已被清除的百分比 = 清除的点 / 全部的点 |
|
||||||
const percent = ( |
|
||||||
(clearPoint.length / (allPointPixels.length / 4)) * |
|
||||||
100 |
|
||||||
).toFixed(2); |
|
||||||
resolve(percent); |
|
||||||
}, |
|
||||||
fail: e => { |
|
||||||
console.log('canvasGetImageData', e); |
|
||||||
}, |
|
||||||
}, this); |
|
||||||
}); |
|
||||||
}, |
|
||||||
/** @name 重置 **/ |
|
||||||
reset() { |
|
||||||
this.initCanvas(); |
|
||||||
this.touchX = 0; |
|
||||||
this.touchY = 0; |
|
||||||
} |
} |
||||||
|
}, |
||||||
|
/** @name 计算被清除的涂层百分比 **/ |
||||||
|
getClearMaskPercent() { |
||||||
|
return new Promise(resolve => { |
||||||
|
uni.canvasGetImageData({ |
||||||
|
canvasId: 'scraping-happy', |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
width: this.width, |
||||||
|
height: this.height, |
||||||
|
success: res => { |
||||||
|
// 区域内所有点的像素信息，它是一个数组，数组中每 "4" 项表示一个点的 rgba 值 |
||||||
|
const allPointPixels = res.data; |
||||||
|
// 储存被清除的点-点的透明度 |
||||||
|
const clearPoint = []; |
||||||
|
// 取透明度来判断，如果透明度值小于一半，则判断为该点已经被清除 |
||||||
|
for (let i = 0; i < allPointPixels.length; i += 4) { |
||||||
|
if (allPointPixels[i + 3] < 128) { |
||||||
|
clearPoint.push(allPointPixels[i + 3]); |
||||||
|
} |
||||||
|
} |
||||||
|
// 已被清除的百分比 = 清除的点 / 全部的点 |
||||||
|
const percent = ( |
||||||
|
(clearPoint.length / (allPointPixels.length / 4)) * |
||||||
|
100 |
||||||
|
).toFixed(2); |
||||||
|
resolve(percent); |
||||||
|
}, |
||||||
|
fail: e => { |
||||||
|
console.log('canvasGetImageData', e); |
||||||
|
}, |
||||||
|
}, this); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** @name 重置 **/ |
||||||
|
reset() { |
||||||
|
this.initCanvas(); |
||||||
|
this.touchX = 0; |
||||||
|
this.touchY = 0; |
||||||
} |
} |
||||||
}; |
} |
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
<style> |
||||||
.scraping-happy { |
.scraping-happy { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 200rpx; |
height: 200rpx; |
||||||
position: relative; |
position: relative; |
||||||
display: flex; |
display: flex; |
||||||
justify-content: center; |
justify-content: center; |
||||||
align-items: center; |
align-items: center; |
||||||
} |
} |
||||||
|
.scraping__canvas { |
||||||
.scraping__canvas { |
width: 100%; |
||||||
width: 100%; |
height: 100%; |
||||||
height: 100%; |
position: absolute; |
||||||
position: absolute; |
z-index: 10; |
||||||
z-index: 10; |
/* background-color: red; */ |
||||||
/* background-color: red; */ |
display: inline-block; |
||||||
display: inline-block; |
} |
||||||
} |
.scraping__view { |
||||||
|
position: absolute; |
||||||
.scraping__view { |
z-index: 1; |
||||||
position: absolute; |
color: #f29100; |
||||||
z-index: 1; |
font-size: 20px; |
||||||
color: #f29100; |
font-weight: bold; |
||||||
font-size: 20px; |
} |
||||||
font-weight: bold; |
</style> |
||||||
letter-spacing: 8px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|||||||
@ -1,153 +1,137 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<view> |
||||||
<view v-if="getLoading" class="wp100 relative" style="height: 100vh;"> |
<view v-if="getLoading" class="wp100 relative" style="height: 100vh;"> |
||||||
<image class="wp100" mode="widthFix" |
<image class="wp100" mode="widthFix" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E8%80%83%E8%AF%95%E6%8F%90%E9%86%92_20230906135037.png"></image> |
||||||
src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E8%80%83%E8%AF%95%E6%8F%90%E9%86%92_20230906135037.png"> |
<view class="wp100 flex ai-c jc-c" style="position: absolute;bottom: 0;left: 0;padding-bottom: 124rpx;"> |
||||||
</image> |
<image style="width: 452rpx;" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E9%87%91%E6%AD%A6%E8%81%94_20230831123333.png" mode="widthFix"></image> |
||||||
<view class="wp100 flex ai-c jc-c" style="position: absolute;bottom: 0;left: 0;padding-bottom: 124rpx;"> |
</view> |
||||||
<image style="width: 452rpx;" |
</view> |
||||||
src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E9%87%91%E6%AD%A6%E8%81%94_20230831123333.png" |
<view v-if="!getLoading"> |
||||||
mode="widthFix"></image> |
<j-navbar :isBack="false">金武联驾考</j-navbar> |
||||||
|
<u-sticky bgColor="#fff"> |
||||||
|
<u-tabs :list="categoryList" :current="curTab" :scrollable="false" @change="changeCategory"></u-tabs> |
||||||
|
</u-sticky> |
||||||
|
<view class="m10tb"> |
||||||
|
<u-swiper :list="activityList" @click="handleToActivity"></u-swiper> |
||||||
</view> |
</view> |
||||||
</view> |
<view style="background-color: rgb(245, 245, 245);"> |
||||||
<view v-if="!getLoading"> |
<template v-if="subject=='1' || subject=='4'"> |
||||||
<!-- <j-navbar :isBack="false">金武联驾考</j-navbar> --> |
<Subject1 :subject="subject" :rightList="rightList" :wrongList="wrongList" /> |
||||||
<u-sticky bgColor="#fff"> |
</template> |
||||||
<u-tabs :list="categoryList" :current="curTab" :scrollable="false" @change="changeCategory"></u-tabs> |
<template v-else> |
||||||
</u-sticky> |
<Subject2 :subject="subject" ref="subjectRef" /> |
||||||
<view class="m10tb" v-if="activityList&&activityList.length"> |
</template> |
||||||
<u-swiper class="acticity" keyName="image" :list="activityList" @click="handleToActivity"></u-swiper> |
</view> |
||||||
</view> |
</view> |
||||||
<view style="background-color: rgb(245, 245, 245);"> |
</view> |
||||||
<template v-if="subject=='1' || subject=='4'"> |
|
||||||
<Subject1 :subject="subject" :rightList="rightList" :wrongList="wrongList" /> |
|
||||||
</template> |
|
||||||
<template v-else> |
|
||||||
<Subject2 :subject="subject" ref="subjectRef" /> |
|
||||||
</template> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import { |
import { |
||||||
mapState, |
mapState, |
||||||
mapActions |
mapActions |
||||||
} from 'pinia' //引入映射函数 |
} from 'pinia' //引入映射函数 |
||||||
import useQuestionStore from '@/jtools/store/question' //引入store |
import useQuestionStore from '@/jtools/store/question' //引入store |
||||||
import useUserStore from '@/jtools/store/user' |
import storage from '@/jtools/storage'; |
||||||
import storage from '@/jtools/storage'; |
import { |
||||||
import { |
querySysConfigList, |
||||||
querySysConfigList, |
} from '@/jtools/api/question'; |
||||||
} from '@/jtools/api/question'; |
import Subject1 from "./components/Subject1"; |
||||||
import Subject1 from "./components/Subject1"; |
import Subject2 from "./components/Subject2"; |
||||||
import Subject2 from "./components/Subject2"; |
export default { |
||||||
import { |
components: { |
||||||
queryActivityList |
Subject1, |
||||||
} from '@/jtools/api/activity'; |
Subject2 |
||||||
export default { |
}, |
||||||
components: { |
data() { |
||||||
Subject1, |
return { |
||||||
Subject2 |
show:false, |
||||||
}, |
subject: storage.get('curSubject') || '1', |
||||||
data() { |
curTab: 0, |
||||||
return { |
searchValue: '', |
||||||
getLoading: true, |
cityName: '', |
||||||
show: false, |
categoryList: [], |
||||||
subject: storage.get('curSubject') || '1', |
rightList: storage.get(`rightList_subject${this.subject}`) || [], |
||||||
curTab: 0, |
wrongList: storage.get(`wrongList_subject${this.subject}`) || [], |
||||||
searchValue: '', |
activityList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'] |
||||||
cityName: '', |
}; |
||||||
categoryList: [], |
}, |
||||||
rightList: storage.get(`rightList_subject${this.subject}`) || [], |
onShow() { |
||||||
wrongList: storage.get(`wrongList_subject${this.subject}`) || [], |
this.show=true |
||||||
activityList: [] |
this.getSubjectConfig() |
||||||
}; |
if (this.subject == '1' || this.subject == '4') { |
||||||
}, |
this.rightList = storage.get(`rightList_subject${this.subject}`) || [] |
||||||
onShow() { |
this.wrongList = storage.get(`wrongList_subject${this.subject}`) || [] |
||||||
setTimeout(() => { |
} |
||||||
this.getLoading = false |
if(this.subject=='2'||this.subject=='3'){ |
||||||
this.show = true |
this.$refs.subjectRef.getDiverType() |
||||||
}, 100); |
} |
||||||
this.getSubjectConfig() |
}, |
||||||
if (this.subject == '1' || this.subject == '4') { |
onHide(){ |
||||||
this.rightList = storage.get(`rightList_subject${this.subject}`) || [] |
this.show=false |
||||||
this.wrongList = storage.get(`wrongList_subject${this.subject}`) || [] |
}, |
||||||
} |
computed: { |
||||||
if (this.subject == '2' || this.subject == '3') { |
...mapState(useQuestionStore, ["loading_subject4", "loading_subject1","curSubject","orderQuestion_subject1","orderQuestion_subject4"]), //映射函数，取出tagslist |
||||||
this.$refs.subjectRef.getDiverType() |
getLoading() { |
||||||
} |
return this.loading_subject4 && this.loading_subject1 |
||||||
this.queryActivityList() |
} |
||||||
}, |
}, |
||||||
onHide() { |
watch:{ |
||||||
this.show = false |
getLoading(newVal){ |
||||||
}, |
if(this.show){ |
||||||
computed: { |
if(newVal){ |
||||||
...mapState(useQuestionStore, ["loading_subject4", "loading_subject1", "curSubject", "orderQuestion_subject1", |
if(this.loading_subject4 && this.loading_subject1){ |
||||||
"orderQuestion_subject4" |
uni.hideTabBar(); |
||||||
]), //映射函数，取出tagslist |
} |
||||||
}, |
}else{ |
||||||
methods: { |
uni.showTabBar() |
||||||
...mapActions(useQuestionStore, ['getOrderQuestion_sub4', 'getOrderQuestion_sub1', 'changeSubject']), |
} |
||||||
//获取科目配置 |
} |
||||||
getSubjectConfig() { |
} |
||||||
const carTypeId = storage.get('carType') || '1001' |
}, |
||||||
querySysConfigList(carTypeId, 'Subject').then(resp => { |
methods: { |
||||||
if (resp.code === '0000') { |
...mapActions(useQuestionStore, ['getOrderQuestion_sub4', 'getOrderQuestion_sub1', 'changeSubject']), |
||||||
this.categoryList = resp.data.map(item => { |
//获取科目配置 |
||||||
return { |
getSubjectConfig() { |
||||||
...item, |
const carTypeId = storage.get('carType') || '1001' |
||||||
name: item.configItemName |
querySysConfigList(carTypeId, 'Subject').then(resp => { |
||||||
} |
if (resp.code === '0000') { |
||||||
}) |
this.categoryList = resp.data.map(item => { |
||||||
this.subject = storage.get('curSubject') || '1', |
return { |
||||||
this.curTab = this.categoryList.findIndex(item => item.configItemCode == this.subject) || 0 |
...item, |
||||||
} |
name: item.configItemName |
||||||
}) |
} |
||||||
}, |
}) |
||||||
//切换科目 |
this.subject=storage.get('curSubject') || '1', |
||||||
async changeCategory(val) { |
this.curTab=this.categoryList.findIndex(item=>item.configItemCode==this.subject) |
||||||
this.subject = val.configItemCode |
} |
||||||
this.changeSubject(this.subject) |
}) |
||||||
if (this.subject == '1' || this.subject == '4') { |
}, |
||||||
this.rightList = storage.get(`rightList_subject${this.subject}`) || [] |
//切换科目 |
||||||
this.wrongList = storage.get(`wrongList_subject${this.subject}`) || [] |
async changeCategory(val) { |
||||||
} else { |
this.subject = val.configItemCode |
||||||
setTimeout(() => { |
this.changeSubject(this.subject) |
||||||
this.$refs.subjectRef.getDiverType() |
if (this.subject == '1' || this.subject == '4') { |
||||||
}, 100) |
this.rightList = storage.get(`rightList_subject${this.subject}`) || [] |
||||||
} |
this.wrongList = storage.get(`wrongList_subject${this.subject}`) || [] |
||||||
}, |
} else { |
||||||
//查询活动列表 |
setTimeout(() => { |
||||||
queryActivityList() { |
this.$refs.subjectRef.getDiverType() |
||||||
queryActivityList({ |
}, 100) |
||||||
schoolId: useUserStore().userInfo?.schoolId || '' |
} |
||||||
}).then(resp => { |
}, |
||||||
this.activityList = resp.data.map(item => ({ |
|
||||||
...item, |
|
||||||
image: 'https://jwl.ahduima.com' + item.image |
|
||||||
})); |
|
||||||
}) |
|
||||||
}, |
|
||||||
// 去活动 |
// 去活动 |
||||||
handleToActivity(index) { |
handleToActivity(index) { |
||||||
let detailId; |
|
||||||
this.activityList.find((item, index1) => { |
|
||||||
if (index === index1) { |
|
||||||
detailId = item.detailId; |
|
||||||
} |
|
||||||
}) |
|
||||||
uni.navigateTo({ |
uni.navigateTo({ |
||||||
url: '/pages/index/activity?detailId=' + detailId, |
url: '/pages/index/activity' |
||||||
}) |
}) |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
::v-deep .u-tabs__wrapper__nav__line { |
::v-deep .u-tabs__wrapper__nav__line { |
||||||
background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important; |
background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important; |
||||||
bottom: 14rpx !important; |
bottom: 14rpx !important; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
@ -1,254 +0,0 @@ |
|||||||
<template> |
|
||||||
<view style="padding-bottom: 50px;background-color: #C5121B;"> |
|
||||||
<image class="wp100 img" mode="widthFix" |
|
||||||
src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E5%8A%A9%E5%8A%9B%E4%B8%BB%E5%9B%BE.jpg"> |
|
||||||
</image> |
|
||||||
<view class="relative tip">邀请好友帮助你进行助力即可有机会领取奖品</view> |
|
||||||
<view class="relative help_div"> |
|
||||||
<!-- --> |
|
||||||
<view v-if="type == 1" class="relative help_card"> |
|
||||||
<view class="relative help_tip"> |
|
||||||
还差{{diffNum}}位好友助力即可领取奖品: |
|
||||||
</view> |
|
||||||
<view v-if="winnerInfo.awards != undefined" class="relative help_tip" style="font-size: 40rpx;"> |
|
||||||
{{winnerInfo.awards}} |
|
||||||
</view> |
|
||||||
<view class="p20"> |
|
||||||
<u-grid :border="false" col="3"> |
|
||||||
<u-grid-item v-for="(item, index) in helpUserList" :key="index"> |
|
||||||
<u-avatar v-if="item.id" class="p10tb border" size="120rpx" :src="item.avatarUrl"></u-avatar> |
|
||||||
<view v-else class="p10tb"> |
|
||||||
<view class="avatar-text"> |
|
||||||
<u-avatar bg-color="#fff" color="#ccc" size="120rpx" text="邀"></u-avatar> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</u-grid-item> |
|
||||||
</u-grid> |
|
||||||
</view> |
|
||||||
<view class="help_btn"> |
|
||||||
<button open-type="share" class="help_btn_font"> 邀请好友助力</button> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
|
|
||||||
<view v-if="type == 2" class="relative help_card"> |
|
||||||
<view class="relative help_list" style="top: 200rpx;"> |
|
||||||
<view v-if="winnerInfo?.activityName" class="help_tip" |
|
||||||
style="font-size: 40rpx; margin: 25rpx 0rpx;"> |
|
||||||
{{winnerInfo?.activityName}} |
|
||||||
</view> |
|
||||||
<view v-if="winnerInfo.schoolName != undefined" class="help_tip"> |
|
||||||
举办单位：{{winnerInfo.schoolName}} |
|
||||||
</view> |
|
||||||
<view v-if="winnerInfo.awards != undefined" class="help_tip" style="font-size: 45rpx;margin: 25rpx 0rpx;"> |
|
||||||
奖品：{{winnerInfo.awards}} |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
|
|
||||||
<view class="help_btn"> |
|
||||||
<button class="help_btn_font" open-type="chooseAvatar" @chooseavatar="handleHelp" |
|
||||||
:disabled="disBtn">帮好友助力</button> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import useUserStore from '@/jtools/store/user' |
|
||||||
import { |
|
||||||
queryActivityDetail, |
|
||||||
queryHelpInfo, |
|
||||||
saveHelpInfo, |
|
||||||
queryWinnerInfo |
|
||||||
} from '@/jtools/api/activity' |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
winnerId: undefined, |
|
||||||
helpUserList: [], |
|
||||||
drawNum: 0, |
|
||||||
phone: undefined, |
|
||||||
type: 2, |
|
||||||
winnerInfo: undefined, |
|
||||||
disBtn: false |
|
||||||
} |
|
||||||
}, |
|
||||||
onLoad(op) { |
|
||||||
this.winnerId = op.id |
|
||||||
// this.type = op.type ? Number(op.type) : 1 |
|
||||||
this.phone = useUserStore().userInfo?.phone || undefined |
|
||||||
console.log(this.phone) |
|
||||||
this.getWinnerInfo() |
|
||||||
this.getHelpInfo() |
|
||||||
this.disBtn = false |
|
||||||
|
|
||||||
}, |
|
||||||
onShareAppMessage(res) { |
|
||||||
if (res.from === 'button') { // 来自页面内分享按钮 |
|
||||||
console.log(res.target) |
|
||||||
} |
|
||||||
return { |
|
||||||
title: '我正在参与领奖活动柜，请帮我助力', |
|
||||||
path: '/pages/me/help?id=' + this.winnerId + '&type=2' |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
//查询中奖信息 |
|
||||||
getWinnerInfo() { |
|
||||||
queryWinnerInfo({ |
|
||||||
winnerId: this.winnerId |
|
||||||
}).then(resp => { |
|
||||||
if (resp.code == 200) { |
|
||||||
console.log(resp) |
|
||||||
this.winnerInfo = resp.data; |
|
||||||
if (this.phone && this.winnerInfo.phone == this.phone) { |
|
||||||
this.type = 1 |
|
||||||
} else { |
|
||||||
this.type = 2 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
}, |
|
||||||
//查询助力信息 |
|
||||||
getHelpInfo() { |
|
||||||
queryHelpInfo({ |
|
||||||
winnerId: this.winnerId |
|
||||||
}).then(resp => { |
|
||||||
if (resp.code == 200) { |
|
||||||
this.drawNum = resp.data.helpNum; |
|
||||||
const list = resp.data.helpUsers.map(item => ({ |
|
||||||
...item, |
|
||||||
avatarUrl: 'https://jwl.ahduima.com' + item.avatarUrl |
|
||||||
})); |
|
||||||
this.diffNum = (this.drawNum - list.length) < 0 ? 0 : (this.drawNum - list.length); |
|
||||||
const arr = new Array(this.diffNum).fill({}) |
|
||||||
this.helpUserList = [...list,...arr] |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
//点击助力 |
|
||||||
handleHelp(e) { |
|
||||||
this.disBtn = false |
|
||||||
uni.login({ |
|
||||||
provider: 'weixin', //使用微信登录 |
|
||||||
success: (loginRes) => { |
|
||||||
console.log(loginRes); |
|
||||||
uni.uploadFile({ |
|
||||||
url: 'https://jwl.ahduima.com/activity/applet/activity/help/save', |
|
||||||
// url: 'http://192.168.1.6:8089/applet/activity/help/save', |
|
||||||
filePath: e.detail.avatarUrl, |
|
||||||
name: 'file', |
|
||||||
formData: { |
|
||||||
'code': loginRes.code, |
|
||||||
'winnerId': this.winnerId, |
|
||||||
}, |
|
||||||
success: (uploadFileRes) => { |
|
||||||
console.log(uploadFileRes.data); |
|
||||||
let resp = JSON.parse(uploadFileRes.data); |
|
||||||
console.log(resp); |
|
||||||
|
|
||||||
if (resp.code == 200) { |
|
||||||
uni.showToast({ |
|
||||||
icon: 'none', |
|
||||||
title: `助力成功` |
|
||||||
}) |
|
||||||
this.disBtn = true |
|
||||||
} else { |
|
||||||
uni.showToast({ |
|
||||||
icon: 'error', |
|
||||||
title: resp.msg |
|
||||||
}) |
|
||||||
this.disBtn = true |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.img { |
|
||||||
top: -130rpx !important; |
|
||||||
} |
|
||||||
|
|
||||||
.tip { |
|
||||||
height: 75px; |
|
||||||
font-family: PingFang SC; |
|
||||||
font-weight: 400; |
|
||||||
color: #FEFEFE; |
|
||||||
line-height: 48px; |
|
||||||
top: -520rpx; |
|
||||||
text-align: center; |
|
||||||
font-size: 35rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-text { |
|
||||||
border-radius: 50%; |
|
||||||
border: 1px dashed #ccc; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.help_div { |
|
||||||
width: 710rpx; |
|
||||||
height: 996rpx; |
|
||||||
top: -560rpx; |
|
||||||
margin-left: 20rpx; |
|
||||||
margin-right: 20rpx; |
|
||||||
background: linear-gradient(0deg, #F33D2F 100%, rgba(197, 18, 27, 0.01) 0%); |
|
||||||
border-radius: 40rpx; |
|
||||||
|
|
||||||
|
|
||||||
.help_card { |
|
||||||
width: 630rpx; |
|
||||||
height: 886rpx; |
|
||||||
margin: 0rpx 39rpx; |
|
||||||
top: 55rpx; |
|
||||||
background: #FFFFFF; |
|
||||||
border-radius: 24rpx; |
|
||||||
|
|
||||||
.help_tip { |
|
||||||
text-align: center; |
|
||||||
font-size: 32rpx; |
|
||||||
font-family: PingFang SC; |
|
||||||
font-weight: 400; |
|
||||||
color: #010101; |
|
||||||
line-height: 55rpx; |
|
||||||
top: 15rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.help_list { |
|
||||||
margin: 68rpx 25rpx 25rpx 20rpx; |
|
||||||
height: 580rpx; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.help_btn { |
|
||||||
text-align: center; |
|
||||||
margin: 0 75rpx; |
|
||||||
margin-bottom: 30rpx; |
|
||||||
width: 500rpx; |
|
||||||
height: 86rpx; |
|
||||||
background: linear-gradient(0deg, #DE4224 0%, #B81706 100%); |
|
||||||
border-radius: 43rpx; |
|
||||||
|
|
||||||
.help_btn_font { |
|
||||||
font-size: 32rpx; |
|
||||||
font-family: PingFang SC; |
|
||||||
font-weight: 400; |
|
||||||
color: #FFFFFF; |
|
||||||
line-height: 86rpx; |
|
||||||
background: center; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 11 KiB |
Loading…
Reference in new issue