%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container">
<div class="row">
<div class="col-md-8">
<img :src="'/images/'+featured_image">
<h3 class="main-title">{{packagename}}</h3>
<p v-html="description"></p>
<div class="row" v-for="user in users" :key="user.id">
<div class="card">
<div class="card-body package">
<div class="row">
<div class="col-md-4">
<img class="" v-bind:src="'../images/'+user.image_name" />
</div>
<div class="col-md-8">
<h2>{{user.day}}</h2>
<p>{{user.description}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="price-highlight">
<h3 class="price-title">Rs {{price}} <span class="per-person">Per Person</span> </h3>
</div>
<form action="" method="POST" @submit.prevent="addbooking()" class="contact-form">
{{thankyou}}
<div class="form-group">
<label for="">Name</label>
<input type="text" name="" id="" v-model="name" class="form-control" placeholder="" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="">Email</label>
<input type="text" name="" id="" v-model="email" class="form-control" placeholder="" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="">Contact No</label>
<input type="text" name="" id="" v-model="phone" class="form-control" placeholder="" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="">Message</label>
<input type="text" name="" id="" v-model="message" class="form-control" placeholder="" aria-describedby="helpId">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
users:[],
activeItem: 'home',
id:this.$route.params.id,
featured_image:'',
packagename:'',
description:'',
price:'',
name:'',
email:'',
phone:'',
message:'',
thankyou:'',
}
},
methods:{
loadusers(){
axios.get('/packagedetails/'+this.id) .then(response => {
this.users = response.data
this.featured_image=response.data[0].featured_image;
}) },
addbooking(){
axios
.post('/booking', {
package:this.packagename,
name: this.name,
email: this.email,
phone:this.phone,
message:this.message,
}) .then(response => {
this.thankyou ='Thankyou our team will contact you shortly';
});
},
loadpackage(){
axios.get('/featuredpackage/'+this.id) .then(response => {
this.featured_image=response.data[0].featured_image;
this.packagename=response.data[0].package_name;
this.description=response.data[0].description;
this.price=response.data[0].price;
})},
isActive (menuItem) {
return this.activeItem === menuItem
},
setActive (menuItem) {
this.activeItem = menuItem
}
},
created: function(){
this.loadusers(),
this.loadpackage()
}
}
</script>
<style scoped>
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #ffffff;
background-color: #0d75dd;
border-color: #dee2e6 #dee2e6 #f8fafc;
}
#tasks ul {
padding: 0;
margin: 0;
list-style: none;
}
.profile-title{
font-size: 1em;
}
.price-title{
font-size: 30px;
font-weight: bold;
}
.per-person{
font-size: 12px;
}
.price-highlight{
background: #c6f4fb;
padding: 4%;
margin-bottom: 5%;
}
.contact-form{
border: 1px solid #c8c2c2;
padding: 4%;
}
.main-title{
padding-top: 3%;
font-weight: bold;
}
</style>
Zerion Mini Shell 1.0