%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label"><img src="assets/images/flight.png">FLIGHTS </label>
<div class="tab-content">
<!-- The modal -->
<b-modal id="my-modal" hide-footer>
<h5>{{thankyou}}</h5>
<form action="" method="POST" @submit.prevent="addlead()">
<label>Name</label>
<input type="text" v-model="name" class="form-control">
<label>Email</label>
<input type="text" v-model="email" class="form-control">
<label>Contact No</label>
<input type="text" v-model="phone" class="form-control">
<br>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</b-modal>
<form class="form-inline" @submit.prevent="openmodal()">
<div class="input_wrapper">
<label>From:</label>
<div class="select1_inner">
<input type="text" id="ftext" placeholder="" v-model="searchQuery" @keyup="getData(searchQuery)" autocomplete="off" class="form-control input-lg" list="users"/>
<datalist id="users" >
<option v-for="user in users.data" :key='user' :value="user.city">{{user.city}}-{{user.IATA_code }}</option>
</datalist>
</div>
</div>
<div class="input_wrapper">
<label>To:</label>
<div class="select1_inner">
<input type="text" id="ftext2" placeholder="" v-model="searchQuery1" @keyup="getData(searchQuery1)" autocomplete="off" class="form-control input-lg" list="users"/>
<datalist id="users" >
<option v-for="user in users.data" :key='user' :value="user.city">{{user.city}}-{{user.IATA_code }}</option>
</datalist>
</div>
</div>
<div class="input_wrapper">
<label>Date:</label>
<div class="select1_inner">
<input type="Date" id="date" v-model="date" placeholder="" name="DATE">
</div>
</div>
<div class="input_wrapper">
<label>Travellers:</label>
<div class="select1_inner">
<input type="text" id="date" v-model="travellers" placeholder="" name="DATE" autocomplete="off">
</div>
</div>
<button v-on:click="openmodal">Submit</button>
</form>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label"><img src="assets/images/balloon.png">Holidays</label>
<div class="tab-content">
<form class="form-inline" @submit.prevent="greet()">
<div class="input_wrapper">
<label>Destination:</label>
<div class="select1_inner">
<select v-model="destination" class="form-control">
<optgroup label="International">
<option value="1">Thailand</option>
<option value="3">Dubai</option>
<!-- <option value="4">Italy</option> -->
<option value="5">Maldives</option>
<option value="10">Srilanka</option>
</optgroup>
<optgroup label="India">
<option value="2">Kerala</option>
<option value="8">Goa</option>
<option value="9">Kashmir</option>
</optgroup>
</select>
</div>
</div>
<div class="input_wrapper">
<label>Month:</label>
<div class="select1_inner">
<select v-model="month" class="form-control">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
</div>
<!-- <div class="input_wrapper">
<label>Date (optional)</label>
<div class="select1_inner">
<input type="Date" id="date" placeholder="" name="DATE">
</div>
</div> -->
<button v-on:click="greet">Submit</button>
</form>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label"><img src="assets/images/passport.png">Visa</label>
<div class="tab-content">
<form class="form-inline" method="post" action="<?=base_url()?>Visa/search">
<div class="input_wrapper">
<label>Destination:</label>
<div class="input_wrapper">
<label>Select Country:</label>
<div class="select1_inner">
<input type="text" id="date" placeholder="" name="DATE">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
users:[],
searchQuery:'',
searchQuery1:'',
destination:'',
name:'',
email:'',
phone:'',
date:'',
travellers:'',
thankyou:''
}
},
mounted() {
console.log('Component mounted.')
},
methods:{
greet:function (){
this.$router.push({path:'/search', query:{id: 1,destination:this.destination}})
location.reload();
},
addlead(){
axios
.post('/leads', {
name: this.name,
email: this.email,
phone:this.phone,
from:this.searchQuery,
to:this.searchQuery1,
date:this.date,
travellers:this.travellers
}) .then(response => {
this.thankyou ='Thank you our team will contact you shortly';
});
},
openmodal:function (){
this.$root.$emit("bv::show::modal", "my-modal");
},
closemodal:function (){
this.$root.$emit('bv::toggle::collapse', "my-modal");
},
getData:function(searchQuery) {
this.isLoading = true;
axios.get('city/searchquery?q=' + searchQuery.replace(/\s+/g, ''))
.then(response => {
this.users = response.data;
});
},
}
}
</script>
Zerion Mini Shell 1.0