<template>
    <view class="content">
        <image class="drawTitle" src="@/static/img/draw-title.png" mode="widthFix"></image>
        <view class="campus-cont">
            <form @submit="forgetlogin">
				<view class="campus-inputs">
				    <image class="campus-form-icon" src="/static/img/draw_login_02.png" mode="aspectFill"></image>
				    <input class="campus-form-input" maxlength="11" type="number" placeholder="请输入手机号" @input="getNameValue" name="mobile" placeholder-style="color:#c9c9c9;"></input>
				</view>
				<view class="campus-inputs">
				    <image class="campus-form-icon" src="/static/img/draw_login_03.png" mode="aspectFill"></image>
				    <input class="campus-form-input" maxlength="6" type="password" placeholder="请输入登录密码" name="password" placeholder-style="color:#c9c9c9;"></input>
				</view>
				<view class="resPassword">
				</view>
				<button class="campus-form-btn" form-type="submit">立即登录</button>
            </form>
			<view class="login-box">
				<navigator class="login-box-flex" hover-class="none" url="register">快速注册</navigator>
                <navigator hover-class="none" url="password">忘记密码？</navigator>
			</view>
        </view>
    </view>
</template>

<script>
    import { passlogin } from '@/apis/interfaces/auth'
    export default {
        data() {
            return {
                mobileNo     : '',   // 手机号
                disabled     : false,
            }
        },
        
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-用户抽奖活动
            getApp().globalData.envType = 'drawEnv'
        },
        
        methods: {
            // mobileNo
            getNameValue(e) {
                this.mobileNo = e.detail.value
            },
            
            // 立即登录
            forgetlogin(e){
                let mobileNo = e.detail.value.mobile || '',
					password = e.detail.value.password || ''
				passlogin({
					mobile	: mobileNo,
					password: password
				}).then(res => {
					this.$store.commit('setToken', res.token)
					uni.reLaunch({
					    url: '/pages/draw/index'
					})
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
            }
        }
    }
</script>

<style lang="scss" scoped>
	page {
        background-color: #f67b5a;
	}
    
    .drawTitle {
        width: 100%;
    }
    
    .campus-cont {
        padding: 10rpx 50rpx 20rpx;
        box-sizing: border-box;
        .campus-inputs {
            background-color: #FFFFFF;
            border-radius: 10rpx;
            margin-bottom: 30rpx;
            height: 100rpx;
            line-height: 100rpx;
            display: flex;
            padding: 0 30rpx;
            box-sizing: border-box;
            .campus-form-icon {
                width: 50rpx;
                height: 50rpx;
                margin: 25rpx 20rpx 0 0;
            }
            .campus-form-input {
                width: calc(100% - 70rpx);
                height: 100%;
                line-height: 100rpx;
                font-size: 32rpx;
            }
        }
        .campus-form-btn {
            background-color: #ffe455;
            border-radius: 10rpx;
            line-height: 100rpx;
            font-size: 36rpx;
            color: #6a4902;
            margin-top: 40rpx;
            box-shadow: 4rpx 4rpx 6rpx #c62024;
        }
        .login-box {
            display: flex;
            line-height: 90rpx;
            padding: 0 10rpx;
            box-sizing: border-box;
            color: #FFFFFF;
            font-size: 32rpx;
            .login-box-flex {
                flex: 1;
            }
        }
    }
</style>
