<template> <div class="data_package_count_down"> <div v-if="detailData.applyCount >= detailData.minPeopleCount || timeTamp * 1 < 0">{{ detailData.periodOfValidity }}</div> <template v-else> <div class="countDownFont">{{ showTime.day }}</div> 天 <div class="countDownFont">{{ showTime.hour }}</div> 时 <div class="countDownFont">{{ showTime.minute }}</div> 分 <div class="countDownFont">{{ showTime.second }}</div> 秒 </template> </div> </template> <script> export default { props: ['day', 'productId', 'packageArr', 'bindId', 'comboId'], data() { return { timeTamp: '', showTime: { day: '', hour: '', minute: '', second: '', }, showPintuanAbout: false, detailData: '', } }, watch: { bindId(oldVal, newVal) { this.getDateInfoById() }, comboId(oldVal, newVal) { this.getDateInfoById() }, }, mounted() { // console.log(this.detailData) // console.log(this.packageArr) this.getDateInfoById() }, methods: { // 根据选择的档期显示成团状态 getDateInfoById() { const productId = this.productId const bindId = this.bindId const comboId = this.comboId // console.log(productId, bindId, comboId) this.yxAxios .get(`${this.yanxueUrl}/api/Product/DateInfo/ById?productId=${productId}&bindId=${bindId}&comboId=${comboId}`) .then((res) => { // console.log(res.data) if (res.data.status == 1) { let data = res.data.data // console.log(data.clusterTime) data.clusterTime = this.Moment(new Date(data.clusterTime.replace(/\-/g, '/'))) .add(1, 'days') .subtract(1, 'seconds') .format('YYYY/MM/DD HH:mm:ss') data.periodOfValidity = this.Moment(new Date(data.periodOfValidity.replace(/\-/g, '/'))) .add(1, 'days') .subtract(1, 'seconds') .format('YYYY/MM/DD HH:mm:ss') console.log(data.clusterTime) this.detailData = data let timer = setInterval(() => { this.timeDown() //倒计时 }, 1000) this.$once('hook:beforeDestroy', () => { clearInterval(timer) //清理定时器 console.log('清理定时器') }) } else { this.$toast('获取成团状态失败') } }) }, //倒计时计算 timeDown() { var clusterTime = Date.parse(new Date(this.detailData.clusterTime)) // var clusterTime = Date.parse(new Date(this.detailData.clusterTime.replace(/\-/g, "/"))) + 60 * 60 * 24 * 1000; var nowTime = Date.parse(new Date()) let timeTamp = clusterTime / 1000 - nowTime / 1000 // console.log(timeTamp) this.timeTamp = timeTamp // console.log(timeTamp) let k = this.calculateDiffTime(timeTamp) // console.log(k) }, calculateDiffTime(timeDiff) { var day = parseInt(timeDiff / 86400) var hour = parseInt((timeDiff % 86400) / 3600) var minute = parseInt(((timeDiff % 86400) % 3600) / 60) var second = parseInt((((timeDiff % 86400) % 3600) % 60) % 60) this.showTime = { day, hour, minute, second, } day = day ? day + '天' : '' hour = hour ? hour + '时' : '' minute = minute ? minute + '分' : '' second = second ? second + '秒' : '' return day + hour + minute + second }, }, } </script> <style lang="scss"> .data_package_count_down { display: inline-block; vertical-align: middle; font-size: 24px; margin-left: 10px; .countDownFont { display: inline-block; width: 34px; height: 34px; color: #ffe9b1; background: #000; line-height: 34px; border-radius: 6px; margin: 0 10px; vertical-align: middle; text-align: center; } } </style>