ysdH5/pages/draw/password.vue

<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="inputs-code">
                    <view class="campus-inputs">
                        <image class="campus-form-icon" src="/static/img/draw_login_04.png" mode="aspectFill"></image>
                    	<input class="campus-form-input" type="number" placeholder="请输入验证码" @input="getCodeValue" maxlength="4" placeholder-style="color:#c9c9c9;"></input>
                    </view>
                    <button class="campus-form-code" @tap="getCode" :disabled="disabled" hover-class="none">{{ codename }}</button>
                </view>
        		<button class="campus-form-btn" form-type="submit">设置新密码</button>
            </form>
        </view>
    </view>
</template>

<script>
    import { send, auth } from '@/apis/interfaces/auth'
    export default {
        data() {
            return {
                codename     : '获取验证码',
                mobileNo     : '',   // 手机号
                code         : '',   // 验证码
                disabled     : false,
            }
        },
        
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-用户抽奖活动
            getApp().globalData.envType = 'drawEnv'
        },
		
        methods: {
			// mobileNo
			getNameValue(e) {
			    this.mobileNo = e.detail.value
			},
			
			// 获取code
			getCode(){
			    let mobileNo = this.mobileNo,
			        myreg    = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9]||16[0-9])\d{8}$$/
			        
			    var _this    = this
			    if  (mobileNo == "") {
			        uni.showToast({
			            title     : '手机号不能为空',
			            icon      : 'none',
			            duration  : 1000
			        })
			        return false;
			    }else if (!myreg.test(mobileNo)) {
			        uni.showToast({
			            title     : '请输入正确的手机号',
			            icon      : 'none',
			            duration  : 1000
			        })
			        return false;
			    }else{
			        send({mobile: mobileNo, channel: 'LOGIN'}).then(res=>{
			            uni.showToast({
			                title   : '发送成功',
			                icon    : 'success',
			                duration: 2000
			            })
			            var num = 61;
			            var timer = setInterval(function () {
			                num--;
			                if (num <= 0) {
			                    clearInterval(timer);
			                    _this.codename  = '重新发送'
			                    _this.disabled  = false
			        
			                } else {
			                    _this.codename  = num + "s后重新获取"
			                    _this.disabled  = true
			                }
			            }, 1000)
			        }).catch(err=>{})
			    }
			},
			
			// 获取后输入code
			getCodeValue (e) {
			    this.code = e.detail.value
			},
			
			// 立即登录
			forgetlogin(e){
			    let mobileNo = e.detail.value.mobile || '',
			        code     = this.code || ''
					
				auth({
					mobile: mobileNo,
					code: code,
					type: 'reset_password'
				}).then(res => {
					this.$store.commit('setToken', res.token)
					uni.redirectTo({
						url: '/pages/draw/setPassword'
					})
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
        }
    }
</script>

<style lang="scss">
	page {
	    background-color: #f67b5a;
	}
	
	.drawTitle {
	    width: 100%;
	}
	
	.campus-cont {
	    padding: 10rpx 50rpx 60rpx;
	    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: 20rpx;
	        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;
	        }
	    }
	}
    
    .inputs-code {
        display: flex;
        .campus-inputs {
            flex: 1;
        }
        .campus-form-code {
            background-color: #ffe455;
            color: #735b1f;
            font-size: 32rpx;
            height: 100rpx;
            line-height: 100rpx;
            margin-left: 20rpx;
        }
    }
</style>