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

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/components/space.vue

 <template>
-  <div class="background">
-    <img src="../assets/背景.jpg" class="img1"></img>
+  <div class="background" @click="dialog2 = true">
+    <img :src="pre_background_image" class="img1" alt="上传背景图">
     <!-- <v-overlay activator="parent" /> -->
   </div>
   <!-- <v-overlay activator=".img1" /> -->
@@ -12,7 +12,7 @@
         <template v-slot:activator="{ props }">
           <v-btn icon v-bind="props" class="float-left" size="80px">
             <v-avatar size="80px" style="border:3px solid white">
-              <img src="../assets/头像.jpg" class="img2" alt="Avatar">
+              <img :src="pre_avatar_image" class="img2" alt="上传头像">
             </v-avatar>
           </v-btn>
         </template>
@@ -20,64 +20,23 @@
           <v-card-text>
             <div class="mx-auto text-center">
               <v-avatar size="50px">
-                <img src="../assets/头像.jpg" class="img2" alt="Avatar">
+                <img :src="pre_avatar_image" class="img2" alt="上传头像">
               </v-avatar>
               <div class="text-h5 relative1">
                 {{ username }}
               </div>
               <v-divider class="my-2"></v-divider>
-              <!-- <v-btn variant="text" rounded class="jiacu">
+              <v-btn @click="dialog1 = true" variant="text" rounded class="jiacu">
                 上传头像
-              </v-btn> -->
-              <v-dialog>
-                <template v-slot:activator="{ props: activatorProps }">
-                  <v-btn v-bind="activatorProps" variant="text" rounded class="jiacu">
-                    上传头像
-                  </v-btn>
-                </template>
-                <template v-slot:default="{ isActive }">
-                  <v-card title="Dialog">
-                    <v-card-text>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                      labore
-                      et dolore magna aliqua.
-                    </v-card-text>
-                    <v-card-actions>
-                      <v-spacer></v-spacer>
-                      <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
-                    </v-card-actions>
-                  </v-card>
-                </template>
-              </v-dialog>
+              </v-btn>
               <v-divider class="my-2"></v-divider>
-              <v-dialog>
-                <template v-slot:activator="{ props: activatorProps }">
-                  <v-btn v-bind="activatorProps" variant="text" rounded class="jiacu">
-                    修改个人信息
-                  </v-btn>
-                </template>
-                <template v-slot:default="{ isActive }">
-                  <v-card title="Dialog">
-                    <v-card-text>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                      labore
-                      et dolore magna aliqua.
-                    </v-card-text>
-                    <v-card-actions>
-                      <v-spacer></v-spacer>
-                      <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
-                    </v-card-actions>
-                  </v-card>
-                </template>
-              </v-dialog>
+              <v-btn variant="text" rounded class="jiacu">
+                修改个人信息
+              </v-btn>
             </div>
           </v-card-text>
         </v-card>
       </v-menu>
-      <!-- <v-avatar size="80px" class="float-left" style="border:solid white;">
-        <img src="../assets/头像.jpg" class="img2" alt="Avatar">
-      </v-avatar> -->
-      <!-- 用户名 -->
       <div class="float-left">
         <div class="text-h6 user float-left">
           {{ username }}
@@ -95,88 +54,168 @@
       <h class="text-h6 float-right">更多</h>
       <v-divider thickness="3px"></v-divider>
       <v-card class="card1">
-        <div class="text-h6" style="height: 33px;" v-for="(item, index) in items" :key="index">
-          <div class="float-left zhibiao1">
-            {{ item.username }}
+        <div class="text-subtitle-1" style="height: 33px;" v-for="(item, index) in items" :key="index">
+          <div class="float-left">
+            {{ item.date }}
+          </div>
+          <div class="float-left zhibiao1" style="width: 20%;">
+            {{ item.homeTeam }}
           </div>
           <div class="float-left zhibiao2">
-            {{ item.score1 }}
+            {{ item.homeScore }}
           </div>
           <div class="float-left">
             :
           </div>
           <div class="float-left zhibiao2">
-            {{ item.score2 }}
+            {{ item.awayScore }}
           </div>
-          <div class="float-left zhibiao1">
-            {{ item.username1 }}
+          <div class="float-left zhibiao1" style="width: 20%;">
+            {{ item.awayTeam }}
           </div>
-          <div class="float-right" style="line-height: 32px;">
-            <v-dialog>
-              <template v-slot:activator="{ props: activatorProps }">
-                <v-icon>mdi-chevron-right</v-icon>
-              </template>
-              <template v-slot:default="{ isActive }">
-                <v-card title="Dialog">
-                  <v-card-text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-                    et dolore magna aliqua.
-                  </v-card-text>
-                  <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
-                  </v-card-actions>
-                </v-card>
-              </template>
-            </v-dialog>
+          <div class="float-right">
+            <v-icon>mdi-chevron-right</v-icon>
           </div>
           <br>
+          <!-- <v-divider :thickness="2"></v-divider> -->
         </div>
       </v-card>
     </div>
   </div>
+
+  <v-dialog v-model="dialog1" width="auto">
+    <v-card width="300px">
+      <v-card-text>
+        头像上传
+      </v-card-text>
+      <v-card-text>
+        <v-file-input accept="image/*" id="avatarInput" label="上传头像" prepend-icon="mdi-camera"
+          variant="solo"></v-file-input>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="indigo" text="取消" @click="dialog1 = false"></v-btn>
+        <v-btn color="indigo" text="确认上传" @click="setAvatar"></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <v-dialog v-model="dialog2" width="auto">
+    <v-card width="300px">
+      <v-card-text>
+        背景上传
+      </v-card-text>
+      <v-card-text>
+        <v-file-input accept="image/*" id="backgroundInput" label="上传背景" prepend-icon="mdi-camera"
+          variant="solo"></v-file-input>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="indigo" text="取消" @click="dialog1 = false"></v-btn>
+        <v-btn color="indigo" text="确认上传" @click="setBackground"></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
   <!-- </v-container> -->
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { reactive } from 'vue';
+// import { reactive } from 'vue';
 import axios from 'axios';
 
 const username = ref('XXX');
 const score = ref(1);
 const level = ref("A");
-const items = reactive([
-  {
-    username: 'User1',
-    score1: 10,
-    score2: 5,
-    username1: 'User2',
-    extraInfo: 'adas'
-  },
-  {
-    username: 'User3',
-    score1: 8,
-    score2: 3,
-    username1: 'User4',
-    extraInfo: 'adas'
-  }
-]
-);
+const items = ref(new Array());
+const dialog1 = ref(false);
+const dialog2 = ref(false);
+const pre_avatar_image = ref('');
+const pre_background_image = ref('');
+const my_id = ref(null);
 
 axios.get('/api/currentUser',)
-  .then(function(response){
-    const data = response.data;
-    if(data.status === "SUCCESS"){
-      username.value = data.username;
+  .then(function (response) {
+    const data1 = response.data;
+    if (data1.status === "SUCCESS") {
+      my_id.value = data1.user_id;
+      username.value = data1.username;
+      pre_avatar_image.value = data1.profile_file;
+      // pre_background_image.value = data1.background_file;
     }
   })
   .catch(function (error) {
     console.log(error);
-   })
+  })
+
+
+axios.get('/api/games',)
+  .then(function (response) {
+    const data2 = response.data;
+    let j = 0;
+    for (var i = 0; i < data2.Games.length; i++) {
+      if (data2.Games[i].player1_id === my_id.value || data2.Games[i].player2_id === my_id.value) {
+        var item = {
+          id: data2.Games[i].id,
+          date: data2.Games[i].game_date,
+          homeTeam: data2.Games[i].player1_real_name,
+          awayTeam: data2.Games[i].player2_real_name,
+          homeScore: data2.Games[i].score1,
+          awayScore: data2.Games[i].score2,
+        }
+        items.value[j] = item;
+        j++;
+      }
+    }
+  })
+  .catch(function (error) {
+    console.log(error);
+  })
+
+function setAvatar() {
+  const fileInput = document.querySelector('#avatarInput');
+  const file = fileInput.files[0];
+
+  // 使用FormData对象上传文件
+  const formData = new FormData();
+  formData.append('avatar', file);
+
+  axios.post('/api/setAvatar', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  }).then(response => {
+    console.log('上传成功', response.data);
+    pre_avatar_image.value = response.data.new_avatar_path;
+  }).catch(error => {
+    console.error('上传失败', error);
+  });
+  dialog1.value = false;
+}
+
+function setBackground() {
+  const background_fileInput = document.querySelector('#backgroundInput');
+  const background_file = background_fileInput.files[0];
+
+  // 使用FormData对象上传文件
+  const background_formData = new FormData();
+  background_formData.append('background', background_file);
+
+  axios.post('/api/setBackground', background_formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  }).then(response => {
+    console.log('上传成功', response.data);
+    pre_background_image.value = response.data.new_background_path;
+  }).catch(error => {
+    console.error('上传失败', error);
+  });
+  dialog2.value = false;
+}
 
 </script>
 
+
 <style>
 .background {
   width: 100%;
@@ -254,7 +293,6 @@ axios.get('/api/currentUser',)
 }
 
 .zhibiao1 {
-  width: 25%;
   text-align: center;
 }
 

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>