[本时生活h5端]

pages/draw/password.vue

@@ -0,0 +1,190 @@
+<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>