Skip to content

W
web_nangaoclub
Commit b491f20b authored by sunxiwei's avatar sunxiwei
Browse files
Options

上传背景图

parent ab4a6464
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 57 deletions
vuetify-project/src/components/home.vue
View file @ b491f20b
<template>
<v-card style="height: 200px;width: 95%;margin: auto;">
<v-carousel :show-arrows="false" style="height: 100%;width: 100%;" cycle interval="2000" hide-delimiter-background>
<v-carousel-item v-for="(item, i) in items" :key="i" cover>
<img :src="item.src" class="tupian">
<v-carousel-item v-for="(img, i) in imgs" :key="i" cover>
<img :src="img.src" class="tupian">
</v-carousel-item>
</v-carousel>
</v-card>
......@@ -11,23 +11,26 @@
<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="(thing, index) in things" :key="index">
<div class="float-left zhibiao1">
{{ thing.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">
{{ thing.score1 }}
{{ item.homeScore }}
</div>
<div class="float-left">
:
</div>
<div class="float-left zhibiao2">
{{ thing.score2 }}
{{ item.awayScore }}
</div>
<div class="float-left zhibiao1">
{{ thing.username1 }}
<div class="float-left zhibiao1" style="width: 20%;">
{{ item.awayTeam }}
</div>
<div class="float-right" style="line-height: 32px;">
<div class="float-right">
<v-icon>mdi-chevron-right</v-icon>
</div>
<br>
......@@ -38,13 +41,15 @@
<h class="text-h6">队员榜单</h>
<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="(thing, index) in things" :key="index">
<div class="float-left">
{{ thing.number }} {{ thing.username }}
<div class="text-subtitle-1" style="height: 33px;" v-for="(thing, index) in things" :key="index">
<div class="float-left zhibiao5">
{{ thing.number }}. {{ thing.realname }}
</div>
<div class="float-left zhibiao3">
{{ thing.level }}级
{{ thing.level }}组
</div>
<div class="float-left zhibiao4">
{{ thing.point }}分
......@@ -56,13 +61,16 @@
</div>
</v-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
const items = reactive([
const imgs = reactive([
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
......@@ -77,30 +85,41 @@ const items = reactive([
},
]
);
const items = ref(new Array());
const things = ref(new Array());
const things = reactive([
{
username: 'User1',
score1: 10,
score2: 5,
username1: 'User2',
extraInfo: 'adas',
number: '1.',
level: 'A',
point: 4
},
{
username: 'User3',
score1: 8,
score2: 3,
username1: 'User4',
extraInfo: 'adas',
number: '2.',
level: 'A',
point: 8
}
]
);
axios.get('/api/games',)
.then(function (response) {
const data2 = response.data;
for (var i = 0; i < data2.Games.length; i++) {
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[i] = item;
}
})
.catch(function (error) {
console.log(error);
})
axios.get("/api/players",)
.then(function(response){
const data3=response.data;
for (var i = 0; i < data3.Players.length; i++) {
var thing = {
number: i+1,
realname: data3.Players[i].player_real_name,
level: data3.Players[i].group,
point: data3.Players[i].score,
}
things.value[i] = thing;
}
})
</script>
......@@ -125,7 +144,6 @@ const things = reactive([
}
.zhibiao1 {
width: 25%;
text-align: center;
}
......@@ -143,4 +161,9 @@ const things = reactive([
width: 20%;
/* text-align: center; */
}
.zhibiao5 {
width: 75px;
/* text-align: center; */
}
</style>
\ No newline at end of file
vuetify-project/src/components/space.vue
View file @ b491f20b
......@@ -33,7 +33,11 @@
上传头像
</v-btn>
<v-divider class="my-2"></v-divider>
<v-btn variant="text" rounded class="jiacu">
<v-btn @click="dialog2 = true" variant="text" rounded class="jiacu">
上传背景
</v-btn>
<v-divider class="my-2"></v-divider>
<v-btn @click="dialog3 = true" variant="text" rounded class="jiacu">
修改个人信息
</v-btn>
</div>
......@@ -47,9 +51,17 @@
<div class="text-subtitle-1 user float-left" style="color:red;">
{{ level }}级
</div>
<div class="text-subtitle-1 user1">
<div class="text-subtitle-1 user float-left">
{{ group }}组
</div>
</div>
<div class="float-left">
<div class="text-subtitle-1 user1 float-left">
积分：{{ score }}
</div>
<div class="text-subtitle-1 user1 float-left">
胜率：{{ winrate }}%
</div>
</div>
</div>
<div class="relative2">
......@@ -102,7 +114,7 @@
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog2" width="auto">
<v-card width="300px">
<v-card-text>
......@@ -115,49 +127,120 @@
<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-btn color="indigo" text="上传" @click="setBackground"></v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog3" width="auto">
<v-card width="300px">
<v-form ref="form">
<v-card-text>
修改个人信息
</v-card-text>
<v-card-text>
<v-text-field v-model="username1" variant="filled" color="indigo" label="修改用户名"></v-text-field>
<v-text-field v-model="password" variant="filled" 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-card-text>
</v-form>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="indigo" text="取消" @click="dialog3 = false"></v-btn>
<v-btn color="indigo" text="修改" @click="setUserinform"></v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<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="dialog = false"></v-btn>
</template>
</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 form = ref(null);
const password = ref(null);
const confirmpassword = ref(null);
const username = ref('XXX');
const score = ref(1);
const username1 = ref(null);
const score = ref(0);
const group = ref(null);
const level = ref("A");
const items = ref(new Array());
const dialog = ref(false);
const dialog1 = ref(false);
const dialog2 = ref(false);
const dialog3 = ref(false);
const pre_avatar_image = ref('');
const pre_background_image = ref('');
const my_id = ref(null);
var my_id = 0;
const winrate = ref(null);
const cardtitle = ref(null);
const cardtext = 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}`,
usrname: v => !!v || '用户名不能为空',
password: v => !!v || '密码不能为空',
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
required: v => !!v || 'This field is required',
username: v => !!v || '姓名不能为空',
confirmpassword: v => v === password.value || '密码不匹配',
});
axios.get('/api/currentUser',)
.then(function (response) {
const data1 = response.data;
if (data1.status === "SUCCESS") {
my_id.value = data1.user_id;
my_id = data1.user_id;
username.value = data1.username;
pre_avatar_image.value = data1.profile_file;
// pre_background_image.value = data1.background_file;
pre_background_image.value = data1.background_file;
axios.get('/api/players', {
params: {
player_id: my_id
}
})
.then(function (response) {
const data4 = response.data;
if (data4.status === "SUCCESS") {
score.value = data4.Players[0].score;
group.value = data4.Players[0].group;
winrate.value = data4.Players[0].winrate;
}
})
.catch(function (error) {
console.log(error);
})
}
})
.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) {
if (data2.Games[i].player1_id === my_id || data2.Games[i].player2_id === my_id) {
var item = {
id: data2.Games[i].id,
date: data2.Games[i].game_date,
......@@ -175,6 +258,39 @@ axios.get('/api/games',)
console.log(error);
})
function info(title, text) {
cardtitle.value = title;
cardtext.value = text;
dialog.value = true;
}
function setUserinform() {
// loading.value = true;
var user = { user_name: username1.value, user_password: password.value }
if (user.user_name !== null || user.user_password !== null) {
axios.post('/api/setUserinform',
user
)
.then(function (response) {
const data = response.data;
if (data.status == 'SUCCESS') {
info('修改成功！', "");
}
else if (data.status == 'FAILED') {
info('用户名已存在！', "");
}
})
.catch(function (error) {
console.log(error);
});
}
username1.value = null;
password.value = null;
confirmpassword.value = null;
// loading.value = false;
}
function setAvatar() {
const fileInput = document.querySelector('#avatarInput');
const file = fileInput.files[0];
......@@ -305,8 +421,8 @@ function setBackground() {
text-align: center;
}
.alt-text{
top:50%;
left:50%;
.alt-text {
top: 50%;
left: 50%;
}
</style>
\ No newline at end of file
vuetify-project/src/main.vue
View file @ b491f20b
<template>
<div class="h-screen w-auto">
<v-window v-model="tab" class="h-screen w-auto">
<v-window-item :key="1" :value="'tab-1'" class="h-screen w-100">
<v-window v-model="tab" class="h-screen w-auto bottom-navigation">
<v-window-item :key="1" :value="'tab-1'" class="h-screen w-100 bottom-navigation">
<Home></Home>
</v-window-item>
<v-window-item :key="2" :value="'tab-2'" class="h-screen w-100">
<v-window-item :key="2" :value="'tab-2'" class="h-screen w-100 bottom-navigation">
<Gamemanage></Gamemanage>
</v-window-item>
<v-window-item :key="3" :value="'tab-3'" class="h-screen w-100">
<v-window-item :key="3" :value="'tab-3'" class="h-screen w-100 bottom-navigation">
<Space></Space>
</v-window-item>
</v-window>
......@@ -51,6 +51,10 @@ const tab = ref(null)
z-index: 100;
}
.bottom-navigation {
overflow-y: auto;
padding-bottom: 57px;
}
/*.main-card{
height: 100%;
width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment