vue界面活动报名。使用vant组件，获取活动的报名时间和报名人数，如果超过报名时间和人数，显示报名失败

。如果还未到报名时间，显示倒计时并禁用报名按钮。如果报名成功，显示报名成功提示。

可以使用以下vant组件：

- Button：报名按钮
- CountDown：倒计时
- Dialog：报名成功提示框

首先，在界面上显示活动的报名时间和报名人数。可以使用vant的Card组件来展示活动信息，例如：

<van-card>
  <div slot="header">活动信息</div>
  <div>{{activity.name}}</div>
  <div>报名时间：{{activity.startTime}} 至 {{activity.endTime}}</div>
  <div>报名人数：{{activity.currentCount}}/{{activity.maxCount}}</div>
</van-card>

其中，activity是从后台获取到的活动信息对象。

然后，在报名按钮上添加点击事件，判断是否可以报名。如果当前时间在报名时间范围内，且报名人数未达到上限，就可以报名。可以使用Date对象来判断当前时间是否在报名时间范围内：

const now = new Date();
const startTime = new Date(activity.startTime);
const endTime = new Date(activity.endTime);
if (now >= startTime && now <= endTime && activity.currentCount < activity.maxCount) {
  // 可以报名
} else {
  // 报名失败
}

如果可以报名，就调用后台接口进行报名，并显示报名成功提示框：

axios.post('/api/signup', {activityId: activity.id}).then(response => {
  // 报名成功
  this.$dialog.alert({
    message: '报名成功！'
  });
}).catch(error => {
  // 报名失败
  this.$dialog.alert({
    message: '报名失败，请稍后再试。'
  });
});

如果报名时间未到，则需要显示倒计时并禁用报名按钮。可以使用vant的CountDown组件来实现：

<van-count-down v-if="!isSignupDisabled" :time="startTime - now" @finish="onCountDownFinish">
  <template #default="{ hours, minutes, seconds }">
    距离报名开始还有 {{ hours }}小时{{ minutes }}分{{ seconds }}秒
  </template>
</van-count-down>

其中，isSignupDisabled是一个计算属性，用于判断是否禁用报名按钮：

computed: {
  isSignupDisabled() {
    const now = new Date();
    const startTime = new Date(activity.startTime);
    const endTime = new Date(activity.endTime);
    return now < startTime || now > endTime || activity.currentCount >= activity.maxCount;
  }
}

如果倒计时结束，则需要重新计算isSignupDisabled的值：

onCountDownFinish() {
  this.$forceUpdate();
}

完整的代码示例：

<template>
  <div>
    <van-card>
      <div slot="header">活动信息</div>
      <div>{{activity.name}}</div>
      <div>报名时间：{{activity.startTime}} 至 {{activity.endTime}}</div>
      <div>报名人数：{{activity.currentCount}}/{{activity.maxCount}}</div>
    </van-card>
    <van-count-down v-if="!isSignupDisabled" :time="startTime - now" @finish="onCountDownFinish">
      <template #default="{ hours, minutes, seconds }">
        距离报名开始还有 {{ hours }}小时{{ minutes }}分{{ seconds }}秒
      </template>
    </van-count-down>
    <van-button v-if="!isSignupDisabled" type="primary" @click="onSignupClick">报名</van-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      activity: {
        id: 1,
        name: 'Vue界面活动报名',
        startTime: '2022-01-01 09:00',
        endTime: '2022-01-02 18:00',
        currentCount: 10,
        maxCount: 20
      }
    };
  },
  computed: {
    isSignupDisabled() {
      const now = new Date();
      const startTime = new Date(this.activity.startTime);
      const endTime = new Date(this.activity.endTime);
      return now < startTime || now > endTime || this.activity.currentCount >= this.activity.maxCount;
    }
  },
  methods: {
    onSignupClick() {
      const now = new Date();
      const startTime = new Date(this.activity.startTime);
      const endTime = new Date(this.activity.endTime);
      if (now >= startTime && now <= endTime && this.activity.currentCount < this.activity.maxCount) {
        axios.post('/api/signup', {activityId: this.activity.id}).then(response => {
          this.$dialog.alert({
            message: '报名成功！'
          });
        }).catch(error => {
          this.$dialog.alert({
            message: '报名失败，请稍后再试。'
          });
        });
      } else {
        this.$dialog.alert({
          message: '报名失败'
        });
      }
    },
    onCountDownFinish() {
      this.$forceUpdate();
    }
  }
};
</script>