|
|
@@ -0,0 +1,503 @@
|
|
|
+<template>
|
|
|
+ <div class="contact-us">
|
|
|
+ <div class="top-banner" />
|
|
|
+ <div class="from-cont">
|
|
|
+ <div class="form-all">
|
|
|
+ <div class="form-line" />
|
|
|
+ <div class="form-top">联系我们</div>
|
|
|
+ <div class="form-title">我们的专业团队将及时解决您的问题</div>
|
|
|
+ <div class="input-full">
|
|
|
+ <div class="ipnut-title">企业名称</div>
|
|
|
+ <el-input v-model="contactParam.enterpriceCn" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div class="input-full">
|
|
|
+ <div class="ipnut-title">姓名</div>
|
|
|
+ <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div class="input-full">
|
|
|
+ <div class="ipnut-title">电话</div>
|
|
|
+ <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div class="input-full">
|
|
|
+ <div class="ipnut-title">职务</div>
|
|
|
+ <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div class="input-full">
|
|
|
+ <div class="ipnut-title">邮箱</div>
|
|
|
+ <el-input v-model="contactParam.email" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="input-flex">
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">姓名</div>
|
|
|
+ <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">职务</div>
|
|
|
+ <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-flex">
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">电话</div>
|
|
|
+ <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">邮箱</div>
|
|
|
+ <el-input v-model="contactParam.email" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-flex">
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">主营品类</div>
|
|
|
+ <el-input v-model="contactParam.mainCategories" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">年销售额（万元）</div>
|
|
|
+ <el-input v-model="contactParam.annualSalesRevenue" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-full">
|
|
|
+ <div class="ipnut-title">主要客户</div>
|
|
|
+ <el-input v-model="contactParam.mainCustomers" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div class="input-flex">
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">预估账期</div>
|
|
|
+ <el-input v-model="contactParam.estimatedAccountingPeriod" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="ipnut-title">应收余额（万元）</div>
|
|
|
+ <el-input v-model="contactParam.accountsReceivableBalance" type="text" class="input-cont" />
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="from-btn" @click="submitForm">
|
|
|
+ 提交
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-img form-img-mobile" />
|
|
|
+ </div>
|
|
|
+ <div class="card-cont">
|
|
|
+ <div v-for="item in cardList" :key="item.address" class="card-item">
|
|
|
+ <div class="card-item-name">
|
|
|
+ {{ item.companyName }}
|
|
|
+ </div>
|
|
|
+ <div class="card-item-desc">
|
|
|
+ {{ item.address }}
|
|
|
+ </div>
|
|
|
+ <template v-if="mapLoadError">
|
|
|
+ <div class="card-item-map">
|
|
|
+ <img :src="item.mapUrl">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div :id="item.mapName" class="card-item-map" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import loadMap from '@/utils/loadMap'
|
|
|
+import { contactUs } from '@/api/user'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ contactParam: {
|
|
|
+ enterpriceCn: '',
|
|
|
+ contactName: '',
|
|
|
+ contactPost: '',
|
|
|
+ phoneNumber: '',
|
|
|
+ email: '',
|
|
|
+ mainCategories: '',
|
|
|
+ annualSalesRevenue: '',
|
|
|
+ mainCustomers: '',
|
|
|
+ estimatedAccountingPeriod: '',
|
|
|
+ accountsReceivableBalance: ''
|
|
|
+ },
|
|
|
+ cardList: [
|
|
|
+ {
|
|
|
+ companyName: '西安总部',
|
|
|
+ address: '西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层',
|
|
|
+ mapUrl: require('@/assets/contactUs/map_1.png'),
|
|
|
+ mapName: 'xian'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ companyName: '上海中心',
|
|
|
+ address: '上海市普陀区曹杨路1888号星光耀广场1号楼13A19室',
|
|
|
+ mapUrl: require('@/assets/contactUs/map_2.png'),
|
|
|
+ mapName: 'shanghai'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ companyName: '深圳中心',
|
|
|
+ address: '深圳市前海深港合作区南山街道听海大道5059号前海鸿荣源中心A座1601B',
|
|
|
+ mapUrl: require('@/assets/contactUs/map_3.jpg'),
|
|
|
+ mapName: 'shenzhen'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ mapLoadError: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ loadMap().then((res) => {
|
|
|
+ this.initMap()
|
|
|
+ }, (err) => {
|
|
|
+ console.log(err)
|
|
|
+ this.mapLoadError = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 联系我们提交
|
|
|
+ submitForm() {
|
|
|
+ if (this.contactParam.phoneNumber === '') {
|
|
|
+ this.$message.warning('请输入联系电话')
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ if (!/^\d{11}$/.test(this.contactParam.phoneNumber)) {
|
|
|
+ this.$message.warning('请输入合法电话号码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.contactParam.email !== '') {
|
|
|
+ if (this.contactParam.email.indexOf('@') === -1) {
|
|
|
+ this.$message.warning('请输入合法邮箱')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ contactUs(this.contactParam).then(() => {
|
|
|
+ this.$message.success('留言成功')
|
|
|
+ this.$router.go(0)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initMap() {
|
|
|
+ try {
|
|
|
+ // eslint-disable-next-line
|
|
|
+ const mapXian = new AMap.Map('xian', {
|
|
|
+ resizeEnable: true,
|
|
|
+ center: [108.9231043498764, 34.318071788447504],
|
|
|
+ zoom: 15
|
|
|
+ })
|
|
|
+ // eslint-disable-next-line
|
|
|
+ const marker1 = new AMap.Marker({
|
|
|
+ position: [108.9231043498764, 34.318071788447504]
|
|
|
+ })
|
|
|
+ marker1.setMap(mapXian)
|
|
|
+
|
|
|
+ // eslint-disable-next-line
|
|
|
+ const mapShanghai = new AMap.Map('shanghai', {
|
|
|
+ resizeEnable: true,
|
|
|
+ center: [121.406641, 31.257390],
|
|
|
+ zoom: 15
|
|
|
+ })
|
|
|
+ // eslint-disable-next-line
|
|
|
+ const marker2 = new AMap.Marker({
|
|
|
+ position: [121.406641, 31.257390]
|
|
|
+ })
|
|
|
+ marker2.setMap(mapShanghai)
|
|
|
+
|
|
|
+ // eslint-disable-next-line
|
|
|
+ const mapShenzhen = new AMap.Map('shenzhen', {
|
|
|
+ resizeEnable: true,
|
|
|
+ center: [113.896792, 22.529793],
|
|
|
+ zoom: 15
|
|
|
+ })
|
|
|
+ // eslint-disable-next-line
|
|
|
+ const marker3 = new AMap.Marker({
|
|
|
+ position: [113.896792, 22.529793]
|
|
|
+ })
|
|
|
+ marker3.setMap(mapShenzhen)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('map load error', error)
|
|
|
+ this.mapLoadError = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.contact-us {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ .top-banner {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 100%;
|
|
|
+ height: 420px;
|
|
|
+ background: url('../../../assets/contactUs/top-banner.jpg') no-repeat center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .from-cont {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 702px;
|
|
|
+ margin: 90px auto 174px;
|
|
|
+ .form-all {
|
|
|
+ width: 50%;
|
|
|
+ padding: 0 1% 0 18%;
|
|
|
+ .form-line {
|
|
|
+ width: 16px;
|
|
|
+ height: 2px;
|
|
|
+ border: 2px solid #FE7D0B;
|
|
|
+ }
|
|
|
+ .form-top {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .form-title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #999;
|
|
|
+ margin: 20px 0 28px;
|
|
|
+ }
|
|
|
+ .ipnut-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 21px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .input-cont {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-full {
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .input-flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ div {
|
|
|
+ width: 45%;
|
|
|
+ .ipnut-title {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .input-cont {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .from-btn {
|
|
|
+ width: 128px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #FE7D0B;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-img {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../assets/contactUs/form_r.png') no-repeat left center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-cont {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 70px;
|
|
|
+ .card-item {
|
|
|
+ width: 28%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 388px;
|
|
|
+ color: #444;
|
|
|
+ background-color: #FBFBFB;
|
|
|
+ padding: 24px;
|
|
|
+ .card-item-name {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #FE7D0B;
|
|
|
+ }
|
|
|
+ .card-item-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .card-item-map {
|
|
|
+ margin-top: 15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 380px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-item:nth-child(2) {
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ .card-item:nth-child(2) .card-item-map {
|
|
|
+ margin-top: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端样式 */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .contact-us {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 0 270px;
|
|
|
+ margin-top: 60px;
|
|
|
+ .top-banner {
|
|
|
+ width: 100%;
|
|
|
+ height: 124px;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .banner-desc {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .from-cont {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: auto !important;
|
|
|
+ margin: 90px auto 174px;
|
|
|
+ .form-all {
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 20px !important;
|
|
|
+ .form-line {
|
|
|
+ width: 16px;
|
|
|
+ height: 2px;
|
|
|
+ border: 2px solid #FE7D0B;
|
|
|
+ }
|
|
|
+ .form-top {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .form-title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #999;
|
|
|
+ margin: 20px 0 28px;
|
|
|
+ }
|
|
|
+ .ipnut-title {
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 21px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .input-cont {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-full {
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .input-flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .from-btn {
|
|
|
+ width: 128px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background-color: #FE7D0B;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-img.form-img-mobile {
|
|
|
+ width: 95%;
|
|
|
+ height: 306px !important;
|
|
|
+ flex: initial;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: url('../../../assets/contactUs/form_r.png') no-repeat center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-cont {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ .card-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 388px;
|
|
|
+ // height: 214px;
|
|
|
+ color: #444;
|
|
|
+ background-color: #F5F6F6;
|
|
|
+ padding: 24px;
|
|
|
+ .card-item-name {
|
|
|
+ color: #FE7D0B;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-item:nth-child(2) {
|
|
|
+ margin: 20px 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1930px) {
|
|
|
+ .contact-us {
|
|
|
+ width: 88% !important;
|
|
|
+ margin: 0 auto 70px !important;
|
|
|
+ .top-banner {
|
|
|
+ width: 100vw !important;
|
|
|
+ height: 570px !important;
|
|
|
+ background-size: cover !important;
|
|
|
+ transform: translateX(-6%) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .from-cont {
|
|
|
+ width: 86% !important;
|
|
|
+ .form-all {
|
|
|
+ width: 56% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
