@@ -21,22 +21,30 @@ | |||
<div class="taolIconText"> | |||
{{ characters == 1 ? '联系我们' : 'Contact us' }} | |||
</div> | |||
<div class="contentInput"> | |||
<!-- <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> --> | |||
<!-- <div class="contentInput"> | |||
<el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||
</div> | |||
<div class="contentInput"> | |||
<!-- <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> --> | |||
<el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input> | |||
</div> | |||
<div class="contentInput"> | |||
<!-- <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> --> | |||
<el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input> | |||
</div> | |||
<div class="subBtn" @click="submit()"> | |||
{{ characters == 1 ? '提交' : 'Submit' }} | |||
</div> | |||
</div> --> | |||
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||
<el-form-item class="width" prop="userName"> | |||
<el-input v-model="form.userName" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="phone"> | |||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
<el-button class="subBtn1" type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button> | |||
</el-form> | |||
</div> | |||
<div class="rqCodeBox"> | |||
@@ -84,44 +92,158 @@ export default { | |||
return { | |||
userName: '', | |||
phone: '', | |||
email: '' | |||
email: '', | |||
form: { | |||
userName: '', | |||
phone: '', | |||
email: '' | |||
}, | |||
rules: { | |||
userName: [ | |||
{ | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: '此项必填,内容最大10个字符!', | |||
trigger: 'blur' | |||
} | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('抱歉,请输入正确的手机号'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
rulesEnglish: { | |||
userName: [ | |||
{ | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter your cell phone number', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('Sorry, please enter the correct cell phone number'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
} | |||
}; | |||
}, | |||
methods: { | |||
submit() { | |||
let phone = /^1[35789]\d{9}$/; | |||
if (this.userName == '') { | |||
this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name'); | |||
return; | |||
} else if (!phone.test(this.phone)) { | |||
this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number'); | |||
return; | |||
} else if (this.email == '') { | |||
this.$message.error(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 = ''; | |||
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully'); | |||
}) | |||
.catch(err => { | |||
this.$message.error(err.message); | |||
}); | |||
// let phone = /^1[35789]\d{9}$/; | |||
// if (this.userName == '') { | |||
// this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name'); | |||
// return; | |||
// } else if (!phone.test(this.phone)) { | |||
// this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number'); | |||
// return; | |||
// } else if (this.email == '') { | |||
// this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address'); | |||
// return; | |||
// } | |||
// let params = { | |||
// mallName: this.email, //邮箱 | |||
// applicant: this.userName, //姓名 | |||
// phone: this.phone //电话 | |||
// }; | |||
this.$refs.form.validate(valid => { | |||
console.log(valid); | |||
if (valid) { | |||
let params = { | |||
mallName: this.form.email, //邮箱 | |||
applicant: this.form.userName, //姓名 | |||
phone: this.form.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 = ''; | |||
this.form.email = ''; | |||
this.form.userName = ''; | |||
this.form.phone = ''; | |||
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully'); | |||
}) | |||
.catch(err => { | |||
this.$message.error(err.message); | |||
}); | |||
} | |||
}); | |||
} | |||
}, | |||
computed: { | |||
@@ -209,6 +331,28 @@ export default { | |||
background-color: #16e9d6; | |||
} | |||
} | |||
::v-deep .el-form-item { | |||
width: 300px; | |||
margin-bottom: 20px; | |||
} | |||
.subBtn1 { | |||
border: none; | |||
width: 140px; | |||
height: 48px; | |||
color: #191919; | |||
// margin-top: 15px; | |||
background: #ffffff; | |||
border-radius: 24px; | |||
text-align: center; | |||
line-height: 24px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
transition: all 0.3s; | |||
&:hover { | |||
color: #fff; | |||
background-color: #16e9d6; | |||
} | |||
} | |||
} | |||
.rqCodeBox { | |||
width: 360px; | |||
@@ -293,14 +293,14 @@ | |||
</div> | |||
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||
<el-form-item class="width" prop="name"> | |||
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="phone"> | |||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="Pmail"> | |||
<el-form-item class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
@@ -336,19 +336,15 @@ export default { | |||
url: require('../../assets/img/en.jpg') | |||
} | |||
], | |||
// | |||
userName: '', | |||
phone: '', | |||
email: '', | |||
form: { | |||
name: '', | |||
phone: '', | |||
email: '' | |||
}, | |||
rules: { | |||
name: [ | |||
{ | |||
@@ -363,7 +359,8 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号' | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -381,7 +378,66 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输邮箱' | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
{ | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter your cell phone number', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('Sorry, please enter the correct cell phone number'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
@@ -680,6 +736,10 @@ export default { | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
::v-deep .el-form-item { | |||
// width: 300px; | |||
margin-bottom: 20px; | |||
} | |||
.Box { | |||
width: 100%; | |||
overflow: hidden; | |||
@@ -1158,7 +1218,9 @@ export default { | |||
} | |||
} | |||
.module_6 { | |||
height: 1080px; | |||
// margin-top: -100px; | |||
height: 880px; | |||
// height: 1080px; | |||
background-color: #fff; | |||
.title { | |||
text-align: center; | |||
@@ -52,14 +52,14 @@ | |||
</div> | |||
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||
<el-form-item class="width" prop="name"> | |||
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="phone"> | |||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="Pmail"> | |||
<el-form-item class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
@@ -94,9 +94,7 @@ export default { | |||
url: require('../../assets/img/en.jpg') | |||
} | |||
], | |||
// | |||
userName: '', | |||
phone: '', | |||
email: '', | |||
@@ -121,7 +119,8 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号' | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -139,7 +138,66 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输邮箱' | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
{ | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter your cell phone number', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('Sorry, please enter the correct cell phone number'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
@@ -60,14 +60,14 @@ | |||
</div> | |||
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||
<el-form-item class="width" prop="name"> | |||
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="phone"> | |||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="Pmail"> | |||
<el-form-item class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
@@ -129,7 +129,8 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号' | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -147,7 +148,66 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输邮箱' | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
{ | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter your cell phone number', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('Sorry, please enter the correct cell phone number'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
@@ -55,14 +55,14 @@ | |||
</div> | |||
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%"> | |||
<el-form ref="form" :rules="rules" :model="form"> | |||
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form"> | |||
<el-form-item class="width" prop="name"> | |||
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="phone"> | |||
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input> | |||
</el-form-item> | |||
<el-form-item class="width" prop="Pmail"> | |||
<el-form-item class="width" prop="email"> | |||
<el-input v-model="form.email" placeholder="Email"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
@@ -124,7 +124,8 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输手机号' | |||
message: '请先输手机号', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
@@ -142,7 +143,66 @@ export default { | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: '请先输邮箱' | |||
message: '请输入邮箱!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('抱歉,请输入正确的邮箱'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||
rulesEnglish: { | |||
name: [ | |||
{ | |||
required: true, | |||
min: 1, | |||
max: 10, | |||
message: 'This item is required !', | |||
trigger: 'blur' | |||
} | |||
], | |||
phone: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter your cell phone number', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let phone = /^1[35789]\d{9}$/; | |||
if (value && !phone.test(value)) { | |||
callback('Sorry, please enter the correct cell phone number'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
], | |||
email: [ | |||
{ | |||
required: true, | |||
trigger: 'change', | |||
message: 'Please enter email!', | |||
trigger: 'blur' | |||
}, | |||
{ | |||
validator(rule, value, callback, source, options) { | |||
var errors = []; | |||
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |||
if (value && !email.test(value)) { | |||
callback('Sorry, please enter the correct email address'); | |||
} | |||
callback(errors); | |||
} | |||
} | |||
] | |||
}, | |||