vue 商品倒计时功能并且对接后台数据

Vue.js实现商品倒计时功能并对接后台数据通常涉及以下几个步骤：

1. **组件化**：首先，你可以创建一个名为`Countdown`的自定义Vue组件，用于显示倒计时。这个组件会接收两个属性：`endTime`（预计结束时间）和`refreshInterval`（刷新间隔，用于更新倒计时）。

<template>
  <div>
    <p v-if="showTimer">{{ countdownText }}</p>
    <span class="timer" :style="{ display: showTimer ? 'block' : 'none' }">{{ minutes }}分{{ seconds }}秒</span>
  </div>
</template>

<script>
export default {
  props: {
    endTime: { type: Number, required: true },
    refreshInterval: { type: Number, default: 1000 }
  },
  data() {
    return {
      countdownText: '',
      minutes: 0,
      seconds: 0,
      showTimer: false,
    };
  },
  watch: {
    endTime(newTime) {
      this.startCountdown(newTime);
    },
  },
  mounted() {
    if (this.endTime) {
      this.showTimer = true;
      this.startCountdown(this.endTime);
    }
  },
  methods: {
    startCountdown(endTime) {
      let intervalId = setInterval(() => {
        const now = Date.now();
        const remainingTime = endTime - now;
        const milliseconds = Math.floor(remainingTime % 1000);
        const seconds = Math.floor((remainingTime / 1000) % 60);
        const minutes = Math.floor(remainingTime / (60 * 1000));

        if (milliseconds === 0 && seconds === 0) {
          clearInterval(intervalId);
          this.countdownText = '结束';
        } else {
          this.minutes = minutes;
          this.seconds = seconds;
        }
      }, this.refreshInterval);
    },
  },
};
</script>

2. **数据获取**：为了实时从后台获取商品的结束时间，你需要在组件外部管理数据，比如使用Vuex或axios。当接收到新的结束时间后，通过props传递给组件。

// store.js 或者 main.js (如果是axios)
import axios from 'axios';
import { createStore } from 'vuex';

const store = createStore({
  state: {
    productEndTimes: {},
  },
  mutations: {
    setProductEndTime(state, { productId, endTime }) {
      state.productEndTimes[productId] = endTime;
    },
  },
  actions: {
    async fetchProductEndTimes({ commit }) {
      try {
        const response = await axios.get('/api/product-end-time');
        response.data.forEach(product => {
          commit('setProductEndTime', product);
        });
      } catch (error) {
        console.error('Error fetching end times:', error);
      }
    },
  },
});

// 使用store中的数据
new Vue({
  store,
  // 其他配置...
  components: {
    Countdown,
  },
  created() {
    store.dispatch('fetchProductEndTimes');
  },
});

3. **模板中绑定数据**：在需要展示倒计时的地方，将`Countdown`组件绑定到`productEndTimes`上，并显示倒计时。

<template>
  <div>
    <!-- 根据实际需求，这里可能是商品列表 -->
    <div v-for="(product, index) in products" :key="index">
      <countdown :endTime="product.endTime" :refresh-interval="1000"></countdown>
    </div>
  </div>
</template>

<script>
import Countdown from './components/Countdown.vue';

export default {
  // 省略其他部分...
  components: {
    Countdown,
  },
  computed: {
    products() {
      return this.$store.state.productEndTimes;
    },
  },
};
</script>