diff --git a/src/components/common/tail.vue b/src/components/common/tail.vue index 3b11b99..92cc9b4 100644 --- a/src/components/common/tail.vue +++ b/src/components/common/tail.vue @@ -21,22 +21,30 @@
{{ characters == 1 ? '联系我们' : 'Contact us' }}
-
- +
-
{{ characters == 1 ? '提交' : 'Submit' }} -
+ --> + + + + + + + + + + + {{ characters == 1 ? '提 交' : 'Submit' }} +
@@ -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; diff --git a/src/components/home/home.vue b/src/components/home/home.vue index 3ab3e62..765bd01 100644 --- a/src/components/home/home.vue +++ b/src/components/home/home.vue @@ -293,14 +293,14 @@
- + - + @@ -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 { }; + + + + +