修改审核比赛逻辑、修改比赛管理界面bug、修改注册界面bug、我的界面用户名绑定

vuetify-project/src/audit_games.vue

@@ -2,7 +2,8 @@
   <v-app>
     <!-- {{ filteredMatches }} -->
     <v-container>
-      <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value" :items-per-page="10">
+      <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value"
+        :items-per-page="10">
         <template v-slot:top>
           <v-toolbar flat>
             <v-toolbar-title>比赛</v-toolbar-title>
@@ -21,13 +22,31 @@
           {{ 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>
+          <v-icon v-if="!item.shenhe" small color="green" @click="opendialog(item, 'approve')"
+            style="padding-right: 20px;">mdi-check</v-icon>
+          <v-icon v-if="!item.shenhe" small color="red" @click="opendialog(item, 'reject')" style="padding-left: 20px;">mdi-close</v-icon>
+          <div v-if="item.shenhe" variant="text">已审核</div>
         </template>
       </v-data-table>
+      <v-dialog v-model="dialog" width="auto">
+        <v-card width="300px">
+          <v-card-title>
+            {{ cardtitle }}
+          </v-card-title>
+          <v-card-text>
+            {{ cardtext }}
+          </v-card-text>
+          <template v-slot:actions>
+            <v-btn class="ms-auto" variant="flat" color="indigo" text="确定" @click="confirmAction"></v-btn>
+            <v-btn class="ms-auto" variant="flat" color="indigo" text="取消" @click="dialog = false"></v-btn>
+          </template>
+        </v-card>
+      </v-dialog>
     </v-container>
-
   </v-app>
+
+
+
 </template>
 
 <script setup>
@@ -37,51 +56,43 @@ import { computed } from 'vue';
 import axios from 'axios';
 
 const matches = ref(new Array());
-refresh();
-function refresh(){
-  axios.get('/api/lauchedGames',)
-    .then(function(response){
-        const data = response.data;
-        for(var i = 0; i < data.Games.length; i++){
-            var match = {
-                id:data.Games[i].id,
-                date:data.Games[i].game_date,
-                homeTeam:data.Games[i].player1_real_name,
-                awayTeam:data.Games[i].player2_real_name,
-                homeScore:data.Games[i].score1,
-                awayScore:data.Games[i].score2,
-                verify:true,
-            }
-            matches.value[i] = match;
-        }
-    })
-    .catch(function (error) {
-    console.log(error);
-  })
+const actiontype = ref(null);
+const selectedMatch = ref(null);
+const cardtitle = ref(null);
+const cardtext = ref(null);
+const shenhetitle = ref(null);
+const shenhetext = ref(null);
+const dialog = ref(false);
+const verify = ref(true);
+
+function info(title, text) {
+  cardtitle.value = title;
+  cardtext.value = text;
+  dialog.value = true;
 }
 
-function refresh1(){
+function refresh() {
   axios.get('/api/lauchedGames',)
-    .then(function(response){
-        const data = response.data;
-        const matches = ref(new Array());
-        for(var i = 0; i < data.Games.length; i++){
-            var match = {
-                id:data.Games[i].id,
-                date:data.Games[i].game_date,
-                homeTeam:data.Games[i].player1_real_name,
-                awayTeam:data.Games[i].player2_real_name,
-                homeScore:data.Games[i].score1,
-                awayScore:data.Games[i].score2,
-                verify:true,
-            }
-            matches.value[i] = match;
+    .then(function (response) {
+      const data = response.data;
+      for (var i = 0; i < data.Games.length; i++) {
+        var match = {
+          id: data.Games[i].id,
+          date: data.Games[i].game_date,
+          homeTeam: data.Games[i].player1_real_name,
+          awayTeam: data.Games[i].player2_real_name,
+          homeScore: data.Games[i].score1,
+          awayScore: data.Games[i].score2,
+          shenhe: false,
         }
+        matches.value[i] = match;
+      }
     })
     .catch(function (error) {
-    console.log(error);
-  })
+      console.log(error);
+    })
 }
+refresh();
 
 const search = ref('');
 const headers = reactive([
@@ -102,31 +113,54 @@ const filteredMatches = computed(() => {
   );
 })
 
-function approveMatch(match) {
-  match.verify = true;
-  axios.post('/api/confirmGame',{
-    game_id:match.id,
-    confirm:match.verify
-  })
-    .then(function(){
-      refresh1();
-    })
-    .catch(function (error) {
-    console.log(error);
-  })
+function opendialog(game, type) {
+  if (type === 'approve') {
+    shenhetitle.value = `审核比赛 ${game.homeTeam} VS ${game.awayTeam}`;
+    shenhetext.value = `确定要通过这场比赛吗？`;
+  } else if (type === 'reject') {
+    shenhetitle.value = `审核比赛 ${game.homeTeam} VS ${game.awayTeam}`;
+    shenhetext.value = `确定要不通过这场比赛吗？`;
+  }
+  info(shenhetitle.value, shenhetext.value);
+  selectedMatch.value = game;
+  actiontype.value = type;
 }
 
-function rejectMatch(match){
-  match.verify = false;
-  axios.post('/api/confirmGame',{
-    game_id:match.id,
-    confirm:match.verify
-  })
-    .then(function(){
-      refresh1();
+function confirmAction() {
+  if (actiontype.value === 'approve') {
+    verify.value = true;
+    selectedMatch.value.shenhe = true;
+    axios.post('/api/confirmGame', {
+      game_id: selectedMatch.value.id,
+      confirm: verify.value,
     })
-    .catch(function (error) {
-    console.log(error);
-  })
+      .then(function (response) {
+        const data = response.data;
+        if (data.status === "SUCCESS") {
+          console.log('success');
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+  }
+  else if(actiontype.value === 'reject') {
+    verify.value = false;
+    selectedMatch.value.shenhe = true;
+    axios.post('/api/confirmGame', {
+      game_id: selectedMatch.value.id,
+      confirm: verify.value,
+    })
+      .then(function (response) {
+        const data = response.data;
+        if (data.status === "SUCCESS") {
+          console.log('success');
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+  }
+  dialog.value = false;
 }
 </script>
\ No newline at end of file

vuetify-project/src/components/gamemanage.vue

@@ -7,7 +7,7 @@
       <!-- <v-card-title color="indigo">
       提交比赛
     </v-card-title> -->
-      <v-form v-model="isValid">
+      <v-form ref="form" v-model="isValid">
         <v-row no-gutters>
           <v-col align-self="center">
             <v-autocomplete variant="underlined" v-model="player1" label="姓名"
@@ -92,6 +92,7 @@
 import { ref } from 'vue';
 import { reactive } from 'vue';
 import axios from 'axios';
+import { watch } from 'vue';
 
 const isValid = ref(false);
 const player1 = ref(null);
@@ -102,6 +103,7 @@ const loading = ref(false);
 const selectedDate = ref(new Date());
 const arr = ref(new Array());
 const id = ref(null);
+const form = ref(null);
 var s1;
 var s2;
 var p1_id;
@@ -123,6 +125,31 @@ const rules = reactive({
   score2: v => v != score1.value || '得分不能相同',
 });
 
+// 监听 player1 的变化，并更新 player2 的验证规则
+watch(player1, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    form.value.validate(); // 触发表单验证
+  }
+});
+
+watch(player2, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    form.value.validate(); // 触发表单验证
+  }
+});
+
+watch(score1, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    form.value.validate(); // 触发表单验证
+  }
+});
+
+watch(score2, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    form.value.validate(); // 触发表单验证
+  }
+});
+
 axios.get('/api/players')
   .then(function (response) {
     const data = response.data;

vuetify-project/src/components/login_comp.vue

@@ -89,6 +89,7 @@ function login() {
         else if (!data.is_member) {
           // console.log("not member");
           // console.log(realname1);
+          window.location.href = '/main.html';
           realname1.value = true;
         }
       }

vuetify-project/src/components/register_comp.vue

@@ -29,9 +29,17 @@
 <script setup>
 import { ref } from 'vue';
 import { reactive } from 'vue';
+import { watch } from 'vue';
 import axios from 'axios';
 
-const form = ref(null)
+const usrname = ref(null);
+const password = ref(null);
+const confirmpassword = ref(null);
+const isValid = ref(false);
+// const isLoading = ref(false);
+const loading = ref(false);
+const form = ref(null);
+
 const rules = reactive({
   email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
   length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
@@ -42,12 +50,13 @@ const rules = reactive({
   //   'Password must contain an upper case letter, a numeric character, and a special character',
   required: v => !!v || 'This field is required',
 });
-const usrname = ref(null);
-const password = ref(null);
-const confirmpassword = ref(null);
-const isValid = ref(false);
-// const isLoading = ref(false);
-const loading = ref(false);
+
+// 监听 password 的变化，并更新 confirmpassword 的验证规则
+watch(password, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    form.value.validate(); // 触发表单验证
+  }
+});
 
 function register(){
   loading.value =true;

vuetify-project/src/components/space.vue

@@ -141,11 +141,10 @@
 <script setup>
 import { ref } from 'vue';
 import { reactive } from 'vue';
+import axios from 'axios';
+
 const username = ref('XXX');
-const username1 = ref('XXX');
 const score = ref(1);
-const score1 = ref(1);
-const score2 = ref(1);
 const level = ref("A");
 const items = reactive([
   {
@@ -165,6 +164,17 @@ const items = reactive([
 ]
 );
 
+axios.get('/api/currentUser',)
+  .then(function(response){
+    const data = response.data;
+    if(data.status === "SUCCESS"){
+      username.value = data.username;
+    }
+  })
+  .catch(function (error) {
+    console.log(error);
+   })
+
 </script>
 
 <style>