ylrz_scrm_uniapp/pages/auth/passwordLogin.vue

<template>
	<view>
		<view style="height: 90rpx;"></view>
		<view style="padding-left: 30rpx;">
			<u-icon name="close" color="#666" size="24" @click="backto()"
			style="width: 40rpx;height: 40rpx;"></u-icon>
		</view>
		<view style="height: 260rpx;"></view>
		<view class="detext">登录即可体验完整功能</view>
		<veiw class="log">
			<view class="form-items">
				<u-icon name="account" color="#666" size="24" ></u-icon>
				<input
				      type="number" 
					  style="flex: 1;margin-left: 16rpx;"
				      v-model="phone" 
				      placeholder="请输入手机"
				      maxlength="11"/>
			</view>
			<view class="form-items">
				<u-icon name="lock" color="#666" size="24" ></u-icon>
				<input
				      type="password" 
					  style="flex: 1;margin-left: 16rpx;"
				      v-model="password" 
				      placeholder="请输入密码"
				      maxlength="11"/>
			</view>
			<view class="submitlog" @click="submit()">登录</view>
			<view class="forget">
				<view @click="navTo('/pages/auth/register')">注册账号</view>
				<view @click="navTo('/pages/auth/forgetPassword')">忘记密码</view>
			</view>
		</veiw>
		<view class="tips">
			 <checkbox  :checked="isAgreement" @click="handleAgreement()" color='#fff' 
			 activeBackgroundColor='#018C39 ' borderColor='#EDEEEF' activeBorderColor='#EDEEEF'/>
			 <view  @click="handleAgreement()">您同意并接受</view>
			<view class="btn"  @click="openH5('/h5/userAgreement')">《用户协议》</view>
			<view class="btn" @click="openH5('/h5/privacyPolicy')">《隐私保护》</view>
		</view>
		<!-- 第三方登录 -->
		<view @click="handleWechatLogin()"  class="wechat-btn">
			<image src="/static/images/wechat.png" style="width: 80rpx; height: 80rpx;"></image>
		</view>
	</view>
</template>

<script>
	import {login} from '@/api/user.js'
	export default {
		data() {
			return {
				phone:'',
				password:'',
				isAgreement:false,
				loginType:1
			}
		},
		methods: {
			// 校验手机号
			validatePhone() {
			  return /^1[3-9]\d{9}$/.test(this.phone);
			},
			// 跳转页面
			navTo(url){
				uni.navigateTo({
					url: url
				})
			}, 
			backto(){
				uni.navigateBack({
					url:-1
				})
			},
			handleAgreement(){
				this.isAgreement=!this.isAgreement;
			},
			openH5(url){
				var requestPath = uni.getStorageSync('requestPath');
				uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5'
				})
			},
			handleWechatLogin(){
				//微信登录
				this.$showLoginPage("weixin");
			},
			submit(){
				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				  }
				if (!this.validatePhone()) {
					uni.showToast({ title: '手机号格式错误', icon: 'none' });
					return;
				  }
				  if (!this.password) {
				  	uni.showToast({ title: '请输入密码', icon: 'none' });
				  	return;
				    }
				if(!this.isAgreement){
					uni.showToast({
						icon:'none',
						title: "请先同意协议后再登录",
					});
					return false;
				}
				const data={
					phone:this.phone,
					password:this.password,
					loginType:this.loginType
				}
				login(data).then(res=>{
					if(res.code==200){
						uni.switchTab({
							url:'/pages/home/index'
						})
						uni.showToast({
							icon:'none',
							title: '登录成功',
						});
						uni.setStorageSync('userInfo',res.user)
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detext{
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40rpx;
}
.log{
	background: #fff ;
	width: calc(100% - 20rpx);
	margin: 10rpx ;
	padding: 20rpx 0;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	.form-items{
		background: #fff ;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 28rpx 0;
		margin: 0 20rpx;
		border-bottom: #eee solid 2rpx;
	}
}
.submitlog{
	background: linear-gradient(135deg, #38e663  0%, #018C39 100%);
	border-radius: 80rpx;
	color: #fff;
	margin: 0 auto;
	width: 80%;
	padding: 20rpx 0;
	text-align: center;
	margin-top: 40rpx;
}
.forget{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	font-size: 24rpx;
	color: #38e663  ;
	margin: 20rpx 0;
}
.tips{
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #000;
	.btn{
		color: #018C39;
	}
}
/deep/ .uni-checkbox-input {
	border-radius: 50% !important;
}
.wechat-btn {
	margin-top: 100rpx !important;
	margin: 0 auto;
	width: fit-content;
	padding: 16rpx;
	display: flex;
	align-items: center;
	border-radius: 50%;
	border: 2rpx solid #28c445;
    }
</style>