<!--
|
* @Author: 小明丶
|
* @Date: 2020-11-09 09:08:28
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-23 17:36:02
|
* @Description:
|
-->
|
<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-15 10:20:56
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-07-09 16:12:26
|
* @Description: 登录页面
|
-->
|
<template>
|
<div class="login-page">
|
|
<form class="pagebody" @submit.prevent="loginBut">
|
<div class="login-input">
|
<div class="height-44">登录</div>
|
|
<div class="logo_img">
|
<img :src="loginImg" alt="">
|
</div>
|
|
<van-field v-model="userNo" type="tel" clearable maxlength='11'
|
placeholder="请输入手机号码" >
|
<template #left-icon>
|
<van-icon name="phone-o" :color="$store.state.backColor" />
|
</template>
|
</van-field>
|
<van-field v-model="password" clearable maxlength='16' :type="pwdType"
|
placeholder="请输入8-16位数字字母组合密码"
|
>
|
<template #left-icon>
|
<van-icon name="contact" :color="$store.state.backColor" />
|
</template>
|
<template #right-icon>
|
<van-icon :name="pwdType== 'text' ? 'closed-eye':'eye-o' " :color="$store.state.backColor" @click="showPassword"/>
|
</template>
|
</van-field>
|
|
<van-button :color="$store.state.backColor" class="log-btn" native-type="submit">登录</van-button>
|
|
</div>
|
<div class="input-other flex-between-g">
|
<span class="forget-pwd" @click="$router.push('/user/forgetpassword')">忘记密码？</span>
|
<span class="register-u" @click="$router.push('/user/register-home')">注册</span>
|
</div>
|
</form>
|
<div style="font-size: 12px; color: #666;text-align: center;width: 100%;margin-top: 150px;">
|
客服电话：028-86043722
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapActions,mapState
|
} from 'vuex';
|
import prodConfig from '@/utils/config'
|
export default {
|
data() {
|
return {
|
//数据
|
// 18108048791 1234qwer
|
userNo: '',
|
password: '',
|
//点击显示密码为明文,眼睛的样式也是根据这个来判断的
|
pwdType: 'password',
|
test: false,
|
loginImg: 'static/img/logo.png',
|
|
};
|
},
|
|
methods: {
|
...mapActions(['login','loginByToken','setColor']),
|
//是否显示明文密码
|
showPassword() {
|
if (this.pwdType === 'password') {
|
this.pwdType = 'text';
|
} else {
|
this.pwdType = 'password';
|
}
|
},
|
//登录验证
|
loginBut() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.userNo)) {
|
v.toast('请输入手机号');
|
return;
|
}
|
if (!v.checkPhone(this.userNo)) {
|
v.toast('请输入正确的手机号');
|
return;
|
}
|
if (v.checkValEmpty(this.password)) {
|
v.toast('请输入密码');
|
return;
|
}
|
if (!v.checkPassword(this.password)) {
|
v.toast('请输入8-16位数字字母组合密码');
|
return;
|
}
|
this.login({
|
vm: this,
|
userNo: this.userNo,
|
password: this.password,
|
sib_mer_sysPlat: localStorage.sib_mer_sysPlat
|
})
|
},
|
},
|
created() {
|
console.log(this.$route.query.platNo)
|
sessionStorage.clear();
|
if (this.$route.query.sysPlat !== undefined) {
|
localStorage.sib_mer_sysPlat = this.$route.query.sysPlat // 1 微信 2支付宝
|
}
|
prodConfig.setClientInfo();
|
if (!localStorage.getItem('deviceInfo')) {
|
//H5环境
|
// this.loginImg = 'static/img/logo.png';
|
} else {
|
//APP环境,拉渠道json
|
prodConfig.fetchProductConfig().then(
|
res => {
|
//让该渠道和json里面的渠道列表做匹配，拿到登陆页面的Logo
|
let childChan = JSON.parse(localStorage.getItem('deviceInfo')).childChan;
|
let chanList = res.childChanList;
|
let chanKeys = Object.keys(chanList);
|
if (chanKeys.includes(childChan)) {
|
this.loginImg = chanList[childChan].icon;
|
} else {
|
//如果没有找到该渠道，则显示默认图片
|
this.loginImg = 'https://sie.jycash.cn/scene/img/zlwjr.png';
|
}
|
}
|
)
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
#app .vux-header::after {
|
display: none;
|
}
|
|
.login-page {
|
background-color: @c-fff;
|
min-height: 662px;
|
|
.log-btn {
|
border-radius: 22px;
|
}
|
|
.logo_img {
|
width: 100px;
|
height: 100px;
|
margin: 0 auto;
|
padding: 48px 0;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.pagebody {
|
padding: 0 24px;
|
|
|
.height-44 {
|
.lh(44px);
|
.flex(center, center);
|
font-size: @font-20;
|
color: @c-333;
|
}
|
|
|
.weui-cell {
|
padding: 0;
|
margin-top: 12px;
|
}
|
|
.weui-select {
|
padding: 0;
|
}
|
|
.vux-cell-value {
|
width: 100%;
|
}
|
|
.weui-cells:before {
|
display: none;
|
}
|
|
.weui-cell:before {
|
display: none;
|
}
|
|
.weui-cells:after {
|
display: none;
|
}
|
|
.f-button {
|
width: 100%;
|
}
|
}
|
|
.login-icon {
|
font-size: 20px;
|
padding-right: 12px;
|
}
|
|
.icon-pd {
|
padding-left: 1rem;
|
}
|
|
.input-other {
|
margin-top: 20px;
|
|
.register {
|
float: right;
|
}
|
}
|
}
|
</style>
|
