codenames/src/components/Start.vue

<template>
  <div class="start">
    <form>
      <FormInput class="start-input" v-model="code" placeholder="房间密码"></FormInput>
      <FormRadio class="start-radio" v-model="identity" :list="list"></FormRadio>
      <div>
        <button class="start-button" @click.prevent="onSubmit">进入房间</button>
        <button class="start-button" @click.prevent="onToWords">添加新词</button>
      </div>
      <p class="start-tip">分<span class="red">红</span><span class="blue">蓝</span>两队，<span class="blue">蓝队</span>9个，<span class="red">红队</span>8个，所以<span class="blue">蓝队</span><strong>优先</strong>开始</p>
    </form>
  </div>
</template>

<script>
import FormInput from '@/components/FormInput'
import FormRadio from '@/components/FormRadio'
import http from '@/http'
export default {
  name: 'start',
  components: {
    FormInput,
    FormRadio
  },
  data() {
    return {
      code: '',
      identity: 'spy',
      list: [
        {
          label: '间谍',
          value: 'spy'
        },
        {
          label: '间谍头目',
          value: 'captain'
        }
      ]
    }
  },
  methods: {
    async onSubmit() {
      const { code: inputCode, identity } = this
      if (!inputCode) {
        alert('请输入房间密码')
        return
      } else if (!identity) {
        alert('请选择身份')
        return
      }
      const { code, data = [] } = await http.get('/api/list', { code: inputCode })
      this.$store.commit('SET_LIST', data)
      this.$store.commit('SET_CODE', code)
      this.$store.commit('SET_IDENTITY', identity)
      this.$emit('game')
    },
    onToWords() {
      this.$router.push('/words')
    }
  }
}
</script>

<style lang="scss" scoped>
.start {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%;
    min-width: 300px;
    max-width: 800px;
    margin-top: -50px;
  }
  .start-input {
    width: 80%;
    max-width: 400px;
  }
  .start-radio {
    width: 80%;
    max-width: 400px;
  }
  .start-button {
    outline: none;
    border: none;
    background-color: #409EFF;
    color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 16px;
    margin: 0 10px;
  }
  .start-tip {
    .red {
      color: red;
    }
    .blue {
      color: #409EFF;
    }
  }
}
</style>