feat: 会员中心 hgcloud 主题初始化 + drone 部署步骤
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
This commit is contained in:
yiqiu
452
clientarea/hgcloud/components/loginDialog/loginDialog.js
Normal file
452
clientarea/hgcloud/components/loginDialog/loginDialog.js
Normal file
@@ -0,0 +1,452 @@
|
||||
// 验证码通过
|
||||
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
|
||||
}
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user