刮刮前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

264 lines
6.7 KiB

<!-- 账号密码登录页 -->
<template>
<view class="" style="position: relative;">
<view class="nav_area"></view>
<view class="logo_area">
<image src="../../static/home/logo.png" mode=""></image>
<!-- <view class="close" @click="backPrev()"></view> -->
<view class="selece_box" v-if="0">
<uni-data-select :clear="false"
v-model="value"
:localdata="range"
@change="changeType"
></uni-data-select>
</view>
</view>
<text class="title-box">欢迎登陆顶呱刮</text>
<view class="content-A">
<uni-forms>
<uni-forms-item name="username">
<uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
:inputBorder="false" v-model="username" placeholder="请输入手机号/账号" />
</uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
type="password" :inputBorder="false" v-model="password" placeholder="请输入密码" />
</uni-forms-item>
</uni-forms>
<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
<!-- 带选择框的隐私政策协议组件 -->
<!-- <uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements> -->
<button class="uni-btn login-btn" type="primary" @click="pwdLogin">登录</button>
<!-- 忘记密码 -->
<view class="link-box" v-if="this.userType=='user'">
<view v-if="!config.isAdmin">
<!-- <text class="forget" @click="toRetrievePwd">忘记密码</text> -->
<!-- <text class="link">找回密码</text> -->
</view>
<text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '新注册'}}</text>
<!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
</view>
</view>
<!-- <view v-if="this.userType=='user'"
style="width: 100vw;text-align: center;color: #dcdcdc;font-size: 14px;
line-height: 28px;position: fixed;top: calc(100vh - 100px);left:0px;">
温馨提示:<br/>
忘记密码,请联系平台
</view> -->
<view v-if="this.userType=='user'"
style="width: 100vw;text-align: center;color: #dcdcdc;font-size: 14px; line-height: 28px;position: absolute;bottom: -34vh;">
温馨提示<br/>
忘记密码请联系平台
</view>
</view>
</template>
<script>
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
import API from '@/common/js/api.js'
import updateTabBar from '@/common/js/updateTabBar.js'
export default {
mixins: [mixin],
data() {
return {
"password": "",
"username": uni.getStorageSync('accounts')[0] || '',
"captcha": "",
"needCaptcha": false,
"focusUsername": false,
"focusPassword": false,
"logo": "/static/logo.png",
userType: 'user',//user|agent|background
value: 0,
range: [
{ value: 0, text: "用户登录" },
{ value: 1, text: "代理登录" },
{ value: 2, text: "后台登录" },
],
}
},
onLoad(e) {
if(e.phone){
this.username = e.phone;
}
// 打开应用时查一下是否登录过,登录过就跳转,
// 跳转到相应的页面请求时,会查询token是否过期,过期会清除并且跳转登录页
if(uni.getStorageSync('user_token')){
let newUrl = '';
switch (uni.getStorageSync('userType')){
case 'user':
newUrl = '/pages/home/home';
break;
case 'agent':
newUrl = '/pages/list/team';
break;
case 'background':
newUrl = '/pages/home/home';
break;
}
uni.switchTab({
url:newUrl
})
}
},
onShow() {
// #ifdef H5
document.onkeydown = event => {
var e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
this.pwdLogin()
}
};
// #endif
},
methods: {
/**
* 密码登录
*/
pwdLogin() {
if (!this.username.length) {
this.focusUsername = true
return uni.showToast({
title: '请输入手机号/账号',
icon: 'none',
duration: 3000
});
}
if (!this.password.length) {
this.focusPassword = true
return uni.showToast({
title: '请输入密码',
icon: 'none',
duration: 3000
});
}
let url = '/passport/mixedLogin', newUrl = '';
let data = {account_number: this.username, password: this.password, captcha: ''};
API.request(url, data, res=>{
uni.showToast({
title: res.msg
})
let accounts = uni.getStorageSync('accounts') || [];
accounts.push(this.username);
accounts = Array.from(new Set(accounts));
uni.setStorageSync('accounts', accounts);
uni.setStorageSync('user_token', res.data.token);
switch (res.data.type){
case 3:
newUrl = '/pages/home/home';
this.userType = 'user';
break;
case 2:
newUrl = '/pages/home/home';
// newUrl = '/pages/list/team';
this.userType = 'agent';
break;
case 1:
newUrl = '/pages/home/home';
this.userType = 'background';
break;
}
uni.setStorageSync('userType', this.userType);
setTimeout(()=>{
uni.switchTab({
url:newUrl
})
}, 1500)
}, fail=>{}, false)
},
/* 前往注册 */
toRegister() {
uni.navigateTo({
url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
'/uni_modules/uni-id-pages/pages/register/register',
fail(e) {
console.error(e);
}
})
},
}
}
</script>
<style lang="scss" scoped>
.nav_area{
background-color: #fff;
width: 750rpx;
/* #ifdef H5 */
height: 88rpx;
/* #endif */
/* #ifdef APP-PLUS */
height: 108rpx;
/* #endif */
padding-top: var(--status-bar-height);
}
.logo_area{
width: 270px;
height: 50px;
margin: 4px auto;
position: relative;
image{
width: 50px;
height: 47px;
}
}
.title-box{
font-size: 26px;
color: #444;
margin: 0px auto 20px;
display: flex;
width: 270px;
padding: 18px 0;
font-weight: 800;
flex-direction: column;
}
.content-A{
width: 270px;
margin: 0px auto;
}
/deep/ .uni-easyinput__content{
background-color: #fff !important;
border-bottom: 1px solid #ebebeb;
font-size: 16px !important;
}
.uni-easyinput__placeholder-class{
font-size: 16px;
color: #cecece;
}
/deep/ .uni-easyinput__content-input{
padding-left: 0px !important;
// flex: 0.45;
}
/deep/ .content-clear-icon{
// flex: 1;
}
.login-btn{
border-radius: 10px;
}
.forget {
font-size: 14px;
color: #999;
}
.link-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
}
.link {
font-size: 14px;
color: #444;
}
</style>