new_app/pages/login/login.vue

<template>
	<view class="container">
		<view class="bg" >
			<image  src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
		</view>
		<view class="wrapper">
			<view class="input-content">
				<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">登录</view>
	
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input class="input" type="number" :value="data.mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
						@input="inputChange" />
				</view>
			
				<view class="cu-form-group">
					<text class="title">密码</text>
					<view class="input flex" style="padding-left: 0;">
						<input class="input" type="password" :value="data.password" placeholder="请输入密码" placeholder-class="input-empty"
							maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
						<text class="send-msg" @click="forget" style="flex-shrink: 0;">忘记密码</text>
					</view>
				</view>
				<button class="confirm-btn" @click="toLogin">登录</button>
				<view style="margin-top: 32px;text-align: center">
					<view>
						没有账号？
						<text style="color: #ff7581" @click="register()">立即注册</text>
					</view>
				</view>
			</view>
			<view class="footerView">
				<u-checkbox-group>
					<u-checkbox v-model="data.checked" label-size='24upx' shape="circle" @change="radioChange"></u-checkbox>
				</u-checkbox-group>
				<view>同意</view>
				<!-- 协议地址 -->
				<navigator url="/pages/me/privacy" open-type="navigate">《隐私政策》</navigator>
				和
				<navigator url="/pages/me/agreement" open-type="navigate">《用户服务协议》</navigator>
			</view>
			
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad} from '@dcloudio/uni-app'
	import { login } from '@/api/login/login.js';
	let data = reactive({
		mobile: '',
		password: '',
		checked: false
	})
	
	onLoad(() => {
		
	})
	
	/**
	 * 注册
	 */
	function register () {
		uni.navigateTo({
			url: '/pages/login/register'
		});
	}
	
	/**
	 * 忘记密码
	 */
	function forget () {
		uni.navigateTo({
			url: '/pages/login/forgetPwd'
		});
	}
	
	/**
	 * 获取手机号/密码
	 */
	function inputChange (e) {
		const key = e.currentTarget.dataset.key;
		data[key] = e.detail.value;
	}
	
	/**
	 * 同意协议
	 */
	function radioChange (e) {
		data.checked = e
	}
	
	/**
	 * 登录
	 */
	async function toLogin () {
		if (!data.checked) {
			uni.showToast({
				title: '请阅读并同意《隐私政策》和《用户服务协议》',
				icon: 'none',
			})
			return;
		}
		
		const { mobile, password } = data;
		if (!mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
			})
		} else if (mobile.length != 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none',
			})
		} else if (!password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
			})
		} else {
			uni.showLoading({
				title: '正在登录中...',
			})
			let res = await login({
				password: password,
				phone: mobile
			})
			console.log(res)
			uni.setStorageSync('token', res.token)
			uni.setStorageSync('userId', res.user.userId)
			uni.setStorageSync('userName', res.user.userName)
			uni.setStorageSync('avatar', res.user.avatar ? res.user.avatar : '../../static/default/avatar.png')
			uni.setStorageSync('phone', res.user.phone)
			uni.setStorageSync('invitationCode', res.user.invitationCode)
			uni.setStorageSync('sex', res.user.sex)
			uni.setStorageSync('userId', res.user.userId)
			
			uni.setStorageSync('userInfo', res.user)
			//设置渠道码
			if (res.user.qdCode) {
				uni.setStorageSync('qdCode', res.user.qdCode)
			}
			uni.hideLoading();
			uni.showToast({
				title: '登录成功',
				icon: 'none'
			})
			uni.reLaunch({
				url:'/pages/index/index'
			})
			
		
		}
	}
	
</script>

<style lang="scss" scoped>
	page {
		background: #ffffff;
	}
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
		box-sizing: border-box;
	}
	.bg{
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		top: 0;
	}
	.wrapper{
		position: relative;
		padding-top: 48rpx;
		box-sizing: border-box;
	}
	.footerView {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 50rpx;
		
	}
	
	.send-msg {
		line-height: initial;
		font-weight: 400;
		font-size: 28rpx;
		color: #EC6F48;
		border: none;
		background-color: transparent;
	}
	.send-msg::after{
		border: none;
		background-color: transparent;
	}
	
	
	
	.wrapper {
		min-height: 100vh;
		position: relative;
		z-index: 90;
	}
	*{
		box-sizing: border-box;
	}
	.input-content {
		padding: 0 56rpx;
	}
	.cu-form-group{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 48rpx;
		background-color: transparent;
		padding: 0;
		
	}
	.cu-form-group .title{
		width: 100%;
		margin-bottom: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}	
	.cu-form-group .input{
		width: 100%!important;
		height: 84rpx;
		line-height: 84rpx;
		background-color: #fff;
		align-items: center;
		padding: 22rpx 32rpx 22rpx 24rpx;
	}
	.flex{
		display: flex;
	}
		
	
	.confirm-btn {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 16rpx;
		margin-top: 40rpx;
		background: #EC6F48;
		font-size: 32rpx;
		color: #FFFFFF;
	
		&:after {
			border: none;
		}
	}
</style>