Swift
103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<template>
|
|
<div class="contact--page page">
|
|
<section class="s1">
|
|
<div class="container">
|
|
<div class="row" >
|
|
<div class="col-12 col-md-6 message rounded">
|
|
<l-map :zoom="15" :center="[35.7114463, 51.4165909]">
|
|
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
|
|
<l-marker :lat-lng="[35.7114463, 51.4165909]"></l-marker>
|
|
</l-map>
|
|
</div>
|
|
<div class="col-12 col-md-6 mt-5 mt-md-0 contact">
|
|
<div class="info">
|
|
<ul>
|
|
<li>
|
|
<p>
|
|
<i class="fal fa-map-marker-alt"></i>
|
|
<span> {{ config.address }} </span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<a :href="`tel: ${config.contactTel}`">
|
|
<i class="fal fa-phone"></i>
|
|
<span>{{ config.contactTel }}</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a :href="`mailto: ${config.contactEmail}`">
|
|
<i class="fal fa-envelope"></i>
|
|
<span>{{ config.contactEmail }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ContactUsPage',
|
|
data() {
|
|
return {
|
|
formData: {
|
|
full_name: '',
|
|
email: '',
|
|
message: ''
|
|
},
|
|
validation: {}
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: 'آسان سرویس | ارتباط با ما'
|
|
}
|
|
},
|
|
computed: {
|
|
config() {
|
|
return this.$config
|
|
}
|
|
},
|
|
methods: {
|
|
send() {
|
|
this.validation = {}
|
|
this.$axios
|
|
.post(`/api/public/contact`, this.formData)
|
|
.then(res => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: 'پیام شما با موفقیت ارسال شد.'
|
|
})
|
|
this.formData = {
|
|
full_name: '',
|
|
email: '',
|
|
message: ''
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if (err.response.status === 422) this.validation = err.response.data.validation
|
|
else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: err.response.data.message
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.leaflet-container{
|
|
height: 20rem;
|
|
border-radius: 10px;
|
|
}
|
|
.rounded{
|
|
height: 20rem;
|
|
border-radius: 10px;
|
|
}
|
|
</style> |