captain-ui
Version:
有赞vue wap业务组件库
318 lines (292 loc) • 8.65 kB
JavaScript
import "vant/es/dialog/style";
import _Dialog from "vant/es/dialog";
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 aes from '@youzan/yz-aes';
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
},
on: {
"click": _vm.changeImgCaptcha
}
})]) : _vm._e(), _c('div', {
staticClass: "cap-login-dialog__password-input"
}, [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.password,
expression: "password"
}],
attrs: {
"type": "password",
"placeholder": "请输入密码"
},
domProps: {
"value": _vm.password
},
on: {
"blur": _vm.onFieldBlur,
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.password = $event.target.value;
}
}
})]), _vm._m(0), _c('div', {
staticClass: "cap-login-dialog__button"
}, [_c('button', {
on: {
"click": _vm.login
}
}, [_vm._v("登录")])]), _c('div', {
staticClass: "cap-login-dialog__footer"
}, [_c('span', {
on: {
"click": _vm.changeHashToCaptcha
}
}, [_vm._v("切换验证码登录")]), _c('span', {
on: {
"click": _vm.changeHashToReset
}
}, [_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,
onSuccess: Function
},
data: function data() {
return {
showImgCaptcha: false,
imgCaptchaSrc: this.interfaceServerLocation + "/api/captcha/image.png?" + new Date().getTime(),
phone: '',
password: '',
imgCaptcha: '',
value: 0
};
},
// mounted(){
// document.cookie.split(';').forEach((item) => {
// if(item.split('=')[0].trim() === 'LOGINBYPASSWORDNUM') {
// this.value = parseInt(item.split('=')[1]);
// if(parseInt(item.split('=')[1])>=3) {
// this.showImgCaptcha = true;
// }
// return;
// } else {
// let date = new Date();
// date.setTime(date.getTime()+(0.5 * 60 * 60 * 1000));
// document.cookie = `LOGINBYPASSWORDNUM=${this.value};expires=${date};path=/`;
// }
// });
// },
methods: {
onFieldBlur: function onFieldBlur() {
// IOS12 & 微信环境6.7.4以后版本，webview的在fixed ,input下丢失焦点的问题
window.scrollTo(0, 0);
},
closeReset: function closeReset() {
this.phone = '';
this.password = '';
this.imgCaptcha = '';
this.$emit('showLoginToC');
},
clearPhone: function clearPhone() {
this.phone = '';
},
changeImgCaptcha: function changeImgCaptcha() {
this.imgCaptchaSrc = this.interfaceServerLocation + "/api/captcha/image.png?" + new Date().getTime();
},
login: function login() {
var _this = this;
var phoneReg = /^\d{5,20}$/;
if (!this.phone) {
_Toast('请输入手机号');
return;
}
if (!phoneReg.test(this.phone)) {
_Toast('手机号格式错误');
return;
}
if (this.showImgCaptcha) {
if (!this.imgCaptcha) {
_Toast('请输入图片验证码');
return;
}
}
if (!this.password) {
_Toast('请输入密码');
return;
}
var requestData = {
countryCode: '+86',
mobile: this.phone,
captchaCode: this.imgCaptcha,
password: aes.encrypt(this.password)
};
ajax({
method: 'POST',
data: requestData,
url: this.interfaceServerLocation + "/api/to-c-by-pass.json",
rawResponse: true,
withCredentials: true
}).then(function (res) {
_this.changeImgCaptcha();
if (res.code === 0) {
_this.phone = '';
_this.password = '';
_this.imgCaptcha = '';
_this.$emit('changeLoginType', 'captcha-login');
_this.$emit('showLoginToC');
if (_this.onSuccess) {
_this.onSuccess('password');
}
if (_this.redirect !== '') {
window.open(_this.redirect, '_self');
}
} else if (res.code === 135200014) {
_Dialog.confirm({
message: '你的帐号因登录次数过多被锁定，请半小时后重新输入或找回密码',
confirmButtonText: '重置密码',
className: 'cap-login-to-c-dialog'
}).then(function () {
_this.phone = '';
_this.password = '';
_this.imgCaptcha = '';
_this.$emit('changeLoginType', 'reset-account');
});
} else {
_Toast(res.msg); // document.cookie.split(';').forEach((item) => {
// if(item.split('=')[0].trim() === 'LOGINBYPASSWORDNUM') {
// console.log(this.value, '!!!!', item.split('=')[1]);
// this.value = parseInt(item.split('=')[1]) + 1;
// let date = new Date();
// date.setTime(date.getTime()+(0.5 * 60 * 60 * 1000));
// document.cookie = `LOGINBYPASSWORDNUM=${this.value};expires=${date};path=/`;
// if(this.value>=3) {
// this.showImgCaptcha = true;
// }
// }
// });
}
}).catch(function (err) {
console.log(err);
});
},
changeHashToReset: function changeHashToReset() {
this.phone = '';
this.password = '';
this.imgCaptcha = '';
this.$emit('changeLoginType', 'reset-account');
},
changeHashToCaptcha: function changeHashToCaptcha() {
this.phone = '';
this.password = '';
this.imgCaptcha = '';
this.$emit('changeLoginType', 'captcha-login');
}
}
};