|
|
@@ -4,18 +4,12 @@
|
|
|
<div>
|
|
|
<p class="course-develop-title">免费获得课程开发解决方案</p>
|
|
|
<el-form :model="telChangeDate" status-icon ref="ruleTelForm" class="course-develop-form">
|
|
|
- <el-form-item prop="tel">
|
|
|
+ <el-form-item prop="tel">
|
|
|
<el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
|
|
|
</el-form-item>
|
|
|
- <div id="your-dom-id" class="nc-container"></div>
|
|
|
- <el-form-item prop="verification">
|
|
|
- <div class="verification">
|
|
|
- <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="course-develop-input-code"></el-input>
|
|
|
- <el-button @click="checkVerification" :disabled="btnTextDisabled" class="course-develop-code-btn">{{btnText}}</el-button>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
<div class="form-blue-btn" @click="dialogSave">申请方案</div>
|
|
|
- <a class="form-border-btn" href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">在线客服</a>
|
|
|
+ <a class="form-border-btn" href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011"
|
|
|
+ target="_blank">在线客服</a>
|
|
|
</el-form>
|
|
|
|
|
|
<a href="tel:400-052-2130" class="course-develop-tel">咨询电话:400-052-2130</a>
|
|
|
@@ -26,55 +20,57 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'CourseDevelopPhone',
|
|
|
- layout: 'templateB',
|
|
|
+ name: 'CourseDevelopPhone',
|
|
|
+ layout: 'templateB',
|
|
|
data() {
|
|
|
return {
|
|
|
- telChangeDate: {},
|
|
|
- pageName:'',// 跳进来的页面名称
|
|
|
+ telChangeDate: {},
|
|
|
+ pageName: '',// 跳进来的页面名称
|
|
|
btnTextDisabled: false,
|
|
|
- btnText: '获取验证码',
|
|
|
- countdown: 60, // 60秒倒计时
|
|
|
- sliderData: {},
|
|
|
- appKey: 'FFFF0N00000000007EC0',
|
|
|
+ btnText: '获取验证码',
|
|
|
+ countdown: 60, // 60秒倒计时
|
|
|
+ sliderData: {},
|
|
|
+ appKey: 'FFFF0N00000000007EC0',
|
|
|
};
|
|
|
},
|
|
|
- head(){
|
|
|
+ head() {
|
|
|
},
|
|
|
computed: {},
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
// 申请方案按钮
|
|
|
- dialogSave(){
|
|
|
+ dialogSave() {
|
|
|
this.$refs.ruleTelForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
// 请求后台
|
|
|
const options = {
|
|
|
- phone: this.telChangeDate.tel,
|
|
|
- code: this.telChangeDate.verification,
|
|
|
+ phone: this.telChangeDate.tel,
|
|
|
};
|
|
|
-
|
|
|
- this.$axios.$post('/develop/add',options).then(res=>{
|
|
|
+ if (!/^1[3-9]\d{9}$/.test(this.telChangeDate.tel)) {
|
|
|
+ this.$message.error('手机号格式错误');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$axios.$post('/develop/add', options).then(res => {
|
|
|
if (res.code === 0 && res.data) {
|
|
|
- this.$message({customClass:'phone-message-box',type: 'success',message: '申请成功'});
|
|
|
+ this.$message({customClass: 'phone-message-box', type: 'success', message: '申请成功'});
|
|
|
// 根据跳进来的页面跳出去
|
|
|
switch (this.pageName) {
|
|
|
case 'shouye':
|
|
|
- this.$router.push({ name: 'index' });
|
|
|
+ this.$router.push({name: 'index'});
|
|
|
break;
|
|
|
case 'course':
|
|
|
- this.$router.push({ name: 'courseware' });
|
|
|
+ this.$router.push({name: 'courseware'});
|
|
|
break;
|
|
|
case 'resources':
|
|
|
- this.$router.push({ name: 'resources' });
|
|
|
+ this.$router.push({name: 'resources'});
|
|
|
break;
|
|
|
case 'education':
|
|
|
- this.$router.push({ name: 'indexEducation' });
|
|
|
+ this.$router.push({name: 'indexEducation'});
|
|
|
break;
|
|
|
default:
|
|
|
- this.$router.push({ name: 'index' });
|
|
|
+ this.$router.push({name: 'index'});
|
|
|
}
|
|
|
- }else{
|
|
|
- this.$message({customClass:'phone-message-box',type: 'error',message: res.msg});
|
|
|
+ } else {
|
|
|
+ this.$message({customClass: 'phone-message-box', type: 'error', message: res.msg});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -84,31 +80,31 @@
|
|
|
|
|
|
// 验证码
|
|
|
checkVerification() {
|
|
|
- if(this.telChangeDate.tel===''||this.telChangeDate.tel===undefined){
|
|
|
- this.$message({customClass:'phone-message-box',type: 'error',message: '请填写手机号'});
|
|
|
+ if (this.telChangeDate.tel === '' || this.telChangeDate.tel === undefined) {
|
|
|
+ this.$message({customClass: 'phone-message-box', type: 'error', message: '请填写手机号'});
|
|
|
return;
|
|
|
- }else if(this.sliderData.appkey === undefined){
|
|
|
- this.$message({customClass:'phone-message-box',type: 'error',message: '请先通过滑块校验'});
|
|
|
+ } else if (this.sliderData.appkey === undefined) {
|
|
|
+ this.$message({customClass: 'phone-message-box', type: 'error', message: '请先通过滑块校验'});
|
|
|
return;
|
|
|
}
|
|
|
- this.$axios.$post(`/develop/exists`,{ phone: this.telChangeDate.tel}).then(res=>{
|
|
|
+ this.$axios.$post(`/develop/exists`, {phone: this.telChangeDate.tel}).then(res => {
|
|
|
|
|
|
if (res.code === 0 && res.data) {
|
|
|
|
|
|
let req = {
|
|
|
- 'appkey': this.sliderData.appkey,
|
|
|
- 'phone': this.telChangeDate.tel,
|
|
|
- 'scene': this.sliderData.scene,
|
|
|
+ 'appkey': this.sliderData.appkey,
|
|
|
+ 'phone': this.telChangeDate.tel,
|
|
|
+ 'scene': this.sliderData.scene,
|
|
|
'sessionid': this.sliderData.csessionid,
|
|
|
- 'sig': this.sliderData.sig,
|
|
|
- 'token': this.sliderData.token,
|
|
|
- 'type': 0,
|
|
|
+ 'sig': this.sliderData.sig,
|
|
|
+ 'token': this.sliderData.token,
|
|
|
+ 'type': 0,
|
|
|
}
|
|
|
- this.$axios.$post('/sendCode',req).then(res=>{
|
|
|
+ this.$axios.$post('/sendCode', req).then(res => {
|
|
|
if (res.code === 0 && res.data) {
|
|
|
this.setTime();
|
|
|
- }else{
|
|
|
- this.$message({customClass:'phone-message-box',type: 'error',message: res.msg});
|
|
|
+ } else {
|
|
|
+ this.$message({customClass: 'phone-message-box', type: 'error', message: res.msg});
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
@@ -168,88 +164,12 @@
|
|
|
}, 1000);
|
|
|
}
|
|
|
},
|
|
|
- // 滑块
|
|
|
- sliderFun() {
|
|
|
- const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
|
|
|
- console.log(nc_token);
|
|
|
- const NC_Opt = {
|
|
|
- //声明滑动验证需要渲染的目标元素ID。
|
|
|
- renderTo: '#your-dom-id',
|
|
|
- //应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
|
|
|
- appkey: this.appKey,
|
|
|
- //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值,请务必正确填写。
|
|
|
- scene: 'nc_message',
|
|
|
- //滑动验证码的主键,请勿将该字段定义为固定值。确保每个用户每次打开页面时,其token值都是不同的。系统默认的格式为:”您的appkey”+”时间戳”+”随机数”。
|
|
|
- token: nc_token,
|
|
|
- //滑动条的宽度。
|
|
|
- customWidth: 300,
|
|
|
- //业务键字段,可为空。为便于线上问题的排查,建议您按照线上问题定位文档中推荐的方法配置该字段值。
|
|
|
- trans: { 'key1': 'code0' },
|
|
|
- //通过Dom的ID属性自动填写trans业务键,可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
|
|
|
- elementID: ['usernameID'],
|
|
|
- //是否自定义配置底层采集组件。如无特殊场景,请使用默认值(0),即不自定义配置底层采集组件。
|
|
|
- is_Opt: 0,
|
|
|
- //语言。PC端Web页面场景默认支持18国语言,详细配置方法请参见自定义文案与多语言文档。
|
|
|
- language: 'cn',
|
|
|
- //是否启用。一般情况,保持默认值(true)即可。
|
|
|
- isEnabled: true,
|
|
|
- //内部网络请求的超时时间。一般情况建议保持默认值(3000ms)。
|
|
|
- timeout: 3000,
|
|
|
- //允许服务器超时重复次数,默认5次。超过重复次数后将触发报错。
|
|
|
- times: 5,
|
|
|
- //用于自定义滑动验证各项请求的接口地址。一般情况,请勿配置该参数。
|
|
|
- apimap: {
|
|
|
- // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
|
|
|
- // 'get_captcha': '//b.com/get_captcha/ver3',
|
|
|
- // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
|
|
|
- // 'get_img': '//c.com/get_img',
|
|
|
- // 'checkcode': '//d.com/captcha/checkcode.jsonp',
|
|
|
- // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
|
|
|
- // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
|
|
|
- // 'umid_serUrl': 'https://g.com/service/um.json'
|
|
|
- },
|
|
|
- //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
|
|
|
- callback: (data) => {
|
|
|
- this.sliderData = Object.assign({}, data, {
|
|
|
- appkey: NC_Opt.appkey,
|
|
|
- scene: NC_Opt.scene,
|
|
|
- });
|
|
|
- console.log( this.sliderData);
|
|
|
- },
|
|
|
- };
|
|
|
- let date11 = () => {
|
|
|
-
|
|
|
- let _date = new Date();
|
|
|
- let year = _date.getFullYear().toString();
|
|
|
- let month = _date.getMonth().toString();
|
|
|
- let day = _date.getDate().toString();
|
|
|
- let a = _date.getHours().toString();
|
|
|
- let b = _date.getMinutes().toString();
|
|
|
- let c = _date.getSeconds().toString();
|
|
|
-
|
|
|
- return year + month + day + a + b + c;
|
|
|
- };
|
|
|
- let c = date11();
|
|
|
- const scripts = [
|
|
|
- `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
|
|
|
- ];
|
|
|
- this.seriesLoadScripts(scripts, function () {
|
|
|
- var nc = new noCaptcha(NC_Opt);
|
|
|
- nc.upLang('cn', {
|
|
|
- _startTEXT: '请按住滑块,拖动到最右边',
|
|
|
- _yesTEXT: '验证通过',
|
|
|
- _error300: '哎呀,出错了,点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
|
|
|
- _errorNetwork: '网络不给力,请<a href="javascript:__nc.reset()">点击刷新</a>',
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
},
|
|
|
created() {
|
|
|
this.pageName = this.$route.query.pageName;
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.sliderFun();
|
|
|
+
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
},
|