barter-app/本时生活H5/pages/draw/register.vue

<template>
	<view class="content">
        <image class="drawTitle" src="@/static/img/draw-title.png" mode="widthFix"></image>
        <view class="campus-cont">
            <form @submit="submitRegister">
        		<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>
        		<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="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_confirmation" placeholder-style="color:#c9c9c9;"></input>
                </view>
        		<button class="campus-form-btn" form-type="submit">立即注册</button>
            </form>
        	<view class="login-box">
        		<navigator class="login-box-flex" hover-class="none" url="signin">已有账号，立即登录</navigator>
        	</view>
        </view>
	</view>
</template>

<script>
    import { register, 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
                    
                var _this    = this
                if  (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=>{
						uni.showToast({
						    title   : err.message,
							icon	:'none',
						    duration: 2000
						})
					})
                }
            },
            
            // 获取后输入code
            getCodeValue (e) {
                this.code = e.detail.value
            },
            
            // 立即注册
            submitRegister(e){
				let formValue = e.detail.value,
                    code     = this.code || ''
				register({
					mobile					: formValue.mobile,
					password				: formValue.password,
					password_confirmation	: formValue.password_confirmation,
                    code                    : code
				}).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">
	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 {
	        line-height: 90rpx;
	        padding: 0 10rpx;
	        box-sizing: border-box;
	        color: #FFFFFF;
	        font-size: 32rpx;
            text-align: center;
	    }
	}
    
    .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>