login.vue

<template>
	<view class="content">
		<image class="logo" src="/static/login/login.png"></image>
		<view class="text-area">
			<uni-forms :modelValue="formData" :rules="loginRules" ref="form" validate-trigger="bind"
				err-show-type="undertext">
				<uni-forms-item name="phone" required label="手机号">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone"
						placeholder="请输入手机号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" required label="密码">
					<uni-easyinput type="password" :inputBorder="true" v-model="formData.password"
						placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button class="loginButton" @click="login('form')">登录</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view>
			<text class="rgst" @click="goBack(1,'/pages/login/register')">注册账号</text>
			<text class="fbpw" @click="goBack(2,'/pages/login/find')">找回密码</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'login',
		components: {},
		data() {
			return {
				sceenHeight: getApp().globalData.sceenHeight,
				formData: {
					phone: '',
					password: ''
				},
				loginRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/
								if (reg.test(value)) {
									callback()
								} else {
									callback('请输入正确的手机号')
								}
							}
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else {
									callback();
								}
							}
						}]
					},
				}
			}
		},
		methods: {
			login(validateForm) {
				this.$refs[validateForm].validate(valid => {
					if (!valid) {
						uniCloud.callFunction({
							name: 'fe-login',
							data: {
								phone: this.formData.phone,
								password: this.formData.password
							}
						}).then(res => {
							if (res.result.code === 200) {
								uniCloud.callFunction({
									name: 'uni-cloud-push',
									data: {
										uid: res.result.data.userId,
										cid: getApp().globalData.push_clientid
									}
								})
								getApp().globalData.userId = res.result.data.userId
								getApp().globalData.name = res.result.data.name
								getApp().globalData.type = res.result.data.type
								getApp().globalData.icon = res.result.data.icon
								getApp().globalData.school = res.result.data.school
								getApp().globalData.moblie = res.result.data.phone_num
								getApp().globalData.gender = res.result.data.gender
								getApp().globalData.teamNameStorageCount = 1
								getApp().globalData.runningRecordStorageCount = 1
								getApp().globalData.walkingRecordStorageCount = 1
								uni.setStorageSync('token', '用户登录状态')
								uni.setStorageSync('userId', res.result.data.userId)
								uni.setStorageSync('name', res.result.data.name)
								uni.setStorageSync('type', res.result.data.type)
								uni.setStorageSync('icon', res.result.data.icon)
								uni.setStorageSync('school', res.result.data.school)
								uni.setStorageSync('moblie', res.result.data.phone_num)
								uni.setStorageSync('gender', res.result.data.gender)
								uni.setStorageSync('teamNameStorageCount', 1)
								uni.setStorageSync('runningRecordStorageCount', 1)
								uni.setStorageSync('walkingRecordStorageCount', 1)
								console.log(res)
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								})
								uni.reLaunch({
									url: '/pages/sport/main',
									animationType: 'pop-in',
									animationDuration: 300
								})
							} else {
								uni.showToast({
									title: '账号或密码错误',
									icon: 'error'
								})
							}
						});
					}
				})
			},
			goBack(index, url) {
				if (index == 1) {
					uni.reLaunch({
						url: url,
						animationType: 'pop-in',
						animationDuration: 300
					})
				}
				if (index == 2) {
					uni.reLaunch({
						url: url,
						animationType: 'pop-in',
						animationDuration: 300
					})
				}
			}
		}
	}
</script>

<style>
	.content {
		background-color: #edeef0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.logo {
		height: 480rpx;
		width: 500rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 70rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.loginButton {
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 20px;
	}

	.loginButton::after {
		border: 0;
	}

	.rgst {
		color: #f1992d;
		display: inline-block;
	}

	.fbpw {
		color: #f1992d;
		display: inline-block;
		margin-left: 90px;
	}
</style>