576 lines
16 KiB
Vue
576 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, watch } from 'vue'
|
||
import { PREFIX } from '../_constants'
|
||
import { useExtend } from '../_hooks'
|
||
import { cloneDeep, getMainClass } from '../_utils'
|
||
import type { IData } from './countup'
|
||
import { countupEmits, countupProps } from './countup'
|
||
|
||
const props = defineProps(countupProps)
|
||
const emit = defineEmits(countupEmits)
|
||
defineExpose({ machineLuck })
|
||
const classes = computed(() => {
|
||
return getMainClass(props, componentName)
|
||
})
|
||
const data = reactive<IData>({
|
||
valFlag: false,
|
||
current: 0,
|
||
sortFlag: 'add',
|
||
initDigit1: 0,
|
||
initDigit2: 0,
|
||
to0_10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
|
||
to10_0: [0, 9, 8, 7, 6, 5, 4, 3, 2, 1, 1],
|
||
timer: null,
|
||
totalCount: 0, // 正整数
|
||
pointNum: 0, // 小数位
|
||
numberVal: 0, // 数字
|
||
num_total_len: 0, // 数字长度
|
||
relNum: 0, // 去除小数点
|
||
customNumber: 1,
|
||
prizeLevelTrun: 0,
|
||
prizeY: [],
|
||
prizeYPrev: [],
|
||
// machineTransition: 'none',
|
||
finshMachine: 0,
|
||
notPrize: [],
|
||
typeMachine: '',
|
||
})
|
||
const { startFlag, scrolling, customBgImg, type } = reactive(props)
|
||
watch(
|
||
() => props.customChangeNum,
|
||
(count, prevCount) => {
|
||
clearIntervalTime()
|
||
// data.customNumber = count;
|
||
countGo(0)
|
||
},
|
||
)
|
||
watch(
|
||
() => props.machinePrizeLevel,
|
||
(count, prevCount) => {
|
||
data.prizeLevelTrun = count
|
||
},
|
||
)
|
||
watch(
|
||
() => props.initNum,
|
||
(count, prevCount) => {
|
||
data.current = count
|
||
data.valFlag = false
|
||
valChange()
|
||
},
|
||
)
|
||
watch(
|
||
() => props.endNum,
|
||
(count, prevCount) => {
|
||
data.current = props.initNum
|
||
data.valFlag = false
|
||
valChange()
|
||
},
|
||
)
|
||
function valChange() {
|
||
if (data.valFlag)
|
||
return false
|
||
|
||
if (startFlag) {
|
||
if (scrolling || customBgImg) {
|
||
if (type !== 'machine')
|
||
countGo()
|
||
}
|
||
else {
|
||
countChange()
|
||
setTimeout(() => {
|
||
data.valFlag = true
|
||
}, 300)
|
||
}
|
||
}
|
||
}
|
||
// 清空定时器
|
||
function clearIntervalTime() {
|
||
clearInterval(Number(data.timer))
|
||
data.timer = null
|
||
}
|
||
// 精确计算
|
||
function calculation(num1: number, num2: number, type: string) {
|
||
const num1Digits = (num1.toString().split('.')[1] || '').length
|
||
const num2Digits = (num2.toString().split('.')[1] || '').length
|
||
const baseNum = 10 ** Math.max(num1Digits, num2Digits)
|
||
if (type === '-') {
|
||
const n = Number((num1 * baseNum - num2 * baseNum).toFixed(0))
|
||
return n / baseNum
|
||
}
|
||
else {
|
||
const m = Number((num1 * baseNum + num2 * baseNum).toFixed(0))
|
||
return m / baseNum
|
||
}
|
||
}
|
||
// 数字滚动-top值
|
||
function topNumber(index: number) {
|
||
const { num_total_len, pointNum, initDigit1, initDigit2, sortFlag } = data
|
||
const idx1
|
||
= sortFlag === 'add' || sortFlag === 'equal'
|
||
? String(initDigit2)[index - (num_total_len - pointNum)]
|
||
: 10 - Number(String(initDigit2)[index - (num_total_len - pointNum)])
|
||
const idx2
|
||
= sortFlag === 'add' || sortFlag === 'equal' ? String(initDigit1)[index] : 10 - Number(String(initDigit1)[index])
|
||
let num
|
||
= index > num_total_len - pointNum - 1
|
||
? `${-idx1 * 100}%`
|
||
: index <= String(initDigit1).length - 1
|
||
? `${-idx2 * 100}%`
|
||
: 0
|
||
if (num === '-1000%')
|
||
num = 0
|
||
|
||
return num
|
||
}
|
||
// 数字滚动-到哪里了
|
||
function turnNumber(index: number) {
|
||
const { num_total_len, pointNum, initDigit1, initDigit2, sortFlag } = data
|
||
const idx1 = String(initDigit2)[index - (num_total_len - pointNum)]
|
||
const num
|
||
= index > num_total_len - pointNum - 1
|
||
? idx1 || 0
|
||
: index <= String(initDigit1).length - 1
|
||
? String(initDigit1)[index]
|
||
: 0
|
||
return num
|
||
}
|
||
// 基础用法
|
||
function countChange() {
|
||
const { endNum, initNum, speed, toFixed } = props
|
||
const countTimer = setInterval(() => {
|
||
if (initNum > endNum) {
|
||
// 减少
|
||
if (data.current <= endNum || data.current <= speed) {
|
||
// 数字减小，有可能导致current小于speed
|
||
data.current = Number(endNum.toFixed(toFixed))
|
||
clearInterval(countTimer)
|
||
emit('scrollEnd')
|
||
data.valFlag = false
|
||
}
|
||
else {
|
||
data.current = Number((Number.parseFloat(String(data.current)) - Number.parseFloat(String(speed))).toFixed(toFixed))
|
||
}
|
||
}
|
||
else {
|
||
// 增加
|
||
if (data.current >= endNum) {
|
||
data.current = Number(endNum.toFixed(toFixed))
|
||
clearInterval(countTimer)
|
||
emit('scrollEnd')
|
||
data.valFlag = false
|
||
}
|
||
else {
|
||
data.current = Number((Number.parseFloat(String(data.current)) + Number.parseFloat(String(speed))).toFixed(toFixed))
|
||
}
|
||
}
|
||
}, props.during)
|
||
}
|
||
function countGo(flag?: number): void {
|
||
let { initNum, endNum, toFixed, customBgImg } = props
|
||
if (customBgImg)
|
||
initNum = props.customChangeNum
|
||
|
||
// --------------
|
||
let startNumber1, startNumber2, endNumber1, endNumber2
|
||
if (initNum !== 0) {
|
||
if (toFixed !== 0)
|
||
initNum = Number(initNum.toFixed(toFixed))
|
||
|
||
if (String(initNum).includes('.')) {
|
||
startNumber1 = String(initNum).split('.')[0].length
|
||
startNumber2 = String(initNum).split('.')[1].length
|
||
}
|
||
else {
|
||
startNumber1 = String(initNum).length
|
||
startNumber2 = 0
|
||
}
|
||
}
|
||
else {
|
||
startNumber1 = 1
|
||
startNumber2 = 0
|
||
}
|
||
if (endNum !== 0) {
|
||
if (toFixed !== 0)
|
||
endNum = Number(endNum.toFixed(toFixed))
|
||
|
||
if (String(endNum).includes('.')) {
|
||
endNumber1 = String(endNum).split('.')[0].length
|
||
endNumber2 = String(endNum).split('.')[1].length
|
||
}
|
||
else {
|
||
endNumber1 = String(endNum).length
|
||
endNumber2 = 0
|
||
}
|
||
}
|
||
else {
|
||
endNumber1 = 1
|
||
endNumber2 = 0
|
||
}
|
||
const len1 = startNumber1 >= endNumber1 ? startNumber1 : endNumber1
|
||
const len2 = startNumber2 >= endNumber2 ? startNumber2 : endNumber2
|
||
data.num_total_len = len1 + len2
|
||
|
||
data.pointNum = len2
|
||
|
||
// --------------
|
||
if (initNum > endNum) {
|
||
// 减少
|
||
data.sortFlag = 'reduce'
|
||
data.to0_10 = [0, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
|
||
data.totalCount = calculation(initNum, endNum, '-')
|
||
data.numberVal = Number(String(initNum))
|
||
}
|
||
else if (initNum < endNum) {
|
||
// 增加
|
||
data.sortFlag = 'add'
|
||
data.to0_10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
|
||
data.totalCount = calculation(endNum, initNum, '-')
|
||
data.numberVal = Number(String(endNum))
|
||
}
|
||
else {
|
||
data.sortFlag = 'equal'
|
||
}
|
||
// 将小数位数计算后，补0
|
||
let unit = 1
|
||
for (let i = 0; i < data.pointNum; i++)
|
||
unit *= 10
|
||
|
||
const rel_big = data.numberVal * unit // 去除小数点后的数，unit几个零表示有几个小数
|
||
data.relNum = rel_big
|
||
// this.totalCount = rel_big;
|
||
if (toFixed !== 0) {
|
||
// 计算小数点后的位数，小数位
|
||
data.pointNum = String(data.numberVal).split('.')[1] ? String(data.numberVal).split('.')[1].length : 0
|
||
// 数字长度
|
||
data.num_total_len = String(rel_big).length
|
||
}
|
||
if (String(initNum).includes('.')) {
|
||
const n = String(initNum).split('.')
|
||
data.initDigit1 = Number(n[0])
|
||
data.initDigit2 = Number(n[1])
|
||
}
|
||
else {
|
||
data.initDigit1 = initNum
|
||
data.initDigit2 = 0
|
||
}
|
||
|
||
if (scrolling && !customBgImg) {
|
||
// #ifdef H5
|
||
// 数字都是从小加到大的，所以我们循环转动最后一个数字，传入最后一个数字的DOM
|
||
nextTick(() => {
|
||
if (data.sortFlag === 'equal')
|
||
return false
|
||
|
||
const refsDom: HTMLCollectionOf<Element> = document.getElementsByClassName('nut-countup__number-item')
|
||
|
||
const element = refsDom[data.num_total_len - 1]
|
||
runTurn(element)
|
||
})
|
||
// #endif
|
||
}
|
||
else {
|
||
if (flag !== 0)
|
||
imgNumberScroll()
|
||
}
|
||
}
|
||
function runTurn(el: Element) {
|
||
clearIntervalTime()
|
||
let m = 1
|
||
if (data.pointNum !== 0)
|
||
m = 1 / 10 ** data.pointNum;
|
||
|
||
// 设置定时器
|
||
(data.timer as any) = setInterval(() => {
|
||
runStep(el)
|
||
data.totalCount = calculation(data.totalCount, m, '-')
|
||
// that.totalCount--;
|
||
if (data.totalCount <= 0) {
|
||
clearIntervalTime()
|
||
emit('scrollEnd')
|
||
data.valFlag = false
|
||
}
|
||
}, props.during)
|
||
}
|
||
|
||
function runStep(el: any) {
|
||
// let currentTurn = el.getAttribute('turn-number');
|
||
const currentTurn = el.style.all
|
||
let turningNum: number
|
||
if (data.sortFlag === 'add')
|
||
turningNum = Number.parseInt(String(currentTurn)) + 1
|
||
else
|
||
turningNum = Number.parseInt(String(currentTurn)) - 1 >= 0 ? Number.parseInt(String(currentTurn)) - 1 : 9
|
||
|
||
// el.setAttribute('turn-number', String(turningNum));
|
||
el.style.all = String(turningNum)
|
||
|
||
if (el.style.transition === 'none' || turningNum === 1 || !el.style.transition)
|
||
el.style.transition = `all linear ${props.during}ms`
|
||
|
||
if (turningNum === 10 || (data.sortFlag === 'reduce' && turningNum === 0)) {
|
||
let timeOut: any = null
|
||
// el.style.top = `-${turningNum * 100}%`;
|
||
el.style.top = `-${data.sortFlag === 'add' ? turningNum * 100 : (10 - turningNum) * 100}%`
|
||
// el.setAttribute('turn-number', '0');
|
||
el.style.all = '0'
|
||
timeOut = setTimeout(() => {
|
||
timeOut && clearTimeout(timeOut)
|
||
el.style.transition = 'none'
|
||
el.style.top = '0'
|
||
// 前面数字的滚动，用于递增
|
||
if (turningNum === 10) {
|
||
if (el.previousSibling)
|
||
runStep(el.previousSibling as HTMLElement)
|
||
}
|
||
}, 0.975 * props.during)
|
||
}
|
||
else {
|
||
// el.style.top = `-${(10-turningNum)*100}%`;
|
||
el.style.top = `-${data.sortFlag === 'add' ? turningNum * 100 : (10 - turningNum) * 100}%`
|
||
}
|
||
// 用于递减的时候
|
||
if (el.style.top === '-100%' && data.sortFlag === 'reduce')
|
||
runStep(el.previousSibling as HTMLElement)
|
||
}
|
||
// 自定义图片
|
||
function imgNumberScroll() {
|
||
let m = 1
|
||
if (data.pointNum !== 0)
|
||
m = 10 ** data.pointNum
|
||
// #ifdef H5
|
||
nextTick(() => {
|
||
const f = document.getElementsByClassName('nut-countup__numberimg')[0]
|
||
// setTimeout(() => {
|
||
// data.relNum = calculation(data.relNum, m * props.speed, '+');
|
||
// }, props.during);
|
||
f.addEventListener('webkitTransitionEnd', () => {
|
||
emit('scrollEnd')
|
||
data.valFlag = false
|
||
// setTimeout(() => {
|
||
// data.relNum = calculation(data.relNum, m * props.speed, '+');
|
||
// }, props.during);
|
||
})
|
||
})
|
||
// #endif
|
||
}
|
||
// 不中奖设置随机数
|
||
function generateRandom() {
|
||
data.notPrize = []
|
||
while (data.notPrize.length < 3) {
|
||
const rand: number = Math.floor(Math.random() * props.machinePrizeNum + 1)
|
||
if (!data.notPrize.includes(rand))
|
||
data.notPrize.push(rand)
|
||
}
|
||
}
|
||
// 抽奖
|
||
function machineLuck() {
|
||
const machineTurnMoreNum = props.machineTurnMore < 0 ? 0 : props.machineTurnMore
|
||
const distance = props.numHeight * props.machinePrizeNum // 所有奖品的高度，雪碧图的高度
|
||
if (data.prizeLevelTrun < 0)
|
||
generateRandom()
|
||
|
||
for (let i = 0; i < props.machineNum; i++) {
|
||
setTimeout(() => {
|
||
const turn = distance * (i + 1 + Number.parseFloat(String(machineTurnMoreNum)))
|
||
if (data.prizeYPrev.length !== 0) {
|
||
// this.machineTransition = 'none';
|
||
// console.log(this.prizeYPrev[i]-(this.numHeight * this.machinePrizeNum));
|
||
// this.$set(data.prizeY, i, data.prizeYPrev[i]);
|
||
data.prizeY[i] = data.prizeYPrev[i]
|
||
}
|
||
const local = data.prizeYPrev[i] ? data.prizeYPrev[i] : 0
|
||
let newLocation
|
||
= turn + local + (props.machinePrizeNum - data.prizeLevelTrun + 1) * props.numHeight + (distance - local)
|
||
if (data.prizeLevelTrun < 0)
|
||
newLocation += props.numHeight * data.notPrize[i]
|
||
|
||
scrollTime(
|
||
i,
|
||
// parseFloat((this.machinePrizeNum-(this.prizeLevelTrun-1))*this.numHeight + turn + local),
|
||
newLocation,
|
||
local,
|
||
)
|
||
}, 500 * i)
|
||
}
|
||
}
|
||
useExtend({ machineLuck })
|
||
function scrollTime(index: number, total: number, num: number) {
|
||
// this.machineTransition = `all linear ${this.during/this.machinePrizeNum}ms`;
|
||
let t: any = setInterval(() => {
|
||
if (num <= total) {
|
||
num += 10
|
||
data.prizeY[index] = Number.parseFloat(String(num))
|
||
}
|
||
else {
|
||
clearInterval(t)
|
||
t = null
|
||
data.finshMachine += 1
|
||
data.prizeY[index] = total
|
||
if (data.finshMachine === props.machineNum) {
|
||
const distance = props.numHeight * props.machinePrizeNum
|
||
data.prizeYPrev = []
|
||
const prevAry = cloneDeep(data.prizeY)
|
||
prevAry.forEach((item: any) => {
|
||
let n = item
|
||
while (n > distance)
|
||
n -= distance
|
||
|
||
data.prizeYPrev.push(n)
|
||
})
|
||
setTimeout(() => {
|
||
data.finshMachine = 0
|
||
if (data.prizeLevelTrun < 0) {
|
||
emit('scrollEnd', false)
|
||
data.valFlag = false
|
||
}
|
||
else {
|
||
emit('scrollEnd', true)
|
||
data.valFlag = false
|
||
}
|
||
}, 130)
|
||
}
|
||
}
|
||
}, 30)
|
||
}
|
||
|
||
onMounted(() => {
|
||
data.current = props.initNum
|
||
nextTick(() => {
|
||
valChange()
|
||
})
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
clearIntervalTime()
|
||
data.timer = null
|
||
})
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
const componentName = `${PREFIX}-countup`
|
||
|
||
export default defineComponent({
|
||
name: componentName,
|
||
options: {
|
||
virtualHost: true,
|
||
addGlobalClass: true,
|
||
styleIsolation: 'shared',
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view :class="classes" :style="customStyle">
|
||
<template v-if="customBgImg !== ''">
|
||
<template v-if="type === 'machine'">
|
||
<view class="nut-countup__machine" :style="{ height: `${numHeight}px` }">
|
||
<view
|
||
v-for="(val, index) of machineNum"
|
||
:key="`mImg${index}`"
|
||
class="nut-countup__machine-item"
|
||
:style="{
|
||
width: `${numWidth}px`,
|
||
height: `${numHeight}px`,
|
||
background: `url(${customBgImg}) `,
|
||
backgroundPosition: `0 ${data.prizeY[index]}px`,
|
||
}"
|
||
/>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="nut-countup__numberimg" :style="{ height: `${numHeight}px` }">
|
||
<view
|
||
v-for="(val, index) of data.num_total_len"
|
||
:key="`cImg${index}`"
|
||
class="nut-countup__numberimg__item"
|
||
:style="{
|
||
width: `${numWidth}px`,
|
||
height: `${numHeight}px`,
|
||
left:
|
||
`${numWidth
|
||
* (index > data.num_total_len - data.pointNum - 1
|
||
? index === data.num_total_len - data.pointNum
|
||
? index * 1.5
|
||
: index * 1.3
|
||
: index)
|
||
}px`,
|
||
backgroundImage: `url(${customBgImg})`,
|
||
backgroundPosition:
|
||
`0 ${-(+String(data.relNum)[index] * numHeight + customSpacNum * +String(data.relNum)[index])}px`,
|
||
transition: `all linear ${during / 10}ms`,
|
||
}"
|
||
/>
|
||
<view
|
||
v-if="data.pointNum > 0"
|
||
class="nut-countup-pointstyl"
|
||
:style="{
|
||
width: `${numWidth / 2}px`,
|
||
bottom: 0,
|
||
left: `${numWidth * (data.num_total_len - data.pointNum) * 1.1}px`,
|
||
fontSize: '30px',
|
||
}"
|
||
>
|
||
.
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
<view
|
||
v-if="scrolling"
|
||
class="nut-countup__number"
|
||
:style="{
|
||
width: `${numWidth * data.num_total_len + numWidth / 3}px`,
|
||
height: `${numHeight}px`,
|
||
lineHeight: `${numHeight}px`,
|
||
}"
|
||
>
|
||
<view
|
||
v-for="(val, index) of data.num_total_len"
|
||
:key="val"
|
||
class="nut-countup__number-item"
|
||
:style="{
|
||
all: turnNumber(index) as any,
|
||
top: topNumber(index),
|
||
left: `${numWidth * (index > data.num_total_len - data.pointNum - 1 ? index * 1.1 : index)}px`,
|
||
}"
|
||
:turn-number="turnNumber(index)"
|
||
>
|
||
<view
|
||
v-for="(item, idx) of data.to0_10"
|
||
:key="`dote${idx}`"
|
||
class="nut-countup__number-item__span"
|
||
:style="{
|
||
width: `${numWidth}px`,
|
||
height: `${numHeight}px`,
|
||
lineHeight: `${numHeight}px`,
|
||
}"
|
||
>
|
||
{{ item }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="data.pointNum > 0"
|
||
class="nut-countup-pointstyl"
|
||
:style="{
|
||
width: `${numWidth / 3}px`,
|
||
height: `${numHeight}px`,
|
||
lineHeight: `${numHeight}px`,
|
||
top: 0,
|
||
left: `${numWidth * (data.num_total_len - data.pointNum)}px`,
|
||
}"
|
||
>
|
||
.
|
||
</view>
|
||
</view>
|
||
<template v-else>
|
||
{{ data.current }}
|
||
</template>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
@import './index';
|
||
</style>
|