3b41cffbc9
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
453 lines
19 KiB
JavaScript
453 lines
19 KiB
JavaScript
// 验证码通过
|
|
function captchaCheckSuccsss(bol, captcha, token) {
|
|
if (bol) {
|
|
// 验证码验证通过
|
|
getData(captcha, token)
|
|
}
|
|
};
|
|
// 取消验证码验证
|
|
function captchaCheckCancel() {
|
|
captchaCancel()
|
|
};
|
|
const loginDialog = {
|
|
template:
|
|
`
|
|
<div>
|
|
<!-- 验证码 -->
|
|
<captcha-dialog :is-show-captcha="isShowCaptcha" ref="captcha"></captcha-dialog>
|
|
<el-dialog width="16.95rem" custom-class='login-dialog' :visible.sync="visible" :show-close=true>
|
|
<div class="login-left">
|
|
<div class="login-text">
|
|
<div class="login-text-title">{{lang.login}}</div>
|
|
<div class="login-text-regist" v-if="commonData.register_email == 1 || commonData.register_phone == 1">
|
|
{{lang.login_no_account}}<a @click="toRegist">{{lang.login_regist_text}}</a>
|
|
</div>
|
|
</div>
|
|
<div class="login-form">
|
|
<div class="login-top">
|
|
<div v-show="isPassOrCode" class="login-email" :class="isEmailOrPhone? 'active':null" @click="isEmailOrPhone = true">{{lang.login_email}}
|
|
</div>
|
|
<div class="login-phone" :class="!isEmailOrPhone? 'active':null" @click="isEmailOrPhone = false">{{lang.login_phone}}
|
|
</div>
|
|
</div>
|
|
<div class="form-main">
|
|
<div class="form-item">
|
|
<el-input v-if="isEmailOrPhone" v-model="formData.email" :placeholder="lang.login_placeholder_pre + lang.login_email"></el-input>
|
|
<el-input v-else class="input-with-select select-input" v-model="formData.phone" :placeholder="lang.login_placeholder_pre + lang.login_phone">
|
|
<el-select filterable slot="prepend" v-model="formData.countryCode">
|
|
<el-option v-for="item in countryList" :key="item.name" :value="item.phone_code" :label="item.name_zh + '+' + item.phone_code"></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
</div>
|
|
<div v-if="isPassOrCode" class="form-item">
|
|
<el-input :placeholder="lang.login_pass" v-model="formData.password" type="password">
|
|
</el-input>
|
|
</div>
|
|
<div v-else class="form-item code-item">
|
|
<!-- 邮箱验证码 -->
|
|
<el-input v-if="isEmailOrPhone" v-model="formData.emailCode" :placeholder="lang.email_code">
|
|
</el-input>
|
|
<count-down-button ref="emailCodebtn" @click.native="sendEmailCode" v-if="isEmailOrPhone" my-class="code-btn"></count-down-button>
|
|
<!-- <el-button v-if="isEmailOrPhone" class="code-btn" type="primary">获取验证码</el-button> -->
|
|
|
|
<!-- 手机验证码 -->
|
|
<el-input v-if="!isEmailOrPhone" v-model="formData.phoneCode" :placeholder="lang.login_phone_code">
|
|
</el-input>
|
|
<count-down-button ref="phoneCodebtn" @click.native="sendPhoneCode" v-if="!isEmailOrPhone" my-class="code-btn"></count-down-button>
|
|
<!-- <el-button v-if="!isEmailOrPhone" class="code-btn" type="primary">获取验证码</el-button> -->
|
|
</div>
|
|
<div class="form-item rember-item">
|
|
<el-checkbox v-model="formData.isRemember">{{lang.login_remember}}</el-checkbox>
|
|
<a @click="toForget">{{lang.login_forget}}</a>
|
|
</div>
|
|
<div class="read-item" v-if="errorText.length !== 0">
|
|
<el-alert :title="errorText" type="error" show-icon :closable="false">
|
|
</el-alert>
|
|
</div>
|
|
<div class="form-item">
|
|
<el-button type="primary" class="login-btn" @click="doLogin">{{lang.login}}</el-button>
|
|
</div>
|
|
<div class="form-item read-item">
|
|
<el-checkbox v-model="checked">
|
|
{{lang.login_read}}<a @click="toService">{{lang.read_service}}</a>{{lang.read_and}}<a @click="toPrivacy">{{lang.read_privacy}}</a>
|
|
</el-checkbox>
|
|
</div>
|
|
|
|
<div class="form-item line-item" v-if="commonData.login_phone_verify == 1">
|
|
<el-divider><span class="text">or</span></el-divider>
|
|
</div>
|
|
<div class="form-item" v-if="commonData.login_phone_verify == 1">
|
|
<el-button v-if="isPassOrCode" :disabled="commonData.login_phone_verify == 0" @click="isPassOrCode = false;isEmailOrPhone = false" class="type-btn">{{lang.login_code_login}}
|
|
</el-button>
|
|
<el-button v-else @click="isPassOrCode = true" class="type-btn">
|
|
{{lang.login_pass_login}}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login-right">
|
|
<img src="${url}/img/common/login_back.png" class="login-back-img">
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
|
|
`,
|
|
data() {
|
|
return {
|
|
visible: true,
|
|
// 登录是否需要验证
|
|
isCaptcha: false,
|
|
isShowCaptcha: false, //登录是否显示验证码弹窗
|
|
checked: getCookie("checked") == "1" ? true : false,
|
|
isEmailOrPhone: getCookie("isEmailOrPhone") == "1" ? true : false, // true:电子邮件 false:手机号
|
|
isPassOrCode: getCookie("isPassOrCode") == "1" ? true : false, // true:密码登录 false:验证码登录
|
|
errorText: "",
|
|
formData: {
|
|
email: getCookie("email") ? getCookie("email") : null,
|
|
phone: getCookie("phone") ? getCookie("phone") : null,
|
|
password: getCookie("password") ? getCookie("password") : null,
|
|
phoneCode: "",
|
|
emailCode: "",
|
|
isRemember: getCookie("isRemember") == "1" ? true : false,
|
|
countryCode: 86
|
|
},
|
|
token: "",
|
|
captcha: '',
|
|
countryList: [],
|
|
commonData: {}
|
|
}
|
|
},
|
|
components: {
|
|
countDownButton,
|
|
captchaDialog
|
|
},
|
|
props: {
|
|
isShowLogin: {
|
|
default: false,
|
|
type: Boolean,
|
|
}
|
|
},
|
|
created() {
|
|
this.getCommonData()
|
|
this.getCountryList()
|
|
},
|
|
mounted() {
|
|
window.captchaCancel = this.captchaCancel
|
|
window.getData = this.getData
|
|
window.showLoginDialog = this.showLoginDialog
|
|
},
|
|
methods: {
|
|
// 获取通用配置
|
|
getCommonData() {
|
|
this.commonData = JSON.parse(localStorage.getItem('common_set_before'))
|
|
if (this.commonData.login_phone_verify == 0) {
|
|
this.isPassOrCode = true
|
|
}
|
|
if (this.commonData.captcha_client_login == 1) {
|
|
this.isCaptcha = true
|
|
}
|
|
},
|
|
showLoginDialog() {
|
|
this.visible = true
|
|
},
|
|
toRegist() {
|
|
// location.href = 'regist.html'
|
|
console.log("显示注册弹窗");
|
|
},
|
|
toForget() {
|
|
// location.href = 'forget.html'
|
|
console.log("显示忘记密码弹窗");
|
|
},
|
|
|
|
|
|
// 验证码验证成功后的回调
|
|
getData(captchaCode, token) {
|
|
this.isCaptcha = false
|
|
this.token = token
|
|
this.captcha = captchaCode
|
|
this.isShowCaptcha = false
|
|
// 判断是否密码登录 是执行登录
|
|
// 否则判断发送手机验证码还是邮箱验证码
|
|
if (this.isPassOrCode) {
|
|
this.doLogin()
|
|
} else {
|
|
if (this.isEmailOrPhone) {
|
|
// 发送邮箱验证码
|
|
this.sendEmailCode()
|
|
} else {
|
|
// 发送手机验证码
|
|
this.sendPhoneCode()
|
|
}
|
|
}
|
|
|
|
},
|
|
// 登录
|
|
doLogin() {
|
|
let isPass = true;
|
|
const form = { ...this.formData };
|
|
console.log(form);
|
|
// 邮件登录验证
|
|
if (this.isEmailOrPhone) {
|
|
if (!form.email) {
|
|
isPass = false
|
|
this.errorText = "请输入邮箱"
|
|
} else if (
|
|
form.email.search(
|
|
/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
|
|
) === -1
|
|
) {
|
|
isPass = false
|
|
this.errorText = "邮箱格式不正确"
|
|
}
|
|
|
|
// 邮件 密码登录 验证
|
|
if (this.isPassOrCode) { // 密码登录
|
|
if (!form.password) {
|
|
isPass = false
|
|
this.errorText = "请输入密码"
|
|
}
|
|
} else {
|
|
// 邮件 验证码登录 验证
|
|
if (!form.emailCode) {
|
|
isPass = false
|
|
this.errorText = "请输入邮箱验证码"
|
|
} else {
|
|
if (form.emailCode.length !== 6) {
|
|
isPass = false
|
|
this.errorText = "邮箱验证码应为6位"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 手机号码登录 验证
|
|
if (!this.isEmailOrPhone) {
|
|
if (!form.phone) {
|
|
isPass = false
|
|
this.errorText = "请输入手机号码"
|
|
} else {
|
|
// 设置正则表达式的手机号码格式 规则 ^起点 $终点 1第一位数是必为1 [3-9]第二位数可取3-9的数字 \d{9} 匹配9位数字
|
|
const reg = /^1[3-9]\d{9}$/;
|
|
if (!reg.test(form.phone)) {
|
|
isPass = false
|
|
this.errorText = "请输入正确的手机号"
|
|
}
|
|
}
|
|
|
|
// 手机号 密码登录 验证
|
|
if (this.isPassOrCode) { // 密码登录
|
|
if (!form.password) {
|
|
isPass = false
|
|
this.errorText = "请输入密码"
|
|
}
|
|
} else {
|
|
// 手机 验证码登录 验证
|
|
if (!form.phoneCode) {
|
|
isPass = false
|
|
this.errorText = "请输入手机验证码"
|
|
} else {
|
|
if (form.phoneCode.length !== 6) {
|
|
isPass = false
|
|
this.errorText = "手机验证码应为6位"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 勾选协议
|
|
if (!this.checked) {
|
|
isPass = false
|
|
this.errorText = "请勾选服务协议书！"
|
|
}
|
|
|
|
if (isPass && this.isCaptcha) {
|
|
this.isShowCaptcha = true
|
|
this.$refs.captcha.doGetCaptcha()
|
|
return
|
|
}
|
|
|
|
// 验证通过
|
|
if (isPass) {
|
|
this.errorText = ""
|
|
let code = "";
|
|
if (!this.isPassOrCode) {
|
|
if (this.isEmailOrPhone) {
|
|
code = form.emailCode
|
|
} else {
|
|
code = form.phoneCode
|
|
}
|
|
}
|
|
const params = {
|
|
type: this.isPassOrCode ? "password" : "code",
|
|
account: this.isEmailOrPhone ? form.email : form.phone,
|
|
phone_code: form.countryCode.toString(),
|
|
code,
|
|
password: this.isPassOrCode ? this.encrypt(form.password) : "",
|
|
remember_password: form.isRemember ? "1" : "0",
|
|
captcha: this.captcha,
|
|
token: this.token
|
|
}
|
|
|
|
//调用登录接口
|
|
logIn(params).then(res => {
|
|
if (res.data.status === 200) {
|
|
this.$message.success(res.data.msg);
|
|
// 存入 jwt
|
|
localStorage.setItem("jwt", res.data.data.jwt);
|
|
if (form.isRemember) {// 记住密码
|
|
console.log(form);
|
|
if (this.isEmailOrPhone) {
|
|
console.log("email");
|
|
setCookie("email", form.email, 30)
|
|
} else {
|
|
console.log("phone");
|
|
setCookie("phone", form.phone, 30)
|
|
}
|
|
setCookie("password", form.password, 30)
|
|
setCookie("isRemember", form.isRemember ? "1" : "0")
|
|
setCookie("checked", this.checked ? "1" : "0")
|
|
|
|
// 保存登录方式
|
|
setCookie("isEmailOrPhone", this.isEmailOrPhone ? "1" : "0")
|
|
setCookie("isPassOrCode", this.isPassOrCode ? "1" : "0")
|
|
|
|
} else {
|
|
// 未勾选记住密码
|
|
delCookie("email")
|
|
delCookie("phone")
|
|
delCookie("password")
|
|
delCookie("isRemember")
|
|
delCookie("checked")
|
|
}
|
|
|
|
location.reload();
|
|
}
|
|
}).catch(err => {
|
|
if (err.data.msg === "请输入图形验证码" || err.data.msg === "图形验证码错误") {
|
|
this.isShowCaptcha = true
|
|
this.$refs.captcha.doGetCaptcha()
|
|
} else {
|
|
this.errorText = err.data.msg
|
|
// this.$message.error(err.data.msg);
|
|
}
|
|
|
|
})
|
|
}
|
|
},
|
|
// 获取国家列表
|
|
getCountryList() {
|
|
getCountry({}).then(res => {
|
|
console.log(res);
|
|
if (res.data.status === 200) {
|
|
this.countryList = res.data.data.list
|
|
}
|
|
})
|
|
},
|
|
// 加密方法
|
|
encrypt(str) {
|
|
const key = CryptoJS.enc.Utf8.parse("idcsmart.finance");
|
|
const iv = CryptoJS.enc.Utf8.parse("9311019310287172");
|
|
var encrypted = CryptoJS.AES.encrypt(str, key, {
|
|
mode: CryptoJS.mode.CBC,
|
|
padding: CryptoJS.pad.Pkcs7,
|
|
iv: iv,
|
|
}).toString();
|
|
return encrypted;
|
|
},
|
|
// 发送邮箱验证码
|
|
sendEmailCode() {
|
|
let isPass = true
|
|
const form = this.formData
|
|
if (!form.email) {
|
|
isPass = false
|
|
this.errorText = "请输入邮箱"
|
|
} else if (
|
|
form.email.search(
|
|
/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
|
|
) === -1
|
|
) {
|
|
isPass = false
|
|
this.errorText = "邮箱格式不正确"
|
|
}
|
|
if (isPass) {
|
|
this.errorText = ""
|
|
const params = {
|
|
action: "login",
|
|
email: form.email,
|
|
token: this.token,
|
|
captcha: this.captcha
|
|
}
|
|
emailCode(params).then(res => {
|
|
if (res.data.status === 200) {
|
|
// 执行倒计时
|
|
this.$refs.emailCodebtn.countDown()
|
|
}
|
|
}).catch(err => {
|
|
if (err.data.msg === "请输入图形验证码" || err.data.msg === "图形验证码错误") {
|
|
this.isShowCaptcha = true
|
|
this.$refs.captcha.doGetCaptcha()
|
|
} else {
|
|
this.errorText = err.data.msg
|
|
// this.$message.error(err.data.msg);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 发送手机短信
|
|
sendPhoneCode() {
|
|
let isPass = true
|
|
const form = this.formData
|
|
if (!form.phone) {
|
|
isPass = false
|
|
this.errorText = "请输入手机号码"
|
|
} else {
|
|
// 设置正则表达式的手机号码格式 规则 ^起点 $终点 1第一位数是必为1 [3-9]第二位数可取3-9的数字 \d{9} 匹配9位数字
|
|
const reg = /^1[3-9]\d{9}$/;
|
|
if (!reg.test(form.phone)) {
|
|
isPass = false
|
|
this.errorText = "请输入正确的手机号"
|
|
}
|
|
}
|
|
|
|
if (isPass) {
|
|
this.errorText = ""
|
|
const params = {
|
|
action: "login",
|
|
phone_code: form.countryCode,
|
|
phone: form.phone,
|
|
token: this.token,
|
|
captcha: this.captcha
|
|
}
|
|
phoneCode(params).then(res => {
|
|
if (res.data.status === 200) {
|
|
// 执行倒计时
|
|
this.$refs.phoneCodebtn.countDown()
|
|
}
|
|
}).catch(err => {
|
|
if (err.data.msg == "请输入图形验证码" || err.data.msg == "图形验证码错误") {
|
|
this.isShowCaptcha = true
|
|
this.$refs.captcha.doGetCaptcha()
|
|
} else {
|
|
this.errorText = err.data.msg
|
|
// this.$message.error(err.data.msg);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
toService() {
|
|
const url = this.commonData.terms_service_url
|
|
window.open(url);
|
|
},
|
|
toPrivacy() {
|
|
const url = this.commonData.terms_privacy_url
|
|
window.open(url);
|
|
},
|
|
// 验证码 关闭
|
|
captchaCancel() {
|
|
this.isShowCaptcha = false
|
|
}
|
|
},
|
|
}
|