%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<div class="container-fluid searchHeader">
<div class="container">
<div class="row">
<form class="form-inline"><div class="input_wrapper"><label>Destination:</label> <div class="select1_inner"><select class="form-control"><optgroup label="India"><option value="1">Kerala</option> <option value="2">Goa</option> <option value="3">Kashmir</option></optgroup> <optgroup label="International"><option value="4">London</option> <option value="5">Thailand</option> <option value="6">Singapore</option> <option value="7">Malayasia</option></optgroup></select></div></div> <div class="input_wrapper"><label>Month:</label> <div class="select1_inner"><select 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> <button>Submit</button></form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<h5 class="filterTitle">Themes</h5>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" id="" v-model="themes" value="Adventure" checked >
Adventure
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" id="" v-model="themes" value="Eco" checked >
Eco Tourism
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" id="" v-model="themes" value="Romantic" checked>
Romantic
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" id="" v-model="themes" value="Outdoors" checked>
Wild Outdoors
</label>
</div>
<h3 class="filterTitle">Categories</h3>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" id="" v-model="city" value="1" checked>
International
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="" id="" v-model="city" value="2" checked>
Domestic
</label>
</div>
</div>
<div class="col-md-9">
<div v-for="pack in computedProducts" :key="pack.id">
<div class="vendor-thumbnail">
<div class="">
<div class="row">
<div class="col-md-4">
<img class="vendor-thumbnail-image" v-bind:src="'/images/'+pack.main_image" />
</div>
<div class="col-md-8">
<div class="row">
<p class="property_title">{{pack.package_name}}</p>
<p class="property_price">Rs {{pack.price}}</p>
</div>
<div class="row">
<div class="summary_item">
<div class="summary_title"></div>
<div class="summary_info">{{pack.days_nights}}</div>
</div>
</div>
<div class="row">
<div class="summary_item">
<div class="summary_title"></div>
<div class="summary_info">{{pack.themes}}</div>
</div>
<p>We can customize this holiday for you throughout the year. Please get in touch with our travel adviser for more details.</p>
</div>
<div class="row">
<div class="wrapperbutton">
<router-link v-bind:to="'/packageDetails/'+pack.package_id"><button id="button2">View Details</button></router-link>
<router-link v-bind:to="'/propertydetail/'+pack.id"><button id="button3">Enquire Now</button></router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<pagination :data="packages" @pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
packages:[],
tasks:[],
searchQuery:'',
isTyping: false,
isLoading: false,
property_type:null,
property_for:null,
id:this.$route.params.id,
itemId:this.$route.params.id,
city: [],
test:[],
themes: [],
products: [
{name:'test1', color:'red', size:'XL'},
{name:'test2', color:'black', size:'L'},
{name:'test3', color:'red', size:'L'},
{name:'test4', color:'black', size:'XL'},
{name:'test5', color:'red', size:'L'},
{name:'test6', color:'yellow', size:'XL'},
{name:'test7', color:'black', size:'L'}
],
sortBy: 'name',
keyword: '',
}
},
watch: {
searchQuery: _.debounce(function() {
this.isTyping = false;
}, 500),
isTyping: function(value) {
if (!value) {
this.searchUser(this.searchQuery);
}
}
},
methods:{
searchUser: function(searchQuery) {
this.isLoading = true;
axios.get('client/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults:function(page = 1) {
axios.get('properties?page=' + page)
.then(response => {
this.properties = response.data;
});
},
loadusers:function(){
this.themes.push(this.id);
axios.get('/packages').then(response => {
this.packages = response.data
this.test=this.packages.data
})
},
loadtotalcount(){
axios.get('/client/totalcount') .then(response => {
this.tasks = response.data
})
},
getPosts:function () {
axios.get('/client').then(function(response){
this.rows = response.data;
}.bind(this));
},
searchProperty:function (){
axios.post('/properties/searchproperty', {
property_for: this.property_for,
}).then(response => {
this.properties = response.data})
}
},
computed:{
computedProducts: function () {
return this.test.filter((item) => {
return (this.keyword.length === 0 || item.package_name.match(this.keyword)) &&
(this.city.length === 0 || this.city == item.destination) &&
(this.themes.length === 0 || this.themes.includes(item.themes))
})
}
},
created: function(){
this.loadusers(),
this.loadtotalcount()
},
}
</script>
<style scoped>
.filterTitle{
font-weight: 700;
color: #000;
margin-bottom: 14px;
font-size: 16px;
line-height: 16px;
margin-top: 22px;
}
.searchHeader{
background: #f9c11e;
height: 60px;
margin-bottom: 20px;
}
</style>
Zerion Mini Shell 1.0