audit.vue

<template>
  <v-app>
    <v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10">
      <template v-slot:top>
        <v-toolbar flat>
          <v-toolbar-title>比赛</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
          <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line hide-details></v-text-field>
        </v-toolbar>
      </template>
      <template v-slot:item.team="{ item }">
        {{ item.homeTeam }} VS {{ item.awayTeam }}
      </template>
      <template v-slot:item.score="{ item }">
        {{ item.homeScore }} - {{ item.awayScore }}
      </template>
      <template v-slot:item.actions="{ item }">
        <v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon>
        <v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
      </template>
    </v-data-table>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      headers: [
        { title: '比赛', key: 'team' },
        { title: '比分', key: 'score' },
        { title: '审核', key: 'actions', sortable: false }
      ],
      matches: [
        { id: 1, homeTeam: 'Team A', awayTeam: 'Team B', homeScore: 2, awayScore: 1, status: 'pending' },
        { id: 2, homeTeam: 'Team C', awayTeam: 'Team D', homeScore: 0, awayScore: 3, status: 'pending' },
        { id: 3, homeTeam: 'Team E', awayTeam: 'Team F', homeScore: 2, awayScore: 2, status: 'pending' },
      ]
    };
  },
  methods: {
    approveMatch(match) {
      // Perform approval logic
      match.status = 'approved';
    },
    rejectMatch(match) {
      // Perform rejection logic
      match.status = 'rejected';
    }
  }
};
</script>