',
mounted() {
// 初始化阿里云验证码
this.loadCaptchaScript()
},
methods: {
loadCaptchaScript() {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js';
script.async = true;
script.onload = () => {
// 脚本加载完成后初始化验证码
this.initCaptcha();
};
document.head.appendChild(script);
},
initCaptcha(){
this.captchaButton = document.getElementById("captcha-button");
// 滑动验证码
const that = this;
window.initAliyunCaptcha({
SceneId: "1f2s1y6o", // 场景ID
prefix: "1udlv2", // 身份标
mode: "popup", // 验证码模式
element: "#captcha-element",
button: "#captcha-button",
captchaVerifyCallback: that.getCode, // 业务请求(带验证码校验)回调函数
onBizResultCallback: that.onBizResultCallback,
getInstance: that.getInstance,
slideStyle: {
width: 360,
height: 40,
},
immediate: false,
language: "cn", // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
});
},
getInstance(instance) {
this.captcha = instance;
},
async getCode(captchaVerifyParam) {
if (!this.mobile || this.mobile.length !== 11) {
this.$message({
message: '请输入正确的手机号',
type: 'error'
});
return;
}
const that = this;
this.setLoadingState();
try {
const response = await new Promise((resolve, reject) => {
$.ajax({
url: 'https://wei.ltd.com/api/website/getSmsCode?website_id=16222',
method: 'get',
data: {
mobile: that.mobile,
type: 'form',
CaptchaVerifyParam: captchaVerifyParam
},
dataType: 'json',
success: resolve,
error: reject
});
});
if(response.code === 0) {
this.$message({
message: response.msg,
type: 'success'
});
this.setTimeOut();
} else {
this.$message({
message: response.msg,
type: 'error'
});
}
if(response.code !== 999){ //code=999 滑动验证码不通过
return { captchaResult: true };
}else{
return { captchaResult: false };
}
} catch(error) {
this.$message({
message: "发送失败",
type: 'error'
});
return { captchaResult: false };
} finally {
this.clearLoadingState();
}
},
onBizResultCallback(result) {
if (result === true) {
console.log("验证通过");
} else {
console.log("验证未通过");
this.$message.error("验证未通过，请重试");
}
},
setTimeOut() {
const timer = setTimeout(() => {
this.setTimeOut();
if (this.timeOut > 0) {
this.timeOut--;
this.disabled = true;
this.codeBtnText = '已发送(' + this.timeOut + ')';
}
}, 1000);
if (this.timeOut <= 0) {
this.clearLoadingState();
clearTimeout(timer);
}
},
setLoadingState() {
this.codeBtnText = '正在发送';
this.isLoading = true;
},
clearLoadingState() {
this.$nextTick(() => {
this.timeOut = 60;
this.disabled = false;
this.codeBtnText = '获取验证码';
this.isLoading = false;
})
}
}
});
var form_143789_app = new Vue({
el: '#form_143789',
components: { },
props: [],
data () {
return {
formData: {
extensionField_143789: extensionField_143789,
form_id: 143789,
field_1654739947034: undefined,
field_1670317553145: undefined,
field_1654739983323: undefined,
field_1670316281246_0: undefined,
field_1670316281246_0_code: undefined,
field_1670316345601: undefined,
field_1670316389498: undefined,
field_1670316466754: [],
field_1670316614793: ["搜索或广告"],
},
options_143789: options_143789,
rules: {
field_1654739947034: [{ required: true, message: "未填写必填项目 姓名", trigger: 'blur' }],
field_1670317553145: [{ required: true, message: "未填写必填项目 微信号", trigger: 'blur' }],
field_1654739983323: [{ required: true, message: "未填写必填项目 公司名称", trigger: 'blur' }],
field_1670316281246_0: [],
field_1670316281246_0_code: [],
field_1670316281246_0:[{
required: true,
message: '请输入',
trigger: 'blur'
}],
field_1670316281246_0_code:[{
required: true,
message: '请输入',
trigger: 'blur'
}],
field_1670316345601: [{ required: true, message: "未填写必填项目 拟合作区域", trigger: 'blur' }],
field_1670316389498: [{ required: true, message: "未填写必填项目 公司介绍", trigger: 'blur' }],
field_1670316466754: [{ required: true, type: 'array', message: "请至少选择一个 是否了解LTD(lead to deal)数字化方法论", trigger: 'change' }],
field_1670316614793: [{ required: true, type: 'array', message: "请至少选择一个 从哪了解到营销SaaS", trigger: 'change' }],
},
field_1670316466754Options: [{"label":"不了解（请到eb.ac.cn了解学习）","value":"不了解（请到eb.ac.cn了解学习）"},{"label":"基本了解","value":"基本了解"},{"label":"非常了解","value":"非常了解"}],
field_1670316614793Options: [{"label":"搜索引擎","value":"搜索引擎"},{"label":"朋友介绍","value":"朋友介绍"},{"label":"用户或同行渠道","value":"用户或同行渠道"},{"label":"信息流或广告","value":"信息流或广告"}],
}
},
computed: { },
watch: {},
created () {
},
mounted () {},
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if(!valid){
let dom = this.$refs['elForm'];
if (Object.prototype.toString.call(dom) !== '[object Object]') {
//这里是针对遍历的情况（多个输入框），取值为数组
dom = dom[0];
}
//第一种方法（包含动画效果）
dom.$el.scrollIntoView({
//滚动到指定节点
block: 'center',//值有start,center,end,nearest,当前显示在视图区域中间
behavior: 'smooth'//值有auto、instant,smooth,缓动动画（当前是慢速的）
})
return
};
const that = this;
$.ajax({
url: 'https://wei.ltd.com/api/analyst/data/postBasicsFormMessage?website_id=16222',
method: 'post',
data: this.formData,
dataType : 'json',
success: function(result){
if(result.code ===0){
let successStr = result.data.success_text ? result.data.success_text : result.msg;
// 提交成功过后跳转
if(result.data.redirect_url) {
const h = that.$createElement;
that.$msgbox({
message: h('p', { style: 'font-size: 16px; margin: 30px 50px 10px;' }, [
h('i',{class:'el-icon-success', style:'color: #67C23A;display: block;font-size: 30px; margin-bottom: 12px;'}, ' '),
h('span',null, successStr)
]),
confirmButtonText: "确定",
customClass:'submit-dialog',
center: true,
closeOnClickModal: false,
}).then(() => {
window.location.href = result.data.redirect_url;
});
}else{
that.$message(successStr);
}
}else{
if(JSON.stringify(result.data)!=="{}"){
let _errorStr = "";
for(let i in result.data ){
_errorStr+= result.data[i]+"
"
}
that.$message({
dangerouslyUseHTMLString: true,
message: _errorStr ? _errorStr:result.msg,
type: 'error'
});
}else{
that.$message({
message: result.msg,
type: 'error'
});
}
}
},
error : function(result){
that.$message({
message: result.msg,
type: 'error'
});
},
complete:() => {
}
});
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
}
})