<template> <div class="count_down"> <div class="countDown" v-show="detailData.clusterTime "> <div class="countDownTop"> <div>{{day}} {{detailData.applyCount>=detailData.minPeopleCount?'报名截止时间:':'团期截止倒计时'}}</div> <div v-if="detailData.applyCount>=detailData.minPeopleCount||timeTamp * 1 < 0">{{detailData.periodOfValidity}}</div> <div class="countDownTime" 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> 秒 </div> </div> <!-- <div class="countDownTop" v-else> <div>{{day}}</div> </div> --> <div class="countDownBottom"> <div> <div class="countDownBottomyellow" v-show="detailData.minPeopleCount"> {{ detailData.clusterName }} </div> <span v-if="detailData.applyCount>=detailData.minPeopleCount">已报名 {{detailData.applyCount}}/{{detailData.stockCount}}{{detailData.unitName}}</span> <span v-else>最低成团数{{detailData.minPeopleCount}}{{detailData.unitName}}/已报名{{detailData.applyCount}}{{detailData.unitName}}</span> <!-- 已报名:<span>{{ detailData.applyCount }}</span><span>/{{ detailData.stockCount }}</span> --> </div> <div class="countDownAbout" @click="showPintuanAbout=true">关于拼团?</div> </div> </div> <van-popup v-model="showPintuanAbout" round> <div class="pintuan_about"> <img class="about_img" src="@/assets/service/tip.png" alt=""> <p class="about_title">拼团规则说明</p> <p class="about_content">1、拼团展示默认为最近活动档期,选择其它档期请时刻注意成团动态。</p> <p class="about_content">2、在限时截止后,报名人数未达最低成团数,则结束本团活动,系统将在72小时内,全额退还!</p> <p class="about_content">3、报名人数达到最低成团要求后,则拼团成功,凡在报名截止时间内未达最大限团人数,则可放心参与。</p> <p class="about_content">4、已成团的活动,除特殊情况等不可抗拒因素外,活动如期举行。</p> <p class="about_know" @click="showPintuanAbout=false">我知道了</p> </div> </van-popup> </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.mgop({ api: 'mgop.sz.hswsy.DateInfoById', // 必须 host: 'https://mapi.zjzwfw.gov.cn/', dataType: 'JSON', type: 'GET', appKey: 'fuxgnukl+2001895516+edccpx', // 必须 headers: { // 'isTestUrl': '1' }, data: { "productId": productId, "bindId": bindId, "comboId": comboId, }, onSuccess: res => { console.log('套餐列表:', res.data.data); if (res.data.data) { this.detailData = res.data.data let timer = setInterval(() => { this.timeDown(); //倒计时 }, 1000); this.$once("hook:beforeDestroy", () => { clearInterval(timer); //清理定时器 console.log('清理定时器') }); } }, onFail: err => { console.log('err', err) } }); }, //倒计时计算 timeDown () { 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>