160 lines
3.1 KiB
Vue
160 lines
3.1 KiB
Vue
<!--
|
||
@name: Activity
|
||
@author: kahu4
|
||
@date: 2024-01-16 14:48
|
||
@description：Activity 活动
|
||
@update: 2024-01-16 14:48
|
||
-->
|
||
<script setup>
|
||
import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
|
||
import { getTimeAfterNow } from "@/utils/utils";
|
||
|
||
const emits = defineEmits(['timeOver'])
|
||
/**
|
||
* @property {String|Number} price 售卖价格
|
||
* @property {String|Number} oldPrice 划线价格
|
||
* @property {Number} type 组件类型 1、拼团，2、秒杀，3、限时折扣
|
||
* @property {Number} state 活动状态 0-未开始 1-进行中 2-已结束 3-预热
|
||
* @property {Number} time 活动剩余时间
|
||
*/
|
||
const props = defineProps({
|
||
price: {
|
||
type: [String, Number],
|
||
},
|
||
oldPrice: {
|
||
type: [String, Number],
|
||
},
|
||
type: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
state: {
|
||
type: Number,
|
||
default: 3
|
||
},
|
||
time: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
})
|
||
|
||
const {price, oldPrice, type, state, time} = toRefs(props)
|
||
|
||
// 组件的title
|
||
const componentTitle = computed(() => ['拼团', '秒杀', '限时折扣'][type.value - 1])
|
||
|
||
let interval
|
||
const countDownTime = ref(time.value)
|
||
watch(time, () => {
|
||
countDownTime.value = time.value
|
||
})
|
||
|
||
const countDownStrData = ref({
|
||
hours: '00',
|
||
minutes: '00',
|
||
seconds: '00'
|
||
})
|
||
|
||
/**
|
||
* 开始倒计时
|
||
*/
|
||
function playCountDown() {
|
||
if (countDownTime.value - Date.now() <= 0) return;
|
||
interval = setInterval(() => {
|
||
if (countDownTime.value > 1000) {
|
||
countDownStrData.value = getTimeAfterNow(countDownTime.value)
|
||
} else {
|
||
stopCountDown()
|
||
// 判断状态，活动开始和活动结束
|
||
emits('timeOver')
|
||
}
|
||
}, 1000)
|
||
}
|
||
|
||
/**
|
||
* 停止倒计时
|
||
*/
|
||
function stopCountDown() {
|
||
countDownTime.value = 0
|
||
interval && clearInterval(interval)
|
||
interval = undefined
|
||
}
|
||
|
||
const countDownStr = computed(() => {
|
||
const timeStr = ` ${ countDownStrData.value.hours } : ${ countDownStrData.value.minutes } : ${ countDownStrData.value.seconds }`
|
||
if ([0, 3].includes(state.value)) {
|
||
// 未开始、预热
|
||
return `距开始 ${ timeStr }`
|
||
} else if ([1].includes(state.value)) {
|
||
// 已经开始
|
||
return `距结束 ${ timeStr }`
|
||
}
|
||
})
|
||
|
||
|
||
onMounted(() => {
|
||
playCountDown()
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
stopCountDown()
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 活动商品 -->
|
||
<view class="price-row">
|
||
<view class="left-col">
|
||
<view class="title">
|
||
{{ componentTitle }}
|
||
</view>
|
||
<view class="price-box">
|
||
<span class="price">
|
||
¥{{ price }}
|
||
</span>
|
||
<span
|
||
v-if="oldPrice"
|
||
class="old-price">
|
||
¥{{ oldPrice }}
|
||
</span>
|
||
</view>
|
||
</view>
|
||
<view class="right-col">
|
||
{{ countDownStr }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style
|
||
lang="scss"
|
||
scoped>
|
||
.price-row {
|
||
width: 100%;
|
||
@include usePadding(30, 30);
|
||
@include useFlex(space-between, flex-end);
|
||
background: $primary-color;
|
||
color: $white-color;
|
||
|
||
.left-col {
|
||
.title {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.price-box {
|
||
.price {
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.old-price {
|
||
font-size: 28rpx;
|
||
text-decoration: line-through;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style>
|