331 lines
10 KiB
Vue
331 lines
10 KiB
Vue
<template>
|
||
<!-- 询盘类型页面 -->
|
||
<div class="content">
|
||
<BannerTop :options="bannerTopOptions"/>
|
||
|
||
<div
|
||
class="container rich-text"
|
||
v-html="$store.state.device === '手机端' ? pageInfo.contentApp : pageInfo.content"
|
||
>
|
||
</div>
|
||
|
||
<section class="container mt-5 mb-5">
|
||
<div class="form-container box_shadow w-75 m-auto">
|
||
<article class="header">
|
||
<div class="title d-flex align-items-center">
|
||
<h2 class="d-none d-md-block">{{ pageInfo.catgName }}</h2>
|
||
<b-img class="mr-4" :src="footerInfo.formLogo" fluid :alt="$t('index.corporateName')"></b-img>
|
||
</div>
|
||
<p class="row mt-3">
|
||
<label class="col-6 col-md-3">{{ $t('contactUs.contactUs') }}：{{ footerInfo.teams }}</label>
|
||
<label class="col-6">{{ $t('common.tel') }}：{{ footerInfo.tel }}</label>
|
||
</p>
|
||
<p class="row">
|
||
<label class="col-12">{{ $t('common.addressLabel') }}：{{ footerInfo.address }}</label>
|
||
</p>
|
||
</article>
|
||
|
||
<main class="form-box">
|
||
<ul class="way row pl-0 justify-content-center ">
|
||
<li class="col-4 text-center">
|
||
<b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.Mob/Whatsapp/Wechat')"></b-img>
|
||
<h5>{{ $t('common.Mob/Whatsapp/Wechat') }}</h5>
|
||
<p>{{ footerInfo.whatsapp }}</p>
|
||
</li>
|
||
<li class="col-4 text-center">
|
||
<b-img class="mb-2" src="~assets/image//icon/fax.png" fluid :alt="$t('common.fax')"></b-img>
|
||
<h5>{{ $t('common.fax') }}</h5>
|
||
<p>{{ footerInfo.faxNumber }}</p>
|
||
</li>
|
||
<li class="col-4 text-center">
|
||
<b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.E-mail')"></b-img>
|
||
<h5>{{ $t('common.E-mail') }}</h5>
|
||
<p>{{ footerInfo.email }}</p>
|
||
</li>
|
||
</ul>
|
||
|
||
<b-form @submit="onSubmit">
|
||
<b-form-group
|
||
id="input-name"
|
||
label-for="input-name"
|
||
v-if="formConfig.name"
|
||
:invalid-feedback="$t('contactUs.name')"
|
||
>
|
||
<template v-solt:lable>
|
||
<div class="mb-2 d-flex align-items-center">
|
||
<b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
|
||
<h6 class="label-text">{{ $t('contactUs.name') }}</h6>
|
||
</div>
|
||
</template>
|
||
<b-form-input
|
||
id="input-name"
|
||
v-model="dataForm.name"
|
||
:required="formConfig.nameMust"
|
||
>
|
||
</b-form-input>
|
||
</b-form-group>
|
||
|
||
<b-form-group
|
||
id="input-title"
|
||
label-for="input-title"
|
||
v-if="formConfig.title"
|
||
:invalid-feedback="$t('contactUs.title')"
|
||
>
|
||
<template v-solt:lable>
|
||
<div class="mb-2 d-flex align-items-center">
|
||
<b-img class="mr-1" src="~assets/image/icon/title.png" fluid :alt="$t('contactUs.title')"></b-img>
|
||
<h6 class="label-text">{{ $t('contactUs.title') }}</h6>
|
||
</div>
|
||
</template>
|
||
<b-form-input
|
||
id="input-title"
|
||
v-model="dataForm.title"
|
||
:required="formConfig.titleMust"
|
||
>
|
||
</b-form-input>
|
||
</b-form-group>
|
||
|
||
<b-form-group
|
||
id="input-company"
|
||
label-for="input-company"
|
||
v-if="formConfig.company"
|
||
:invalid-feedback="$t('contactUs.company')"
|
||
>
|
||
<template v-solt:lable>
|
||
<div class="mb-2 d-flex align-items-center">
|
||
<b-img class="mr-1" src="~assets/image/icon/company.png" fluid :alt="$t('contactUs.company')"></b-img>
|
||
<h6 class="label-text">{{ $t('contactUs.company') }}</h6>
|
||
</div>
|
||
</template>
|
||
<b-form-input
|
||
id="input-company"
|
||
v-model="dataForm.company"
|
||
:required="formConfig.companyMust"
|
||
>
|
||
</b-form-input>
|
||
</b-form-group>
|
||
|
||
<b-form-group
|
||
id="input-mail"
|
||
label-for="input-mail"
|
||
v-if="formConfig.email"
|
||
:invalid-feedback="$t('contactUs.mail')"
|
||
>
|
||
<template v-solt:lable>
|
||
<div class="mb-2 d-flex align-items-center">
|
||
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
|
||
<h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
|
||
</div>
|
||
</template>
|
||
<b-form-input
|
||
id="input-mail"
|
||
type="email"
|
||
v-model="dataForm.email"
|
||
:required="formConfig.emailMust"
|
||
>
|
||
</b-form-input>
|
||
</b-form-group>
|
||
|
||
<b-form-group
|
||
id="input-contactWay"
|
||
label-for="input-contactWay"
|
||
:invalid-feedback="$t('contactUs.contactWay')"
|
||
v-if="formConfig.tel"
|
||
>
|
||
<template v-solt:lable>
|
||
<div class="mb-2 d-flex align-items-center">
|
||
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
|
||
<h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
|
||
</div>
|
||
</template>
|
||
<b-form-input
|
||
id="input-contactWay"
|
||
v-model="dataForm.tel"
|
||
:required="formConfig.telMust"
|
||
>
|
||
</b-form-input>
|
||
</b-form-group>
|
||
|
||
<b-form-group
|
||
id="input-desc"
|
||
label-for="input-desc"
|
||
:invalid-feedback="$t('contactUs.desc')"
|
||
>
|
||
<template v-solt:lable>
|
||
<div class="mb-2 d-flex align-items-center">
|
||
<b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
|
||
<h6 class="label-text">{{ formConfig.content }}</h6>
|
||
</div>
|
||
</template>
|
||
<b-form-textarea
|
||
id="input-desc"
|
||
v-model="dataForm.content"
|
||
rows="3"
|
||
>
|
||
</b-form-textarea>
|
||
</b-form-group>
|
||
|
||
<div class="text-center">
|
||
<b-button class="w-25" type="submit" variant="primary" pill>
|
||
{{ $t('common.submit') }}
|
||
</b-button>
|
||
</div>
|
||
</b-form>
|
||
</main>
|
||
</div>
|
||
</section>
|
||
|
||
<b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex';
|
||
import footer from '../middleware/footer';
|
||
|
||
export default {
|
||
name: 'inquiry',
|
||
data() {
|
||
return {
|
||
dataForm: {
|
||
name: '',
|
||
title: '',
|
||
company: '',
|
||
email: '',
|
||
tel: '',
|
||
content: '',
|
||
equipment: this.$store.state.device
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['footerInfo'])
|
||
},
|
||
async asyncData({ $axios, query }) {
|
||
const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
|
||
let bannerTopOptions = {
|
||
title: pageInfo.catgName,
|
||
subTitle: pageInfo.description,
|
||
img: require('../assets/image/banner/aboutus-banner.png')
|
||
}
|
||
const { data: formConfig } = await $axios.get('/web/inquirySet')
|
||
|
||
return {
|
||
pageInfo,
|
||
bannerTopOptions,
|
||
formConfig
|
||
}
|
||
},
|
||
head() {
|
||
return {
|
||
title: this.pageInfo.title,
|
||
meta: [
|
||
{
|
||
hid: 'keywords',
|
||
name: 'keywords',
|
||
content: this.pageInfo.keyword
|
||
},
|
||
{
|
||
hid: 'description',
|
||
name: 'description',
|
||
content: this.pageInfo.description
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
onSubmit(e) {
|
||
e.preventDefault()
|
||
this.$axios.post('/web/inquirySave', this.dataForm).then(() => {
|
||
this.$message.success(this.$t('common.submitSuccess'))
|
||
setTimeout(() => {
|
||
window.location.reload()
|
||
}, 1500)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
.form-container {
|
||
height: min-content;
|
||
border-radius: 2.125rem;
|
||
overflow: hidden;
|
||
background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
|
||
.header {
|
||
width: 100%;
|
||
height: min-content;
|
||
background: url('~assets/image/backGroundImg/contact-us-form-bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
.title {
|
||
margin-top: 2.5625rem;
|
||
justify-content: space-between;
|
||
h2 {
|
||
padding: .6875rem 2.75rem .6875rem 1.625rem;
|
||
color: #fff;
|
||
background: rgba(255,255,255,0.44);
|
||
border-radius: 0px 3.125rem 3.125rem 0px;
|
||
font-size: 1.125rem;
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
}
|
||
}
|
||
p {
|
||
padding-left: 1.875rem;
|
||
color: #fff;
|
||
font-size: .875rem;
|
||
}
|
||
}
|
||
.form-box {
|
||
padding: 2.25rem 5.375rem;
|
||
.way {
|
||
h5 {
|
||
color: #80818a;
|
||
font-size: .875rem;
|
||
}
|
||
p {
|
||
color: #2b2b2b;
|
||
font-size: .875rem;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
.label-text {
|
||
margin-bottom: 0;
|
||
color: #2b2b2b;
|
||
font-size: .875rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-img {
|
||
margin-top: -5.625rem;
|
||
}
|
||
|
||
// 特殊样式小屏幕处理
|
||
@media screen and (max-width:400px) {
|
||
.form-container {
|
||
width: 100% !important;
|
||
.header {
|
||
.title {
|
||
margin-top: .625rem;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.form-box {
|
||
padding: 1.25rem;
|
||
}
|
||
}
|
||
.footer-img {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |