|
@@ -5,144 +5,180 @@
|
|
|
<div class="bottom_line"></div>
|
|
|
<div class="self_background">
|
|
|
<div class="wrap clearfix">
|
|
|
- <div class="s1">
|
|
|
- <div class="sr-layout-block fl">
|
|
|
- <div class="sr-txt-title">
|
|
|
- <h2 class="sr-txt-h2">{{ L["取得联系"] }}</h2>
|
|
|
- </div>
|
|
|
+ <div class="s1">
|
|
|
+ <div class="sr-layout-block fl">
|
|
|
+ <div class="sr-txt-title">
|
|
|
+ <h2 class="sr-txt-h2">{{ L["取得联系"] }}</h2>
|
|
|
+ </div>
|
|
|
|
|
|
<div class="item">
|
|
|
<img src="/contactUsPng3.png" />
|
|
|
<p class="t1">{{ L["客服邮箱"] }}</p>
|
|
|
- <p>{{siteEmail}}</p>
|
|
|
+ <p>{{ siteEmail }}</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="item">
|
|
|
<img src="/contactUsPng2.png" />
|
|
|
<p class="t1">{{ L["联系人电话"] }}</p>
|
|
|
- <p>{{sitePhone}}</p>
|
|
|
+ <p>{{ sitePhone }}</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="item">
|
|
|
<img src="/contactUsPng1.png" />
|
|
|
<p class="t1">{{ L["公司地址"] }}</p>
|
|
|
- <p>{{siteAddress}}</p>
|
|
|
+ <p>{{ siteAddress }}</p>
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="sr-layout-block fr" v-if="ifMapReload">
|
|
|
- <div class="sr-txt-title">
|
|
|
- <h2 class="sr-txt-h2">{{ L["将您的消息发送到此供应商"] }}</h2>
|
|
|
</div>
|
|
|
- <el-form
|
|
|
- ref="ruleFormRef"
|
|
|
- :model="form"
|
|
|
- label-position="top"
|
|
|
- label-width="120px"
|
|
|
- :rules="rules"
|
|
|
- size="large"
|
|
|
- status-icon
|
|
|
- >
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item :label= "L['姓名']" prop="name">
|
|
|
- <el-input
|
|
|
- v-model="form.name"
|
|
|
- :placeholder="L['请输入姓名']"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item :label="L['邮箱']" prop="email">
|
|
|
- <el-input
|
|
|
- v-model="form.email"
|
|
|
- :placeholder="L['请输入邮箱']"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item :label="L['电话代码']" prop="phoneCode">
|
|
|
- <el-select v-model="form.phoneCode" :placeholder="L['选择国家/地区']" filterable clearable allow-create style="width: 100%">
|
|
|
- <el-option
|
|
|
- v-for="item in countryPhone"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="(item.label+'/'+item.value)">
|
|
|
- <span style="float: left">{{ item.label }}</span>
|
|
|
- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item :label="L['电话']" prop="phone">
|
|
|
- <el-input
|
|
|
- v-model="form.phone"
|
|
|
- :placeholder="L['请输入电话']"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item :label="L['公司名称']" prop="company">
|
|
|
- <el-input
|
|
|
- v-model="form.company"
|
|
|
- :placeholder="L['请输入公司名称']"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item :label="L['留言']" prop="message">
|
|
|
- <el-input
|
|
|
- v-model="form.message"
|
|
|
- type="textarea"
|
|
|
- :rows="8"
|
|
|
- :placeholder="L['请输入留言']"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- class="self-btn"
|
|
|
- @click="submitForm(ruleFormRef)"
|
|
|
- style="flex: 48% 0 0; margin: 10px 1% 0"
|
|
|
- :loading="loading"
|
|
|
- >{{ L["发送"]}}</el-button
|
|
|
+ <div class="sr-layout-block fr" v-if="ifMapReload">
|
|
|
+ <div class="sr-txt-title">
|
|
|
+ <h2 class="sr-txt-h2">{{ L["将您的消息发送到此供应商"] }}</h2>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="form"
|
|
|
+ label-position="top"
|
|
|
+ label-width="120px"
|
|
|
+ :rules="rules"
|
|
|
+ size="large"
|
|
|
+ status-icon
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="L['姓名']" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ :placeholder="L['请输入姓名']"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ v-if="contactType === 'email'"
|
|
|
+ :label="L['邮箱']"
|
|
|
+ prop="email"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.email"
|
|
|
+ :placeholder="L['请输入邮箱']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="contactType === 'mobile'"
|
|
|
+ :label="L['电话']"
|
|
|
+ prop="phone"
|
|
|
>
|
|
|
- <el-button
|
|
|
- @click="closeModal(ruleFormRef)"
|
|
|
- style="flex: 48% 0 0; margin: 10px 1% 0"
|
|
|
- class="cancel-btn"
|
|
|
- >{{ L["重置"]}}</el-button
|
|
|
+ <el-input
|
|
|
+ v-model="form.phone"
|
|
|
+ :placeholder="L['请输入手机号']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="L['电话代码']" prop="phoneCode">
|
|
|
+ <el-select
|
|
|
+ v-model="form.phoneCode"
|
|
|
+ :placeholder="L['选择国家/地区']"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ allow-create
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in countryPhone"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.label + '/' + item.value"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ item.label }}</span>
|
|
|
+ <span
|
|
|
+ style="float: right; color: #8492a6; font-size: 13px"
|
|
|
+ >{{ item.value }}</span
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ v-if="contactType === 'mobile'"
|
|
|
+ :label="L['邮箱']"
|
|
|
+ prop="email"
|
|
|
>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
+ <el-input
|
|
|
+ v-model="form.email"
|
|
|
+ :placeholder="L['请输入邮箱']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="contactType === 'email'"
|
|
|
+ :label="L['电话']"
|
|
|
+ prop="phone"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.phone"
|
|
|
+ :placeholder="L['请输入电话']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="L['公司名称']" prop="company">
|
|
|
+ <el-input
|
|
|
+ v-model="form.company"
|
|
|
+ :placeholder="L['请输入公司名称']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="L['留言']" prop="message">
|
|
|
+ <el-input
|
|
|
+ v-model="form.message"
|
|
|
+ type="textarea"
|
|
|
+ :rows="8"
|
|
|
+ :placeholder="L['请输入留言']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="self-btn"
|
|
|
+ @click="submitForm(ruleFormRef)"
|
|
|
+ style="flex: 48% 0 0; margin: 10px 1% 0"
|
|
|
+ :loading="loading"
|
|
|
+ >{{ L["发送"] }}</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="closeModal(ruleFormRef)"
|
|
|
+ style="flex: 48% 0 0; margin: 10px 1% 0"
|
|
|
+ class="cancel-btn"
|
|
|
+ >{{ L["重置"] }}</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-if="ifMapReload && center.lat != ''">
|
|
|
- <GoogleMap
|
|
|
- api-key="AIzaSyAvTVnnDLfxdaK2i-f0pRMJOrdwZvxUBjU"
|
|
|
- style="width: 100%; height: 500px"
|
|
|
- :center="center"
|
|
|
- :zoom="3"
|
|
|
+ <div v-if="ifMapReload && center.lat != ''">
|
|
|
+ <GoogleMap
|
|
|
+ api-key="AIzaSyAvTVnnDLfxdaK2i-f0pRMJOrdwZvxUBjU"
|
|
|
+ style="width: 100%; height: 500px"
|
|
|
+ :center="center"
|
|
|
+ :zoom="3"
|
|
|
>
|
|
|
- <Marker :options="markerOptions" />
|
|
|
+ <Marker :options="markerOptions" />
|
|
|
</GoogleMap>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import {
|
|
|
-ElSelect,
|
|
|
+ ElSelect,
|
|
|
ElOption,
|
|
|
ElMessage,
|
|
|
ElForm,
|
|
@@ -153,18 +189,20 @@ ElSelect,
|
|
|
ElCol,
|
|
|
} from "element-plus";
|
|
|
import { useFiltersStore } from "@/store/filter.js";
|
|
|
-import { GoogleMap, Marker } from 'vue3-google-map'
|
|
|
-import { getCurLanguage } from '@/composables/common.js';
|
|
|
+import { GoogleMap, Marker } from "vue3-google-map";
|
|
|
+import { getCurLanguage } from "@/composables/common.js";
|
|
|
+import { getContactType } from "../../utils/common";
|
|
|
+
|
|
|
const L = getCurLanguage();
|
|
|
-const center = { lat: '', lng:'' };
|
|
|
+const center = { lat: "", lng: "" };
|
|
|
const route = useRoute();
|
|
|
-const router = useRouter()
|
|
|
+const router = useRouter();
|
|
|
const vid = route.query.vid;
|
|
|
const ruleFormRef = ref(null);
|
|
|
const siteAddress = ref();
|
|
|
const sitePhone = ref();
|
|
|
const siteEmail = ref();
|
|
|
-const ifMapReload = ref(false)
|
|
|
+const ifMapReload = ref(false);
|
|
|
const loading = ref(false);
|
|
|
const form = reactive({
|
|
|
name: "",
|
|
@@ -176,28 +214,27 @@ const form = reactive({
|
|
|
});
|
|
|
const filtersStore = useFiltersStore();
|
|
|
const countryPhone = ref([]);
|
|
|
+const contactType = getContactType();
|
|
|
|
|
|
-if(filtersStore.getMemberInfo.memberEmail){
|
|
|
- form.email = filtersStore.getMemberInfo.memberEmail
|
|
|
-}
|
|
|
-if(filtersStore.getMemberInfo.memberNickName || filtersStore.getMemberInfo.memberName){
|
|
|
- form.name = filtersStore.getMemberInfo.memberNickName || filtersStore.getMemberInfo.memberName
|
|
|
-}
|
|
|
+const { memberEmail, memberNickName, memberName, memberMobile, memberCompany} = filtersStore.getMemberInfo;
|
|
|
+form.email = memberEmail ?? "";
|
|
|
+form.name = memberNickName ?? memberName ?? "";
|
|
|
+form.phone = memberMobile ?? '';
|
|
|
+form.company = memberCompany ?? ""
|
|
|
|
|
|
useHead({
|
|
|
- title: 'Contact Us',
|
|
|
- meta: [
|
|
|
- {
|
|
|
- name: "description",
|
|
|
- content:'Contact Us',
|
|
|
- },
|
|
|
- {
|
|
|
- name: "keywords",
|
|
|
- content: 'Contact Us',
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
-
|
|
|
+ title: "Contact Us",
|
|
|
+ meta: [
|
|
|
+ {
|
|
|
+ name: "description",
|
|
|
+ content: "Contact Us",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "keywords",
|
|
|
+ content: "Contact Us",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
|
|
|
const checkEmailFun = (rule, value, callback) => {
|
|
|
if (checkEmail(value) !== true) {
|
|
@@ -221,21 +258,21 @@ const closeModal = (formEl) => {
|
|
|
|
|
|
const rules = reactive({
|
|
|
name: [{ required: true, message: L["请输入姓名"], trigger: "blur" }],
|
|
|
- email: [
|
|
|
- { required: true, message: L["请输入邮箱"], trigger: "blur" },
|
|
|
- { validator: checkEmailFun, trigger: "blur" },
|
|
|
- ],
|
|
|
+ email: contactType === "email" ? [
|
|
|
+ { required: true, message: L["请输入邮箱"], trigger: "blur" },
|
|
|
+ { validator: checkEmailFun, trigger: "blur" },
|
|
|
+ ] : [],
|
|
|
phoneCode: [
|
|
|
{
|
|
|
required: true,
|
|
|
message: L["请选择国家/地区"],
|
|
|
- trigger: ['blur','change'],
|
|
|
+ trigger: ["blur", "change"],
|
|
|
},
|
|
|
],
|
|
|
- // phone: [
|
|
|
- // { required: true, message: L["请输入电话"], trigger: "blur" },
|
|
|
- // // { validator: checkPhoneFun, trigger: "blur" },
|
|
|
- // ],
|
|
|
+ phone: contactType === "mobile" ? [
|
|
|
+ { required: true, message: L["请输入电话"], trigger: "blur" },
|
|
|
+ { validator: checkPhoneFun, trigger: "blur" },
|
|
|
+ ] : [],
|
|
|
company: [
|
|
|
{
|
|
|
required: true,
|
|
@@ -252,11 +289,8 @@ const rules = reactive({
|
|
|
],
|
|
|
});
|
|
|
|
|
|
-
|
|
|
const markerOptions = { position: center };
|
|
|
|
|
|
-
|
|
|
-
|
|
|
//提交按钮
|
|
|
const submitForm = async (formEl) => {
|
|
|
if (!formEl) return;
|
|
@@ -279,26 +313,28 @@ const submitForm = async (formEl) => {
|
|
|
});
|
|
|
}
|
|
|
loading.value = true;
|
|
|
- let d = {}
|
|
|
- d = Object.assign({},form)
|
|
|
+ let d = {};
|
|
|
+ d = Object.assign({}, form);
|
|
|
d.pageUrl = window.location.href;
|
|
|
d.itemId = vid ? vid : "";
|
|
|
d.itemType = vid ? "SHOP" : "MALL";
|
|
|
- let a = d.phoneCode
|
|
|
- d.phoneCode = a.split('/')[1] ? a.split('/')[1] : ''
|
|
|
- d.country = a.split('/')[0]
|
|
|
- post(url, d).then((res) => {
|
|
|
- loading.value = false;
|
|
|
- if (res.state == 200) {
|
|
|
- ElMessage.success(res.msg);
|
|
|
+ let a = d.phoneCode;
|
|
|
+ d.phoneCode = a.split("/")[1] ? a.split("/")[1] : "";
|
|
|
+ d.country = a.split("/")[0];
|
|
|
+ post(url, d)
|
|
|
+ .then((res) => {
|
|
|
+ loading.value = false;
|
|
|
+ if (res.state == 200) {
|
|
|
+ ElMessage.success(res.msg);
|
|
|
|
|
|
- closeModal(formEl);
|
|
|
- } else {
|
|
|
- ElMessage.error(res.msg);
|
|
|
- }
|
|
|
- }).finally(()=>{
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
+ closeModal(formEl);
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
} else {
|
|
|
console.log("error submit!", fields);
|
|
|
}
|
|
@@ -307,32 +343,36 @@ const submitForm = async (formEl) => {
|
|
|
|
|
|
//获取经纬度
|
|
|
const getMapInfo = () => {
|
|
|
- get('v3/system/front/setting/getSettings?names=pt_map_parameter,pt_map_parameter_1,basic_site_address,basic_site_phone,basic_site_email').then(res=>{
|
|
|
- center.lat = parseFloat(res.data[0])
|
|
|
- center.lng = parseFloat(res.data[1])
|
|
|
- siteAddress.value = res.data[2]
|
|
|
- sitePhone.value = res.data[3]
|
|
|
- siteEmail.value = res.data[4]
|
|
|
- ifMapReload.value =true
|
|
|
- })
|
|
|
-}
|
|
|
+ get(
|
|
|
+ "v3/system/front/setting/getSettings?names=pt_map_parameter,pt_map_parameter_1,basic_site_address,basic_site_phone,basic_site_email"
|
|
|
+ ).then((res) => {
|
|
|
+ center.lat = parseFloat(res.data[0]);
|
|
|
+ center.lng = parseFloat(res.data[1]);
|
|
|
+ siteAddress.value = res.data[2];
|
|
|
+ sitePhone.value = res.data[3];
|
|
|
+ siteEmail.value = res.data[4];
|
|
|
+ ifMapReload.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
//获取国家电话code
|
|
|
const getPhoneCode = () => {
|
|
|
- get('v3/member/front/enquiry/phoneCode').then(res=>{
|
|
|
+ get("v3/member/front/enquiry/phoneCode").then((res) => {
|
|
|
countryPhone.value = res.data;
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
setTimeout(() => {
|
|
|
- sldStatEvent({ behaviorType: 'pv',pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl });
|
|
|
- }, 3000)
|
|
|
- getMapInfo()
|
|
|
- getPhoneCode()
|
|
|
-})
|
|
|
-
|
|
|
+ sldStatEvent({
|
|
|
+ behaviorType: "pv",
|
|
|
+ pageUrl: defaultUrl + router.currentRoute.value.path,
|
|
|
+ referrerPageUrl: apiUrl,
|
|
|
+ });
|
|
|
+ }, 3000);
|
|
|
+ getMapInfo();
|
|
|
+ getPhoneCode();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|