wzdwc
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<div class="home-container container">
|
|
<div class="room-btn" v-show="showBtn">
|
|
<div class="create-room btn"
|
|
@click="createRoom"><span>create room</span>
|
|
</div>
|
|
<div class="btn"
|
|
@click="joinRoom"> <span>join room</span>
|
|
</div>
|
|
</div>
|
|
<div class="room number" v-show="isJoin">
|
|
<div class="input-bd">
|
|
<div class="input-name">room number:</div>
|
|
<div class="input-text">
|
|
<input type="tel" maxlength="6"
|
|
v-model="roomNumber"/>
|
|
</div>
|
|
</div>
|
|
<div class="btn">
|
|
<span @click="go">go</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue } from 'vue-property-decorator';
|
|
import Component from 'vue-class-component';
|
|
import service from '../service';
|
|
|
|
@Component
|
|
export default class Home extends Vue {
|
|
public roomNumber: string = '';
|
|
private isJoin = false;
|
|
private showBtn = true;
|
|
|
|
private async createRoom() {
|
|
try {
|
|
const result = await service.createRoom();
|
|
const { roomNumber } = result.data;
|
|
console.log(result);
|
|
this.$router.replace({ name: 'game', params: { roomNumber, isOwner: '1' } });
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
private joinRoom() {
|
|
this.isJoin = true;
|
|
this.showBtn = false;
|
|
}
|
|
|
|
private go() {
|
|
this.$router.replace({ name: 'game', params: { roomNumber: this.roomNumber } });
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
.home-container {
|
|
|
|
}
|
|
</style>
|