|
|
@@ -0,0 +1,284 @@ |
|
|
|
<template> |
|
|
|
<div class="tailBox"> |
|
|
|
<div class="title">联系我们</div> |
|
|
|
<!-- <div class="taillong"> |
|
|
|
<img src="../../assets/img/LOGO1.png" alt> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div class="tiemBox"> |
|
|
|
|
|
|
|
<div class="contentBox"> |
|
|
|
<!-- <div class="taolIconText">{{characters ==1?'联系我们':'Contact us'}}</div> --> |
|
|
|
<div class="contentInput"> |
|
|
|
<input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> |
|
|
|
</div> |
|
|
|
<div class="contentInput"> |
|
|
|
<input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="contentInput"> |
|
|
|
<input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> |
|
|
|
</div> |
|
|
|
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="tailText"> <img src="../../assets/img/logoh.png" alt=""></div> |
|
|
|
<div class="tailText">TEL:86 152 1093 7300</div> |
|
|
|
<div class="tailText">{{characters ==1?'北京市海淀区中关村南大街12号农业科学院信息楼311室':'311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'}}</div> |
|
|
|
<div class="tailText">© 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { mapState } from "vuex"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
userName: "", |
|
|
|
phone: "", |
|
|
|
email: "" |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
submit() { |
|
|
|
let phone = /^1[35789]\d{9}$/; |
|
|
|
if (this.userName == "") { |
|
|
|
Toast.fail ( |
|
|
|
this.characters == 1 ? "请输入姓名" : "Please enter your name" |
|
|
|
); |
|
|
|
return; |
|
|
|
} else if (!phone.test(this.phone)) { |
|
|
|
Toast.fail ( |
|
|
|
this.characters == 1 |
|
|
|
? "请输入手机号" |
|
|
|
: "Please enter your mobile phone number" |
|
|
|
); |
|
|
|
return; |
|
|
|
} else if (this.email == "") { |
|
|
|
Toast.fail ( |
|
|
|
this.characters == 1 ? "请输入邮箱" : "Please enter email address" |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
let params = { |
|
|
|
mallName: this.email, //邮箱 |
|
|
|
applicant: this.userName, //姓名 |
|
|
|
phone: this.phone //电话 |
|
|
|
}; |
|
|
|
this.$axios({ |
|
|
|
method: "post", |
|
|
|
url: "/api/callback/wxMallApply/add", |
|
|
|
headers: { |
|
|
|
"Content-Type": "application/json;charset=UTF-8" |
|
|
|
}, |
|
|
|
data: params |
|
|
|
}) |
|
|
|
.then(res => { |
|
|
|
this.email = ""; |
|
|
|
this.userName = ""; |
|
|
|
this.phone = ""; |
|
|
|
Toast.success( |
|
|
|
this.characters == 1 ? "提交成功" : "submit successfully" |
|
|
|
); |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
Toast.fail (err.message); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState({ |
|
|
|
characters: state => state.publicObj.characters |
|
|
|
}) |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.tailBox { |
|
|
|
overflow: hidden; |
|
|
|
.title{ |
|
|
|
text-align: center; |
|
|
|
font-size: 18px; |
|
|
|
line-height: 30px; |
|
|
|
color: #323232; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
overflow: hidden; |
|
|
|
// height: 578px; |
|
|
|
background: #f1f4f7; |
|
|
|
|
|
|
|
.taillong { |
|
|
|
width: 168px; |
|
|
|
height: 50px; |
|
|
|
// margin-top: 60px; |
|
|
|
// margin-left: 360px; |
|
|
|
img { |
|
|
|
width: 168px; |
|
|
|
height: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
.tiemBox{ |
|
|
|
overflow: hidden; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
.taolIconBox { |
|
|
|
margin-left: 380px; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
.taolIconText { |
|
|
|
font-size: 14px; |
|
|
|
font-family: Inter; |
|
|
|
font-weight: 400; |
|
|
|
color: #323232; |
|
|
|
line-height: 62px; |
|
|
|
} |
|
|
|
.iconBox { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: 124px; |
|
|
|
img { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
} |
|
|
|
.contentBox { |
|
|
|
|
|
|
|
margin: 10px auto; |
|
|
|
.contentInput { |
|
|
|
width: 220px; |
|
|
|
height: 36px; |
|
|
|
background: #ffffff; |
|
|
|
text-align: center; |
|
|
|
margin: 0 auto 10px auto; |
|
|
|
input { |
|
|
|
width: 200px; |
|
|
|
height: 36px; |
|
|
|
} |
|
|
|
input::placeholder { |
|
|
|
font-weight: 400; |
|
|
|
color: #949494; |
|
|
|
} |
|
|
|
} |
|
|
|
.subBtn { |
|
|
|
width: 70px; |
|
|
|
height: 24px; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 24px; |
|
|
|
text-align: center; |
|
|
|
line-height: 24px; |
|
|
|
cursor: pointer; |
|
|
|
font-size: 14px; |
|
|
|
margin: 20px auto 10px auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.rqCodeBox { |
|
|
|
width: 360px; |
|
|
|
// position: absolute; |
|
|
|
// top: 130px; |
|
|
|
float: left; |
|
|
|
margin-left: 260px; |
|
|
|
.phone { |
|
|
|
font-size: 14px; |
|
|
|
font-family: Inter; |
|
|
|
font-weight: 400; |
|
|
|
color: #191919; |
|
|
|
} |
|
|
|
.site { |
|
|
|
font-size: 14px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #191919; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
.rqCodeTiemBox { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 30px; |
|
|
|
.rqCodeTiem { |
|
|
|
overflow: hidden; |
|
|
|
.rqcode { |
|
|
|
width: 150px; |
|
|
|
height: 150px; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.rqtext { |
|
|
|
text-align: center; |
|
|
|
font-size: 12px; |
|
|
|
font-family: Inter; |
|
|
|
font-weight: 400; |
|
|
|
color: #172c34; |
|
|
|
line-height: 62px; |
|
|
|
height: 62px; |
|
|
|
} |
|
|
|
} |
|
|
|
.rqCodeTiem1 { |
|
|
|
margin-left: 30px; |
|
|
|
.rqcode { |
|
|
|
width: 150px; |
|
|
|
height: 150px; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
.rqtext { |
|
|
|
text-align: center; |
|
|
|
font-size: 12px; |
|
|
|
font-family: Inter; |
|
|
|
font-weight: 400; |
|
|
|
color: #172c34; |
|
|
|
line-height: 62px; |
|
|
|
height: 62px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.showBoxP { |
|
|
|
font-size: 16px !important; |
|
|
|
text-align: center !important; |
|
|
|
line-height: 20px !important; |
|
|
|
color: #696969 !important; |
|
|
|
} |
|
|
|
.tailText { |
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
// margin-top: 10px; |
|
|
|
text-align: center; |
|
|
|
font-size: 10px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #191919; |
|
|
|
margin-bottom: 4px; |
|
|
|
img{ |
|
|
|
width: 110px; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::-webkit-input-placeholder { |
|
|
|
/* WebKit browsers,webkit内核浏览器 */ |
|
|
|
color: #ccc; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
:-moz-placeholder { |
|
|
|
/* Mozilla Firefox 4 to 18 */ |
|
|
|
color: #ccc; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
::-moz-placeholder { |
|
|
|
/* Mozilla Firefox 19+ */ |
|
|
|
color: #ccc; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
:-ms-input-placeholder { |
|
|
|
/* Internet Explorer 10+ */ |
|
|
|
color: #ccc; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|