Compare commits
19 Commits
select-tar
...
8c66ef78c6
| Author | SHA1 | Date | |
|---|---|---|---|
| 8c66ef78c6 | |||
| 29a6f46a0d | |||
| 895be17f7c | |||
| 7c8fd9395b | |||
| 972d817629 | |||
| 31140c7ae2 | |||
| 542ee5f031 | |||
| e28424456f | |||
| e037c02888 | |||
| 9a5d64cc9e | |||
| 1beb1009b3 | |||
| 9cd32a7aa6 | |||
| 473e6df77b | |||
| 088cd33b0a | |||
| 51fd4acd8b | |||
| 691e33a84e | |||
| e60d24d56c | |||
| e1a9d97596 | |||
| f07facd98b |
5
.gitignore
vendored
5
.gitignore
vendored
@@ -8,6 +8,11 @@ pnpm-debug.log*
|
|||||||
lerna-debug.log*
|
lerna-debug.log*
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
|
.history
|
||||||
|
.github
|
||||||
|
openspec
|
||||||
|
CLAUDE.md
|
||||||
|
dosc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
dist
|
||||||
*.local
|
*.local
|
||||||
|
|||||||
@@ -52,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onDeviceShoot() {
|
function onDeviceShoot() {
|
||||||
audioManager.play("射箭声音")
|
// audioManager.play("射箭声音")
|
||||||
}
|
}
|
||||||
|
|
||||||
function onShootWsMsg(content) {
|
function onShootWsMsg(content) {
|
||||||
|
|||||||
30
src/apis.js
30
src/apis.js
@@ -179,12 +179,39 @@ export const loginAPI = async (phone, nickName, avatarData, code) => {
|
|||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const silentLoginAPI = async (code) => {
|
||||||
|
const result = await request("POST", "/index/code", {
|
||||||
|
appName: "shoot",
|
||||||
|
appId: "wxa8f5989dcd45cc23",
|
||||||
|
code,
|
||||||
|
});
|
||||||
|
uni.setStorageSync(
|
||||||
|
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`,
|
||||||
|
result.token
|
||||||
|
);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const checkUserBindAPI = async (code) => {
|
||||||
|
return request("POST", "/index/checkBind", {
|
||||||
|
appName: "shoot",
|
||||||
|
appId: "wxa8f5989dcd45cc23",
|
||||||
|
code,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
export const bindDeviceAPI = (device) => {
|
export const bindDeviceAPI = (device) => {
|
||||||
return request("POST", "/user/device/bindDevice", {
|
return request("POST", "/user/device/bindDevice", {
|
||||||
device,
|
device,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const bindDeviceAPIV2 = (token) => {
|
||||||
|
return request("POST", "/user/device/bindDevice/v2", {
|
||||||
|
token: token,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
export const unbindDeviceAPI = (deviceId) => {
|
export const unbindDeviceAPI = (deviceId) => {
|
||||||
return request("POST", "/user/device/unbindDevice", {
|
return request("POST", "/user/device/unbindDevice", {
|
||||||
deviceId,
|
deviceId,
|
||||||
@@ -262,7 +289,8 @@ export const matchGameAPI = (match, gameType, teamSize) => {
|
|||||||
match,
|
match,
|
||||||
gameType,
|
gameType,
|
||||||
teamSize,
|
teamSize,
|
||||||
readyTime: 1.5,
|
readyTime: 15,
|
||||||
|
targetType: 20,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -362,6 +362,7 @@ class AudioManager {
|
|||||||
}
|
}
|
||||||
this.allowPlayMap.set(key, false);
|
this.allowPlayMap.set(key, false);
|
||||||
this.onAudioEnded(key);
|
this.onAudioEnded(key);
|
||||||
|
uni.$emit('audioEnded', key);
|
||||||
});
|
});
|
||||||
|
|
||||||
audio.onStop(() => {
|
audio.onStop(() => {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import AppBackground from "@/components/AppBackground.vue";
|
|||||||
import Header from "@/components/Header.vue";
|
import Header from "@/components/Header.vue";
|
||||||
import ScreenHint from "@/components/ScreenHint.vue";
|
import ScreenHint from "@/components/ScreenHint.vue";
|
||||||
import BackToGame from "@/components/BackToGame.vue";
|
import BackToGame from "@/components/BackToGame.vue";
|
||||||
import { laserAimAPI, getBattleAPI } from "@/apis";
|
import {laserAimAPI, getBattleAPI, matchGameAPI} from "@/apis";
|
||||||
import { capsuleHeight, debounce } from "@/util";
|
import { capsuleHeight, debounce } from "@/util";
|
||||||
import AudioManager from "@/audioManager";
|
import AudioManager from "@/audioManager";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@@ -135,6 +135,10 @@ const goBack = () => {
|
|||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const cancelMatching = async () => {
|
||||||
|
uni.$emit("cancelMatching");
|
||||||
|
}
|
||||||
|
|
||||||
const goCalibration = async () => {
|
const goCalibration = async () => {
|
||||||
await laserAimAPI();
|
await laserAimAPI();
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
@@ -202,7 +206,7 @@ const goCalibration = async () => {
|
|||||||
<button hover-class="none" @click="() => (showHint = false)">
|
<button hover-class="none" @click="() => (showHint = false)">
|
||||||
取消
|
取消
|
||||||
</button>
|
</button>
|
||||||
<button hover-class="none" @click="goBack">确认</button>
|
<button hover-class="none" @click="cancelMatching">确认</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="hintType === 4" class="tip-content">
|
<view v-if="hintType === 4" class="tip-content">
|
||||||
|
|||||||
54
src/components/GuideTwo.vue
Normal file
54
src/components/GuideTwo.vue
Normal 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>
|
||||||
@@ -6,7 +6,7 @@ import Avatar from "@/components/Avatar.vue";
|
|||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const { user } = storeToRefs(store);
|
const { user, game } = storeToRefs(store);
|
||||||
|
|
||||||
const currentPage = computed(() => {
|
const currentPage = computed(() => {
|
||||||
const pages = getCurrentPages();
|
const pages = getCurrentPages();
|
||||||
@@ -59,6 +59,7 @@ const loading = ref(false);
|
|||||||
const pointBook = ref(null);
|
const pointBook = ref(null);
|
||||||
const showProgress = ref(false);
|
const showProgress = ref(false);
|
||||||
const heat = ref(0);
|
const heat = ref(0);
|
||||||
|
|
||||||
const updateLoading = (value) => {
|
const updateLoading = (value) => {
|
||||||
loading.value = value;
|
loading.value = value;
|
||||||
};
|
};
|
||||||
@@ -172,6 +173,16 @@ onBeforeUnmount(() => {
|
|||||||
<view v-if="showProgress" class="battle-progress">
|
<view v-if="showProgress" class="battle-progress">
|
||||||
<HeaderProgress />
|
<HeaderProgress />
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 对战房间:整个胶囊为分享按钮,房号从 Store 读取 -->
|
||||||
|
<button
|
||||||
|
v-if="currentPage === 'pages/battle-room' && game.roomNumber"
|
||||||
|
open-type="share"
|
||||||
|
hover-class="none"
|
||||||
|
class="battle-room-number"
|
||||||
|
>
|
||||||
|
<text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
|
||||||
|
<image src="../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -259,4 +270,37 @@ onBeforeUnmount(() => {
|
|||||||
margin: 0 20rpx;
|
margin: 0 20rpx;
|
||||||
max-width: 300rpx;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ async function onReceiveMessage(message) {
|
|||||||
currentRoundEnded.value = true;
|
currentRoundEnded.value = true;
|
||||||
audioManager.play("比赛开始");
|
audioManager.play("比赛开始");
|
||||||
} else if (type === MESSAGETYPESV2.BattleEnd) {
|
} else if (type === MESSAGETYPESV2.BattleEnd) {
|
||||||
audioManager.play("比赛结束");
|
audioManager.play("比赛结束", false);
|
||||||
} else if (type === MESSAGETYPESV2.ShootResult) {
|
} else if (type === MESSAGETYPESV2.ShootResult) {
|
||||||
if (melee.value && current.playerId !== user.value.id) return;
|
if (melee.value && current.playerId !== user.value.id) return;
|
||||||
if (current.playerId === user.value.id) currentShot.value++;
|
if (current.playerId === user.value.id) currentShot.value++;
|
||||||
|
|||||||
@@ -53,6 +53,7 @@ const currentRoundEnded = ref(false);
|
|||||||
const ended = ref(false);
|
const ended = ref(false);
|
||||||
const halfTime = ref(false);
|
const halfTime = ref(false);
|
||||||
const wait = ref(0);
|
const wait = ref(0);
|
||||||
|
const transitionStyle = ref("all 1s linear");
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.tips,
|
() => props.tips,
|
||||||
@@ -81,7 +82,19 @@ watch(
|
|||||||
|
|
||||||
const resetTimer = (count) => {
|
const resetTimer = (count) => {
|
||||||
if (timer.value) clearInterval(timer.value);
|
if (timer.value) clearInterval(timer.value);
|
||||||
remain.value = Math.round(count);
|
const newVal = Math.round(count);
|
||||||
|
|
||||||
|
// 如果剩余时间增加(如重置),瞬间变化无动画
|
||||||
|
if (newVal >= remain.value) {
|
||||||
|
transitionStyle.value = "none";
|
||||||
|
remain.value = newVal;
|
||||||
|
setTimeout(() => {
|
||||||
|
transitionStyle.value = "all 1s linear";
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
remain.value = newVal;
|
||||||
|
}
|
||||||
|
|
||||||
if (remain.value > 0) {
|
if (remain.value > 0) {
|
||||||
timer.value = setInterval(() => {
|
timer.value = setInterval(() => {
|
||||||
if (remain.value === 0) {
|
if (remain.value === 0) {
|
||||||
@@ -188,6 +201,7 @@ onBeforeUnmount(() => {
|
|||||||
width: `${(remain / total) * 100}%`,
|
width: `${(remain / total) * 100}%`,
|
||||||
backgroundColor: barColor,
|
backgroundColor: barColor,
|
||||||
right: tips.includes('红队') ? 0 : 'unset',
|
right: tips.includes('红队') ? 0 : 'unset',
|
||||||
|
transition: transitionStyle,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<text>剩余{{ remain }}秒</text>
|
<text>剩余{{ remain }}秒</text>
|
||||||
@@ -242,7 +256,6 @@ onBeforeUnmount(() => {
|
|||||||
height: 15px;
|
height: 15px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
transition: all 1s linear;
|
|
||||||
}
|
}
|
||||||
.container > view:last-child > text {
|
.container > view:last-child > text {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref, watch, onMounted, onBeforeUnmount} from "vue";
|
import {ref, watch, onMounted, onBeforeUnmount} from "vue";
|
||||||
import {RoundGoldImages} from "@/constants";
|
import {RoundGoldImages} from "@/constants";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
tips: {
|
tips: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -19,15 +20,39 @@ const props = defineProps({
|
|||||||
const barColor = ref("");
|
const barColor = ref("");
|
||||||
const remain = ref(15);
|
const remain = ref(15);
|
||||||
const timer = ref(null);
|
const timer = ref(null);
|
||||||
const laoding = ref(false);
|
const loading = ref(false);
|
||||||
|
const transitionStyle = ref("all 1s linear");
|
||||||
|
const currentTeam = ref(null);
|
||||||
|
|
||||||
const updateRemain = (value) => {
|
const updateRemain = (value) => {
|
||||||
// if (Math.ceil(value) === remain.value || Math.floor(value) === remain.value)
|
if (value.stop) {
|
||||||
// return;
|
|
||||||
if (timer.value) clearInterval(timer.value);
|
if (timer.value) clearInterval(timer.value);
|
||||||
remain.value = Math.round(value);
|
return
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
currentTeam.value = value.team
|
||||||
|
if (value.team === 'red')
|
||||||
|
barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
|
||||||
|
if (value.team === 'blue')
|
||||||
|
barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
||||||
|
if (value.reset) {
|
||||||
|
remain.value = value.value;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const newVal = Math.round(value.value);
|
||||||
|
// 如果剩余时间增加(如轮次切换重置),瞬间变化无动画;否则保持动画
|
||||||
|
if (newVal >= remain.value) {
|
||||||
|
transitionStyle.value = "none";
|
||||||
|
remain.value = newVal;
|
||||||
|
setTimeout(() => {
|
||||||
|
transitionStyle.value = "all 1s linear";
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
remain.value = newVal;
|
||||||
|
}
|
||||||
|
|
||||||
timer.value = setInterval(() => {
|
timer.value = setInterval(() => {
|
||||||
laoding.value = remain.value === 0;
|
loading.value = remain.value === 0;
|
||||||
if (remain.value > 0) remain.value--;
|
if (remain.value > 0) remain.value--;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
@@ -35,14 +60,7 @@ const updateRemain = (value) => {
|
|||||||
watch(
|
watch(
|
||||||
() => props.tips,
|
() => props.tips,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
if (newVal.includes("红队"))
|
|
||||||
barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
|
|
||||||
if (newVal.includes("蓝队"))
|
|
||||||
barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
|
||||||
if (newVal.includes("重回")) return;
|
|
||||||
if (newVal.includes("红队") || newVal.includes("蓝队")) {
|
|
||||||
updateRemain(props.total);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
@@ -64,17 +82,18 @@ onBeforeUnmount(() => {
|
|||||||
<image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
|
<image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
|
||||||
<view
|
<view
|
||||||
:style="{
|
:style="{
|
||||||
justifyContent: tips.includes('红队') ? 'flex-end' : 'flex-start',
|
justifyContent: currentTeam==='red' ? 'flex-end' : 'flex-start',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<view
|
<view
|
||||||
:style="{
|
:style="{
|
||||||
width: `${(remain / total) * 100}%`,
|
width: `${(remain / total) * 100}%`,
|
||||||
background: barColor,
|
background: barColor,
|
||||||
right: tips.includes('红队') ? 0 : 'unset',
|
right: currentTeam==='red' ? 0 : 'unset',
|
||||||
|
transition: transitionStyle,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<text v-if="!laoding">剩余{{ remain }}秒</text>
|
<text v-if="!loading">剩余{{ remain }}秒</text>
|
||||||
<text v-else>···</text>
|
<text v-else>···</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -87,11 +106,13 @@ onBeforeUnmount(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > image {
|
.container > image {
|
||||||
width: 380rpx;
|
width: 380rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
transform: translateY(18rpx);
|
transform: translateY(18rpx);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > view:last-child {
|
.container > view:last-child {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -103,11 +124,12 @@ onBeforeUnmount(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > view:last-child > view {
|
.container > view:last-child > view {
|
||||||
height: 24rpx;
|
height: 24rpx;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
transition: all 1s linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > view:last-child > text {
|
.container > view:last-child > text {
|
||||||
font-size: 18rpx;
|
font-size: 18rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@@ -86,18 +86,17 @@ const handleLogin = async () => {
|
|||||||
icon: "none",
|
icon: "none",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
await doLogin();
|
||||||
|
};
|
||||||
|
|
||||||
|
async function doLogin() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
const wxResult = await wxLogin();
|
const wxResult = await wxLogin();
|
||||||
const fileManager = uni.getFileSystemManager();
|
const fileManager = uni.getFileSystemManager();
|
||||||
const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
|
const avatarBase64 = fileManager.readFileSync(avatarUrl.value, "base64");
|
||||||
const base64Url = `data:image/png;base64,${avatarBase64}`;
|
const base64Url = `data:image/png;base64,${avatarBase64}`;
|
||||||
const result = await loginAPI(
|
await loginAPI(phone.value, nickName.value, base64Url, wxResult.code);
|
||||||
phone.value,
|
|
||||||
nickName.value,
|
|
||||||
base64Url,
|
|
||||||
wxResult.code
|
|
||||||
);
|
|
||||||
const data = await getHomeData();
|
const data = await getHomeData();
|
||||||
if (data.user) updateUser(data.user);
|
if (data.user) updateUser(data.user);
|
||||||
const devices = await getMyDevicesAPI();
|
const devices = await getMyDevicesAPI();
|
||||||
@@ -139,6 +138,10 @@ const openPrivacyLink = () => {
|
|||||||
|
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
|
agree.value = false;
|
||||||
|
phone.value = "";
|
||||||
|
avatarUrl.value = "";
|
||||||
|
nickName.value = "";
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name" : "shoot-miniprograms",
|
"name" : "shoot-miniprograms",
|
||||||
"appid": "",
|
"appid" : "__UNI__B03E251",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
"versionCode" : "100",
|
"versionCode" : "100",
|
||||||
@@ -40,7 +40,9 @@
|
|||||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"ios": {},
|
"ios" : {
|
||||||
|
"dSYMs" : false
|
||||||
|
},
|
||||||
"sdkConfigs" : {}
|
"sdkConfigs" : {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -3,9 +3,10 @@ import { ref, onMounted, computed, onBeforeUnmount } from "vue";
|
|||||||
import { onShow, onLoad, onShareAppMessage } from "@dcloudio/uni-app";
|
import { onShow, onLoad, onShareAppMessage } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import PlayerSeats from "@/components/PlayerSeats.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 SButton from "@/components/SButton.vue";
|
||||||
import Avatar from "@/components/Avatar.vue";
|
import Avatar from "@/components/Avatar.vue";
|
||||||
|
import ScreenHint from "@/components/ScreenHint.vue";
|
||||||
import {
|
import {
|
||||||
getRoomAPI,
|
getRoomAPI,
|
||||||
destroyRoomAPI,
|
destroyRoomAPI,
|
||||||
@@ -29,11 +30,27 @@ const players = ref([]);
|
|||||||
const blueTeam = ref([]);
|
const blueTeam = ref([]);
|
||||||
const redTeam = 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 ready = ref(false);
|
||||||
const allReady = ref(false);
|
const allReady = ref(false);
|
||||||
const timer = ref(null);
|
const timer = ref(null);
|
||||||
const goBattle = ref(false);
|
const goBattle = ref(false);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从服务端刷新当前房间数据,更新成员列表、准备状态等信息
|
||||||
|
* 仅在 roomNumber 有效且房间未开始时执行
|
||||||
|
*/
|
||||||
async function refreshRoomData() {
|
async function refreshRoomData() {
|
||||||
if (!roomNumber.value) return;
|
if (!roomNumber.value) return;
|
||||||
const result = await getRoomAPI(roomNumber.value);
|
const result = await getRoomAPI(roomNumber.value);
|
||||||
@@ -184,8 +201,32 @@ const exitRoom = async () => {
|
|||||||
uni.navigateBack();
|
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(() => {
|
const canClick = computed(() => {
|
||||||
@@ -208,15 +249,32 @@ onShareAppMessage(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* onShow 生命周期:页面显示时刷新房间数据
|
||||||
|
* 注:uni-app 中 onShow 可能早于 onLoad 执行,此时 roomNumber 尚未赋值,
|
||||||
|
* refreshRoomData 会提前 return。
|
||||||
|
*/
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
goBattle.value = false;
|
goBattle.value = false;
|
||||||
refreshRoomData();
|
refreshRoomData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面加载时解析路由参数,初始化房间号
|
||||||
|
* - 存入本地 ref(供页面内部逻辑使用)
|
||||||
|
* - 同步到 Pinia Store(供 Header 组件展示房号胶囊)
|
||||||
|
*/
|
||||||
onLoad(async (options) => {
|
onLoad(async (options) => {
|
||||||
if (options.roomNumber) roomNumber.value = options.roomNumber;
|
if (options.roomNumber) {
|
||||||
|
roomNumber.value = options.roomNumber;
|
||||||
|
store.updateRoomNumber(options.roomNumber);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件挂载后:保持屏幕常亮、注册 WebSocket 消息监听
|
||||||
|
* 房间号已通过 onLoad 同步到 Store,Header 从 Store 直接读取,无需额外通知
|
||||||
|
*/
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: true,
|
keepScreenOn: true,
|
||||||
@@ -236,9 +294,9 @@ onBeforeUnmount(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Container :title="`好友约战 - ${roomNumber}`">
|
<Container :title="battleTitle">
|
||||||
<view class="standby-phase">
|
<view class="standby-phase">
|
||||||
<Guide>
|
<GuideTwo>
|
||||||
<view class="battle-guide">
|
<view class="battle-guide">
|
||||||
<view class="guide-tips">
|
<view class="guide-tips">
|
||||||
<text>弓箭手们,人都到齐了吗?</text>
|
<text>弓箭手们,人都到齐了吗?</text>
|
||||||
@@ -247,48 +305,28 @@ onBeforeUnmount(() => {
|
|||||||
}}</text>
|
}}</text>
|
||||||
<text v-if="room.battleType === 2">大乱斗即将开始! </text>
|
<text v-if="room.battleType === 2">大乱斗即将开始! </text>
|
||||||
</view>
|
</view>
|
||||||
<button hover-class="none" open-type="share">邀请</button>
|
|
||||||
</view>
|
</view>
|
||||||
</Guide>
|
</GuideTwo>
|
||||||
<view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
|
<view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
|
||||||
<image
|
<image src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png" mode="widthFix" />
|
||||||
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png"
|
|
||||||
mode="widthFix"
|
|
||||||
/>
|
|
||||||
<view>
|
<view>
|
||||||
<view
|
<view v-if="owner.id" class="player" :style="{ transform: 'translateY(-60px)' }">
|
||||||
v-if="owner.id"
|
|
||||||
class="player"
|
|
||||||
:style="{ transform: 'translateY(-60px)' }"
|
|
||||||
>
|
|
||||||
<Avatar :src="owner.avatar" :size="60" />
|
<Avatar :src="owner.avatar" :size="60" />
|
||||||
<text>管理员</text>
|
<text>管理员</text>
|
||||||
<text>{{ owner.name }}</text>
|
<text>{{ owner.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view v-else class="no-player" :style="{ transform: 'translateY(-60px)' }">
|
||||||
v-else
|
|
||||||
class="no-player"
|
|
||||||
:style="{ transform: 'translateY(-60px)' }"
|
|
||||||
>
|
|
||||||
<image src="../static/question-mark.png" mode="widthFix" />
|
<image src="../static/question-mark.png" mode="widthFix" />
|
||||||
</view>
|
</view>
|
||||||
<image src="../static/versus.png" mode="widthFix" />
|
<image src="../static/versus.png" mode="widthFix" />
|
||||||
<view
|
<view v-if="opponent.id" class="player" :style="{ transform: 'translateY(60px)' }">
|
||||||
v-if="opponent.id"
|
|
||||||
class="player"
|
|
||||||
:style="{ transform: 'translateY(60px)' }"
|
|
||||||
>
|
|
||||||
<Avatar :src="opponent.avatar" :size="60" />
|
<Avatar :src="opponent.avatar" :size="60" />
|
||||||
<text class="ready" :style="{ opacity: opponent.ready ? 1 : 0 }">
|
<text class="ready" :style="{ opacity: opponent.ready ? 1 : 0 }">
|
||||||
已准备
|
已准备
|
||||||
</text>
|
</text>
|
||||||
<text>{{ opponent.name }}</text>
|
<text>{{ opponent.name }}</text>
|
||||||
<button
|
<button v-if="owner.id === user.id" hover-class="none" class="remove-player"
|
||||||
v-if="owner.id === user.id"
|
@click="() => removePlayer(opponent)">
|
||||||
hover-class="none"
|
|
||||||
class="remove-player"
|
|
||||||
@click="() => removePlayer(opponent)"
|
|
||||||
>
|
|
||||||
<image src="../static/close-white.png" mode="widthFix" />
|
<image src="../static/close-white.png" mode="widthFix" />
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@@ -299,31 +337,15 @@ onBeforeUnmount(() => {
|
|||||||
</view>
|
</view>
|
||||||
<block v-if="room.battleType === 1 && room.count >= 4">
|
<block v-if="room.battleType === 1 && room.count >= 4">
|
||||||
<view class="all-players">
|
<view class="all-players">
|
||||||
<image
|
<image src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png" mode="widthFix" />
|
||||||
src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
|
<image v-if="room.count === 4" src="../static/title-2v2.png" mode="widthFix" />
|
||||||
mode="widthFix"
|
<image v-if="room.count === 6" src="../static/title-3v3.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>
|
||||||
<view v-for="(item, index) in players" :key="index">
|
<view v-for="(item, index) in players" :key="index">
|
||||||
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
||||||
<text v-if="owner.id === item.id">管理员</text>
|
<text v-if="owner.id === item.id">管理员</text>
|
||||||
<button
|
<button v-if="owner.id !== item.id && item.id" hover-class="none" class="remove-player"
|
||||||
v-if="owner.id !== item.id && item.id"
|
@click="() => removePlayer(item)" :style="{ top: '-10rpx', right: '-10rpx' }">
|
||||||
hover-class="none"
|
|
||||||
class="remove-player"
|
|
||||||
@click="() => removePlayer(item)"
|
|
||||||
:style="{ top: '-10rpx', right: '-10rpx' }"
|
|
||||||
>
|
|
||||||
<image src="../static/close-white.png" mode="widthFix" />
|
<image src="../static/close-white.png" mode="widthFix" />
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@@ -331,16 +353,8 @@ onBeforeUnmount(() => {
|
|||||||
</view>
|
</view>
|
||||||
<view class="choose-side">
|
<view class="choose-side">
|
||||||
<view>
|
<view>
|
||||||
<view
|
<view v-for="(item, index) in redTeam" :key="index" class="choose-side-left-item">
|
||||||
v-for="(item, index) in redTeam"
|
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
|
||||||
: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" />
|
<image src="../static/close-grey.png" mode="widthFix" />
|
||||||
</button>
|
</button>
|
||||||
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
||||||
@@ -354,11 +368,7 @@ onBeforeUnmount(() => {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<view
|
<view v-for="(item, index) in blueTeam" :key="index" class="choose-side-right-item">
|
||||||
v-for="(item, index) in blueTeam"
|
|
||||||
:key="index"
|
|
||||||
class="choose-side-right-item"
|
|
||||||
>
|
|
||||||
<view v-if="item.id">
|
<view v-if="item.id">
|
||||||
<Avatar :src="item.avatar" :size="36" />
|
<Avatar :src="item.avatar" :size="36" />
|
||||||
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
|
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
|
||||||
@@ -367,23 +377,15 @@ onBeforeUnmount(() => {
|
|||||||
<image src="../static/add-grey.png" mode="widthFix" />
|
<image src="../static/add-grey.png" mode="widthFix" />
|
||||||
</button>
|
</button>
|
||||||
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
||||||
<button
|
<button hover-class="none" v-if="item.id === user.id" @click="chooseTeam(0)">
|
||||||
hover-class="none"
|
|
||||||
v-if="item.id === user.id"
|
|
||||||
@click="chooseTeam(0)"
|
|
||||||
>
|
|
||||||
<image src="../static/close-grey.png" mode="widthFix" />
|
<image src="../static/close-grey.png" mode="widthFix" />
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
<PlayerSeats
|
<PlayerSeats v-if="room.battleType === 2" :total="room.count || 10" :players="players"
|
||||||
v-if="room.battleType === 2"
|
:removePlayer="removePlayer" />
|
||||||
:total="room.count || 10"
|
|
||||||
:players="players"
|
|
||||||
:removePlayer="removePlayer"
|
|
||||||
/>
|
|
||||||
<view>
|
<view>
|
||||||
<SButton :disabled="!canClick" :onClick="getReady">
|
<SButton :disabled="!canClick" :onClick="getReady">
|
||||||
{{
|
{{
|
||||||
@@ -398,6 +400,20 @@ onBeforeUnmount(() => {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</Container>
|
</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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -406,6 +422,7 @@ onBeforeUnmount(() => {
|
|||||||
height: calc(100% - 40px);
|
height: calc(100% - 40px);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
color: #fff9;
|
color: #fff9;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -414,6 +431,7 @@ onBeforeUnmount(() => {
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-unknow {
|
.player-unknow {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@@ -425,25 +443,30 @@ onBeforeUnmount(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #69686866;
|
background-color: #69686866;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-unknow>image {
|
.player-unknow>image {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-mode {
|
.team-mode {
|
||||||
width: calc(100vw - 30px);
|
width: calc(100vw - 30px);
|
||||||
height: 125vw;
|
height: 125vw;
|
||||||
margin: 15px;
|
margin: 0 15px 15px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-mode>image:first-child {
|
.team-mode>image:first-child {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(100vw - 30px);
|
width: calc(100vw - 30px);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-mode>view {
|
.team-mode>view {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player {
|
.player {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -455,6 +478,7 @@ onBeforeUnmount(() => {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player>image {
|
.player>image {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
@@ -462,6 +486,7 @@ onBeforeUnmount(() => {
|
|||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player>text:nth-child(2) {
|
.player>text:nth-child(2) {
|
||||||
color: #000;
|
color: #000;
|
||||||
background-color: #fed847;
|
background-color: #fed847;
|
||||||
@@ -472,9 +497,11 @@ onBeforeUnmount(() => {
|
|||||||
margin-top: -16rpx;
|
margin-top: -16rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player>text:nth-child(3) {
|
.player>text:nth-child(3) {
|
||||||
margin-top: 6rpx;
|
margin-top: 6rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player>text {
|
.player>text {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -482,11 +509,73 @@ onBeforeUnmount(() => {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player .ready {
|
.player .ready {
|
||||||
background-color: #2c261fb3 !important;
|
background-color: #2c261fb3 !important;
|
||||||
border: 1rpx solid #a3793f66 !important;
|
border: 1rpx solid #a3793f66 !important;
|
||||||
color: #fed847 !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 {
|
.remove-player {
|
||||||
width: 40rpx;
|
width: 40rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
@@ -499,13 +588,16 @@ onBeforeUnmount(() => {
|
|||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove-player>image {
|
.remove-player>image {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-mode>view>image:nth-child(2) {
|
.team-mode>view>image:nth-child(2) {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-player {
|
.no-player {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
@@ -516,10 +608,12 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
transform: translateY(60px);
|
transform: translateY(60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-player>image {
|
.no-player>image {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -527,11 +621,13 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battle-guide {
|
.battle-guide {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battle-guide>button:last-child {
|
.battle-guide>button:last-child {
|
||||||
color: #fed847;
|
color: #fed847;
|
||||||
border: 1px solid #fed847;
|
border: 1px solid #fed847;
|
||||||
@@ -541,6 +637,7 @@ onBeforeUnmount(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players {
|
.all-players {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -548,67 +645,72 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 83vw;
|
height: 83vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>image:first-child {
|
.all-players>image:first-child {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>image:nth-child(2) {
|
.all-players>image:nth-child(2) {
|
||||||
width: 25vw;
|
width: 25vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view {
|
.all-players>view {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 42vw;
|
width: 42vw;
|
||||||
height: 42vw;
|
height: 42vw;
|
||||||
margin-top: 7vw;
|
margin-top: 7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view {
|
.all-players>view>view {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 4个头像 - 正方形排列 */
|
/* 4个头像 - 正方形排列 */
|
||||||
.all-players>view>view:nth-child(1):nth-last-child(4) {
|
.all-players>view>view:nth-child(1):nth-last-child(4) {
|
||||||
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw)
|
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw) rotate(30deg);
|
||||||
rotate(30deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(2):nth-last-child(3) {
|
.all-players>view>view:nth-child(2):nth-last-child(3) {
|
||||||
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw)
|
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw) rotate(120deg);
|
||||||
rotate(120deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(3):nth-last-child(2) {
|
.all-players>view>view:nth-child(3):nth-last-child(2) {
|
||||||
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw)
|
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw) rotate(210deg);
|
||||||
rotate(210deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(4):nth-last-child(1) {
|
.all-players>view>view:nth-child(4):nth-last-child(1) {
|
||||||
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw)
|
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw) rotate(300deg);
|
||||||
rotate(300deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 6个头像 - 六边形排列 */
|
/* 6个头像 - 六边形排列 */
|
||||||
.all-players>view>view:nth-child(1):nth-last-child(6) {
|
.all-players>view>view:nth-child(1):nth-last-child(6) {
|
||||||
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw)
|
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw) rotate(30deg);
|
||||||
rotate(30deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(2):nth-last-child(5) {
|
.all-players>view>view:nth-child(2):nth-last-child(5) {
|
||||||
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw)
|
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw) rotate(90deg);
|
||||||
rotate(90deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(3):nth-last-child(4) {
|
.all-players>view>view:nth-child(3):nth-last-child(4) {
|
||||||
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw)
|
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw) rotate(150deg);
|
||||||
rotate(150deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(4):nth-last-child(3) {
|
.all-players>view>view:nth-child(4):nth-last-child(3) {
|
||||||
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw)
|
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw) rotate(210deg);
|
||||||
rotate(210deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(5):nth-last-child(2) {
|
.all-players>view>view:nth-child(5):nth-last-child(2) {
|
||||||
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw)
|
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw) rotate(270deg);
|
||||||
rotate(270deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view:nth-child(6):nth-last-child(1) {
|
.all-players>view>view:nth-child(6):nth-last-child(1) {
|
||||||
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw)
|
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw) rotate(330deg);
|
||||||
rotate(330deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-players>view>view>text {
|
.all-players>view>view>text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: #fed847;
|
background-color: #fed847;
|
||||||
@@ -621,18 +723,23 @@ onBeforeUnmount(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side {
|
.choose-side {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side>view {
|
.choose-side>view {
|
||||||
width: 50%;
|
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%);
|
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%);
|
background: linear-gradient(270deg, rgba(13, 0, 74, 0) 0%, #172a86 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item,
|
.choose-side-left-item,
|
||||||
.choose-side-right-item {
|
.choose-side-right-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -644,24 +751,29 @@ onBeforeUnmount(() => {
|
|||||||
margin: 10px 5px;
|
margin: 10px 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item {
|
.choose-side-left-item {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>text,
|
.choose-side-left-item>text,
|
||||||
.choose-side-right-item>text {
|
.choose-side-right-item>text {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>button:first-child,
|
.choose-side-left-item>button:first-child,
|
||||||
.choose-side-right-item>button:last-child {
|
.choose-side-right-item>button:last-child {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>button:first-child>image,
|
.choose-side-left-item>button:first-child>image,
|
||||||
.choose-side-right-item>button:last-child>image {
|
.choose-side-right-item>button:last-child>image {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>button:first-child {
|
.choose-side-left-item>button:first-child {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
@@ -669,6 +781,7 @@ onBeforeUnmount(() => {
|
|||||||
.choose-side-right-item>button:last-child {
|
.choose-side-right-item>button:last-child {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>button:last-child,
|
.choose-side-left-item>button:last-child,
|
||||||
.choose-side-right-item>button:first-child {
|
.choose-side-right-item>button:first-child {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
@@ -680,16 +793,19 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 14rpx;
|
margin-bottom: 14rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>button:last-child>image,
|
.choose-side-left-item>button:last-child>image,
|
||||||
.choose-side-right-item>button:first-child>image {
|
.choose-side-right-item>button:first-child>image {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>view,
|
.choose-side-left-item>view,
|
||||||
.choose-side-right-item>view {
|
.choose-side-right-item>view {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.choose-side-left-item>view>text,
|
.choose-side-left-item>view>text,
|
||||||
.choose-side-right-item>view>text {
|
.choose-side-right-item>view>text {
|
||||||
font-size: 16rpx;
|
font-size: 16rpx;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
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 SButton from "@/components/SButton.vue";
|
||||||
import SModal from "@/components/SModal.vue";
|
import SModal from "@/components/SModal.vue";
|
||||||
import Signin from "@/components/Signin.vue";
|
import Signin from "@/components/Signin.vue";
|
||||||
@@ -72,6 +72,13 @@ const onSignin = () => {
|
|||||||
if (roomID.value && user.value.id) enterRoom(roomID.value);
|
if (roomID.value && user.value.id) enterRoom(roomID.value);
|
||||||
showSignin.value = false;
|
showSignin.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** 跳转到我的战绩页面,默认展示「好友约战」tab */
|
||||||
|
const goMyRecord = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/my-growth?tab=1',
|
||||||
|
});
|
||||||
|
};
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
if (user.value.id) {
|
if (user.value.id) {
|
||||||
const result = await getBattleDataAPI();
|
const result = await getBattleDataAPI();
|
||||||
@@ -90,16 +97,15 @@ onLoad(async (options) => {
|
|||||||
<template>
|
<template>
|
||||||
<Container title="好友约战" :showBackToGame="true">
|
<Container title="好友约战" :showBackToGame="true">
|
||||||
<view :style="{ width: '100%', height: '100%' }">
|
<view :style="{ width: '100%', height: '100%' }">
|
||||||
<Guide>
|
<GuideTwo>
|
||||||
<view class="guide-tips">
|
<text :style="{color: 'rgba(255,217,71,0.8)'}">约上朋友开几局,欢乐多,不寂寞</text>
|
||||||
<text>约上朋友开几局,欢乐多,不寂寞</text>
|
|
||||||
<text>一起练升级更快,早日加入全国排位赛!</text>
|
<text>一起练升级更快,早日加入全国排位赛!</text>
|
||||||
</view>
|
</GuideTwo>
|
||||||
</Guide>
|
|
||||||
<view class="my-data">
|
<view class="my-data">
|
||||||
<view>
|
<view>
|
||||||
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
|
<Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
|
||||||
<text class="truncate">{{ user.nickName }}</text>
|
<text class="truncate">{{ user.nickName }}</text>
|
||||||
|
<text class="my-record-btn" @click="goMyRecord">我的战绩</text>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<view>
|
<view>
|
||||||
@@ -119,16 +125,9 @@ onLoad(async (options) => {
|
|||||||
<view>
|
<view>
|
||||||
<view class="stars">
|
<view class="stars">
|
||||||
<block v-for="i in 5" :key="i">
|
<block v-for="i in 5" :key="i">
|
||||||
<image
|
<image v-if="data.totalWinningRate >= i * 0.2" src="../static/star-full.png" mode="widthFix" />
|
||||||
v-if="data.totalWinningRate >= i * 0.2"
|
<image v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1" src="../static/star-half.png"
|
||||||
src="../static/star-full.png"
|
mode="widthFix" />
|
||||||
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" />
|
<image v-else src="../static/star-empty.png" mode="widthFix" />
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
@@ -139,19 +138,12 @@ onLoad(async (options) => {
|
|||||||
<view class="founded-room">
|
<view class="founded-room">
|
||||||
<image src="../static/founded-room.png" mode="widthFix" />
|
<image src="../static/founded-room.png" mode="widthFix" />
|
||||||
<view>
|
<view>
|
||||||
<input
|
<input placeholder="输入房间号" v-model="roomNumber" placeholder-style="color: #ccc" />
|
||||||
placeholder="输入房间号"
|
|
||||||
v-model="roomNumber"
|
|
||||||
placeholder-style="color: #ccc"
|
|
||||||
/>
|
|
||||||
<view @click="enterRoom(roomNumber)">进入房间</view>
|
<view @click="enterRoom(roomNumber)">进入房间</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="create-room">
|
<view class="create-room">
|
||||||
<image
|
<image src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png" mode="widthFix" />
|
||||||
src="https://static.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png"
|
|
||||||
mode="widthFix"
|
|
||||||
/>
|
|
||||||
<image src="../static/room-notfound-title.png" mode="widthFix" />
|
<image src="../static/room-notfound-title.png" mode="widthFix" />
|
||||||
<view>
|
<view>
|
||||||
<image :src="user.avatar" mode="widthFix" />
|
<image :src="user.avatar" mode="widthFix" />
|
||||||
@@ -166,11 +158,7 @@ onLoad(async (options) => {
|
|||||||
</SButton>
|
</SButton>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<SModal
|
<SModal :show="showModal" :onClose="() => (showModal = false)" height="716rpx">
|
||||||
:show="showModal"
|
|
||||||
:onClose="() => (showModal = false)"
|
|
||||||
height="716rpx"
|
|
||||||
>
|
|
||||||
<view v-if="warnning" class="warnning">
|
<view v-if="warnning" class="warnning">
|
||||||
{{ warnning }}
|
{{ warnning }}
|
||||||
</view>
|
</view>
|
||||||
@@ -192,9 +180,11 @@ onLoad(async (options) => {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.founded-room>image {
|
.founded-room>image {
|
||||||
width: 16vw;
|
width: 16vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.founded-room>view {
|
.founded-room>view {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -205,6 +195,7 @@ onLoad(async (options) => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.founded-room>view>input {
|
.founded-room>view>input {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -212,6 +203,7 @@ onLoad(async (options) => {
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.founded-room>view>view {
|
.founded-room>view>view {
|
||||||
background-color: #fed847;
|
background-color: #fed847;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
@@ -223,20 +215,24 @@ onLoad(async (options) => {
|
|||||||
color: #000;
|
color: #000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room {
|
.create-room {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
height: 50vw;
|
height: 50vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>image:first-of-type {
|
.create-room>image:first-of-type {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>image:nth-of-type(2) {
|
.create-room>image:nth-of-type(2) {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 25vw;
|
width: 25vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>view:nth-child(3) {
|
.create-room>view:nth-child(3) {
|
||||||
margin: 12vw auto;
|
margin: 12vw auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -244,16 +240,19 @@ onLoad(async (options) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>view>image:first-child {
|
.create-room>view>image:first-child {
|
||||||
width: 19vw;
|
width: 19vw;
|
||||||
transform: translateY(-60%);
|
transform: translateY(-60%);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>view>image:nth-child(2) {
|
.create-room>view>image:nth-child(2) {
|
||||||
width: 37vw;
|
width: 37vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>view>view:nth-child(3) {
|
.create-room>view>view:nth-child(3) {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 19vw;
|
width: 19vw;
|
||||||
@@ -265,10 +264,12 @@ onLoad(async (options) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
transform: translateY(60%);
|
transform: translateY(60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-room>view>view:nth-child(3)>image {
|
.create-room>view>view:nth-child(3)>image {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warnning {
|
.warnning {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -277,6 +278,7 @@ onLoad(async (options) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
color: #fff9;
|
color: #fff9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data {
|
.my-data {
|
||||||
width: calc(100% - 30px);
|
width: calc(100% - 30px);
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
@@ -286,11 +288,13 @@ onLoad(async (options) => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #54431d33;
|
background-color: #54431d33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data>view {
|
.my-data>view {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #fff9;
|
color: #fff9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data>view:first-child {
|
.my-data>view:first-child {
|
||||||
width: calc(100% - 30px);
|
width: calc(100% - 30px);
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
@@ -299,15 +303,28 @@ onLoad(async (options) => {
|
|||||||
margin: 15px;
|
margin: 15px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
.my-data>view:first-child>text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data>view:last-child {
|
.my-data>view:last-child {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data>view:last-child>view {
|
.my-data>view:last-child>view {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
@@ -316,24 +333,29 @@ onLoad(async (options) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data>view:last-child>view>view {
|
.my-data>view:last-child>view>view {
|
||||||
margin-bottom: 5px;
|
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;
|
color: #fff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
transform: translateY(4px);
|
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-left: 1px solid #48494e;
|
||||||
border-right: 1px solid #48494e;
|
border-right: 1px solid #48494e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data>view:last-child>view>view {
|
.my-data>view:last-child>view>view {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stars>image {
|
.stars>image {
|
||||||
width: 4vw;
|
width: 4vw;
|
||||||
height: 4vw;
|
height: 4vw;
|
||||||
|
|||||||
@@ -1,25 +1,26 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import {onMounted, ref} from "vue";
|
||||||
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
import {onShareAppMessage, onShareTimeline, onShow} from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import AppFooter from "@/components/AppFooter.vue";
|
import AppFooter from "@/components/AppFooter.vue";
|
||||||
import AppBackground from "@/components/AppBackground.vue";
|
|
||||||
import UserHeader from "@/components/UserHeader.vue";
|
import UserHeader from "@/components/UserHeader.vue";
|
||||||
import Signin from "@/components/Signin.vue";
|
import Signin from "@/components/Signin.vue";
|
||||||
import BubbleTip from "@/components/BubbleTip.vue";
|
import BubbleTip from "@/components/BubbleTip.vue";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
checkUserBindAPI,
|
||||||
getAppConfig,
|
getAppConfig,
|
||||||
getRankListAPI,
|
getDeviceBatteryAPI,
|
||||||
getHomeData,
|
getHomeData,
|
||||||
getMyDevicesAPI,
|
getMyDevicesAPI,
|
||||||
getDeviceBatteryAPI,
|
getRankListAPI,
|
||||||
|
silentLoginAPI,
|
||||||
} from "@/apis";
|
} from "@/apis";
|
||||||
import {topThreeColors} from "@/constants";
|
import {topThreeColors} from "@/constants";
|
||||||
import { canEenter } from "@/util";
|
|
||||||
|
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import {storeToRefs} from "pinia";
|
import {storeToRefs} from "pinia";
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const {
|
const {
|
||||||
updateConfig,
|
updateConfig,
|
||||||
@@ -27,6 +28,7 @@ const {
|
|||||||
updateDevice,
|
updateDevice,
|
||||||
updateRank,
|
updateRank,
|
||||||
getLvlName,
|
getLvlName,
|
||||||
|
getLvlNameByScore,
|
||||||
updateOnline,
|
updateOnline,
|
||||||
} = store;
|
} = store;
|
||||||
const {user, device, rankData, online, game} = storeToRefs(store);
|
const {user, device, rankData, online, game} = storeToRefs(store);
|
||||||
@@ -54,12 +56,36 @@ const toRankListPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
const token = uni.getStorageSync(
|
const env = uni.getAccountInfoSync().miniProgram.envVersion;
|
||||||
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
|
const token = uni.getStorageSync(`${env}_token`);
|
||||||
|
|
||||||
|
if (!user.value.id && !token) {
|
||||||
|
try {
|
||||||
|
const wxResult = await uni.login({provider: "weixin"});
|
||||||
|
const bindResult = await checkUserBindAPI(wxResult.code);
|
||||||
|
if (bindResult.binded) {
|
||||||
|
const newResult = await uni.login({provider: "weixin"});
|
||||||
|
const silentResult = await silentLoginAPI(newResult.code);
|
||||||
|
if (silentResult.user) updateUser(silentResult.user);
|
||||||
|
const devices = await getMyDevicesAPI();
|
||||||
|
if (devices.bindings && devices.bindings.length) {
|
||||||
|
updateDevice(
|
||||||
|
devices.bindings[0].deviceId,
|
||||||
|
devices.bindings[0].deviceName
|
||||||
);
|
);
|
||||||
|
const data = await getDeviceBatteryAPI();
|
||||||
|
updateOnline(data.online);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
showModal.value = true;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("检查绑定状态失败", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const promises = [getRankListAPI()];
|
const promises = [getRankListAPI()];
|
||||||
if (token) {
|
if (token || user.value.id) {
|
||||||
promises.push(getHomeData());
|
promises.push(getHomeData());
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -221,8 +247,9 @@ onShareTimeline(() => {
|
|||||||
<view>
|
<view>
|
||||||
<text>段位</text>
|
<text>段位</text>
|
||||||
<text>{{
|
<text>{{
|
||||||
user.rankLvl ? getLvlName(user.rankLvl) : "暂无"
|
user.lvlName || "暂无"
|
||||||
}}</text>
|
}}
|
||||||
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<text>赛季平均环数</text>
|
<text>赛季平均环数</text>
|
||||||
@@ -234,7 +261,8 @@ onShareTimeline(() => {
|
|||||||
user.avg_win
|
user.avg_win
|
||||||
? Number((user.avg_win * 100).toFixed(2)) + "%"
|
? Number((user.avg_win * 100).toFixed(2)) + "%"
|
||||||
: "暂无"
|
: "暂无"
|
||||||
}}</text>
|
}}
|
||||||
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -363,6 +391,7 @@ onShareTimeline(() => {
|
|||||||
width: 32rpx;
|
width: 32rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-avatar > view:first-child {
|
.player-avatar > view:first-child {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #777777;
|
background: #777777;
|
||||||
@@ -373,6 +402,7 @@ onShareTimeline(() => {
|
|||||||
height: 18px;
|
height: 18px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-avatar > image:last-child {
|
.player-avatar > image:last-child {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -391,18 +421,22 @@ onShareTimeline(() => {
|
|||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data {
|
.my-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data > view:first-child {
|
.my-data > view:first-child {
|
||||||
width: 28%;
|
width: 28%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data > view:first-child > image {
|
.my-data > view:first-child > image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform: translateX(-8px);
|
transform: translateX(-8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data > view:nth-child(2) {
|
.my-data > view:nth-child(2) {
|
||||||
width: 68%;
|
width: 68%;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -410,9 +444,11 @@ onShareTimeline(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data > view:nth-child(2) > view:nth-child(2) {
|
.my-data > view:nth-child(2) > view:nth-child(2) {
|
||||||
width: 38%;
|
width: 38%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data > view:nth-child(2) > view {
|
.my-data > view:nth-child(2) > view {
|
||||||
width: 28%;
|
width: 28%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@@ -422,11 +458,13 @@ onShareTimeline(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-data > view:nth-child(2) > view > text:last-child {
|
.my-data > view:nth-child(2) > view > text:last-child {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-theme {
|
.top-theme {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -436,6 +474,7 @@ onShareTimeline(() => {
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-theme > image {
|
.top-theme > image {
|
||||||
width: 300rpx;
|
width: 300rpx;
|
||||||
transform: translate(-4%, -14%);
|
transform: translate(-4%, -14%);
|
||||||
|
|||||||
@@ -3,24 +3,29 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
|
|||||||
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import Matching from "@/components/Matching.vue";
|
import Matching from "@/components/Matching.vue";
|
||||||
import RoundEndTip from "@/components/RoundEndTip.vue";
|
|
||||||
import TestDistance from "@/components/TestDistance.vue";
|
|
||||||
import { matchGameAPI } from "@/apis";
|
import { matchGameAPI } from "@/apis";
|
||||||
import { MESSAGETYPESV2 } from "@/constants";
|
import { MESSAGETYPESV2 } from "@/constants";
|
||||||
|
|
||||||
const gameType = ref(0);
|
const gameType = ref(0);
|
||||||
const teamSize = ref(0);
|
const teamSize = ref(0);
|
||||||
const onComplete = ref(null);
|
const onComplete = ref(null);
|
||||||
const matchSuccess = ref(false);
|
|
||||||
|
|
||||||
async function stopMatch() {
|
async function stopMatch() {
|
||||||
uni.$showHint(3);
|
uni.$showHint(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function cancelMatch() {
|
||||||
|
if (gameType.value && teamSize.value) {
|
||||||
|
await matchGameAPI(false, gameType.value, teamSize.value);
|
||||||
|
}
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
async function onReceiveMessage(msg) {
|
async function onReceiveMessage(msg) {
|
||||||
if (msg.type === MESSAGETYPESV2.MatchSuccess) {
|
if (msg.type === MESSAGETYPESV2.MatchSuccess) {
|
||||||
matchSuccess.value = true;
|
onComplete.value = () => {}
|
||||||
onComplete.value = () => {
|
}
|
||||||
|
if (msg.type === MESSAGETYPESV2.AboutToStart) {
|
||||||
if (gameType.value == 1) {
|
if (gameType.value == 1) {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: `/pages/team-battle?battleId=${msg.id}&gameMode=2`,
|
url: `/pages/team-battle?battleId=${msg.id}&gameMode=2`,
|
||||||
@@ -30,7 +35,6 @@ async function onReceiveMessage(msg) {
|
|||||||
url: `/pages/melee-battle?battleId=${msg.id}&gameMode=2`,
|
url: `/pages/melee-battle?battleId=${msg.id}&gameMode=2`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -46,6 +50,7 @@ onMounted(() => {
|
|||||||
keepScreenOn: true,
|
keepScreenOn: true,
|
||||||
});
|
});
|
||||||
uni.$on("socket-inbox", onReceiveMessage);
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
|
uni.$on("cancelMatching", cancelMatch);
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
@@ -53,9 +58,7 @@ onBeforeUnmount(() => {
|
|||||||
keepScreenOn: false,
|
keepScreenOn: false,
|
||||||
});
|
});
|
||||||
uni.$off("socket-inbox", onReceiveMessage);
|
uni.$off("socket-inbox", onReceiveMessage);
|
||||||
if (gameType.value && teamSize.value && !matchSuccess.value) {
|
uni.$off("cancelMatching", cancelMatch);
|
||||||
matchGameAPI(false, gameType.value, teamSize.value);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
@@ -65,9 +68,7 @@ onShow(async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onHide(() => {
|
onHide(() => {
|
||||||
if (gameType.value && teamSize.value && !matchSuccess.value) {
|
|
||||||
matchGameAPI(false, gameType.value, teamSize.value);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -28,21 +28,37 @@ const playersScores = ref([]);
|
|||||||
const halfTimeTip = ref(false);
|
const halfTimeTip = ref(false);
|
||||||
const halfRest = ref(false);
|
const halfRest = ref(false);
|
||||||
|
|
||||||
|
const navigateToResult = () => {
|
||||||
|
uni.redirectTo({ url: `/pages/battle-result?battleId=${battleId.value}` });
|
||||||
|
};
|
||||||
|
|
||||||
function recoverData(battleInfo, { force = false } = {}) {
|
function recoverData(battleInfo, { force = false } = {}) {
|
||||||
|
if (!battleInfo) return;
|
||||||
|
try {
|
||||||
if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
|
if (battleInfo.way === 1) title.value = "好友约战 - 大乱斗";
|
||||||
if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
|
if (battleInfo.way === 2) title.value = "排位赛 - 大乱斗";
|
||||||
players.value = battleInfo.teams[0].players;
|
|
||||||
|
// 优先使用接口数据,否则使用缓存
|
||||||
|
if (battleInfo.teams?.[0]?.players) {
|
||||||
|
players.value = [...battleInfo.teams[0].players];
|
||||||
|
} else {
|
||||||
|
// 大乱斗可能存的是 players 列表
|
||||||
|
// 这里的缓存逻辑根据 AboutToStart 消息结构可能不同,假设也是 teams[0]
|
||||||
|
// 如果是从 match-page 过来的,match-page 只存了 teams[1] 和 [2] 给对抗模式
|
||||||
|
// 大乱斗的匹配逻辑可能不同,暂时保持原样,只做安全保护
|
||||||
|
players.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
start.value = battleInfo.status !== 0;
|
start.value = battleInfo.status !== 0;
|
||||||
|
|
||||||
if (battleInfo.status === 0) {
|
if (battleInfo.status === 0) {
|
||||||
const readyRemain = (Date.now() - battleInfo.createTime) / 1000;
|
const readyRemain = (Date.now() - (battleInfo.createTime || Date.now())) / 1000;
|
||||||
console.log(`对局已进行${readyRemain}秒`);
|
|
||||||
if (readyRemain > 0 && readyRemain < 15) {
|
if (readyRemain > 0 && readyRemain < 15) {
|
||||||
setTimeout(() => {
|
setTimeout(() => uni.$emit("update-timer", 15 - readyRemain - 0.2), 200);
|
||||||
uni.$emit("update-timer", 15 - readyRemain - 0.2);
|
|
||||||
}, 200);
|
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
tips.value =
|
tips.value =
|
||||||
(battleInfo.rounds.length !== 2 ? "上" : "下") + "半场:请先射6箭";
|
(battleInfo.rounds.length !== 2 ? "上" : "下") + "半场:请先射6箭";
|
||||||
playersScores.value = battleInfo.rounds.map((r) => ({ ...r.shoots }));
|
playersScores.value = battleInfo.rounds.map((r) => ({ ...r.shoots }));
|
||||||
@@ -69,7 +85,7 @@ function recoverData(battleInfo, { force = false } = {}) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (force) {
|
if (force) {
|
||||||
const remain = (Date.now() - battleInfo.current.startTime) / 1000;
|
const remain = (Date.now() - (battleInfo.current?.startTime || Date.now())) / 1000;
|
||||||
console.log(`当前轮已进行${remain}秒`);
|
console.log(`当前轮已进行${remain}秒`);
|
||||||
if (remain > 0 && remain < 90) {
|
if (remain > 0 && remain < 90) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -77,6 +93,9 @@ function recoverData(battleInfo, { force = false } = {}) {
|
|||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("recoverData error:", err);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onLoad(async (options) => {
|
onLoad(async (options) => {
|
||||||
@@ -127,6 +146,7 @@ onBeforeUnmount(() => {
|
|||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
if (battleId.value) {
|
if (battleId.value) {
|
||||||
const result = await getBattleAPI(battleId.value);
|
const result = await getBattleAPI(battleId.value);
|
||||||
|
if (!result) return;
|
||||||
if (result.status === 2) {
|
if (result.status === 2) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "比赛已结束",
|
title: "比赛已结束",
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import {
|
|||||||
bindDeviceAPI,
|
bindDeviceAPI,
|
||||||
getMyDevicesAPI,
|
getMyDevicesAPI,
|
||||||
unbindDeviceAPI,
|
unbindDeviceAPI,
|
||||||
laserAimAPI,
|
laserAimAPI, bindDeviceAPIV2,
|
||||||
} from "@/apis";
|
} from "@/apis";
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
@@ -20,6 +20,7 @@ const { updateDevice } = store;
|
|||||||
const { user, device } = storeToRefs(store);
|
const { user, device } = storeToRefs(store);
|
||||||
const justBind = ref(false);
|
const justBind = ref(false);
|
||||||
const calibration = ref(false);
|
const calibration = ref(false);
|
||||||
|
const token = ref(null);
|
||||||
|
|
||||||
// 扫描二维码方法
|
// 扫描二维码方法
|
||||||
const handleScan = () => {
|
const handleScan = () => {
|
||||||
@@ -30,13 +31,14 @@ const handleScan = () => {
|
|||||||
scanType: ["qrCode"],
|
scanType: ["qrCode"],
|
||||||
success: async (res) => {
|
success: async (res) => {
|
||||||
try {
|
try {
|
||||||
const base64Decode = (str) => {
|
// const base64Decode = (str) => {
|
||||||
// 将 base64 转换为 utf8 字符串
|
// // 将 base64 转换为 utf8 字符串
|
||||||
const bytes = wx.base64ToArrayBuffer(str);
|
// const bytes = wx.base64ToArrayBuffer(str);
|
||||||
return String.fromCharCode.apply(null, new Uint8Array(bytes));
|
// return String.fromCharCode.apply(null, new Uint8Array(bytes));
|
||||||
};
|
// };
|
||||||
|
//
|
||||||
addDevice.value = JSON.parse(base64Decode(res.result));
|
// addDevice.value = JSON.parse(base64Decode(res.result));
|
||||||
|
token.value = res.result;
|
||||||
confirmBindTip.value = true;
|
confirmBindTip.value = true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
@@ -57,8 +59,8 @@ const handleScan = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const confirmBind = async () => {
|
const confirmBind = async () => {
|
||||||
if (!justBind.value && addDevice.value.id) {
|
if (!justBind.value && token.value) {
|
||||||
const result = await bindDeviceAPI(addDevice.value);
|
const result = await bindDeviceAPIV2(token.value);
|
||||||
confirmBindTip.value = false;
|
confirmBindTip.value = false;
|
||||||
if (result.binded) {
|
if (result.binded) {
|
||||||
return uni.showToast({
|
return uni.showToast({
|
||||||
@@ -66,7 +68,7 @@ const confirmBind = async () => {
|
|||||||
icon: "none",
|
icon: "none",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
updateDevice(addDevice.value.id, addDevice.value.name);
|
updateDevice(result.deviceId, result.name);
|
||||||
justBind.value = true;
|
justBind.value = true;
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "绑定成功",
|
title: "绑定成功",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from "vue";
|
import { onMounted } from "vue";
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import Avatar from "@/components/Avatar.vue";
|
import Avatar from "@/components/Avatar.vue";
|
||||||
import BowData from "@/components/BowData.vue";
|
import BowData from "@/components/BowData.vue";
|
||||||
@@ -56,6 +57,17 @@ const getName = (battle) => {
|
|||||||
if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
|
if (battle.mode <= 3) return `${battle.mode}V${battle.mode}`;
|
||||||
return 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ onShow(async () => {
|
|||||||
const result = await getHomeData();
|
const result = await getHomeData();
|
||||||
rankData.value = result;
|
rankData.value = result;
|
||||||
handleSelect(selectedIndex.value);
|
handleSelect(selectedIndex.value);
|
||||||
seasonData.value = result.seasonList;
|
seasonData.value = result.seasonList || [];
|
||||||
if (seasonData.value[0]) {
|
if (seasonData.value[0]) {
|
||||||
seasonName.value = seasonData.value[0].seasonName;
|
seasonName.value = seasonData.value[0].seasonName;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import { MESSAGETYPESV2 } from "@/constants";
|
|||||||
import audioManager from "@/audioManager";
|
import audioManager from "@/audioManager";
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import {storeToRefs} from "pinia";
|
import {storeToRefs} from "pinia";
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const {user} = storeToRefs(store);
|
const {user} = storeToRefs(store);
|
||||||
const start = ref(null);
|
const start = ref(null);
|
||||||
@@ -35,16 +36,33 @@ const redPoints = ref(0);
|
|||||||
const bluePoints = ref(0);
|
const bluePoints = ref(0);
|
||||||
const showRoundTip = ref(false);
|
const showRoundTip = ref(false);
|
||||||
const isFinalShoot = ref(false);
|
const isFinalShoot = ref(false);
|
||||||
|
const matchStatus = ref(undefined);
|
||||||
|
const updateRemainSecond = ref(0);
|
||||||
|
|
||||||
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
||||||
try {
|
try {
|
||||||
battleId.value = battleInfo.matchId;
|
battleId.value = battleInfo.matchId;
|
||||||
blueTeam.value = battleInfo.teams[1].players || [];
|
|
||||||
redTeam.value = battleInfo.teams[2].players || [];
|
// 优先使用接口返回的队伍数据,如果没有则尝试从缓存读取(应对匹配刚完成接口未就绪的情况)
|
||||||
|
const t1 = battleInfo.teams?.[1] || {};
|
||||||
|
const t2 = battleInfo.teams?.[2] || {};
|
||||||
|
|
||||||
|
if (t1.players) blueTeam.value = [...t1.players];
|
||||||
|
else {
|
||||||
|
const cached = uni.getStorageSync("blue-team");
|
||||||
|
if (cached && cached.length) blueTeam.value = cached;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (t2.players) redTeam.value = [...t2.players];
|
||||||
|
else {
|
||||||
|
const cached = uni.getStorageSync("red-team");
|
||||||
|
if (cached && cached.length) redTeam.value = cached;
|
||||||
|
}
|
||||||
|
|
||||||
start.value = battleInfo.status !== 0;
|
start.value = battleInfo.status !== 0;
|
||||||
|
|
||||||
if (battleInfo.status === 0) {
|
if (battleInfo.status === 0) {
|
||||||
const readyRemain = (Date.now() - battleInfo.createTime) / 1000;
|
const readyRemain = (Date.now() - (battleInfo.createTime || Date.now())) / 1000;
|
||||||
console.log(`对局已进行${readyRemain}秒`);
|
|
||||||
if (readyRemain > 0 && readyRemain < 15) {
|
if (readyRemain > 0 && readyRemain < 15) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.$emit("update-timer", 15 - readyRemain - 0.2);
|
uni.$emit("update-timer", 15 - readyRemain - 0.2);
|
||||||
@@ -67,16 +85,15 @@ const recoverData = (battleInfo, { force = false, arrowOnly = false } = {}) => {
|
|||||||
}
|
}
|
||||||
tips.value = nextTips;
|
tips.value = nextTips;
|
||||||
uni.$emit("update-tips", nextTips);
|
uni.$emit("update-tips", nextTips);
|
||||||
|
uni.$emit("update-remain", {reset: true, value: 15, team: redTeam?'red':'blue'});
|
||||||
if (force) {
|
if (force) {
|
||||||
const remain = (Date.now() - battleInfo.current.startTime) / 1000;
|
const remain = (Date.now() - battleInfo.current.startTime) / 1000;
|
||||||
console.log(`当前轮已进行${remain}秒`);
|
console.log(`当前轮已进行${remain}秒`);
|
||||||
if (remain > 0 && remain < 15) {
|
if (remain > 0 && remain < 15) {
|
||||||
setTimeout(() => {
|
updateRemainSecond.value = 15 - remain - 0.2
|
||||||
uni.$emit("update-remain", 15 - remain - 0.2);
|
|
||||||
}, 200);
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
uni.$emit("update-remain", battleInfo.readyTime);
|
updateRemainSecond.value = battleInfo.readyTime
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
currentRound.value = battleInfo.current.round || 1;
|
currentRound.value = battleInfo.current.round || 1;
|
||||||
@@ -95,16 +112,25 @@ const recoverData = (battleInfo, { force = false, arrowOnly = false } = {}) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
async function onReceiveMessage(msg) {
|
function onAudioEnded(s) {
|
||||||
if (Array.isArray(msg)) return;
|
if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0) {
|
||||||
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
let team = s.indexOf('请红方射箭') >= 0 ? 'red' : 'blue';
|
||||||
start.value = true;
|
uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
|
||||||
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
}
|
||||||
recoverData(msg);
|
if (s.indexOf("比赛结束") >= 0) {
|
||||||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
onBattleEnd()
|
||||||
showRoundTip.value = false;
|
}
|
||||||
recoverData(msg, { arrowOnly: true });
|
}
|
||||||
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
|
||||||
|
function onBattleEnd() {
|
||||||
|
if (matchStatus.value === 2) {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: `/pages/battle-result?battleId=${battleId.value}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onNewRound(msg) {
|
||||||
showRoundTip.value = true;
|
showRoundTip.value = true;
|
||||||
isFinalShoot.value = msg.current.goldRound;
|
isFinalShoot.value = msg.current.goldRound;
|
||||||
const latestRound = msg.rounds[currentRound.value - 1];
|
const latestRound = msg.rounds[currentRound.value - 1];
|
||||||
@@ -117,7 +143,24 @@ async function onReceiveMessage(msg) {
|
|||||||
currentRedPoint.value = latestRound.scores[2].score;
|
currentRedPoint.value = latestRound.scores[2].score;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onReceiveMessage(msg) {
|
||||||
|
if (Array.isArray(msg)) return;
|
||||||
|
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
||||||
|
start.value = true;
|
||||||
|
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
||||||
|
recoverData(msg);
|
||||||
|
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||||||
|
uni.$emit("update-remain", {stop: true})
|
||||||
|
showRoundTip.value = false;
|
||||||
|
recoverData(msg, {arrowOnly: true});
|
||||||
|
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
||||||
|
setTimeout(() => {
|
||||||
|
onNewRound(msg)
|
||||||
|
}, 800)
|
||||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||||
|
matchStatus.value = msg.status;
|
||||||
if (msg.status === 4) {
|
if (msg.status === 4) {
|
||||||
showRoundTip.value = true;
|
showRoundTip.value = true;
|
||||||
currentBluePoint.value = 0;
|
currentBluePoint.value = 0;
|
||||||
@@ -125,13 +168,7 @@ async function onReceiveMessage(msg) {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
}, 2000);
|
}, 2000);
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
|
||||||
uni.redirectTo({
|
|
||||||
url: "/pages/battle-result?battleId=" + msg.matchId,
|
|
||||||
});
|
|
||||||
}, 1000);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -149,19 +186,21 @@ onMounted(async () => {
|
|||||||
keepScreenOn: true,
|
keepScreenOn: true,
|
||||||
});
|
});
|
||||||
uni.$on("socket-inbox", onReceiveMessage);
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
|
uni.$on("audioEnded", onAudioEnded);
|
||||||
await laserCloseAPI();
|
await laserCloseAPI();
|
||||||
});
|
});
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: false,
|
keepScreenOn: false,
|
||||||
});
|
});
|
||||||
uni.$off("socket-inbox", onReceiveMessage);
|
uni.$off("audioEnded", onAudioEnded);
|
||||||
audioManager.stopAll();
|
audioManager.stopAll();
|
||||||
});
|
});
|
||||||
const refreshTimer = ref(null);
|
const refreshTimer = ref(null);
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
if (battleId.value) {
|
if (battleId.value) {
|
||||||
const result = await getBattleAPI(battleId.value);
|
const result = await getBattleAPI(battleId.value);
|
||||||
|
if (!result) return;
|
||||||
if (result.status === 2) {
|
if (result.status === 2) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "比赛已结束",
|
title: "比赛已结束",
|
||||||
@@ -227,7 +266,7 @@ onShow(async () => {
|
|||||||
:roundData="
|
:roundData="
|
||||||
roundResults[currentRound - 1] ? roundResults[currentRound - 1] : []
|
roundResults[currentRound - 1] ? roundResults[currentRound - 1] : []
|
||||||
"
|
"
|
||||||
:onAutoClose="() => (showRoundTip = false)"
|
:onAutoClose="()=>{ showRoundTip = false}"
|
||||||
/>
|
/>
|
||||||
</ScreenHint>
|
</ScreenHint>
|
||||||
</view>
|
</view>
|
||||||
@@ -239,6 +278,7 @@ onShow(async () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.players-row {
|
.players-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
BIN
src/static/long-bubble-border.png
Normal file
BIN
src/static/long-bubble-border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
src/static/share2.png
Normal file
BIN
src/static/share2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 585 B |
BIN
src/static/shooter2.png
Normal file
BIN
src/static/shooter2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
45
src/store.js
45
src/store.js
@@ -22,6 +22,19 @@ const getLvlName = (rankLvl, rankList = []) => {
|
|||||||
return lvlName;
|
return lvlName;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getLvlNameByScore = (score, rankList = []) => {
|
||||||
|
if (!rankList) return;
|
||||||
|
let lvlName = "";
|
||||||
|
rankList.some((r, index) => {
|
||||||
|
if (r.upgrade_scores && r.upgrade_scores < score) {
|
||||||
|
lvlName = rankList[index].name;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
return lvlName;
|
||||||
|
};
|
||||||
|
|
||||||
const getLvlImage = (rankLvl, rankList = []) => {
|
const getLvlImage = (rankLvl, rankList = []) => {
|
||||||
if (!rankList) return;
|
if (!rankList) return;
|
||||||
let lvlImage = "";
|
let lvlImage = "";
|
||||||
@@ -35,6 +48,19 @@ const getLvlImage = (rankLvl, rankList = []) => {
|
|||||||
return lvlImage;
|
return lvlImage;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getLvlImageByScore = (score, rankList = []) => {
|
||||||
|
if (!rankList) return;
|
||||||
|
let lvlImage = "";
|
||||||
|
rankList.some((r, index) => {
|
||||||
|
if (r.upgrade_scores && r.upgrade_scores < score) {
|
||||||
|
lvlImage = rankList[index].icoin;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
return lvlImage;
|
||||||
|
};
|
||||||
|
|
||||||
// 定义游戏相关的 store
|
// 定义游戏相关的 store
|
||||||
export default defineStore("store", {
|
export default defineStore("store", {
|
||||||
// 状态
|
// 状态
|
||||||
@@ -53,6 +79,7 @@ export default defineStore("store", {
|
|||||||
game: {
|
game: {
|
||||||
roomID: "",
|
roomID: "",
|
||||||
inBattle: false,
|
inBattle: false,
|
||||||
|
roomNumber: "", // 当前房间号,供 Header 展示房号胶囊
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@@ -65,6 +92,9 @@ export default defineStore("store", {
|
|||||||
|
|
||||||
// 方法
|
// 方法
|
||||||
actions: {
|
actions: {
|
||||||
|
getLvlNameByScore(score) {
|
||||||
|
return getLvlNameByScore(score, this.config.randInfos);
|
||||||
|
},
|
||||||
getLvlName(rankLvl) {
|
getLvlName(rankLvl) {
|
||||||
return getLvlName(rankLvl, this.config.randInfos);
|
return getLvlName(rankLvl, this.config.randInfos);
|
||||||
},
|
},
|
||||||
@@ -79,14 +109,9 @@ export default defineStore("store", {
|
|||||||
},
|
},
|
||||||
async updateUser(user = {}) {
|
async updateUser(user = {}) {
|
||||||
this.user = { ...defaultUser, ...user };
|
this.user = { ...defaultUser, ...user };
|
||||||
if (this.user.rankLvl !== undefined) {
|
this.user.lvlName = getLvlNameByScore(this.user.scores, this.config.randInfos)
|
||||||
this.user.lvlName = getLvlName(
|
this.user.lvlImage = getLvlImageByScore(
|
||||||
this.user.rankLvl,
|
this.user.scores,
|
||||||
this.config.randInfos
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.user.lvlImage = getLvlImage(
|
|
||||||
this.user.rankLvl,
|
|
||||||
this.config.randInfos
|
this.config.randInfos
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@@ -111,6 +136,10 @@ export default defineStore("store", {
|
|||||||
this.game.roomID = roomID;
|
this.game.roomID = roomID;
|
||||||
this.game.inBattle = inBattle;
|
this.game.inBattle = inBattle;
|
||||||
},
|
},
|
||||||
|
/** 更新当前房间号,供 Header 组件展示房号胶囊 */
|
||||||
|
updateRoomNumber(number) {
|
||||||
|
this.game.roomNumber = number;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// 开启数据持久化
|
// 开启数据持久化
|
||||||
|
|||||||
Reference in New Issue
Block a user