pull/35/head
qsh
8 months ago
parent
056ca965b3
commit
ab05529015
@ -0,0 +1,75 @@ |
||||
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 |
||||
}); |
||||
} |
||||
@ -1,266 +1,280 @@ |
||||
<template> |
||||
<view class="scraping-happy" id="container"> |
||||
<canvas |
||||
canvas-id="scraping-happy" |
||||
class="scraping__canvas" |
||||
:disable-scroll="true" |
||||
@touchstart="touchstart" |
||||
@touchmove="touchmove" |
||||
@touchend="touchend" |
||||
/> |
||||
<canvas canvas-id="scraping-happy" class="scraping__canvas" :disable-scroll="true" @touchstart="touchstart" |
||||
@touchmove="touchmove" @touchend="touchend" /> |
||||
<cover-view class="scraping__view"> |
||||
{{ showText }} |
||||
</cover-view> |
||||
<slot></slot> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
/** @name 水印配置默认值 **/ |
||||
const WATERMARK = { |
||||
text: '刮一刮', |
||||
fontSize: 14, |
||||
color: '#C5C5C5', |
||||
} |
||||
/** @name 标题配置默认值 **/ |
||||
const TITLE = { |
||||
text: '刮一刮', |
||||
fontSize: 16, |
||||
color: '#333', |
||||
} |
||||
/** |
||||
* @name 涂层配置默认值 |
||||
* @property { string } color 涂层颜色 |
||||
* @property { number } drawSize 清除涂层的画笔大小 |
||||
*/ |
||||
const MASK = { |
||||
color: '#DDDDDD', |
||||
drawSize: 20, |
||||
} |
||||
/** @name 容错值，解决部分机型涂层没有覆盖满的情况，主要原因是由于像素尺寸不同导致的，应尽可能让width与height保持整数 **/ |
||||
const TOLERANT = 3; |
||||
/** @name 水印配置默认值 **/ |
||||
const WATERMARK = { |
||||
text: '刮一刮', |
||||
fontSize: 14, |
||||
color: '#C5C5C5', |
||||
} |
||||
/** @name 标题配置默认值 **/ |
||||
const TITLE = { |
||||
text: '刮一刮', |
||||
fontSize: 16, |
||||
color: '#333', |
||||
} |
||||
/** |
||||
* @name 涂层配置默认值 |
||||
* @property { string } color 涂层颜色 |
||||
* @property { number } drawSize 清除涂层的画笔大小 |
||||
*/ |
||||
const MASK = { |
||||
color: '#DDDDDD', |
||||
drawSize: 20, |
||||
} |
||||
/** @name 容错值，解决部分机型涂层没有覆盖满的情况，主要原因是由于像素尺寸不同导致的，应尽可能让width与height保持整数 **/ |
||||
const TOLERANT = 3; |
||||
|
||||
let ctx = null; |
||||
let ctx = null; |
||||
|
||||
export default { |
||||
props: { |
||||
/** @name 涂层设置 **/ |
||||
mask: { |
||||
type: [String, Object], |
||||
}, |
||||
/** @name 水印设置 **/ |
||||
watermark: { |
||||
type: [String, Object], |
||||
}, |
||||
/** @name 提示文字 **/ |
||||
title: { |
||||
type: [String, Object], |
||||
}, |
||||
/** @name 刮开百分之多少直接消除图层，为0的时候不消除 **/ |
||||
percentage: { |
||||
type: Number, |
||||
default: 60, |
||||
}, |
||||
result: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
width: 0, |
||||
height: 0, |
||||
touchX: 0, |
||||
touchY: 0, |
||||
showText: '' |
||||
} |
||||
}, |
||||
computed: { |
||||
maskSetting() { |
||||
return { |
||||
...MASK, |
||||
...(typeof this.mask === 'object' ? this.mask : { text: this.mask }), |
||||
export default { |
||||
props: { |
||||
/** @name 涂层设置 **/ |
||||
mask: { |
||||
type: [String, Object], |
||||
}, |
||||
/** @name 水印设置 **/ |
||||
watermark: { |
||||
type: [String, Object], |
||||
}, |
||||
/** @name 提示文字 **/ |
||||
title: { |
||||
type: [String, Object], |
||||
}, |
||||
/** @name 刮开百分之多少直接消除图层，为0的时候不消除 **/ |
||||
percentage: { |
||||
type: Number, |
||||
default: 40, |
||||
}, |
||||
result: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
watermarkSetting() { |
||||
data() { |
||||
return { |
||||
...WATERMARK, |
||||
...(typeof this.watermark === 'object' ? this.watermark : { text: this.watermark }), |
||||
}; |
||||
}, |
||||
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(); |
||||
width: 0, |
||||
height: 0, |
||||
touchX: 0, |
||||
touchY: 0, |
||||
showText: '' |
||||
} |
||||
}, |
||||
/** @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; |
||||
computed: { |
||||
maskSetting() { |
||||
return { |
||||
...MASK, |
||||
...(typeof this.mask === 'object' ? this.mask : { |
||||
text: this.mask |
||||
}), |
||||
} |
||||
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(); |
||||
}, |
||||
/** @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; |
||||
mounted() { |
||||
// 获取画布实例 |
||||
ctx = uni.createCanvasContext('scraping-happy', this); |
||||
this.init(); |
||||
}, |
||||
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; |
||||
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++; |
||||
} |
||||
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) { |
||||
// const clearPercent = await this.getClearMaskPercent(); |
||||
// } |
||||
}, |
||||
async touchend() { |
||||
if (this.percentage > 0) { |
||||
const clearPercent = await this.getClearMaskPercent(); |
||||
if (clearPercent >= this.percentage) { |
||||
ctx.moveTo(0, 0); |
||||
ctx.clearRect(0, 0, this.width, this.height); |
||||
ctx.stroke(); |
||||
ctx.draw(true); |
||||
// if (this.percentage > 0) { |
||||
// const clearPercent = await this.getClearMaskPercent(); |
||||
// } |
||||
}, |
||||
async touchend() { |
||||
if (this.percentage > 0) { |
||||
const clearPercent = await this.getClearMaskPercent(); |
||||
if (clearPercent >= this.percentage) { |
||||
ctx.moveTo(0, 0); |
||||
ctx.clearRect(0, 0, this.width, this.height); |
||||
ctx.stroke(); |
||||
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]); |
||||
}, |
||||
/** @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; |
||||
// 已被清除的百分比 = 清除的点 / 全部的点 |
||||
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> |
||||
|
||||
<style> |
||||
.scraping-happy { |
||||
width: 100%; |
||||
height: 200rpx; |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.scraping__canvas { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
z-index: 10; |
||||
/* background-color: red; */ |
||||
display: inline-block; |
||||
} |
||||
.scraping__view { |
||||
position: absolute; |
||||
z-index: 1; |
||||
color: #f29100; |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
} |
||||
.scraping-happy { |
||||
width: 100%; |
||||
height: 200rpx; |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.scraping__canvas { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
z-index: 10; |
||||
/* background-color: red; */ |
||||
display: inline-block; |
||||
} |
||||
|
||||
.scraping__view { |
||||
position: absolute; |
||||
z-index: 1; |
||||
color: #f29100; |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
letter-spacing: 8px; |
||||
} |
||||
</style> |
||||
@ -1,137 +1,165 @@ |
||||
<template> |
||||
<view> |
||||
<view v-if="getLoading" class="wp100 relative" style="height: 100vh;"> |
||||
<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> |
||||
<view class="wp100 flex ai-c jc-c" style="position: absolute;bottom: 0;left: 0;padding-bottom: 124rpx;"> |
||||
<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> |
||||
</view> |
||||
<view v-if="!getLoading"> |
||||
<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 v-if="getLoading" class="wp100 relative" style="height: 100vh;"> |
||||
<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> |
||||
<view class="wp100 flex ai-c jc-c" style="position: absolute;bottom: 0;left: 0;padding-bottom: 124rpx;"> |
||||
<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> |
||||
<view style="background-color: rgb(245, 245, 245);"> |
||||
<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> |
||||
</view> |
||||
<view v-if="!getLoading"> |
||||
<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" v-if="activityList&&activityList.length"> |
||||
<u-swiper class="acticity" keyName="image" :list="activityList" @click="handleToActivity"></u-swiper> |
||||
</view> |
||||
<view style="background-color: rgb(245, 245, 245);"> |
||||
<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> |
||||
<script> |
||||
import { |
||||
mapState, |
||||
mapActions |
||||
} from 'pinia' //引入映射函数 |
||||
import useQuestionStore from '@/jtools/store/question' //引入store |
||||
import storage from '@/jtools/storage'; |
||||
import { |
||||
querySysConfigList, |
||||
} from '@/jtools/api/question'; |
||||
import Subject1 from "./components/Subject1"; |
||||
import Subject2 from "./components/Subject2"; |
||||
export default { |
||||
components: { |
||||
Subject1, |
||||
Subject2 |
||||
}, |
||||
data() { |
||||
return { |
||||
show:false, |
||||
subject: storage.get('curSubject') || '1', |
||||
curTab: 0, |
||||
searchValue: '', |
||||
cityName: '', |
||||
categoryList: [], |
||||
rightList: storage.get(`rightList_subject${this.subject}`) || [], |
||||
wrongList: storage.get(`wrongList_subject${this.subject}`) || [], |
||||
activityList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'] |
||||
}; |
||||
}, |
||||
onShow() { |
||||
this.show=true |
||||
this.getSubjectConfig() |
||||
if (this.subject == '1' || this.subject == '4') { |
||||
this.rightList = storage.get(`rightList_subject${this.subject}`) || [] |
||||
this.wrongList = storage.get(`wrongList_subject${this.subject}`) || [] |
||||
} |
||||
if(this.subject=='2'||this.subject=='3'){ |
||||
this.$refs.subjectRef.getDiverType() |
||||
} |
||||
}, |
||||
onHide(){ |
||||
this.show=false |
||||
}, |
||||
computed: { |
||||
...mapState(useQuestionStore, ["loading_subject4", "loading_subject1","curSubject","orderQuestion_subject1","orderQuestion_subject4"]), //映射函数，取出tagslist |
||||
getLoading() { |
||||
return this.loading_subject4 && this.loading_subject1 |
||||
} |
||||
}, |
||||
watch:{ |
||||
getLoading(newVal){ |
||||
if(this.show){ |
||||
if(newVal){ |
||||
if(this.loading_subject4 && this.loading_subject1){ |
||||
uni.hideTabBar(); |
||||
} |
||||
}else{ |
||||
uni.showTabBar() |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
...mapActions(useQuestionStore, ['getOrderQuestion_sub4', 'getOrderQuestion_sub1', 'changeSubject']), |
||||
//获取科目配置 |
||||
getSubjectConfig() { |
||||
const carTypeId = storage.get('carType') || '1001' |
||||
querySysConfigList(carTypeId, 'Subject').then(resp => { |
||||
if (resp.code === '0000') { |
||||
this.categoryList = resp.data.map(item => { |
||||
return { |
||||
...item, |
||||
name: item.configItemName |
||||
} |
||||
}) |
||||
this.subject=storage.get('curSubject') || '1', |
||||
this.curTab=this.categoryList.findIndex(item=>item.configItemCode==this.subject) |
||||
} |
||||
}) |
||||
}, |
||||
//切换科目 |
||||
async changeCategory(val) { |
||||
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}`) || [] |
||||
} else { |
||||
setTimeout(() => { |
||||
this.$refs.subjectRef.getDiverType() |
||||
}, 100) |
||||
} |
||||
}, |
||||
import { |
||||
mapState, |
||||
mapActions |
||||
} from 'pinia' //引入映射函数 |
||||
import useQuestionStore from '@/jtools/store/question' //引入store |
||||
import useUserStore from '@/jtools/store/user' |
||||
import storage from '@/jtools/storage'; |
||||
import { |
||||
querySysConfigList, |
||||
} from '@/jtools/api/question'; |
||||
import Subject1 from "./components/Subject1"; |
||||
import Subject2 from "./components/Subject2"; |
||||
import { |
||||
queryActivityList |
||||
} from '@/jtools/api/activity'; |
||||
export default { |
||||
components: { |
||||
Subject1, |
||||
Subject2 |
||||
}, |
||||
data() { |
||||
return { |
||||
show: false, |
||||
subject: storage.get('curSubject') || '1', |
||||
curTab: 0, |
||||
searchValue: '', |
||||
cityName: '', |
||||
categoryList: [], |
||||
rightList: storage.get(`rightList_subject${this.subject}`) || [], |
||||
wrongList: storage.get(`wrongList_subject${this.subject}`) || [], |
||||
activityList: [] |
||||
}; |
||||
}, |
||||
onShow() { |
||||
this.show = true |
||||
this.getSubjectConfig() |
||||
if (this.subject == '1' || this.subject == '4') { |
||||
this.rightList = storage.get(`rightList_subject${this.subject}`) || [] |
||||
this.wrongList = storage.get(`wrongList_subject${this.subject}`) || [] |
||||
} |
||||
if (this.subject == '2' || this.subject == '3') { |
||||
this.$refs.subjectRef.getDiverType() |
||||
} |
||||
this.queryActivityList() |
||||
}, |
||||
onHide() { |
||||
this.show = false |
||||
}, |
||||
computed: { |
||||
...mapState(useQuestionStore, ["loading_subject4", "loading_subject1", "curSubject", "orderQuestion_subject1", |
||||
"orderQuestion_subject4" |
||||
]), //映射函数，取出tagslist |
||||
getLoading() { |
||||
return this.loading_subject4 && this.loading_subject1 |
||||
} |
||||
}, |
||||
watch: { |
||||
getLoading(newVal) { |
||||
if (this.show) { |
||||
if (newVal) { |
||||
if (this.loading_subject4 && this.loading_subject1) { |
||||
uni.hideTabBar(); |
||||
} |
||||
} else { |
||||
uni.showTabBar() |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
...mapActions(useQuestionStore, ['getOrderQuestion_sub4', 'getOrderQuestion_sub1', 'changeSubject']), |
||||
//获取科目配置 |
||||
getSubjectConfig() { |
||||
const carTypeId = storage.get('carType') || '1001' |
||||
querySysConfigList(carTypeId, 'Subject').then(resp => { |
||||
if (resp.code === '0000') { |
||||
this.categoryList = resp.data.map(item => { |
||||
return { |
||||
...item, |
||||
name: item.configItemName |
||||
} |
||||
}) |
||||
this.subject = storage.get('curSubject') || '1', |
||||
this.curTab = this.categoryList.findIndex(item => item.configItemCode == this.subject) |
||||
} |
||||
}) |
||||
}, |
||||
//切换科目 |
||||
async changeCategory(val) { |
||||
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}`) || [] |
||||
} else { |
||||
setTimeout(() => { |
||||
this.$refs.subjectRef.getDiverType() |
||||
}, 100) |
||||
} |
||||
}, |
||||
//查询活动列表 |
||||
queryActivityList() { |
||||
queryActivityList({ |
||||
schoolId: useUserStore().userInfo?.schoolId || '' |
||||
}).then(resp => { |
||||
this.activityList = resp.data.map(item => ({ |
||||
...item, |
||||
image: 'https://jwl.ahduima.com' + item.image |
||||
})); |
||||
}) |
||||
}, |
||||
// 去活动 |
||||
handleToActivity(index) { |
||||
let detailId; |
||||
this.activityList.find((item, index1) => { |
||||
if (index === index1) { |
||||
detailId = item.detailId; |
||||
} |
||||
}) |
||||
uni.navigateTo({ |
||||
url: '/pages/index/activity' |
||||
url: '/pages/index/activity?detailId=' + detailId, |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep .u-tabs__wrapper__nav__line { |
||||
background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important; |
||||
bottom: 14rpx !important; |
||||
} |
||||
::v-deep .u-tabs__wrapper__nav__line { |
||||
background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important; |
||||
bottom: 14rpx !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue