修改审核比赛界面格式、上传头像前后端交互、个人界面最近比赛修改为个人比赛

vuetify-project/src/audit_games.vue

@@ -2,7 +2,7 @@
   <v-app>
     <!-- {{ filteredMatches }} -->
     <v-container>
-      <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value"
+      <v-data-table class="overflow-auto " :headers="headers" :items="filteredMatches" item-key="id" :search="search.value"
         :items-per-page="10">
         <template v-slot:top>
           <v-toolbar flat>
@@ -13,19 +13,22 @@
           </v-toolbar>
         </template>
         <template v-slot:item.date="{ item }">
-          {{ item.date }}
+          <p style="width:60px" >{{ item.date }}</p>
         </template>
         <template v-slot:item.team="{ item }">
-          {{ item.homeTeam }} VS {{ item.awayTeam }}
+          <p style="width:120px">{{ item.homeTeam }} VS {{ item.awayTeam }}</p>
+          
         </template>
         <template v-slot:item.score="{ item }">
-          {{ item.homeScore }} - {{ item.awayScore }}
+          <p style="width:30px">{{ item.homeScore }} - {{ item.awayScore }}</p>
+          
         </template>
         <template v-slot:item.actions="{ item }">
-          <v-icon v-if="!item.shenhe" small color="green" @click="opendialog(item, 'approve')"
+          <div style="width:45px">          <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>
+          <div v-if="item.shenhe" variant="text">已审核</div></div>
+
         </template>
       </v-data-table>
       <v-dialog v-model="dialog" width="auto">
@@ -49,6 +52,13 @@
 
 </template>
 
+<style>
+.table{
+  width: 60px;
+
+}
+</style>
+
 <script setup>
 import { ref } from 'vue';
 import { reactive } from 'vue';

vuetify-project/src/components/gamemanage.vue

@@ -8,32 +8,32 @@
       提交比赛
     </v-card-title> -->
       <v-form ref="form" v-model="isValid">
-        <v-row no-gutters>
-          <v-col align-self="center">
-            <v-autocomplete variant="underlined" v-model="player1" label="姓名"
-              :rules="[rules.player_not_none, rules.player1]" :items="arr"></v-autocomplete>
-          </v-col>
-          <v-col cols="2" align-self="center">
-            <div class="text-h6" style="text-align: center;">VS</div>
-          </v-col>
-          <v-col align-self="center">
-            <v-autocomplete variant="underlined" v-model="player2" label="姓名"
-              :rules="[rules.player_not_none, rules.player2]" :items="arr"></v-autocomplete>
-          </v-col>
-        </v-row>
-        <v-row no-gutters>
-          <v-col align-self="center">
-            <v-select variant="underlined" v-model="score1" label="得分" :rules="[rules.score_not_none, rules.score1]"
-              :items="['0', '1', '2', '3', '4', '5']"></v-select>
-          </v-col>
-          <v-col cols="2" align-self="center">
-            <div class="text-h6" style="text-align: center;">:</div>
-          </v-col>
-          <v-col align-self="center">
-            <v-select variant="underlined" v-model="score2" label="得分" :rules="[rules.score_not_none, rules.score2]"
-              :items="['0', '1', '2', '3', '4', '5']"></v-select>
-          </v-col>
-        </v-row>
+          <v-row no-gutters>
+            <v-col align-self="center">
+              <v-autocomplete variant="underlined" v-model="player1" label="姓名"
+                :rules="[rules.player_not_none, rules.player1]" :items="arr"></v-autocomplete>
+            </v-col>
+            <v-col cols="2" align-self="center">
+              <div class="text-h6" style="text-align: center;">VS</div>
+            </v-col>
+            <v-col align-self="center">
+              <v-autocomplete variant="underlined" v-model="player2" label="姓名"
+                :rules="[rules.player_not_none, rules.player2]" :items="arr"></v-autocomplete>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col align-self="center">
+              <v-select variant="underlined" v-model="score1" label="得分" :rules="[rules.score_not_none, rules.score1]"
+                :items="['0', '1', '2', '3', '4', '5']"></v-select>
+            </v-col>
+            <v-col cols="2" align-self="center">
+              <div class="text-h6" style="text-align: center;">:</div>
+            </v-col>
+            <v-col align-self="center">
+              <v-select variant="underlined" v-model="score2" label="得分" :rules="[rules.score_not_none, rules.score2]"
+                :items="['0', '1', '2', '3', '4', '5']"></v-select>
+            </v-col>
+          </v-row>
         <v-dialog>
           <template v-slot:activator="{ props: activatorProps }">
             <v-btn block v-bind="activatorProps" class="text-none mb-4" color="indigo" size="large" variant="outlined">
@@ -104,6 +104,8 @@ const selectedDate = ref(new Date());
 const arr = ref(new Array());
 const id = ref(null);
 const form = ref(null);
+const form1 = ref(null);
+const form2 = ref(null);
 var s1;
 var s2;
 var p1_id;
@@ -127,27 +129,27 @@ const rules = reactive({
 
 // 监听 player1 的变化，并更新 player2 的验证规则
 watch(player1, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    form.value.validate(); // 触发表单验证
-  }
+    if (newVal !== oldVal) {
+      form.value.validate(); // 触发表单验证
+    }
 });
 
 watch(player2, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    form.value.validate(); // 触发表单验证
-  }
+    if (newVal !== oldVal) {
+      form.value.validate(); // 触发表单验证
+    }
 });
 
 watch(score1, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    form.value.validate(); // 触发表单验证
-  }
+    if (newVal !== oldVal) {
+      form.value.validate(); // 触发表单验证
+    }
 });
 
 watch(score2, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    form.value.validate(); // 触发表单验证
-  }
+    if (newVal !== oldVal) {
+      form.value.validate(); // 触发表单验证
+    }
 });
 
 axios.get('/api/players')

vuetify-project/src/components/register_comp.vue

@@ -3,8 +3,8 @@
     <v-text-field v-model="usrname" variant="filled" :rules="[rules.usrname]" color="indigo" label="用户名"></v-text-field>
     <v-text-field v-model="password" variant="filled" :rules="[rules.password]" color="indigo" label="密码"
       type="password"></v-text-field>
-    <v-text-field v-model="confirmpassword" variant="filled" :rules="[rules.confirmpassword]" color="indigo" label="确认密码"
-      type="password"></v-text-field>
+    <v-text-field v-model="confirmpassword" variant="filled" :rules="[rules.confirmpassword]" color="indigo"
+      label="确认密码" type="password"></v-text-field>
   </v-form>
   <v-card-actions>
     <v-btn :disabled="!isValid" :loading="loading" block class="text-none mb-4" color="indigo" size="x-large"
@@ -53,40 +53,39 @@ const rules = reactive({
 
 // 监听 password 的变化，并更新 confirmpassword 的验证规则
 watch(password, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    form.value.validate(); // 触发表单验证
-  }
+    if (newVal !== oldVal) {
+      form.value.validate(); // 触发表单验证
+    }
 });
 
-function register(){
-  loading.value =true;
+function register() {
+  loading.value = true;
   axios.post('/api/register', {
-    usrname:usrname.value,
-    psword:password.value
-  })
-  .then(function (response) {
-    const data = response.data;
-    if(data.status == 'SUCCESS'){
-      info('注册成功！', "");
-    }
-    else if(data.status == 'FAILED')
-    {
-      info('用户名已存在！', "");
-    }
+    usrname: usrname.value,
+    psword: password.value
   })
-  .catch(function (error) {
-    console.log(error);
-  });
-  loading.value =false;
+    .then(function (response) {
+      const data = response.data;
+      if (data.status == 'SUCCESS') {
+        info('注册成功！', "");
+      }
+      else if (data.status == 'FAILED') {
+        info('用户名已存在！', "");
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+  loading.value = false;
 }
 
 const cardtitle = ref(null);
 const cardtext = ref(null);
 const dialog = ref(false);
-function info(title,text) {
+function info(title, text) {
   cardtitle.value = title;
   cardtext.value = text;
-  dialog.value=true;
+  dialog.value = true;
 }
 
 </script>
\ No newline at end of file

vuetify-project/src/lauched_games.vue

@@ -12,21 +12,18 @@
                 </v-toolbar>
             </template>
             <template v-slot:item.date="{ item }">
-                {{ item.date }}
+                <p style="width:60px" >{{ item.date }}</p>
             </template>
             <template v-slot:item.name="{ item }">
-                {{ item.username }} VS {{ item.opponentname }}
+                <p style="width:120px">{{ item.username }} VS {{ item.opponentname }}</p>
             </template>
             <template v-slot:item.score="{ item }">
-                {{ item.userScore }} - {{ item.opponentScore }}
+                <p style="width:30px">{{ item.userScore }} - {{ item.opponentScore }}</p>
             </template>
             <template v-slot:item.verified="{ item }">
-                <v-icon v-if="item.verified === 'WAITING'" color="blue">mdi-help-circle</v-icon>
+                <div style="width:80px"><v-icon v-if="item.verified === 'WAITING'" color="blue">mdi-help-circle</v-icon>
                 <v-icon v-else-if="item.verified === 'PASSED'" color="green">mdi-check-circle</v-icon>
-                <v-icon v-else-if="item.verified === 'REJECT'" color="red">mdi-close-circle</v-icon>
-                <!-- <v-icon :color="item.verified != 1 ? (item.verified == 2 ? 'green' : 'red') : 'red'">{{ item.verified ?
-            'mdi-check-circle' :
-                    'mdi-close-circle' }}</v-icon> -->
+                <v-icon v-else-if="item.verified === 'REJECT'" color="red">mdi-close-circle</v-icon></div>    
             </template>
         </v-data-table>
     </v-app>