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

Merge remote-tracking branch 'origin/new-race-mode' into new-race-mode

Browse Source
This commit is contained in:
linyimin
2026-05-07 16:54:32 +08:00
parent 895be17f7c 7c8fd9395b
commit 29a6f46a0d
8 changed files with 446 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/GuideTwo.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup>
defineProps({
noBg: {
type: Boolean,
default: false,
}
});
</script>
<template>
<view class="container">
<image class="shooter2" src="../static/shooter2.png" mode="widthFix" />
<view class="bg-box">
<image
class="bg"
v-if="!noBg"
src="../static/long-bubble-border.png"
mode="widthFix"
/>
<slot />
</view>
</view>
</template>
<style scoped>
.container {
display: flex;
align-items: center;
padding: 0 15px;
margin-bottom: 14rpx;
width: clac(100% - 30px);
}
.container .shooter2 {
width: 150rpx;
height: 162rpx;
}
.container .bg-box {
color: #fff;
font-size: 28rpx;
position: relative;
flex: 1;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container .bg-box .bg {
position: absolute;
left: 0;
right: 0;
width: 100%;
}
</style>

56
src/components/Header.vue
View File

@@ -59,6 +59,9 @@ const loading = ref(false);
const pointBook = ref(null);
const showProgress = ref(false);
const heat = ref(0);
/** 当前对战房间的房号，由 battle-room 页面通过 uni.$emit 传入 */
const battleRoomNumber = ref("");
const updateLoading = (value) => {
loading.value = value;
};
@@ -67,6 +70,14 @@ const updateHot = (value) => {
heat.value = value;
};
/**
* 接收 battle-room 页面发出的房间信息，更新房号展示
* @param {{ roomNumber: string }} info
*/
const updateBattleRoomInfo = (info) => {
battleRoomNumber.value = info.roomNumber || "";
};
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
@@ -83,9 +94,11 @@ onMounted(() => {
showProgress.value = true;
}
uni.$on("update-hot", updateHot);
uni.$on("battle-room-info", updateBattleRoomInfo);
});
onBeforeUnmount(() => {
uni.$off("update-hot", updateHot);
uni.$off("battle-room-info", updateBattleRoomInfo);
});
</script>
@@ -172,6 +185,16 @@ onBeforeUnmount(() => {
<view v-if="showProgress" class="battle-progress">
<HeaderProgress />
</view>
<!-- 对战房间：整个胶囊为分享按钮，点击任意区域均可触发分享 -->
<button
v-if="currentPage === 'pages/battle-room' && battleRoomNumber"
open-type="share"
hover-class="none"
class="battle-room-number"
>
<text class="battle-room-number__text">房号: {{ battleRoomNumber }}</text>
<image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
</button>
</view>
</template>
@@ -259,4 +282,37 @@ onBeforeUnmount(() => {
margin: 0 20rpx;
max-width: 300rpx;
}
/* 对战房间：整个胶囊作为分享按钮，靠右对齐 */
.battle-room-number {
margin-left: auto;
margin-right: 10rpx;
display: flex;
align-items: center;
justify-content: center;
width: 240rpx;
height: 64rpx;
background: rgba(0, 0, 0, 0.15);
border-radius: 96rpx;
border: 1rpx solid #5b5758;
flex-shrink: 0;
padding: 0;
line-height: normal;
}
/* 重置 button 默认边框 */
.battle-room-number::after {
border: none;
}
.battle-room-number__text {
width: 156rpx;
height: 28rpx;
font-weight: 400;
font-size: 20rpx;
color: #ffffff;
text-align: center;
line-height: 28rpx;
}
.battle-room-number__icon {
width: 25rpx;
height: 26rpx;
}
</style>

398
src/pages/battle-room.vue
View File

@@ -3,9 +3,10 @@ import { ref, onMounted, computed, onBeforeUnmount } from "vue";
import { onShow, onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import PlayerSeats from "@/components/PlayerSeats.vue";
import Guide from "@/components/Guide.vue";
import GuideTwo from "@/components/GuideTwo.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import {
getRoomAPI,
destroyRoomAPI,
@@ -29,6 +30,18 @@ const players = ref([]);
const blueTeam = ref([]);
const redTeam = ref([]);
/**
* 根据对战类型和房间人数动态生成页面标题
* battleType=1: 组队对战；count 2/4/6 分别对应 1v1/2v2/3v3
* battleType=2: 多人乱斗
*/
const battleTitle = computed(() => {
if (!room.value.battleType) return "好友约战";
if (room.value.battleType === 2) return "多人乱斗";
const half = room.value.count / 2;
return `${half}v${half}对抗赛`;
});
const ready = ref(false);
const allReady = ref(false);
const timer = ref(null);
@@ -96,6 +109,9 @@ async function refreshRoomData() {
}
if (timer.value) clearInterval(timer.value);
// timer.value = setTimeout(refreshRoomData, 2000);
// 通知 Header 组件更新房号展示
uni.$emit("battle-room-info", { roomNumber: roomNumber.value });
}
const startGame = async () => {
@@ -184,8 +200,32 @@ const exitRoom = async () => {
uni.navigateBack();
};
const removePlayer = async (player) => {
await kickPlayerAPI(roomNumber.value, player.id);
/** 待确认踢出的玩家信息 */
const playerToKick = ref(null);
/** 控制踢出确认弹窗的显示状态 */
const showKickConfirm = ref(false);
/**
* 点击踢出按钮，弹出二次确认弹窗
* @param {object} player - 被踢的玩家信息
*/
const removePlayer = (player) => {
playerToKick.value = player;
showKickConfirm.value = true;
};
/** 确认踢出：调用 API 并关闭弹窗 */
const confirmKick = async () => {
if (!playerToKick.value) return;
await kickPlayerAPI(roomNumber.value, playerToKick.value.id);
showKickConfirm.value = false;
playerToKick.value = null;
};
/** 取消踢出：关闭弹窗 */
const cancelKick = () => {
showKickConfirm.value = false;
playerToKick.value = null;
};
const canClick = computed(() => {
@@ -214,7 +254,11 @@ onShow(() => {
});
onLoad(async (options) => {
if (options.roomNumber) roomNumber.value = options.roomNumber;
if (options.roomNumber) {
roomNumber.value = options.roomNumber;
// 立即通知 Header 显示房号，无需等待异步 API 返回
uni.$emit("battle-room-info", { roomNumber: options.roomNumber });
}
});
onMounted(() => {
@@ -236,9 +280,9 @@ onBeforeUnmount(() => {
</script>
<template>
<Container :title="`好友约战 - ${roomNumber}`">
<Container :title="battleTitle">
<view class="standby-phase">
<Guide>
<GuideTwo>
<view class="battle-guide">
<view class="guide-tips">
<text>弓箭手们，人都到齐了吗?</text>
@@ -247,48 +291,28 @@ onBeforeUnmount(() => {
}}</text>
<text v-if="room.battleType === 2">大乱斗即将开始! </text>
</view>
<button hover-class="none" open-type="share">邀请</button>
</view>
</Guide>
</GuideTwo>
<view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png"
mode="widthFix"
/>
<image src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png" mode="widthFix" />
<view>
<view
v-if="owner.id"
class="player"
:style="{ transform: 'translateY(-60px)' }"
>
<view v-if="owner.id" class="player" :style="{ transform: 'translateY(-60px)' }">
<Avatar :src="owner.avatar" :size="60" />
<text>管理员</text>
<text>{{ owner.name }}</text>
</view>
<view
v-else
class="no-player"
:style="{ transform: 'translateY(-60px)' }"
>
<view v-else class="no-player" :style="{ transform: 'translateY(-60px)' }">
<image src="../static/question-mark.png" mode="widthFix" />
</view>
<image src="../static/versus.png" mode="widthFix" />
<view
v-if="opponent.id"
class="player"
:style="{ transform: 'translateY(60px)' }"
>
<view v-if="opponent.id" class="player" :style="{ transform: 'translateY(60px)' }">
<Avatar :src="opponent.avatar" :size="60" />
<text class="ready" :style="{ opacity: opponent.ready ? 1 : 0 }">
已准备
</text>
<text>{{ opponent.name }}</text>
<button
v-if="owner.id === user.id"
hover-class="none"
class="remove-player"
@click="() => removePlayer(opponent)"
>
<button v-if="owner.id === user.id" hover-class="none" class="remove-player"
@click="() => removePlayer(opponent)">
<image src="../static/close-white.png" mode="widthFix" />
</button>
</view>
@@ -299,31 +323,15 @@ onBeforeUnmount(() => {
</view>
<block v-if="room.battleType === 1 && room.count >= 4">
<view class="all-players">
<image
src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
mode="widthFix"
/>
<image
v-if="room.count === 4"
src="../static/title-2v2.png"
mode="widthFix"
/>
<image
v-if="room.count === 6"
src="../static/title-3v3.png"
mode="widthFix"
/>
<image src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png" mode="widthFix" />
<image v-if="room.count === 4" src="../static/title-2v2.png" mode="widthFix" />
<image v-if="room.count === 6" src="../static/title-3v3.png" mode="widthFix" />
<view>
<view v-for="(item, index) in players" :key="index">
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
<text v-if="owner.id === item.id">管理员</text>
<button
v-if="owner.id !== item.id && item.id"
hover-class="none"
class="remove-player"
@click="() => removePlayer(item)"
:style="{ top: '-10rpx', right: '-10rpx' }"
>
<button v-if="owner.id !== item.id && item.id" hover-class="none" class="remove-player"
@click="() => removePlayer(item)" :style="{ top: '-10rpx', right: '-10rpx' }">
<image src="../static/close-white.png" mode="widthFix" />
</button>
</view>
@@ -331,16 +339,8 @@ onBeforeUnmount(() => {
</view>
<view class="choose-side">
<view>
<view
v-for="(item, index) in redTeam"
:key="index"
class="choose-side-left-item"
>
<button
hover-class="none"
v-if="item.id === user.id"
@click="chooseTeam(0)"
>
<view v-for="(item, index) in redTeam" :key="index" class="choose-side-left-item">
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
<text class="truncate">{{ item.name || "我要加入" }}</text>
@@ -354,11 +354,7 @@ onBeforeUnmount(() => {
</view>
</view>
<view>
<view
v-for="(item, index) in blueTeam"
:key="index"
class="choose-side-right-item"
>
<view v-for="(item, index) in blueTeam" :key="index" class="choose-side-right-item">
<view v-if="item.id">
<Avatar :src="item.avatar" :size="36" />
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
@@ -367,37 +363,43 @@ onBeforeUnmount(() => {
<image src="../static/add-grey.png" mode="widthFix" />
</button>
<text class="truncate">{{ item.name || "我要加入" }}</text>
<button
hover-class="none"
v-if="item.id === user.id"
@click="chooseTeam(0)"
>
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
<image src="../static/close-grey.png" mode="widthFix" />
</button>
</view>
</view>
</view>
</block>
<PlayerSeats
v-if="room.battleType === 2"
:total="room.count || 10"
:players="players"
:removePlayer="removePlayer"
/>
<PlayerSeats v-if="room.battleType === 2" :total="room.count || 10" :players="players"
:removePlayer="removePlayer" />
<view>
<SButton :disabled="!canClick" :onClick="getReady">
{{
allReady.value
? "即将进入对局..."
: owner.id === user.id
? "开始对局"
: "我准备好了"
? "开始对局"
: "我准备好了"
}}
</SButton>
<text class="tips">所有人准备好后由房主点击开始</text>
</view>
</view>
</Container>
<!-- 踢出玩家二次确认弹窗（不传 onClose，屏蔽 X 关闭按钮） -->
<ScreenHint :show="showKickConfirm">
<view class="kick-confirm">
<!-- 弹窗标题，玩家名字高亮显示 -->
<text class="kick-confirm__title">
是否把「<text style="color: #F7D550">{{ playerToKick && playerToKick.name }}</text>」移出房间？
</text>
<!-- 按钮区：确认在左，取消在右 -->
<view class="kick-confirm__btns">
<button hover-class="none" class="kick-confirm__btn kick-confirm__btn--confirm" @click="confirmKick">确定</button>
<button hover-class="none" class="kick-confirm__btn kick-confirm__btn--cancel" @click="cancelKick">取消</button>
</view>
</view>
</ScreenHint>
</template>
<style scoped>
@@ -406,6 +408,7 @@ onBeforeUnmount(() => {
height: calc(100% - 40px);
overflow-x: hidden;
}
.tips {
color: #fff9;
width: 100%;
@@ -414,6 +417,7 @@ onBeforeUnmount(() => {
margin-top: 10px;
font-size: 12px;
}
.player-unknow {
width: 40px;
height: 40px;
@@ -425,25 +429,30 @@ onBeforeUnmount(() => {
justify-content: center;
background-color: #69686866;
}
.player-unknow > image {
.player-unknow>image {
width: 40%;
}
.team-mode {
width: calc(100vw - 30px);
height: 125vw;
margin: 15px;
margin: 0 15px 15px 15px;
}
.team-mode > image:first-child {
.team-mode>image:first-child {
position: absolute;
width: calc(100vw - 30px);
z-index: -1;
}
.team-mode > view {
.team-mode>view {
display: flex;
justify-content: center;
align-items: center;
height: 95%;
}
.player {
width: 70px;
display: flex;
@@ -455,14 +464,16 @@ onBeforeUnmount(() => {
font-size: 14px;
position: relative;
}
.player > image {
.player>image {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #ccc;
margin-bottom: 5px;
}
.player > text:nth-child(2) {
.player>text:nth-child(2) {
color: #000;
background-color: #fed847;
font-size: 16rpx;
@@ -472,21 +483,85 @@ onBeforeUnmount(() => {
margin-top: -16rpx;
position: relative;
}
.player > text:nth-child(3) {
.player>text:nth-child(3) {
margin-top: 6rpx;
}
.player > text {
.player>text {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.player .ready {
background-color: #2c261fb3 !important;
border: 1rpx solid #a3793f66 !important;
color: #fed847 !important;
}
/* 踢出确认弹窗内容 */
.kick-confirm {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx 30rpx;
color: #fff;
}
.kick-confirm__title {
font-size: 30rpx;
font-weight: 500;
text-align: center;
line-height: 1.5;
/* 标题与按钮区间距 */
margin-bottom: 58rpx;
}
.kick-confirm__btns {
display: flex;
/* 两个按钮间距 */
gap: 16rpx;
}
/* 按钮公共基础样式：固定宽高与圆角 */
.kick-confirm__btn {
font-size: 28rpx;
width: 232rpx;
height: 70rpx;
border-radius: 44rpx;
line-height: 70rpx;
display: flex;
align-items: center;
justify-content: center;
}
/* 取消按钮：白色半透明背景（用 rgba 避免 opacity 平铺到文字） */
.kick-confirm__btn--cancel {
background: rgba(255, 255, 255, 0.2);
border: none;
color: #FFFFFF;
font-weight: 500;
font-size: 28rpx;
text-align: center;
border-radius: 44rpx;
}
.kick-confirm__btn--cancel::after {
border: none;
}
/* 确认按钮：黄色实心背景 */
.kick-confirm__btn--confirm {
background: #FED847;
border: none;
color: #000000;
font-weight: 500;
font-size: 28rpx;
text-align: center;
border-radius: 44rpx;
}
.kick-confirm__btn--confirm::after {
border: none;
}
.remove-player {
width: 40rpx;
height: 40rpx;
@@ -499,13 +574,16 @@ onBeforeUnmount(() => {
top: 0;
right: 0;
}
.remove-player > image {
.remove-player>image {
width: 90%;
height: 90%;
}
.team-mode > view > image:nth-child(2) {
.team-mode>view>image:nth-child(2) {
width: 120px;
}
.no-player {
width: 70px;
height: 70px;
@@ -516,10 +594,12 @@ onBeforeUnmount(() => {
align-items: center;
transform: translateY(60px);
}
.no-player > image {
.no-player>image {
width: 20px;
margin-right: 2px;
}
.btns {
height: 100%;
display: flex;
@@ -527,12 +607,14 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
}
.battle-guide {
display: flex;
align-items: center;
justify-content: space-between;
}
.battle-guide > button:last-child {
.battle-guide>button:last-child {
color: #fed847;
border: 1px solid #fed847;
margin-right: 10px;
@@ -541,6 +623,7 @@ onBeforeUnmount(() => {
position: relative;
font-size: 28rpx;
}
.all-players {
position: relative;
display: flex;
@@ -548,68 +631,73 @@ onBeforeUnmount(() => {
align-items: center;
height: 83vw;
}
.all-players > image:first-child {
.all-players>image:first-child {
position: absolute;
width: 100%;
}
.all-players > image:nth-child(2) {
.all-players>image:nth-child(2) {
width: 25vw;
position: relative;
}
.all-players > view {
.all-players>view {
position: relative;
width: 42vw;
height: 42vw;
margin-top: 7vw;
}
.all-players > view > view {
.all-players>view>view {
position: absolute;
left: 50%;
top: 50%;
}
/* 4个头像 - 正方形排列 */
.all-players > view > view:nth-child(1):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw)
rotate(30deg);
.all-players>view>view:nth-child(1):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw) rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw)
rotate(120deg);
.all-players>view>view:nth-child(2):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw) rotate(120deg);
}
.all-players > view > view:nth-child(3):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw)
rotate(210deg);
.all-players>view>view:nth-child(3):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw) rotate(210deg);
}
.all-players > view > view:nth-child(4):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw)
rotate(300deg);
.all-players>view>view:nth-child(4):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw) rotate(300deg);
}
/* 6个头像 - 六边形排列 */
.all-players > view > view:nth-child(1):nth-last-child(6) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw)
rotate(30deg);
.all-players>view>view:nth-child(1):nth-last-child(6) {
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw) rotate(30deg);
}
.all-players > view > view:nth-child(2):nth-last-child(5) {
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw)
rotate(90deg);
.all-players>view>view:nth-child(2):nth-last-child(5) {
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw) rotate(90deg);
}
.all-players > view > view:nth-child(3):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw)
rotate(150deg);
.all-players>view>view:nth-child(3):nth-last-child(4) {
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw) rotate(150deg);
}
.all-players > view > view:nth-child(4):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw)
rotate(210deg);
.all-players>view>view:nth-child(4):nth-last-child(3) {
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw) rotate(210deg);
}
.all-players > view > view:nth-child(5):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw)
rotate(270deg);
.all-players>view>view:nth-child(5):nth-last-child(2) {
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw) rotate(270deg);
}
.all-players > view > view:nth-child(6):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw)
rotate(330deg);
.all-players>view>view:nth-child(6):nth-last-child(1) {
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw) rotate(330deg);
}
.all-players > view > view > text {
.all-players>view>view>text {
position: absolute;
background-color: #fed847;
font-size: 8px;
@@ -621,18 +709,23 @@ onBeforeUnmount(() => {
text-align: center;
color: #333;
}
.choose-side {
display: flex;
}
.choose-side > view {
.choose-side>view {
width: 50%;
}
.choose-side > view:first-child > view {
.choose-side>view:first-child>view {
background: linear-gradient(270deg, #6a1212 0%, rgba(74, 0, 0, 0) 100%);
}
.choose-side > view:last-child > view {
.choose-side>view:last-child>view {
background: linear-gradient(270deg, rgba(13, 0, 74, 0) 0%, #172a86 100%);
}
.choose-side-left-item,
.choose-side-right-item {
display: flex;
@@ -644,33 +737,39 @@ onBeforeUnmount(() => {
margin: 10px 5px;
position: relative;
}
.choose-side-left-item {
justify-content: flex-end;
}
.choose-side-left-item > text,
.choose-side-right-item > text {
.choose-side-left-item>text,
.choose-side-right-item>text {
margin: 10px;
max-width: 100px;
font-size: 14px;
}
.choose-side-left-item > button:first-child,
.choose-side-right-item > button:last-child {
.choose-side-left-item>button:first-child,
.choose-side-right-item>button:last-child {
position: absolute;
top: 0;
}
.choose-side-left-item > button:first-child > image,
.choose-side-right-item > button:last-child > image {
.choose-side-left-item>button:first-child>image,
.choose-side-right-item>button:last-child>image {
width: 28px;
}
.choose-side-left-item > button:first-child {
.choose-side-left-item>button:first-child {
left: 0;
}
.choose-side-right-item > button:last-child {
.choose-side-right-item>button:last-child {
right: 0;
}
.choose-side-left-item > button:last-child,
.choose-side-right-item > button:first-child {
.choose-side-left-item>button:last-child,
.choose-side-right-item>button:first-child {
background-color: #fff;
border-radius: 50%;
width: 38px;
@@ -680,18 +779,21 @@ onBeforeUnmount(() => {
align-items: center;
margin-bottom: 14rpx;
}
.choose-side-left-item > button:last-child > image,
.choose-side-right-item > button:first-child > image {
.choose-side-left-item>button:last-child>image,
.choose-side-right-item>button:first-child>image {
width: 18px;
}
.choose-side-left-item > view,
.choose-side-right-item > view {
.choose-side-left-item>view,
.choose-side-right-item>view {
display: flex;
flex-direction: column;
align-items: center;
}
.choose-side-left-item > view > text,
.choose-side-right-item > view > text {
.choose-side-left-item>view>text,
.choose-side-right-item>view>text {
font-size: 16rpx;
border-radius: 20rpx;
line-height: 26rpx;

126
src/pages/friend-battle.vue
View File

@@ -2,7 +2,7 @@
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
import GuideTwo from "@/components/GuideTwo.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
@@ -72,6 +72,13 @@ const onSignin = () => {
if (roomID.value && user.value.id) enterRoom(roomID.value);
showSignin.value = false;
};
/** 跳转到我的战绩页面，默认展示「好友约战」tab */
const goMyRecord = () => {
uni.navigateTo({
url: '/pages/my-growth?tab=1',
});
};
onShow(async () => {
if (user.value.id) {
const result = await getBattleDataAPI();
@@ -90,16 +97,15 @@ onLoad(async (options) => {
<template>
<Container title="好友约战" :showBackToGame="true">
<view :style="{ width: '100%', height: '100%' }">
<Guide>
<view class="guide-tips">
<text>约上朋友开几局，欢乐多，不寂寞</text>
<text>一起练升级更快，早日加入全国排位赛！</text>
</view>
</Guide>
<GuideTwo>
<text :style="{color: 'rgba(255,217,71,0.8)'}">约上朋友开几局，欢乐多，不寂寞</text>
<text>一起练升级更快，早日加入全国排位赛！</text>
</GuideTwo>
<view class="my-data">
<view>
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
<text class="truncate">{{ user.nickName }}</text>
<text class="my-record-btn" @click="goMyRecord">我的战绩</text>
</view>
<view>
<view>
@@ -119,16 +125,9 @@ onLoad(async (options) => {
<view>
<view class="stars">
<block v-for="i in 5" :key="i">
<image
v-if="data.totalWinningRate >= i * 0.2"
src="../static/star-full.png"
mode="widthFix"
/>
<image
v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1"
src="../static/star-half.png"
mode="widthFix"
/>
<image v-if="data.totalWinningRate >= i * 0.2" src="../static/star-full.png" mode="widthFix" />
<image v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1" src="../static/star-half.png"
mode="widthFix" />
<image v-else src="../static/star-empty.png" mode="widthFix" />
</block>
</view>
@@ -139,19 +138,12 @@ onLoad(async (options) => {
<view class="founded-room">
<image src="../static/founded-room.png" mode="widthFix" />
<view>
<input
placeholder="输入房间号"
v-model="roomNumber"
placeholder-style="color: #ccc"
/>
<input placeholder="输入房间号" v-model="roomNumber" placeholder-style="color: #ccc" />
<view @click="enterRoom(roomNumber)">进入房间</view>
</view>
</view>
<view class="create-room">
<image
src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png"
mode="widthFix"
/>
<image src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png" mode="widthFix" />
<image src="../static/room-notfound-title.png" mode="widthFix" />
<view>
<image :src="user.avatar" mode="widthFix" />
@@ -166,11 +158,7 @@ onLoad(async (options) => {
</SButton>
</view>
</view>
<SModal
:show="showModal"
:onClose="() => (showModal = false)"
height="716rpx"
>
<SModal :show="showModal" :onClose="() => (showModal = false)" height="716rpx">
<view v-if="warnning" class="warnning">
{{ warnning }}
</view>
@@ -192,10 +180,12 @@ onLoad(async (options) => {
border-radius: 10px;
padding: 15px;
}
.founded-room > image {
.founded-room>image {
width: 16vw;
}
.founded-room > view {
.founded-room>view {
display: flex;
justify-content: space-between;
align-items: center;
@@ -205,14 +195,16 @@ onLoad(async (options) => {
width: 100%;
overflow: hidden;
}
.founded-room > view > input {
.founded-room>view>input {
width: 70%;
text-align: center;
font-size: 14px;
height: 40px;
color: #000;
}
.founded-room > view > view {
.founded-room>view>view {
background-color: #fed847;
width: 30%;
line-height: 40px;
@@ -223,38 +215,45 @@ onLoad(async (options) => {
color: #000;
text-align: center;
}
.create-room {
position: relative;
margin: 15px;
height: 50vw;
}
.create-room > image:first-of-type {
.create-room>image:first-of-type {
position: absolute;
width: 100%;
}
.create-room > image:nth-of-type(2) {
.create-room>image:nth-of-type(2) {
padding: 15px;
width: 25vw;
position: relative;
}
.create-room > view:nth-child(3) {
.create-room>view:nth-child(3) {
margin: 12vw auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.create-room > view > image:first-child {
.create-room>view>image:first-child {
width: 19vw;
transform: translateY(-60%);
border-radius: 50%;
position: relative;
}
.create-room > view > image:nth-child(2) {
.create-room>view>image:nth-child(2) {
width: 37vw;
position: relative;
}
.create-room > view > view:nth-child(3) {
.create-room>view>view:nth-child(3) {
position: relative;
width: 19vw;
height: 19vw;
@@ -265,10 +264,12 @@ onLoad(async (options) => {
align-items: center;
transform: translateY(60%);
}
.create-room > view > view:nth-child(3) > image {
.create-room>view>view:nth-child(3)>image {
width: 20px;
margin-right: 2px;
}
.warnning {
width: 100%;
height: 100%;
@@ -277,6 +278,7 @@ onLoad(async (options) => {
align-items: center;
color: #fff9;
}
.my-data {
width: calc(100% - 30px);
margin: 15px;
@@ -286,12 +288,14 @@ onLoad(async (options) => {
overflow: hidden;
background-color: #54431d33;
}
.my-data > view {
.my-data>view {
width: 100%;
display: flex;
color: #fff9;
}
.my-data > view:first-child {
.my-data>view:first-child {
width: calc(100% - 30px);
align-items: flex-end;
padding-bottom: 15px;
@@ -299,16 +303,29 @@ onLoad(async (options) => {
margin: 15px;
margin-bottom: 0;
}
.my-data > view:first-child > text {
.my-data>view:first-child>.my-record-btn {
font-weight: 400;
font-size: 24rpx;
color: #76D4FF;
text-align: center;
font-style: normal;
width: auto;
margin-left: auto;
}
.my-data>view:first-child>text {
color: #fff;
font-size: 17px;
margin-left: 10px;
width: 120px;
}
.my-data > view:last-child {
.my-data>view:last-child {
margin-bottom: 15px;
}
.my-data > view:last-child > view {
.my-data>view:last-child>view {
width: 33%;
margin-top: 15px;
display: flex;
@@ -316,25 +333,30 @@ onLoad(async (options) => {
align-items: center;
font-size: 12px;
}
.my-data > view:last-child > view > view {
.my-data>view:last-child>view>view {
margin-bottom: 5px;
}
.my-data > view:last-child > view > view > text:first-child {
.my-data>view:last-child>view>view>text:first-child {
color: #fff;
font-size: 20px;
margin-right: 5px;
transform: translateY(4px);
}
.my-data > view:last-child > view:nth-child(2) {
.my-data>view:last-child>view:nth-child(2) {
border-left: 1px solid #48494e;
border-right: 1px solid #48494e;
}
.my-data > view:last-child > view > view {
.my-data>view:last-child>view>view {
display: flex;
align-items: flex-end;
height: 20px;
}
.stars > image {
.stars>image {
width: 4vw;
height: 4vw;
margin: 0 1px;

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

@@ -1,5 +1,6 @@
<script setup>
import { onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import BowData from "@/components/BowData.vue";
@@ -56,6 +57,17 @@ const getName = (battle) => {
if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
return battle.mode + "人大乱斗";
};
/**
* 支持通过 URL 参数指定初始 tab
* @example /pages/my-growth?tab=1 跳转到「好友约战」tab
*/
onLoad((options) => {
if (options && options.tab !== undefined) {
const tabIndex = parseInt(options.tab, 10);
if (!isNaN(tabIndex)) selectedIndex.value = tabIndex;
}
});
</script>
<template>

BIN
src/static/long-bubble-border.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/static/share2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 585 B

BIN
src/static/shooter2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB