19 changed files with 1050 additions and 121 deletions
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
<view style="padding-top: 20rpx;"> |
||||
|
<view class="nav_area"></view> |
||||
|
<view class=""> |
||||
|
<view class="uni-list"> |
||||
|
<view class="uni-list-cell" style="padding: 20rpx 40rpx 0px;display: flex;align-items:center;font-size: 14px;"> |
||||
|
<image src="../../../static/home/stLine-calendar-l@2x.png" mode="" style="width: 48rpx;height: 48rpx;margin-right: 10px;"></image> |
||||
|
<view class="uni-list-cell-db"> |
||||
|
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> |
||||
|
<view class="uni-input">{{date}}</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="padding: 20rpx 40rpx 0px;display: flex;font-size: 14px;color: #999;"> |
||||
|
今日中奖总金额： |
||||
|
<view style="color: #E50000;">{{allToday}}<text style="color: #444;">{{' '+unit}}</text></view> |
||||
|
</view> |
||||
|
<view class="record-head" v-if="recordsList.length>0"> |
||||
|
<view style="flex:0.15;">ID</view> |
||||
|
<view style="flex:0.37;">手机号码</view> |
||||
|
<view style="flex:0.2;">时间</view> |
||||
|
<view style="flex:0.28;text-align: right;">中奖金额</view> |
||||
|
</view> |
||||
|
<view v-for="(item,index) in recordsList" :key="index" class="record-item"> |
||||
|
<view style="flex:0.15;">{{ item.user_id }}</view> |
||||
|
<view style="flex:0.37;">{{ item.phone }}</view> |
||||
|
<view style="flex:0.2;">{{ item.datetime }}</view> |
||||
|
<view style="flex:0.28;text-align: right;color: #E50000;">{{ item['awards_amount'] }}<text style="color: #444;">元</text></view> |
||||
|
</view> |
||||
|
<view class="" v-if="recordsList.length===0" style="color: #999;text-align: center;padding: 40rpx;"> |
||||
|
- 暂无记录 - |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import API from '@/common/js/api.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
// const currentDate = this.getDate({ |
||||
|
// format: true |
||||
|
// }) |
||||
|
return { |
||||
|
userType: '', |
||||
|
startDate: '2023-01-01', |
||||
|
endDate: '2023-10-09', |
||||
|
date: '2023-10-01', |
||||
|
allToday: '', |
||||
|
unit: '', |
||||
|
recordsList:[ |
||||
|
// { |
||||
|
// "user_id":"12", |
||||
|
// "phone":"13612349786", |
||||
|
// "datetime":"14:01:19", |
||||
|
// "awards_amount":"100" |
||||
|
// }, |
||||
|
// { |
||||
|
// "ID":"12", |
||||
|
// "手机号码":"13612349786", |
||||
|
// "时间":"14:01:19", |
||||
|
// "中奖金额":"100" |
||||
|
// }, |
||||
|
], |
||||
|
page: 1, |
||||
|
noMore: true, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(e) { |
||||
|
var date = new Date(); |
||||
|
var year = date.getFullYear(); |
||||
|
var month = date.getMonth() + 1; |
||||
|
var day = date.getDate(); |
||||
|
month = (month > 9) ? month : ('0' + month); |
||||
|
day = (day < 10) ? ('0' + day) : day; |
||||
|
var today = year + '-' + month + '-' + day; |
||||
|
this.date = today; |
||||
|
this.endDate = today; |
||||
|
|
||||
|
this.userType = uni.getStorageSync('userType'); |
||||
|
this.getZJ(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getZJ(){ |
||||
|
API.request('/adminStatistics/awardRecords', { |
||||
|
page: this.page, |
||||
|
limit: 10, |
||||
|
date: this.date |
||||
|
}, res=>{ |
||||
|
this.allToday = res.data.sum_amount; |
||||
|
this.unit = res.data.unit; |
||||
|
let list = res.data.list; |
||||
|
if(this.page===1){ |
||||
|
list.length>0 ? this.noMore=false : false; |
||||
|
this.recordsList = list; |
||||
|
}else{ |
||||
|
if(res.data.list.length==0){ |
||||
|
uni.showToast({ |
||||
|
title: '没有更多了', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
this.noMore = true; |
||||
|
} |
||||
|
this.recordsList = this.recordsList.concat(list) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
bindDateChange: function(e) { |
||||
|
this.date = e.detail.value; |
||||
|
console.log(this.date); |
||||
|
this.getZJ(); |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if(this.noMore) return; |
||||
|
this.page++; |
||||
|
this.getZJ(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.nav_area { |
||||
|
position: fixed; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
z-index: 99; |
||||
|
background-color: #fff; |
||||
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); |
||||
|
width: 700rpx; |
||||
|
padding: 0px 25rpx; |
||||
|
/* #ifdef H5 */ |
||||
|
height: 88rpx;padding-top: var(--status-bar-height); |
||||
|
/* #endif */ |
||||
|
/* #ifdef APP-PLUS */ |
||||
|
height: 2px; |
||||
|
/* #endif */ |
||||
|
box-sizing: content-box; |
||||
|
color: #b0b0b0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.record-head{ |
||||
|
padding: 20rpx 40rpx 0px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
color: #CECECE; |
||||
|
} |
||||
|
.record-item{ |
||||
|
padding: 20rpx 40rpx 0px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,50 @@ |
|||||
|
## 奖券页面类型 |
||||
|
|
||||
|
- digit_number（你的号码+中奖号码） |
||||
|
> 1080背景图宽（对应735的手机） |
||||
|
> 1700背景图高 |
||||
|
> 两区顶部相距720px（250） |
||||
|
> 两区左边相距65px（22.5） |
||||
|
> 刮奖区宽950px（330） |
||||
|
> 刮奖区高866px（300） |
||||
|
- digit_icon(666)（你的号码） |
||||
|
> 1080背景图宽 |
||||
|
> 1080背景图高 |
||||
|
> 两区顶部相距px528（183.33） |
||||
|
> 两区左边相距px65（22.5） |
||||
|
> 刮奖区宽950px（330） |
||||
|
> 刮奖区高px300（104.16） |
||||
|
- digit_icon(777)（你的号码） |
||||
|
> 1080背景图宽 |
||||
|
> 2163背景图高 |
||||
|
> 两区顶部相距px1197（415.6） |
||||
|
> 两区左边相距px65（22.5） |
||||
|
> 刮奖区宽px950（330） |
||||
|
> 刮奖区高px696（241.66） |
||||
|
- digit_number_icon（你的号码+中奖号码+中奖图标） |
||||
|
> 1080背景图宽 |
||||
|
> 2163背景图高 |
||||
|
> >>上下刮板一体 |
||||
|
> 两区顶部相距px820（284.7） |
||||
|
> 两区左边相距px65（22.5） |
||||
|
> 刮奖区宽950px（330） |
||||
|
> 刮奖区高1087px（377.4） |
||||
|
> >>上下刮板分体 |
||||
|
> >>> 上左 |
||||
|
> 距背景顶px927（） |
||||
|
> 距背景左px65（） |
||||
|
> 刮奖区宽px410（） |
||||
|
> 刮奖区高px128（） |
||||
|
> >>> 上右 |
||||
|
> 距背景顶px927（） |
||||
|
> 距左37px（） |
||||
|
> 距背景左37+65+410px（） |
||||
|
> 刮奖区宽px503（） |
||||
|
> 刮奖区高px128（） |
||||
|
> >>>下 |
||||
|
> 两区顶部相距px1207（1207*375/1080=419.1） |
||||
|
> 两区左边相距px65（22.5） |
||||
|
> 刮奖区宽950px（330） |
||||
|
> 刮奖区高700px（243.05） |
||||
|
|
||||
|
|
||||
@ -0,0 +1,142 @@ |
|||||
|
|
||||
|
class Scratch { |
||||
|
constructor (page, opts) { |
||||
|
opts = opts || {} |
||||
|
console.log(page, '-------'); |
||||
|
this.page = page |
||||
|
this.canvasId = opts.canvasId || 'canvas' |
||||
|
this.width = opts.width || 330 |
||||
|
this.height = opts.height || 300 |
||||
|
this.screenWidth = opts.screenWidth || 375 |
||||
|
// this.maskColor = opts.maskColor || '#D2D2D2'
|
||||
|
// this.maskColor = '#dddddd'
|
||||
|
this.maskColor = 'transparent'; |
||||
|
this.size = opts.size || 10 |
||||
|
this.r = this.size * 2 |
||||
|
this.area = this.r * this.r |
||||
|
this.scale = opts.scale || 0.3 |
||||
|
this.totalArea = this.width * this.height |
||||
|
this.bgImg = opts.bgImg |
||||
|
this.show = false |
||||
|
this.codeType = opts.codeType |
||||
|
this.direction = opts.direction;//号码行数
|
||||
|
this.transverse = opts.transverse;//每行个数
|
||||
|
this.init() |
||||
|
} |
||||
|
|
||||
|
init () { |
||||
|
|
||||
|
this.clearPoints = [] |
||||
|
this.ctx = uni.createCanvasContext(this.canvasId) |
||||
|
this.drawMask() |
||||
|
this.bindTouch() |
||||
|
} |
||||
|
|
||||
|
drawMask () { |
||||
|
let sx, sy, swidth, sheight, x, y, width, height; |
||||
|
// 底图是像素1080的宽
|
||||
|
|
||||
|
swidth = this.width*1080/this.screenWidth;//被剪切图像的宽度
|
||||
|
sheight = this.height*1080/this.screenWidth;//被剪切图像的高度
|
||||
|
x = 0;//在画布上放置图像的 x 坐标位置(从画布的左上顶点开始绘制)
|
||||
|
y = 0; |
||||
|
width = this.width;//要使用的图像的宽度
|
||||
|
height = this.height; |
||||
|
|
||||
|
|
||||
|
if(this.codeType==='digit_number_icon'){//888
|
||||
|
sy = 927;//开始剪切的 y 坐标位置
|
||||
|
if(this.canvasId=='guaguaLeft'){ |
||||
|
sx = 65; |
||||
|
} |
||||
|
if(this.canvasId=='guaguaRight'){ |
||||
|
sx = 512; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
console.log(sx, sy, swidth, sheight, x, y, width, height); |
||||
|
// 数字计算的稍微会偏0.00几像素
|
||||
|
this.ctx.drawImage(this.bgImg, sx, sy, swidth, sheight, x, y, width, height); |
||||
|
// this.ctx.drawImage(this.bgImg, 64.8, 720, 950.4, 864, 0, 0, 330, 300);
|
||||
|
this.ctx.setFillStyle(this.maskColor) |
||||
|
this.ctx.fillRect(0, 0, this.width, this.height) |
||||
|
this.ctx.draw() |
||||
|
} |
||||
|
|
||||
|
bindTouch () { |
||||
|
this.page.touchStart = (e) => { |
||||
|
this.eraser(e, true) |
||||
|
} |
||||
|
this.page.touchMove = (e) => { |
||||
|
this.eraser(e, false) |
||||
|
} |
||||
|
this.page.touchEnd = (e) => { |
||||
|
if (this.show) { |
||||
|
this.ctx.clearRect(0, 0, this.width, this.height) |
||||
|
this.ctx.draw() |
||||
|
// console.log('刮奖面积达标');
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
eraser (e, bool) { |
||||
|
const len = this.clearPoints.length |
||||
|
let count = 0 |
||||
|
const x = e.touches[0].x; const y = e.touches[0].y |
||||
|
const x1 = x - this.size |
||||
|
const y1 = y - this.size |
||||
|
if (bool) { |
||||
|
this.clearPoints.push({ |
||||
|
x1: x1, |
||||
|
y1: y1, |
||||
|
x2: x1 + this.r, |
||||
|
y2: y1 + this.r |
||||
|
}) |
||||
|
} |
||||
|
for (const 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 |
||||
|
}) |
||||
|
} |
||||
|
if (len && this.r * this.r * len > this.scale * this.totalArea) { |
||||
|
this.show = true; |
||||
|
// console.log('刮奖面积达标');
|
||||
|
} |
||||
|
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) { |
||||
|
const calcWidth = radius - stepClear |
||||
|
const calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth) |
||||
|
|
||||
|
const posX = x - calcWidth |
||||
|
const posY = y - calcHeight |
||||
|
|
||||
|
const widthX = 2 * calcWidth |
||||
|
const heightY = 2 * calcHeight |
||||
|
|
||||
|
if (stepClear <= radius) { |
||||
|
ctx.clearRect(posX, posY, widthX, heightY) |
||||
|
stepClear += 1 |
||||
|
clearArc(x, y, radius) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Scratch |
||||
|
After Width: | Height: | Size: 367 B |
|
After Width: | Height: | Size: 154 B |
|
After Width: | Height: | Size: 339 B |
|
After Width: | Height: | Size: 583 B |
|
After Width: | Height: | Size: 504 B |
Loading…
Reference in new issue