| @@ -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); | |||
| } | |||
| } | |||
| ] | |||
| }, | |||