shortPlay-mini/pages/login/login.vue

<template>
	<view>
		<view class="img-a">
			<image src="../../static/head.png" mode="aspectFill"></image>
			<view class="t-b">
				您好，
				<br />
				欢迎使用 种草短剧
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<!-- <text class="txt">手机号</text> -->
						<input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="phone" />
					</view>
					<view class="t-a">
						<!-- <text class="txt">密码</text> -->
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="pwd" />
					</view>
					<view class="hint flex flex-row items-center">
						<u-checkbox-group v-model="checked">
							<u-checkbox shape="circle" size="30rpx"></u-checkbox>
						</u-checkbox-group>
						<view class="flex-1" @click="checked = ['']">
							我已经阅读并同意 <text class="link" @click.stop="navigateTo(`/pages/agreement/user/user`)">《用户协议》</text>
							和 <text class="link" @click.stop="navigateTo(`/pages/agreement/privacy/privacy`)">《隐私政策》</text>
						</view>
					</view>
					<button @tap="login()">登 录</button>
					<!-- <view class="reg" @tap="reg()">注 册</view> -->
				</form>
				<div class="texts">
					<div>还没有账号？<span class="link-text" @click.stop="navigateTo(`/pages/register/register`)">立即注册</span></div>
					<div @click.stop="navigateTo(`/pages/login/forgetPwd/forgetPwd`)">忘记密码？</div>
				</div>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		loginByPassword
	} from '@/api/index.js'
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				phone: '', //手机号码
				pwd: '', //密码
				checked: []
			};
		},
		onLoad() {},
		methods: {
		...mapMutations(['setUserInfo']),
			//当前登录按钮操作
			async login() {
				if(!this.checked.length) return uni.$u.toast('请先阅读并同意用户隐私协议')
				var that = this;
				if (!that.phone) {
					uni.$u.toast('请输入您的手机号')
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.$u.toast('请输入正确手机号')
					return;
				}
				if (!that.pwd) {
					uni.$u.toast('请输入您的密码')
					return;
				}
				const res = await loginByPassword({
					password: that.pwd,
					phone: that.phone
				})
				if(!res.success) return
				this.setUserInfo(res.data)
				uni.showToast({
					title: '登录成功！',
					icon: 'none',
					success() {
						uni.reLaunch({
							// #ifdef H5
							url: '/pages/home/h5/h5',
							// #endif
							// #ifdef MP-WEIXIN 
							url: '/pages/home/mini/mini'
							// #endif
						})
					}
				});
			},
			//注册按钮点击
			reg() {
				uni.navigateBack()
			},
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}
	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 550rpx;
		overflow: hidden;
		position: relative;
	}

	.img-a image {
		width: 100%;
		height: 550rpx;
	}

	.reg {
		font-size: 35rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
	}

	.t-login {
		width: 85vw;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 80rpx;
	}

	.t-login button {
		font-size: 35rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
	}

	.t-login input {
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #e9e9e9;
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: $uni-theme;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 30rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 60rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.hint {
		padding-bottom: 40upx;
		font-size: 25rpx;
		color: #909399;

		.link {
			color: $uni-theme;
		}
	}

	.texts {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: row;
	}
</style>