133 lines
4.3 KiB
Vue
133 lines
4.3 KiB
Vue
<template>
|
|
<!-- Submit your Celebration Story here -->
|
|
<section class="container mx-auto px-4 xl:px-24 pt-16">
|
|
<h1 id="submitCelebration" class="h1-text text-blue-700 font-semibold">Submit your Celebration Story here</h1>
|
|
|
|
<div class=" bg-gray-300 rounded-tl-3xl rounded-br-3xl mt-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 place-items-center " v-if="celebrationstory">
|
|
<div class="grid place-items-center py-16 rounded-tl-3xl rounded-br-3xl">
|
|
<div class="grid">
|
|
<div class="w-full max-w-xs gap-4 drop-shadow-2xl">
|
|
<div>
|
|
<input type="text" v-model="scsname" placeholder="Full Name..">
|
|
<input type="text" v-model="scsnumber" placeholder="Mobile Number">
|
|
<input type="text" v-model="scsemail" name="lastname" placeholder="Email ID">
|
|
<input type="text" v-model="scsschoolname" placeholder="School Name">
|
|
<input type="text" v-model="scsglink" placeholder="Place your Google Drive File Link">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid place-items-center px-4 ">
|
|
<div class="flex place-content-end ">
|
|
<h1 class="justify-center pt-4 text-xl font-semibold "> Occassion: </h1>
|
|
<select class="select max-w-xs text-base" v-model="scsOccetion">
|
|
<option disabled value="">Select your Occassion</option>
|
|
<option>Good Friday</option>
|
|
<option>Easter</option>
|
|
<option>Christmas</option>
|
|
<option>Thanksgiving</option>
|
|
<option>Good Friday</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-control w-full">
|
|
<textarea class="w-full rounded-lg" v-model="scsdescription" rows="8" cols="50" placeholder="Write the description here....."></textarea>
|
|
<!-- <textarea v-model="scsdescription" class="textarea textarea-bordered text-lg shadow-2xl" style="width:300px; height: 270px;" placeholder="Write the description here....."></textarea> -->
|
|
</div>
|
|
</div>
|
|
<div class="py-4 lg:pt-0"><button @click="savecelebrationstory" class="text-lg bg-blue-700 text-white p-2 px-3 rounded-tl-lg rounded-br-lg">Publish Story</button></div>
|
|
</div>
|
|
<div v-else="savecelebrationstory"><h2 class="text-2xl text-center py-48"> Thank You <br>Published your Story Shortly.......</h2></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</template>
|
|
<style scoped>
|
|
input[type=text], select {
|
|
width: 100%;
|
|
padding: 12px 20px;
|
|
margin: 8px 0;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
/* box-sizing: border-box; */
|
|
}
|
|
|
|
.text-color-1 {
|
|
color: #7c4c23
|
|
}
|
|
@media screen and (min-width: 801px) {
|
|
.h1-text {
|
|
font-size: 40px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.h1-text {
|
|
font-size: 25px;
|
|
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoading: true,
|
|
scsname:null,
|
|
scsnumber:null,
|
|
scsemail:null,
|
|
celebrationstory:true,
|
|
scsOccetion:'',
|
|
scsschoolname:null,
|
|
scsglink:null,
|
|
scsdescription:null,
|
|
|
|
// contact_form:{}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
// this.getItemByCategory()
|
|
// console.log(this.smProducts)
|
|
// console.log(this.$route.query.cat)
|
|
// console.log(this.fruits)
|
|
|
|
},
|
|
methods: {
|
|
savecelebrationstory() {
|
|
let formData = new FormData();
|
|
formData.append('Name', this.scsname);
|
|
formData.append('Phone', this.scsnumber);
|
|
formData.append('Email', this.scsemail);
|
|
formData.append('MessageDetails', 'Occassion: ' + this.scsOccetion +' Description: '+this.scsdescription+' school name: '+this.scsschoolname+' FileLink: '+this.scsglink);
|
|
formData.append('formName', 'tb-educators-Need-Help-Planning-Curriculum');
|
|
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
|
|
{
|
|
method: 'POST',
|
|
// headers: {
|
|
// 'Content-Type': 'multipart/form-data',
|
|
// // 'Authorization': 'Bearer my-token',
|
|
// // 'My-Custom-Header': 'foobar'
|
|
// },
|
|
body: formData,
|
|
}
|
|
)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// console.log(this.scsOccetion)
|
|
// console.log(data)
|
|
});
|
|
// formData=""
|
|
this.celebrationstory=false
|
|
},
|
|
|
|
}
|
|
}
|
|
</script> |