mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-13 04:18:55 +08:00
88fc1b0b2a
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录） - util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md） - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<template>
|
||
<div>
|
||
<div class="wrapper" v-if="type === 'goodsDetail'">
|
||
<div class="wr-l"><el-icon :size="23"><AlarmClock /></el-icon> 秒杀活动</div>
|
||
<div class="count-down" v-if="end === ''">
|
||
<span class="count-down-label">倒计时：</span>
|
||
<span class="count-down-num">{{ hours }}</span>
|
||
<span class="count-down-colon">:</span>
|
||
<span class="count-down-num">{{ minutes }}</span>
|
||
<span class="count-down-colon">:</span>
|
||
<span class="count-down-num">{{ seconds }}</span>
|
||
</div>
|
||
<div v-else>{{end}}</div>
|
||
</div>
|
||
<span v-else class="cart-promotion">
|
||
<span v-if="end === ''">距活动结束：<span>{{ hours }}</span> : <span>{{ minutes }}</span> : <span>{{ seconds }}</span></span>
|
||
<span v-else>活动已结束</span>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { onMounted, ref } from 'vue';
|
||
import { AlarmClock } from '@element-plus/icons-vue';
|
||
|
||
const props = defineProps({
|
||
time: { // 传入的初始时间
|
||
default: 1718977559428
|
||
},
|
||
type: { // 区分是在详情还是购物车调用
|
||
default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
|
||
type: String
|
||
}
|
||
});
|
||
|
||
const end = ref(''); // 结束状态
|
||
const hours = ref(''); // 小时
|
||
const minutes = ref(''); // 分钟
|
||
const seconds = ref(''); // 秒
|
||
let interval = null; // 定时器
|
||
|
||
function countDown (val) { // 倒计时方法
|
||
function addZero (i) {
|
||
return i < 10 ? '0' + i : i + '';
|
||
}
|
||
var nowtime = new Date();
|
||
var endtime = new Date(val);
|
||
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
|
||
var h = parseInt((lefttime / (60 * 60)) % 24);
|
||
var m = parseInt((lefttime / 60) % 60);
|
||
var s = parseInt(lefttime % 60);
|
||
h = addZero(h);
|
||
m = addZero(m);
|
||
s = addZero(s);
|
||
hours.value = h;
|
||
minutes.value = m
|
||
seconds.value = s;
|
||
if (lefttime <= 0) {
|
||
end.value = `活动已结束`;
|
||
clearInterval(interval)
|
||
}
|
||
}
|
||
|
||
function init () { // 初始化
|
||
interval = setInterval(() => {
|
||
countDown(props.time);
|
||
}, 1000);
|
||
}
|
||
|
||
onMounted(() => {
|
||
init()
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.cart-promotion{
|
||
font-size: 13px;
|
||
color: #999;
|
||
margin-left: 10px;
|
||
}
|
||
.wrapper {
|
||
background-image: linear-gradient(266deg, #ff0b33, #ff4257, #ff5f7c, #fa78a2);
|
||
height: 32px;
|
||
color: #fff;
|
||
line-height: 32px;
|
||
font-size: 16px;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.wr-r{
|
||
font-size: 13px;
|
||
}
|
||
.count-down {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
|
||
.count-down-label {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.count-down-num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 20px;
|
||
height: 20px;
|
||
padding: 0 2px;
|
||
background-color: #2f3430;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.count-down-colon {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
</style>
|