laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI完善

Browse Source
This commit is contained in:
kron
2025-06-08 12:52:49 +08:00
parent 5a50632c6c
commit deff79aa7b
15 changed files with 900 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.vue
View File

@@ -72,6 +72,36 @@ button.hover {
color: #fed847;
}
@keyframes fadeIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.fade-in {
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeOut {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(20px);
opacity: 0;
}
}
.fade-out {
animation: fadeOut 0.3s ease forwards;
}
@keyframes scaleIn {
from {
transform: scale(0);

23
src/components/Avatar.vue
View File

@@ -20,7 +20,16 @@ defineProps({
type: Number,
default: 45,
},
borderColor: {
type: Number,
default: 0,
},
});
const borderColors = {
0: "#fff",
1: "#64BAFF",
2: "#FF6767",
};
</script>
<template>
@@ -29,7 +38,10 @@ defineProps({
v-if="frame"
src="../static/avatar-frame.png"
mode="widthFix"
:style="{ width: Number(size) + 10 + 'px', height: Number(size) + 10 + 'px' }"
:style="{
width: Number(size) + 10 + 'px',
height: Number(size) + 10 + 'px',
}"
class="avatar-frame"
/>
<image
@@ -54,7 +66,12 @@ defineProps({
<image
:src="src"
mode="widthFix"
:style="{ width: size + 'px', height: size + 'px' }"
:style="{
width: size + 'px',
height: size + 'px',
borderColor: borderColors[borderColor],
}"
class="avatar-image"
/>
</view>
</template>
@@ -85,7 +102,7 @@ defineProps({
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.avatar > image:last-child {
.avatar-image {
border-radius: 50%;
border: 1px solid #fff;
}

26
src/components/BattleHeader.vue
View File

@@ -29,10 +29,20 @@ defineProps({
<view>
<Avatar v-if="blueTeam[0]" :src="blueTeam[0].avatar" frame />
<text>{{ blueTeam[0].name }}</text>
<image
v-if="blueTeam[0].winner"
src="../static/winner-badge.png"
mode="widthFix"
/>
</view>
<view>
<Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
<text>{{ redTeam[0].name }}</text>
<image
v-if="redTeam[0].winner"
src="../static/winner-badge.png"
mode="widthFix"
/>
</view>
</view>
</view>
@@ -47,7 +57,8 @@ defineProps({
.container > image:first-child {
position: absolute;
width: 100%;
top: -10px;
top: -5px;
z-index: 1;
}
.players {
display: flex;
@@ -61,8 +72,10 @@ defineProps({
justify-content: center;
color: #fff9;
font-size: 14px;
padding-top: 20px;
margin-top: 20px;
padding-top: 5px;
overflow: hidden;
position: relative;
}
.players > view:first-child {
background-color: #364469;
@@ -70,4 +83,13 @@ defineProps({
.players > view:last-child {
background-color: #692735;
}
.players > view > text {
margin-top: 5px;
}
.players > view > image:last-child {
position: absolute;
width: 60px;
right: 0;
bottom: 0;
}
</style>

48
src/components/BowTarget.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import BowPower from "@/components/BowPower.vue";
const props = defineProps({
totalRound: {
@@ -31,6 +32,23 @@ const props = defineProps({
},
});
const showRoundTips = ref(false);
watch(
() => props.scores,
(newVal) => {
if (newVal.length > 0) {
showRoundTips.value = true;
setTimeout(() => {
showRoundTips.value = false;
}, 2000);
}
},
{
deep: true,
}
);
function calcRealX(num) {
const len = 20 + num;
return `calc(${(len / 40) * 100}% - 10px)`;
@@ -50,9 +68,15 @@ function calcRealY(num) {
"/" +
totalRound
}}</text>
<BowPower :power="power" />
<BowPower v-if="power > 0" :power="power" />
</view>
<view class="target">
<view v-if="scores.length && showRoundTips" class="e-value fade-in"
>经验 +1</view
>
<view v-if="scores.length && showRoundTips" class="round-tip fade-in"
>{{ scores[scores.length - 1].ring }}<text>环</text></view
>
<image
v-for="(bow, index) in scores"
:key="index"
@@ -81,6 +105,28 @@ function calcRealY(num) {
.target {
position: relative;
}
.e-value {
position: absolute;
top: 30%;
left: 60%;
background-color: #0006;
color: #fff;
font-size: 12px;
padding: 4px 7px;
border-radius: 5px;
}
.round-tip {
position: absolute;
top: 38%;
left: 60%;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.round-tip > text {
font-size: 18px;
margin-left: 5px;
}
.target > image:last-child {
width: 100%;
}

162
src/components/MeleeResult.vue Normal file
View File

@@ -0,0 +1,162 @@
<script setup>
import { ref } from "vue";
import BowTarget from "@/components/BowTarget.vue";
import Avatar from "@/components/Avatar.vue";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
},
});
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view>
<text>5人大乱斗</text>
<view @click="onClose">
<image src="../static/close-white.png" mode="widthFix" />
</view>
</view>
<view class="rank-rows">
<view v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
<image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
<image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
<image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
<view v-if="index > 2" class="rank-view">{{ item }}</view>
<Avatar src="../static/avatar.png" :size="24" />
<text>积分 + 117分</text>
<text>117环</text>
<text v-for="(round, index2) in new Array(12).fill(9)" :key="index2">
{{ round }}环
</text>
</view>
</view>
<view :style="{ width: '95%', marginTop: '-5%' }">
<BowTarget />
</view>
<view class="score-text"
><text :style="{ color: '#fed847' }">12</text>支箭，共<text
:style="{ color: '#fed847' }"
>100</text
>环</view
>
<view class="score-row">
<view
v-for="(score, index) in new Array(12).fill(9)"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ score }}
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.container > view:first-child {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
color: #fff;
position: relative;
font-size: 20px;
}
.container > view:first-child > view:last-child {
position: absolute;
left: 5px;
top: 25px;
}
.container > view:first-child > view:last-child > image {
width: 40px;
}
.score-text {
width: 100%;
color: #fff;
text-align: center;
font-size: 16px;
margin-bottom: 6px;
}
.score-row {
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.score-item {
background-image: url("../static/score-bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fed847;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
margin: 3px;
}
.rank-rows {
display: flex;
flex-direction: column;
width: 100%;
border-top: 1px solid #fff3;
}
.rank-rows > view {
width: clac(100% - 20px);
color: #fff9;
border-bottom: 1px solid #fff3;
padding: 7px 10px;
display: flex;
align-items: center;
font-size: 14px;
overflow-x: auto;
}
.rank-rows > view::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.rank-rows > view > image:first-child,
.rank-rows > view > view:first-child {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 12px;
margin-right: 10px;
flex: 0 0 auto;
}
.rank-rows > view > view:first-child {
background-color: #6d6d6d;
border-radius: 50%;
}
.rank-rows > view > text {
margin-left: 10px;
flex: 0 0 auto;
}
.rank-rows > view > text:nth-child(4) {
color: #fed847;
padding-right: 10px;
border-right: 1px solid #fff3;
}
</style>

134
src/components/TeamResult.vue Normal file
View File

@@ -0,0 +1,134 @@
<script setup>
import { ref } from "vue";
import BowTarget from "@/components/BowTarget.vue";
import Avatar from "@/components/Avatar.vue";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
},
});
const selected = ref(0);
const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"];
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view>
<text>1v1排位赛</text>
<view @click="onClose">
<image src="../static/close-white.png" mode="widthFix" />
</view>
</view>
<view>
<view
v-for="(tab, index) in tabs"
:key="index"
@click="() => (selected = index)"
:class="selected === index ? 'selected-tab' : ''"
>
{{ tab }}
</view>
</view>
<view :style="{ width: '95%' }">
<BowTarget />
</view>
<view class="score-row">
<Avatar src="../static/avatar.png" :borderColor="1" />
<view
v-for="(score, index) in [7, 9, 7, 3, 8]"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ score }}
</view>
</view>
<view class="score-row">
<Avatar src="../static/avatar.png" :borderColor="2" />
<view
v-for="(score, index) in [7, 9, 7, 3, 8]"
:key="index"
class="score-item"
:style="{ width: '13vw', height: '13vw' }"
>
{{ score }}
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.container > view:first-child {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
color: #fff;
position: relative;
font-size: 20px;
}
.container > view:first-child > view:last-child {
position: absolute;
right: 5px;
top:32px;
}
.container > view:first-child > view:last-child > image {
width: 40px;
}
.container > view:nth-child(2) {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
color: #fff9;
padding-left: 15px;
}
.container > view:nth-child(2) > view {
border: 1px solid #fff9;
border-radius: 20px;
padding: 7px 10px;
margin: 0 5px;
font-size: 14px;
}
.selected-tab {
background-color: #fed847;
border-color: #fed847 !important;
color: #000;
}
.score-row {
margin: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.score-item {
background-image: url("../static/score-bg.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fed847;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
margin-left: 10px;
}
</style>

40
src/components/UserHeader.vue
View File

@@ -39,25 +39,21 @@ const toUserPage = () => {
<view class="user-details">
<view class="user-name">
<text>{{ user.nickName }}</text>
<image src="../static/vip1.png" mode="widthFix" />
<image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
</view>
<view class="user-stats">
<text class="level-tag">钻石1级</text>
<text class="level-tag">{{ user.lvl }}</text>
<text class="level-tag level-tag-first">钻石1级</text>
<text class="level-tag level-tag-second">{{ user.lvl }}</text>
<view class="rank-tag">
<view :style="{ width: '40%' }" />
<text>{{ user.lvl }}/{{ user.lvlPoints }}</text>
<view class="rank-tag-progress" :style="{ width: '40%' }" />
<text class="rank-tag-text">{{ user.lvl }}/{{ user.lvlPoints }}</text>
</view>
</view>
</view>
<view v-if="showRank === true" class="rank-info">
<image src="../static/global-rank.png" mode="widthFix" />
<image class="rank-info-image" src="../static/global-rank.png" mode="widthFix" />
<text>本赛季全国</text>
<text class="rank-number"
>第<text :style="{ color: '#ffd700' }"
>{{ user.points }}/{{ user.rankLvl }}</text
>名</text
>
<text class="rank-number">第<text :style="{ color: '#ffd700' }">{{ user.points }}/{{ user.rankLvl }}</text>名</text>
</view>
</view>
</template>
@@ -83,7 +79,7 @@ const toUserPage = () => {
margin-bottom: 5px;
}
.user-name > image {
.user-name-image {
margin-left: 5px;
width: 20px;
}
@@ -97,11 +93,13 @@ const toUserPage = () => {
text-align: center;
line-height: 16px;
}
.level-tag:first-child {
.level-tag-first {
width: 45px;
background: #5f51ff;
}
.level-tag:nth-child(2) {
.level-tag-second {
width: 30px;
background: #09c504;
}
@@ -115,17 +113,17 @@ const toUserPage = () => {
.rank-tag {
position: relative;
background-color: #00000038;
width: 56px;
width: 55px;
height: 16px;
}
.rank-tag > view:first-child {
.rank-tag-progress {
background: #ffa711;
height: 100%;
border-radius: 12px;
}
.rank-tag > text {
.rank-tag-text {
position: absolute;
top: 0;
left: 5px;
@@ -134,16 +132,16 @@ const toUserPage = () => {
.rank-info {
text-align: left;
font-size: 10px;
font-size: 12px;
position: relative;
color: #b3b3b3;
padding-left: 8px;
}
.rank-info > image {
.rank-info-image {
position: absolute;
top: -8px;
left: -8px;
top: -6px;
left: -9px;
width: 90px;
}

14
src/pages.json
View File

@@ -109,7 +109,19 @@
}
},
{
"path": "pages/match-room",
"path": "pages/team-match",
"style": {
"navigationBarTitleText": "排位赛"
}
},
{
"path": "pages/melee-match",
"style": {
"navigationBarTitleText": "排位赛"
}
},
{
"path": "pages/match-detail",
"style": {
"navigationBarTitleText": "排位赛"
}

20
src/pages/battle-result.vue
View File

@@ -2,19 +2,21 @@
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getGameAPI } from "@/apis";
import TeamResult from "@/components/TeamResult.vue";
import MeleeResult from "@/components/MeleeResult.vue";
const battleId = ref("");
const show = ref(true);
onLoad((options) => {
battleId.value = options.battleId;
});
// onLoad(async (options) => {
// battleId.value = options.battleId;
// const result = await getGameAPI(options.battleId);
// console.log(1111, result);
// });
function exit() {
uni.navigateBack();
}
onMounted(async () => {
const result = await getGameAPI("BATTLE-1749121128909437828-799");
conosle.log(1111, result);
});
onMounted(async () => {});
</script>
<template>
@@ -35,9 +37,11 @@ onMounted(async () => {
</view>
<text>你是朋友中的佼佼者哦</text>
<view>
<view>查看靶纸</view>
<view @click="() => (show = true)">查看靶纸</view>
<view @click="exit">退出</view>
</view>
<!-- <TeamResult :show="show" :onClose="() => (show = false)" /> -->
<MeleeResult :show="show" :onClose="() => (show = false)" />
</view>
</template>

1
src/pages/be-vip.vue
View File

@@ -75,6 +75,7 @@ const chooseVip = (index) => {
<style scoped>
.header {
width: calc(100% - 30px);
display: flex;
align-items: center;
justify-content: space-between;

172
src/pages/match-detail.vue Normal file
View File

@@ -0,0 +1,172 @@
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import Avatar from "@/components/Avatar.vue";
const id = ref("");
const type = ref("");
const data = {
blueTeam: {
name: "选手1",
avatar: "../static/avatar.png",
arrows: [4, 6, 2],
score: 1,
},
redTeam: {
name: "选手2",
avatar: "../static/avatar.png",
arrows: [4, 6, 2],
score: 1,
},
};
const result = ref([
{
round: 1,
...data,
},
{
round: 2,
...data,
},
{
round: 3,
...data,
},
{
round: 4,
...data,
},
{
round: 5,
...data,
},
]);
onLoad((options) => {
type.value = options.type;
id.value = options.id;
});
</script>
<template>
<Container title="详情">
<view class="container">
<BattleHeader
:blueTeam="[
{ name: '选手1', avatar: '../static/avatar.png', winner: true },
]"
:redTeam="[{ name: '选手2', avatar: '../static/avatar.png' }]"
/>
<view class="score-header">
<text>决金箭轮（环数）</text>
<view>
<text>查看靶纸</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</view>
<view class="score-row">
<view>
<Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
<text>9环</text>
<text>10环</text>
<text>7环</text>
</view>
<image src="../static/winner-badge.png" mode="widthFix" />
</view>
<view class="score-row" :style="{ marginBottom: '5px' }">
<view>
<Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
<text>9环</text>
<text>10环</text>
<text>7环</text>
</view>
</view>
<view v-for="(item, index) in result" :key="index">
<view class="score-header">
<text>第{{ item.round }}轮</text>
<view>
<text>查看靶纸</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</view>
<view class="score-row">
<view>
<Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
<text>9环</text>
<text>10环</text>
<text>7环</text>
</view>
<view>
<text :style="{ color: '#64BAFF' }">18环</text>
<text>得分 +1</text>
</view>
</view>
<view class="score-row" :style="{ marginBottom: '5px' }">
<view>
<Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
<text>9环</text>
<text>10环</text>
<text>7环</text>
</view>
<view>
<text :style="{ color: '#FF6767' }">18环</text>
<text>得分 +1</text>
</view>
</view>
</view>
<view :style="{ height: '20px' }"></view>
</view>
</Container>
</template>
<style scoped>
.container {
width: 100%;
height: 100%;
}
.score-header,
.score-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
color: #fff9;
font-size: 15px;
border-bottom: 1px solid #fff3;
}
.score-header > text:first-child {
color: #fed847;
}
.score-header > view:last-child {
display: flex;
align-items: center;
}
.score-header > view:last-child > image {
margin-left: 5px;
width: 15px;
height: 15px;
transform: rotate(180deg);
margin-top: -2px;
}
.score-row > view {
display: flex;
align-items: center;
}
.score-row > view:first-child > text {
margin-left: 20px;
color: #fff;
display: block;
width: 30px;
}
.score-row > image:last-child {
width: 40px;
}
.score-row > view:last-child {
padding-right: 5px;
}
.score-row > view:last-child > text:last-child {
margin-left: 20px;
}
</style>

4
src/pages/match-room.vue → src/pages/melee-match.vue
View File

@@ -26,10 +26,6 @@ const tips = ref("即将开始...");
const seq = ref(0);
const timerSeq = ref(0);
const roundResults = ref([
// {
// blueArrows: [{ ring: 2 }, { ring: 2 }],
// redArrows: [{ ring: 2 }, { ring: 3 }],
// },
]);
onLoad((options) => {

182
src/pages/my-growth.vue
View File

@@ -15,107 +15,98 @@ const handleSelect = async (index) => {
}
selectedIndex.value = index;
};
const toMatchDetail = () => {
uni.navigateTo({
url: "/pages/match-detail",
});
};
</script>
<template>
<Container title="我的成长脚印">
<view class="tabs">
<view
v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
:key="index"
:style="{
color: index === selectedIndex ? '#000' : '#fff',
backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
}"
@tap="handleSelect(index)"
>
{{ rankType }}
</view>
</view>
<view class="contents">
<view
:style="{
display: selectedIndex !== 2 ? 'flex' : 'none',
}"
>
<view>
<view class="contest-header">
<text>1V1</text>
<text>2025.01.21 14:09:23</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<view class="contest-1v1">
<view class="player">
<Avatar frame src="../static/avatar.png" />
<text>选手1</text>
<image src="../static/winner-badge.png" mode="widthFix" />
</view>
<view class="player">
<Avatar frame src="../static/avatar.png" />
<text>选手2</text>
</view>
</view>
</view>
<view>
<view class="contest-header">
<text>1V1</text>
<text>2025.01.21 14:09:23</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<view class="contest-1v1">
<view class="player">
<Avatar frame src="../static/avatar.png" />
<text>选手1</text>
<image src="../static/winner-badge.png" mode="widthFix" />
</view>
<view class="player">
<Avatar frame src="../static/avatar.png" />
<text>选手2</text>
</view>
</view>
</view>
<view>
<view class="contest-header">
<text>5v5</text>
<text>2025.01.21 14:09:23</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<view class="contest-multi">
<view class="player">
<Avatar :rank="1" src="../static/avatar.png" />
<text>选手1</text>
</view>
<view class="player">
<Avatar :rank="2" src="../static/avatar.png" />
<text>选手2</text>
</view>
<view class="player">
<Avatar :rank="3" src="../static/avatar.png" />
<text>选手3</text>
</view>
<view class="player">
<Avatar :rank="4" src="../static/avatar.png" />
<text>选手4</text>
</view>
<view class="player">
<Avatar :rank="5" src="../static/avatar.png" />
<text>选手5</text>
</view>
</view>
</view>
</view>
<view
:style="{
display: selectedIndex === 2 ? 'flex' : 'none',
}"
>
<view class="container">
<view class="tabs">
<view
v-for="(item, index) in practiseList"
v-for="(rankType, index) in ['排位赛', '好友约战', '射馆练习']"
:key="index"
class="practice-record"
:style="{
color: index === selectedIndex ? '#000' : '#fff',
backgroundColor:
index === selectedIndex ? '#FFD947' : 'transparent',
}"
@tap="handleSelect(index)"
>
<text>单组练习 {{ item.createdAt }}</text>
<image src="../static/back.png" mode="widthFix" />
{{ rankType }}
</view>
</view>
<view class="contents">
<view
:style="{
display: selectedIndex !== 2 ? 'flex' : 'none',
}"
>
<view @click="toMatchDetail">
<view class="contest-header">
<text>1V1</text>
<text>2025.01.21 14:09:23</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<view class="contest-1v1">
<view class="player">
<Avatar frame src="../static/avatar.png" />
<text>选手1</text>
<image src="../static/winner-badge.png" mode="widthFix" />
</view>
<view class="player">
<Avatar frame src="../static/avatar.png" />
<text>选手2</text>
</view>
</view>
</view>
<view @click="toMatchDetail">
<view class="contest-header">
<text>5v5</text>
<text>2025.01.21 14:09:23</text>
<image src="../static/back.png" mode="widthFix" />
</view>
<view class="contest-multi">
<view class="player">
<Avatar :rank="1" src="../static/avatar.png" />
<text>选手1</text>
</view>
<view class="player">
<Avatar :rank="2" src="../static/avatar.png" />
<text>选手2</text>
</view>
<view class="player">
<Avatar :rank="3" src="../static/avatar.png" />
<text>选手3</text>
</view>
<view class="player">
<Avatar :rank="4" src="../static/avatar.png" />
<text>选手4</text>
</view>
<view class="player">
<Avatar :rank="5" src="../static/avatar.png" />
<text>选手5</text>
</view>
</view>
</view>
</view>
<view
:style="{
display: selectedIndex === 2 ? 'flex' : 'none',
}"
>
<view
v-for="(item, index) in practiseList"
:key="index"
class="practice-record"
>
<text>单组练习 {{ item.createdAt }}</text>
<image src="../static/back.png" mode="widthFix" />
</view>
</view>
</view>
</view>
@@ -123,6 +114,9 @@ const handleSelect = async (index) => {
</template>
<style scoped>
.container {
width: 100%;
}
.tabs {
width: calc(100% - 30px);
display: flex;

16
src/pages/ranking.vue
View File

@@ -8,9 +8,15 @@ const handleSelect = (index) => {
selectedIndex.value = index;
};
const toMatchPage = (gameType, teamSize) => {
const toTeamMatchPage = (gameType, teamSize) => {
uni.navigateTo({
url: `/pages/match-room?gameType=${gameType}&teamSize=${teamSize}`,
url: `/pages/team-match?gameType=${gameType}&teamSize=${teamSize}`,
});
};
const toMeleeMatchPage = (gameType, teamSize) => {
uni.navigateTo({
url: `/pages/team-match?gameType=${gameType}&teamSize=${teamSize}`,
});
};
</script>
@@ -50,17 +56,17 @@ const toMatchPage = (gameType, teamSize) => {
<image
src="../static/battle1v1.png"
mode="widthFix"
@click="() => toMatchPage(1, 2)"
@click="() => toTeamMatchPage(1, 2)"
/>
<image
src="../static/battle5.png"
mode="widthFix"
@click="() => toMatchPage(2, 5)"
@click="() => toMeleeMatchPage(2, 5)"
/>
<image
src="../static/battle10.png"
mode="widthFix"
@click="() => toMatchPage(2, 10)"
@click="() => toMeleeMatchPage(2, 10)"
/>
</view>
<view class="data-progress">

167
src/pages/team-match.vue Normal file
View File

@@ -0,0 +1,167 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import Timer from "@/components/Timer.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import SButton from "@/components/SButton.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { MESSAGETYPES, roundsName } from "@/constants";
const gameType = ref(0);
const teamSize = ref(0);
const matching = ref(false);
const start = ref(false);
const battleId = ref("");
const currentRound = ref(1);
const totalRounds = ref(0);
const power = ref(0);
const scores = ref([]);
const redTeam = ref([]);
const blueTeam = ref([]);
const currentShooterId = ref(0);
const tips = ref("即将开始...");
const seq = ref(0);
const timerSeq = ref(0);
const roundResults = ref([
// {
// blueArrows: [{ ring: 2 }, { ring: 2 }],
// redArrows: [{ ring: 2 }, { ring: 3 }],
// },
]);
onLoad((options) => {
gameType.value = options.gameType;
teamSize.value = options.teamSize;
});
async function startMatch() {
if (gameType.value && teamSize.value) {
await matchGameAPI(true, gameType.value, teamSize.value);
startMatch.value = true;
}
}
async function stopMatch() {
if (gameType.value && teamSize.value) {
await matchGameAPI(false, gameType.value, teamSize.value);
startMatch.value = false;
}
}
async function readyToGo() {
if (battleId.value) {
await readyGameAPI(battleId.value);
start.value = true;
timerSeq.value = 0;
}
}
async function onReceiveMessage(content) {
const messages = JSON.parse(content).data.updates || [];
messages.forEach((msg) => {
if (
!msg.id ||
(battleId.value && msg.id === battleId.value) ||
msg.constructor === MESSAGETYPES.WaitForAllReady
) {
console.log("收到消息：", msg);
}
if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
scores.value.push(msg.target);
power.value = msg.target.battery;
}
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 这里会掉多次;
timerSeq.value += 1;
battleId.value = msg.id;
redTeam.value = msg.groupUserStatus.redTeam;
blueTeam.value = msg.groupUserStatus.blueTeam;
totalRounds.value = msg.groupUserStatus.config.maxRounds;
}
if (msg.id !== battleId.value) return;
if (msg.constructor === MESSAGETYPES.AllReady) {
start.value = true;
timerSeq.value = 0;
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
scores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
} else {
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
}
}
if (msg.constructor === MESSAGETYPES.ShootResult) {
scores.value = [msg.target];
}
if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
const result = msg.preRoundResult;
scores.value = [];
currentShooterId.value = 0;
if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
// 开始下一轮;
roundResults.value = result.roundResults;
currentRound.value = result.currentRound + 1;
}
}
if (msg.constructor === MESSAGETYPES.MatchOver) {
uni.redirectTo({
url: "/pages/battle-result?battleId=" + msg.id,
});
}
});
}
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
uni.$off("socket-inbox", onReceiveMessage);
if (startMatch.value) {
matchGameAPI(false, gameType.value, teamSize.value);
}
});
</script>
<template>
<Container title="排位赛" :bgType="1">
<view class="container">
<ShootProgress v-if="start" :tips="tips" :seq="seq" />
<PlayersRow
v-if="start"
:currentShooterId="currentShooterId"
:blueTeam="blueTeam"
:redTeam="redTeam"
/>
<BowTarget
:power="power"
:currentRound="currentRound"
:totalRound="totalRounds"
:scores="scores"
:tips="
!start && scores.length > 0
? `本次射程${scores[scores.length - 1].dst / 100}米，${
scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
}达到距离要求`
: ''
"
/>
<BattleFooter
v-if="roundResults.length > 0"
:roundResults="roundResults"
/>
<Timer :seq="timerSeq" :callBack="readyToGo" />
</view>
<SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
matching ? "取消匹配" : "开始匹配"
}}</SButton>
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
</Container>
</template>
<style scoped>
.container {
width: 100%;
}
</style>