137 lines
4.3 KiB
Vue
137 lines
4.3 KiB
Vue
<template>
|
|
<div class="contact--page page--container">
|
|
<div class="s1">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 order-1 order-lg-0 col-lg-8 right">
|
|
<h1>نظرات و پیشنهادات</h1>
|
|
<p>اگر هر سوالی در رابطه با کافه رستوران برگ دارید:</p>
|
|
|
|
<form class="form" @submit.prevent="upload">
|
|
<div class="form--row" :class="validation.name ? 'err' : null">
|
|
<input type="text" v-model="formData.name" placeholder="نام">
|
|
<p v-if="validation.name">{{ validation.name.msg }}</p>
|
|
</div>
|
|
|
|
<div class="form--row" :class="validation.phone ? 'err' : null">
|
|
<input type="text" v-model="formData.phone" placeholder="شماره تلفن" id="phoneNumber">
|
|
<p v-if="validation.phone">{{ validation.phone.msg }}</p>
|
|
</div>
|
|
|
|
<div class="form--row" :class="validation.email ? 'err' : null">
|
|
<input type="email" v-model="formData.email" placeholder="ایمیل">
|
|
<p v-if="validation.email">{{ validation.email.msg }}</p>
|
|
</div>
|
|
|
|
<div class="form--row" :class="validation.message ? 'err' : null">
|
|
<input type="text" v-model="formData.message" placeholder="پیام">
|
|
<p v-if="validation.message">{{ validation.message.msg }}</p>
|
|
</div>
|
|
|
|
<button>
|
|
<span>ارسال</span>
|
|
<IconsLeftArrow/>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="col-12 order-0 order-lg-1 col-lg-4 left">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 mb-5 mb-lg-0 col-lg">
|
|
<IconsLocation/>
|
|
<p v-if="storeInfo">{{storeInfo.address}}</p>
|
|
</div>
|
|
<div class="col-6 col-lg">
|
|
<IconsPhone/>
|
|
<a v-if="storeInfo" :href="`tel: ${storeInfo.tel}`">{{storeInfo.tel}}</a>
|
|
</div>
|
|
<div class="col-6 col-lg">
|
|
<IconsMail/>
|
|
<a v-if="storeInfo" :href="`mailto: ${storeInfo.email}`">{{storeInfo.email}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
message: ''
|
|
},
|
|
storeInfo : null,
|
|
validation: {}
|
|
}
|
|
},
|
|
methods: {
|
|
upload() {
|
|
this.validation = {}
|
|
const data = this.formData
|
|
|
|
this.$axios.post('/api/public/contact', data)
|
|
.then(response => {
|
|
this.$alert(response.data.message, 'ثبت موفق', {
|
|
confirmButtonText: 'باشه',
|
|
callback: action => {
|
|
this.formData = {
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
message: ''
|
|
}
|
|
}
|
|
})
|
|
})
|
|
.catch(error => {
|
|
if (error.response.status === 422) {
|
|
this.validation = error.response.data.validation
|
|
this.$message({
|
|
type: 'error',
|
|
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
|
})
|
|
} else {
|
|
this.$alert(error.response.data.error.message, 'خطا', {
|
|
confirmButtonText: 'باشه'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
created() {
|
|
if (process.client) $('body').attr('class', 'contactPage--theme')
|
|
},
|
|
async asyncData({$axios, error}) {
|
|
try {
|
|
const storeInfo = await $axios.get('/api/public/storeInfo')
|
|
return {
|
|
storeInfo: storeInfo.data
|
|
}
|
|
} catch (e) {
|
|
if (e?.response?.status === 401) {
|
|
error({
|
|
status: 401,
|
|
message: 'شما اجازه دسترسی به این صفحه را ندارید لطفا دوباره وارد شوید'
|
|
})
|
|
} else {
|
|
error({
|
|
status: 500,
|
|
message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|