Vue3 优化代码：按钮状态管理与逻辑简化

<template>
  <button
    :class="{
      'btn-danger': isClosed,
      'btn-border-default': isNotStarted,
      'btn-border-warning': isPending,
    }"
    :disabled="isClosed || isPending"
    class="btn btn-small btn-br btn-block"
  >
    {{ buttonLabel }}
  </button>
</template>
<script>
export default {
  props: {
    game: {
      type: Object,
      required: true,
    },
    nextGame: {
      type: Object,
      required: true,
    },
  },
  computed: {
    isClosed() {
      return this.game.state === 0;
    },
    isNotStarted() {
      return this.game.state === 1;
    },
    isPending() {
      return (
        this.game.state === 0 && this.nextGame.now > this.game.stopTime
      );
    },
    buttonLabel() {
      if (this.isClosed) {
        return '已开奖';
      } else if (this.isNotStarted) {
        return '马上参与';
      } else if (this.isPending) {
        return '开奖中';
      }
    },
  },
};
</script>
<style>
/* 样式可以根据需求自行设置 */
</style>