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

feat: 好友约战选择20、40厘米靶

Browse Source
This commit is contained in:
linyimin
2026-04-20 17:43:38 +08:00
parent c1ff0cedad
commit 8c48216a75
4 changed files with 77 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/CreateRoom.vue
View File

@@ -18,6 +18,7 @@ const props = defineProps({
});
const battleMode = ref(1);
const targetMode = ref(1);
const loading = ref(false);
const roomNumber = ref("");
@@ -35,13 +36,14 @@ const createRoom = debounce(async () => {
try {
const result = await createRoomAPI(
battleMode.value === 2 ? 2 : 1,
battleMode.value === 2 ? 10 : size
battleMode.value === 2 ? 10 : size,
targetMode.value*20,
);
if (result.number) {
props.onConfirm();
await joinRoomAPI(result.number);
uni.navigateTo({
url: "/pages/battle-room?roomNumber=" + result.number,
url: "/pages/battle-room?roomNumber=" + result.number + "&target=" + targetMode.value,
});
}
} catch (error) {
@@ -53,7 +55,11 @@ const createRoom = debounce(async () => {
</script>
<template>
<view class="container">
<image src="../static/choose-battle-mode.png" mode="widthFix" />
<view class="target-options-header">
<view class="target-options-header-line-left"></view>
<image class="target-options-header-title-img" src="../static/choose-battle-mode.png" mode="widthFix" />
<view class="target-options-header-line-right"></view>
</view>
<view class="create-options">
<view
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
@@ -80,6 +86,25 @@ const createRoom = debounce(async () => {
<text>乱斗模式（3-10人）</text>
</view>
</view>
<view class="target-options-header">
<view class="target-options-header-line-left"></view>
<view class="target-options-header-title">选择靶纸</view>
<view class="target-options-header-line-right"></view>
</view>
<view class="target-options">
<view
:class="{ 'battle-btn': true, 'battle-choosen': targetMode === 1 }"
@click="() => (targetMode = 1)"
>
<text>20厘米全环靶</text>
</view>
<view
:class="{ 'battle-btn': true, 'battle-choosen': targetMode === 2 }"
@click="() => (targetMode = 2)"
>
<text>40厘米全环靶</text>
</view>
</view>
<SButton :onClick="createRoom">创建房间</SButton>
</view>
</template>
@@ -91,6 +116,7 @@ const createRoom = debounce(async () => {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 44rpx;
}
.container > image:first-child {
width: 45%;
@@ -105,6 +131,50 @@ const createRoom = debounce(async () => {
justify-content: center;
margin-bottom: 15px;
}
.target-options-header{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
}
.target-options-header-title-img{
width: 196rpx;
height: 40rpx;
}
.target-options-header-title{
width: 112rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
text-align: center;
font-style: normal;
text-transform: none;
color: #FFEFBA;
margin: 0 18rpx;
}
.target-options-header-line-left{
width: 214rpx;
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 1rpx solid;
border-image: linear-gradient(90deg, rgba(133, 119, 96, 0), rgba(133, 119, 96, 1)) 1 1;
}
.target-options-header-line-right{
width: 214rpx;
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 1rpx solid;
border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
}
.target-options {
width: 100%;
padding: 0 10px;
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 15px;
}
.battle-btn {
width: 45%;
height: 55px;