zhibo/pages/auth/findpass.vue

<template>
	<view>
		 <view class="content">
			 <view class="pageTop  x-c">
			    <view class="loginBox">
					 <view class="login-item">
						 <view class="input-account">
							 <input v-model="userName" placeholder="手机号" type="text" />
						 </view>
						 <view class="line"></view>
					 </view> 
					 
					 <view class="login-item">
						 <view class="input-pwd">
							 <input v-model="password"  placeholder="密码(6-15个字符)" type="password" />
						 </view>
						  <view class="line"></view>
					 </view> 
					 <view class="login-item">
						 <view class="input-yzcode x-bc">
							 <input v-model="yzcode"  placeholder="验证码" type="number" />
							 <view style="color:#666">获取验证码</view>
						 </view>
						  <view class="line"></view>
					 </view> 
					 <view class="btns">
						 <view class="login-btn" @click="login">设置新密码</view>
					 </view>
			    </view>
			 </view>
		 </view>
	</view>
</template>

<script>
	
// import { login,getUserInfo } from '@/api/login.js'
import { loginByApp } from '@/api/login.js'

export default {
	data() {
		return {
			userName:"",
			password:"",
			password1:"",
		    registrationID:"",
			yzcode:""
		}
	},
	onLoad(option) {
	    let that=this;
	    uni.$on('getRegistrationID', function(data) {
	    	that.registrationID=data;
	    });   
		this.$getRegistrationID();
	},
	onShow() {
		
    },
	onUnload() {
		uni.$off('getRegistrationID');
    },
    mounted() {
        
    },
    methods: {
       login(){
			if (this.$isEmpty(this.userName)) {
				uni.showToast({
					title: "请输入帐号",
					icon: 'none',
				});
				return
			}
			if (this.$isEmpty(this.password)) {
				uni.showToast({
					title: "请输入密码",
					icon: 'none',
				});
				return
			}
			var data = {
				userName:this.userName,
				password: this.password,
				jpushId:this.registrationID || uni.getStorageSync("registrationID")
			};
			var that=this;
			uni.showLoading({
				title:"处理中..."
			});
			login(data).then(res => {
					uni.hideLoading()
					if(res.code==200){
						
						// #ifdef APP-PLUS
						      //const  jyJPush = uni.requireNativePlugin('JY-JPush');
							  
						 // #endif 
						
						uni.setStorageSync('AppToken',res.data.token);
						this.$Router.pushTab({name: 'home'});
					}
					else{
						uni.showToast({title: res.msg,icon: 'none'});
					}
				},
				rej => {}
			);
	   
	   },
	   goToRegister(){
		   this.$navTo('./register');
	   },
	   goToFindPass(){
	   	   this.$navTo('./findPass');
	   },
	   getRegistrationID(){
		   // #ifdef APP-PLUS
		      
		    // #endif 
	   }
    },
}
</script>

<style  lang="scss">
	
 page{
 	background-color: #ffffff;
 }
 .content{
 	 display: flex;
 	 flex-direction: column;
 	 align-items: center;
 	 height: calc(100vh);
 	 width: 100%;
	 justify-content: space-between;
 }
 .pageTop{
	 display: flex;
	 flex-direction: column;
	 width: 100%;
 }
 
 .content .head{
 	text-align: center;
 	width: 100%;
	height: 522rpx;
	// background:url(/static/image/login/top_bg.png) no-repeat 0 center;
	background-size: cover;
    box-sizing: border-box;
 }
 
 .content .head image{
 	width: 150rpx;
	height: 150rpx;
 	border-radius: 10rpx;
 	box-shadow:0px 0px 20rpx rgba(0,0,0,0.2);
	
 }
.title{
 	color: #141414;
 	margin:50upx 0upx 30upx 0rpx;
 	font-size: 38rpx;
	font-weight: 500;
 }
 .desc{
 	color: #686866;
 	padding:0 0 30rpx 0rpx;
 	font-size: 28rpx;
 }
 
 .loginBox{
 	padding:10px 10px 30rpx;
	width: calc(100% - 20px) ;
	margin-top: 0rpx;
	background: #FDFDFD;
	border-radius: 7rpx;
	
 }
 

 
 .line{
	 height: 0.5rpx;
	 background-color: #efefef;
	 margin-top: 10rpx;
 }
 .input-account{
 	margin-top: 20rpx;
 	margin-bottom: 0rpx;
 	border-radius:40rpx;
 	border:solid 0rpx #efefef;
 	height: 80rpx;	
 	width: 100%;
 	// background:url(/static/account.png) no-repeat 0 center;
 	background-size: 30rpx 30rpx;
 	background-position: 30rpx;
 }
 
 .input-yzcode{
 	margin-top: 20rpx;
 	margin-bottom: 0rpx;
 	border-radius:40rpx;
 	border:solid 0rpx #efefef;
 	height: 80rpx;	
 	width: 100%;
 	// background:url(/static/image/login/cz_icon.png) no-repeat 0 center;
 	background-size: 30rpx 30rpx;
 	background-position: 30rpx;
 }
 
 .input-pwd{
 	margin-top: 40rpx;
 	margin-bottom: 20rpx;
 	border-radius:40rpx;
 	border:solid 0rpx #efefef;
 	height: 80rpx;	
 	width: 100%;
 	// background:url(/static/password.png) no-repeat 0 center;
 	background-size: 30rpx 30rpx;
 	background-position: 30rpx;
 }
 input{
 	margin-left: 80rpx;
 	height: 80rpx;
 	line-height: 80rpx
 }
 .footer{
 	color: #686866;
 	width: 100%;
	position: fixed;
 	text-align: center;
 	bottom: 60upx;
	font-size: 28rpx;
 }
 .btns{
 	margin: 60rpx 0rpx;
 }
 .login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80rpx;
	background: linear-gradient(to right, #FF5C03 0%, #FF5C03 100%);
	background: -moz-linear-gradient(to right, #FF5C03 0%, #FF5C03 100%);
	box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
 }
 
 .reg-box {
	 padding-bottom:20rpx;
	 margin:0 10px;
	 .reg-btn{
	 	 font-size:16px ;
	 	 color: #FF5C03;
	 }
 }
 
 .pageBottom{
	height: 260rpx;
	width: 75%;
	display: flex;
	flex-direction: column;
 }  
 
 .tips{
 	color: #999;	 
	font-size: 36rpx;
 }  
 .menu{
	 margin-top: 30rpx;
	 image{
	 	width: 78rpx;
	    height: 78rpx;
	 }
 }
  
 
</style>