Skip to content

Commit

Permalink
[+] 完善创建房间
Browse files Browse the repository at this point in the history
  • Loading branch information
@Daiyangcheng
Daiyangcheng committed Mar 24, 2024
1 parent 0c22851 commit 1e69077
Showing 1 changed file with 119 additions and 10 deletions.
129 changes: 119 additions & 10 deletions src/views/LanLobby.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<n-tab-pane v-for="i in gameList" :name="i.game_name" :tab="i.game_tab">
<n-grid cols="3" item-responsive y-gap="10" x-gap="10">
<n-gi span="0:3 1000:1" v-for="l in lobbyList">
<n-card :title="store.getters.get_username + ' - ' + l.name">
<n-card :title="store.getters.get_username + ' - ' + l.lobby_name">
<template #header-extra>
<n-tag type="success" v-if="l.need_client === '0'">不需要专有客户端</n-tag>
<n-tag type="warning" v-else>需要专有客户端</n-tag>
Expand Down Expand Up @@ -45,12 +45,80 @@
<n-form-item label="选择游戏类型" path="game_id">
<n-select v-model:value="lobbyValue.game_id" placeholder="Select" :options="gameListSelect" />
</n-form-item>
<n-form-item label="房间名" path="name">
<n-input v-model:value="lobbyValue.name" placeholder="Input" />
<n-form-item label="房间名" path="lobby_name">
<n-input v-model:value="lobbyValue.lobby_name" placeholder="Input" />
</n-form-item>
<n-form-item label="房间介绍" path="description">
<n-input v-model:value="lobbyValue.description" placeholder="Textarea" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" />
<n-input v-model:value="lobbyValue.description" placeholder="Textarea" type="textarea"
:autosize="{ minRows: 3, maxRows: 5 }" />
</n-form-item>
<n-form-item label="是否需要专有客户端">
<n-radio-group v-model:value="lobbyValue.need_client" name="need_client" :default-value="'no'">
<n-space>
<n-radio name="yes" value="1">
需要
</n-radio>
<n-radio name="no" value="0">
不需要
</n-radio>
</n-space>
</n-radio-group>
</n-form-item>
<div v-show="lobbyValue.need_client === '1'">
<n-form-item label="客户端下载地址" path="client_download_url">
<n-input v-model:value="lobbyValue.client_download_url" placeholder="Input" />
</n-form-item>
<n-form-item label="客户端下载方式">
<n-radio-group v-model:value="lobbyValue.client_download_type" name="client_download_type"
:default-value="'direct'">
<n-space>
<n-radio name="direct" value="direct">
直接下载（直链）
</n-radio>
<n-radio name="pan" value="pan">
网盘
</n-radio>
</n-space>
</n-radio-group>
</n-form-item>
<n-form-item label="下载密码" path="client_download_password"
v-show="lobbyValue.client_download_type != 'direct'">
<n-input v-model:value="lobbyValue.client_download_password" placeholder="Input" />
</n-form-item>
</div>
<n-form-item label="游戏版本" path="game_version">
<n-input v-model:value="lobbyValue.game_version" placeholder="Input" />
</n-form-item>
<n-form-item label="是否是使用了 LoCyanFrp 进行穿透的游戏">
<n-radio-group v-model:value="lobbyValue.local" name="local" :default-value="'yes'">
<n-space>
<n-radio name="yes" value="1">
是
</n-radio>
<n-radio name="pan" value="0">
否
</n-radio>
</n-space>
</n-radio-group>
</n-form-item>
<div v-if="lobbyValue.local === '0'">
<n-form-item label="服务器IP" path="ip">
<n-input v-model:value="lobbyValue.ip" placeholder="Input" />
</n-form-item>
<n-form-item label="游戏端口" path="port">
<n-input v-model:value="lobbyValue.port" placeholder="Input" />
</n-form-item>
</div>
<div v-else>
<n-form-item label="所选隧道ID" path="proxy_id">
<n-select v-model:value="lobbyValue.proxy_id" placeholder="Select" :options="Proxies_Select" />
</n-form-item>
<n-form-item>
<n-button type="primary" @click="createLobby">
提交
</n-button>
</n-form-item>
</div>
</n-gi>
</n-grid>
</n-form>
Expand All @@ -61,9 +129,11 @@
</n-grid>
</template>
<script setup>
import { ref } from "vue"
import { ref } from "vue";
import { get, post } from "../utils/request";
import store from '../utils/stores/store.js'
import store from '../utils/stores/store.js';
import { sendErrorMessage, sendSuccessMessage } from '../utils/message';
import { SendErrorDialog, SendSuccessDialog, SendWarningDialog } from '../utils/dialog.js';
const gameList = ref([{
game_name: '',
Expand All @@ -79,7 +149,8 @@ const lobbyList = ref([{
create_time: "",
port: "",
ip: "",
name: "",
lobby_name: "",
local: "",
description: "",
proxy_id: "",
game_id: "",
Expand All @@ -96,15 +167,19 @@ const lobbyValue = ref({
create_time: "",
port: "",
ip: "",
name: "",
lobby_name: "",
local: "",
description: "",
proxy_id: "",
game_id: "",
node_id: "",
client_download_url: "",
client_download_type: "",
client_download_password: ""
client_download_password: "",
username: store.getters.get_username
})
const Proxies_Select = ref([])
const Proxies = ref([])
function getGameList() {
const rs = get("https://api-v2.locyanfrp.cn/api/v2/game/list");
Expand All @@ -121,7 +196,6 @@ function getGameList() {
i = i + 1
})
}
console.log(gameListSelect);
getLobbys(gameList.value[0].game_name)
})
}
Expand All @@ -135,8 +209,43 @@ function getLobbys(game_name) {
})
}
function getProxyList() {
const rs = get(
'https://api-v2.locyanfrp.cn/api/v2/proxies/getlist?username=' +
localStorage.getItem('username')
)
rs.then((res) => {
if (res.status === 200) {
var i = 0;
res.data.proxies.forEach((e) => {
const tmpDict = {
label: e.proxy_name,
value: e.id
};
Proxies.value[e.id] = e;
Proxies_Select.value[i] = tmpDict;
i = i + 1;
})
console.log(Proxies_Select);
}
})
}
function createLobby() {
if (lobbyValue.value.local === "1"){
lobbyValue.value.node_id = String(Proxies.value[lobbyValue.value.proxy_id].node);
}
const rs = post("http://127.0.0.1:8080/api/v2/lan/private/create", lobbyValue.value);
rs.then((res) => {
if (res.status === 200) {
SendSuccessDialog("添加成功!");
}
})
}
function handleUpdateValue(value) {
getLobbys(value)
}
getGameList();
getProxyList();
</script>

0 comments on commit 1e69077

Please sign in to comment.