captain-ui
Version:
有赞vue wap业务组件库
346 lines (311 loc) • 9.06 kB
JavaScript
import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import "vant/es/cell-group/style";
import _CellGroup from "vant/es/cell-group";
import "vant/es/field/style";
import _Field from "vant/es/field";
import "vant/es/icon/style";
import _Icon from "vant/es/icon";
import ajax from '../../../common/ajax.js';
export default {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "cap-login-dialog"
}, [_c('div', {
staticClass: "cap-login-dialog__title"
}, [_c('span', [_vm._v("验证码登录")]), _c('span', {
on: {
"click": _vm.closeReset
}
}, [_vm._v("×")])]), _c('div', {
staticClass: "cap-login-dialog__phone"
}, [_c('span', [_vm._v("中国 +86")]), _c('span', [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.phone,
expression: "phone"
}],
attrs: {
"type": "tel",
"placeholder": "请输入手机号"
},
domProps: {
"value": _vm.phone
},
on: {
"blur": _vm.onFieldBlur,
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.phone = $event.target.value;
}
}
}), _c('van-icon', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.phone,
expression: "phone"
}],
attrs: {
"name": "clear"
},
on: {
"click": _vm.clearPhone
}
})], 1)]), _vm.showImgCaptcha ? _c('div', {
staticClass: "cap-login-dialog__img-captcha"
}, [_c('span', [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.imgCaptcha,
expression: "imgCaptcha"
}],
attrs: {
"type": "text",
"placeholder": "请输入图形验证码"
},
domProps: {
"value": _vm.imgCaptcha
},
on: {
"blur": _vm.onFieldBlur,
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.imgCaptcha = $event.target.value;
}
}
})]), _c('img', {
attrs: {
"src": _vm.imgCaptchaSrc,
"alt": ""
},
on: {
"click": _vm.changeImgCaptcha
}
})]) : _vm._e(), _c('div', {
staticClass: "cap-login-dialog__get-captcha"
}, [_c('span', [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.phoneCaptcha,
expression: "phoneCaptcha"
}],
attrs: {
"type": "tel",
"placeholder": _vm.captcha
},
domProps: {
"value": _vm.phoneCaptcha
},
on: {
"blur": _vm.onFieldBlur,
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.phoneCaptcha = $event.target.value;
}
}
})]), _c('span', [_vm.captcha === '请输入验证码' ? _c('span', {
on: {
"click": _vm.changeCaptcha
}
}, [_vm._v("\n 获取验证码\n ")]) : _c('span', {
staticClass: "cap-login-dialog__get-captcha__clock-captcha"
}, [_vm._v("\n 已发送(" + _vm._s(_vm.captchaTimer) + "s)\n ")])])]), _vm._m(0), _c('div', {
staticClass: "cap-login-dialog__button"
}, [_c('button', {
on: {
"click": _vm.captchaLogin
}
}, [_vm._v("登录")])]), _c('div', {
staticClass: "cap-login-dialog__footer"
}, [_c('span', {
on: {
"click": _vm.changeHash
}
}, [_vm._v("切换密码登录")])])]);
},
staticRenderFns: [function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "cap-login-dialog__agreement"
}, [_c('span', [_vm._v("\n 登录即代表同意\n "), _c('span', [_c('a', {
attrs: {
"href": "https://bbs.youzan.com/forum.php?mod=viewthread&tid=672890&page=1&extra=#pid3837866"
}
}, [_vm._v("《有赞用户使用协议》")])])])]);
}],
components: {
'van-icon': _Icon,
'van-field': _Field,
'van-cell-group': _CellGroup
},
props: {
interfaceServerLocation: String,
redirect: String,
getCaptchaNum: Number,
onSuccess: Function
},
data: function data() {
return {
captcha: '请输入验证码',
timer: null,
captchaTimer: 60,
showImgCaptcha: false,
imgCaptchaSrc: this.interfaceServerLocation + "/api/captcha/image.png?" + new Date().getTime(),
phone: '',
imgCaptcha: '',
phoneCaptcha: ''
};
},
watch: {
getCaptchaNum: function getCaptchaNum(val) {
if (val >= 3) {
this.showImgCaptcha = true;
}
}
},
methods: {
onFieldBlur: function onFieldBlur() {
// IOS12 & 微信环境6.7.4以后版本，webview的在fixed ,input下丢失焦点的问题
window.scrollTo(0, 0);
},
closeReset: function closeReset() {
this.phone = '';
this.imgCaptcha = '';
this.phoneCaptcha = '';
this.$emit('showLoginToC');
},
clearPhone: function clearPhone() {
this.phone = '';
},
changeImgCaptcha: function changeImgCaptcha() {
this.imgCaptchaSrc = this.interfaceServerLocation + "/api/captcha/image.png?" + new Date().getTime();
},
captchaLogin: function captchaLogin() {
var _this = this;
var phoneReg = /^\d{1,20}$/;
if (!this.phone) {
_Toast('请输入手机号');
return;
}
if (!phoneReg.test(this.phone)) {
_Toast('手机号格式错误');
return;
}
if (this.showImgCaptcha) {
if (!this.imgCaptcha) {
_Toast('请输入图片验证码');
return;
}
}
if (!this.phoneCaptcha) {
_Toast('请输入短信验证码');
return;
}
var requestData = {
countryCode: '+86',
mobile: this.phone,
captchaCode: this.imgCaptcha,
smsCaptcha: this.phoneCaptcha
};
ajax({
method: 'POST',
data: requestData,
url: this.interfaceServerLocation + "/api/to-c-login/by-sms.json",
rawResponse: true,
withCredentials: true
}).then(function (res) {
_this.changeImgCaptcha();
if (res.code === 0) {
_this.phone = '';
_this.imgCaptcha = '';
_this.phoneCaptcha = '';
_this.$emit('changeLoginType', 'captcha-login');
_this.$emit('showLoginToC');
if (_this.onSuccess) {
_this.onSuccess('captcha');
}
if (_this.redirect !== '') {
window.open(_this.redirect, '_self');
}
} else {
_Toast(res.msg);
}
}).catch(function (err) {
console.log(err);
});
},
changeCaptcha: function changeCaptcha() {
var _this2 = this;
if (this.captcha === '请输入验证码') {
var phoneReg = /^\d{1,20}$/;
if (!this.phone) {
_Toast('请输入手机号');
return;
}
if (!phoneReg.test(this.phone)) {
_Toast('手机号格式错误');
return;
}
var value = 0; // 验证码获取次数 默认为0
document.cookie.split(';').forEach(function (item) {
if (item.split('=')[0].trim() === 'LOGINGETCAPTCHANUM') {
value = parseInt(item.split('=')[1]) + 1;
if (parseInt(item.split('=')[1]) >= 3) {
_this2.showImgCaptcha = true;
}
}
});
var requestData = {
countryCode: '+86',
mobile: this.phone
};
ajax({
method: 'POST',
data: requestData,
url: this.interfaceServerLocation + "/api/to-c-login/sms.json",
rawResponse: true
}).then(function (res) {
if (res.code === 0) {
var date = new Date();
date.setTime(date.getTime() + 0.5 * 60 * 60 * 1000);
document.cookie = "LOGINGETCAPTCHANUM=" + value + ";expires=" + date + ";path=/";
if (value > 3) {
_this2.showImgCaptcha = true;
}
_this2.captcha = '请输入6位验证码';
_this2.timer = setInterval(function () {
_this2.captchaTimer -= 1;
if (_this2.captchaTimer === 0) {
clearInterval(_this2.timer);
_this2.captchaTimer = 60;
_this2.captcha = '请输入验证码';
}
}, 1000);
} else {
_Toast(res.msg);
}
}).catch(function (err) {
console.log(err);
});
}
},
changeHash: function changeHash() {
this.$emit('changeLoginType', 'password-login');
}
}
};