barter-app/本时生活H5/pages/auth/password_login.vue

<template>
    <view>
        <image class="loginBack" src="/static/img/login_back.png" mode="aspectFill"></image>
        <view class="login">
            <view class="header">
                <view class="header-btn" @click="loginBack">
                    <uni-icons type="closeempty" size="28" color="#666"></uni-icons>
                </view>
            </view>
            <view class="title">
                <image class="title-logo" src="../../static/img/logo.png" mode="aspectFill"></image>
                <view class="title-name">欢迎使用，本时生活</view>
            </view>
            <view class="form">
                <view class="inputs">
                    <input type="number" v-model="mobile" @input="mobileValue" placeholder="输入手机号码" />
                </view>
                <view class="inputs">
                    <input type="number" v-model="password" @input="passwordValue" password placeholder="输入登录密码" />
                </view>
                <button
                    type="default"
                    class="button"
                    :disabled="mobile.length <= 0 || password.length <= 0"
                    @click="forgetlogin"
                >登录</button>
                <navigator class="forgetTips" url="/pages/auth/psssword_forget" hover-class="none">忘记密码？</navigator>
                <view class="login-wechat">
                    <navigator hover-class="none" url="/pages/auth/login" class="login-wechat-btn">
                        短信快捷登录
                    </navigator>
                    <navigator hover-class="none" url="/pages/auth/register" class="login-wechat-btn login-register">
                        账户注册
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import { passlogin } from '@/apis/interfaces/auth'
	export default {
		data() {
			return {
                mobile      : '',   // 手机号
                password    : '',   // 登录密码
                disabled    : false // 按钮状态
			};
		},
		onLoad(e){
		},
		onUnload() {},
		methods:{
            // mobileNo
            mobileValue(e) {
                this.mobile = e.detail.value
            },
            
            // passwordNo
            passwordValue(e) {
                this.password = e.detail.value
            },
            
            // forgetlogin
            forgetlogin(e){
                uni.showLoading({
                	title: '登录中...'
                })
                passlogin({
                    mobile: this.mobile,
                    password: this.password
                }).then(res=>{
                    // 存储登录token
                    this.$store.commit('setToken', res.token)
                    uni.hideLoading()
                    
                    // 若没有登录密码则跳转设置登录密码页面
                    if(res.has_password == false) {
                        uni.redirectTo({
                            url: '/pages/auth/password'
                        })
                        return
                    }
                    
                    // 设置过登录密码,则跳到首页
                    uni.switchTab({
                        url: '/pages/index/index'
                    })
                    
                }).catch(err=>{
                    uni.showToast({
                        title: err.message,
                        icon : 'none'
                    })
                })
            }
		}
	}
</script>
<style>
	page{
		background-color: white;
	}
</style>
<style lang="scss" scoped>
    .loginBack {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
    }
    
	.login{
        width: 100%;
        z-index: 2;
		padding: var(--status-bar-height) 20rpx * 4 0;
        box-sizing: border-box;
        position: fixed;
        top: 140rpx;
        left: 0;
		.header{
			padding: (20rpx * 2) 0 (20rpx * 5);
			.header-btn{
				display: none;
				height: 90rpx;
				width: 90rpx;
				line-height: 90rpx;
				text-align: center;
				margin-left: -30rpx;
			}
		}
		.title {
			margin-bottom: 20rpx * 5;
			font-size: 30rpx;
			font-weight: bold;
            text-align: center;
			color: #000;
            .title-logo {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 20rpx;
            }
		}
		// 表单
		.form{
			.inputs{
				margin-bottom: 20rpx * 2;
                box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .2);
                border-radius: 80rpx;
                padding: 0 30rpx;
                box-sizing: border-box;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				input {
					flex: 1;
					height: 90rpx;
					font-size: 30rpx;
				}
			}
			.button {
				margin-top: 20rpx * 4;
				background: #000000;
				color: white;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 80rpx;
				font-size: 30rpx;
				font-weight: bold;
				border: none;
                box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: .7);
                &[disabled]{
                	background: #c1c1c1;
                	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: .1);
                }
			}
		}
		// 微信快捷登录
        .forgetTips {
            text-align: right;
            margin-top: 10px;
        }
		// 微信快捷登录
		.login-wechat{
		    position: fixed;
		    width: 100%;
		    left: 0;
		    bottom: 0;
		    height: 140rpx;
		    display: flex;
		    padding: 0 100rpx;
		    box-sizing: border-box;
			.login-wechat-btn {
		        width: 50%;
				display: inline-block;
			}
		    .login-register {
		        text-align: right;
		    }
		}
	}
</style>