App.vue

<template>
  <div id="app" class="container">
    <h1>Bem vindo a {{ title }}</h1>

    <h3 v-if="horas >= 9 && horas < 17" id="aberta">ABERTA</h3>
    <h3 v-else-if="horas >= 17 && horas < 18" id="proxima-fechar">PRÓXIMA DE FECHAR</h3>
    <h3 v-else id="fechada">FECHADA</h3>

    <div class="row">
      <div class="col">
        <h2>Filmes encontrados</h2>
        <button
          type="button"
          class="btn btn-primary btn-lg"
          @click="mostrarCarrinho"
        >Carrinho: {{ quantidadeNoCarrinho }} filmes</button>
      </div>
    </div>

    <div class="row" v-if="mostrarFilmes">
      <div class="col-3" v-bind:key="filme.id" v-for="filme in filmes">
        <div class="card">
          <img v-bind:src="filme.imagem" class="card-img-top" alt="imagem do filme">
          <div class="card-body">
            <h5 class="card-title">{{ filme.titulo }}</h5>
            <p class="card-text" v-html="filme.descricao"></p>
            <p class="card-text">{{ filme.valor | formatarPreco("R$") }}</p>
            <a
              href="#"
              @click="adicionarAoCarrinho(filme)"
              v-if="validarPermissaoParaAdicionarNoCarrinho(filme)"
              class="btn btn-primary"
            >ALUGAR</a>
            <a href="#" v-else class="btn btn-primary disabled">ALUGAR</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row" v-else>
      <h2>Carrinho</h2>

      <div class="col-12">
        <form>
          <div class="form-group">
            <label for="pedido.primeiroNome">Primeiro nome</label>
            <input
              type="text"
              class="form-control"
              id="primeiroNome"
              placeholder="Digita o primeiro nome"
              v-model="pedido.primeiroNome"
            >
          </div>
          <div class="form-group">
            <label for="ultimoNome">Último nome</label>
            <input
              type="text"
              class="form-control"
              id="ultimoNome"
              placeholder="Digite o último nome"
              v-model="pedido.ultimoNome"
            >
          </div>
          <div class="form-group">
            <label for="endereco">Endereço</label>
            <input
              type="text"
              class="form-control"
              id="endereco"
              placeholder="Digita o endereço"
              v-model="pedido.endereco"
            >
          </div>
          <div class="form-group">
            <label for="cidade">Cidade</label>
            <input
              type="text"
              class="form-control"
              id="cidade"
              placeholder="Digita a cidade"
              v-model="pedido.cidade"
            >
          </div>
          <div class="form-group">
            <label for="estado">Estado</label>
            <select class="form-control" id="estado" v-model="pedido.estado">
              <option disabled value>Escolha um estado</option>
              <option
                v-for="(estado, key) in estados"
                v-bind:value="estado"
                v-bind:key="key">
                {{ key }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <label for="cep">CEP</label>
            <input
              type="text"
              class="form-control"
              id="cep"
              placeholder="Digita o CEP"
              v-model="pedido.cep"
            >
          </div>
          <div class="form-group form-check">
            <input
              type="checkbox"
              class="form-check-input"
              id="pagoNaEntrega"
              v-bind:true-value="pedido.simNaEntrega"
              v-bind:false-value="pedido.naoNaEntrega"
              v-model="pedido.pagoNaEntrega"
            >
            <label class="form-check-label" for="pagoNaEntrega">Pago na entrega?</label>
          </div>
          <div class="form-group form-check-inline">
            <input
              type="radio"
              class="form-check-input"
              id="manha"
              value="Manhã"
              v-model="pedido.entrega"
            >
            <label class="form-check-label" for="manha">Manhã</label>
          </div>
          <div class="form-group form-check-inline">
            <input
              type="radio"
              class="form-check-input"
              id="tarde"
              value="Tarde"
              v-model="pedido.entrega"
            >
            <label class="form-check-label" for="tarde">Tarde</label>
          </div>
          <div class="form-group form-check-inline">
            <input
              type="radio"
              class="form-check-input"
              id="noite"
              value="Noite"
              v-model="pedido.entrega"
            >
            <label class="form-check-label" for="noite">Noite</label>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-primary" v-on:click="submitFormulario">
              Finalizar pedido
            </button>
          </div>
        </form>
      </div>
      <div class="col-12">
        <pre>
          Primeiro nome: {{ pedido.primeiroNome }}
          Último nome: {{ pedido.ultimoNome }}
          Endereço: {{ pedido.endereco }}
          Cidade: {{ pedido.cidade }}
          Estado: {{ pedido.estado }}
          CEP: {{ pedido.cep }}
          Pago na entrega?: {{ pedido.pagoNaEntrega }}
          Entrega: {{ pedido.entrega }}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data: function() {
    return {
      mostrarFilmes: true,
      title: "Locadora de Filmes",
      horas: new Date().getHours(),
      pedido: {
        primeiroNome: "",
        ultimoNome: "",
        endereco: "",
        cidade: "",
        estado: "",
        cep: "",
        pagoNaEntrega: "Não",
        simNaEntrega: "Sim",
        naoNaEntrega: "Não",
        entrega: "Manhã"
      },
      estados: {
        RJ: 'Rio de Janeiro',
        MG: 'Minas Gerais',
        SP: 'São Paulo',
        ES: 'Espírito Santo'
      },
      filmes: [
        {
          id: 1,
          titulo: "Vingadores",
          descricao: "Um <b>filme</b> de heróis",
          valor: 25,
          imagem: "assets/logo.png",
          estoqueDisponivel: 3
        },
        {
          id: 2,
          titulo: "Pantera Negra",
          descricao: "Um filme de panteras",
          valor: 35,
          imagem: "assets/logo.png",
          estoqueDisponivel: 6
        },
        {
          id: 3,
          titulo: "Homem-Formiga",
          descricao: "Um filme de formigas",
          valor: 20,
          imagem: "assets/logo.png",
          estoqueDisponivel: 2
        },
        {
          id: 4,
          titulo: "Capitã Marvel",
          descricao: "Um filme de capitãs",
          valor: 40,
          imagem: "assets/logo.png",
          estoqueDisponivel: 8
        },
        {
          id: 5,
          titulo: "Hulk",
          descricao: "Um filme de força",
          valor: 10,
          imagem: "assets/logo.png",
          estoqueDisponivel: 7
        }
      ],
      carrinho: []
    };
  },
  methods: {
    submitFormulario() {
      alert('Pedido finalizado');
    },
    mostrarCarrinho() {
      this.mostrarFilmes = this.mostrarFilmes ? false : true;
    },
    adicionarAoCarrinho: function(filme) {
      this.carrinho.push(filme.id);
    },
    quantidadeNoCarrinhoPorFilme: function(filme) {
      var quantidade = 0;
      for (var i = 0; i < this.carrinho.length; i++) {
        if (filme.id == this.carrinho[i]) {
          quantidade++;
        }
      }
      return quantidade;
    },
    validarPermissaoParaAdicionarNoCarrinho: function(filme) {
      return filme.estoqueDisponivel > this.quantidadeNoCarrinhoPorFilme(filme);
    }
  },
  computed: {
    quantidadeNoCarrinho: function() {
      return this.carrinho.length;
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#aberta {
  color: blue;
}

#proxima-fechar {
  color: orange;
}

#fechada {
  color: red;
}
</style>