bnyer-cloud-hub/pages/login/login.vue

<template>
	<view class="login-body uni-bg-color">
		<div class="auto-center">
			<div class="logo-div"></div>
			<div class="welcome-text">
				<p class="welcome-title uni-white">进入次元Hub</p>
				<p class="welcome-subtitle uni-secondary-color">开启你的创作之旅~</p>
			</div>
			<uni-forms class="login-form-ss" validate-trigger='blur' :modelValue="formData" ref="form">
				<uni-forms-item required name="phone">
					<template #label>
						<div class="form-label l-username">
							<uni-icons type="contact" size="18" color="#FFC542"></uni-icons>
						</div>
					</template>
					<uni-easyinput 
						type="number" 
						v-model="formData.phone"
						placeholder="请输入手机号"
						:clearable="false"
						:inputBorder="false"
					/>
				</uni-forms-item>
				<uni-forms-item required name="password">
					<template #label>
						<div class="form-label l-password">
							<uni-icons type="locked-filled" size="18" color="#FF575F"></uni-icons>
						</div>
					</template>
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" :inputBorder="false" />
				</uni-forms-item>
			</uni-forms>
			<button class="login-btn" type="primary" @click="$noMultipleClicks(login,formData)">登录<uni-icons type="arrow-right" size="20" color="#fff"></uni-icons></button>
			<div class="foget-password uni-secondary-color">
				<span >忘记密码？</span>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/index.js'
	import md5 from "js-md5"
	export default {
		data() {
			return {
				phoneFlag: false,
				passwordFlag: false,
				noClick:true, //防止重复提交
				formData: {
					phone: '',
					password: ''
				},
				
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							minLength: 8,
							errorMessage: '密码长度最短 {minLength} 个字符'
						}, {
							validateFunction: (value, data) => {
								if (value.length < 6) {
									this.passwordFlag = false
									callback('密码长度最短8个字符')
								}else{
									this.passwordFlag = true
									return true
								}
							}
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
								errorMessage: '请输入正确的手机号'
							},
							{
								validateFunction: (data) => {
									// 异步需要返回 Promise 对象
									return new Promise((resolve, reject) => {
										if (data.length = 11) {
											this.phoneFlag = true
											resolve()
										} else {
											this.phoneFlag = false
											reject(new Error('手机号长度应为11个字符'))
										}
									})
								}
							}
						]
					}
				}
			}
		},
		mounted() {
			//设置校验规则
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			login(e) {
				console.log(e)
				let that = this
				console.log('that.phoneFlag', that.phoneFlag)
				console.log('that.passwordFlag', that.passwordFlag)
				if (that.phoneFlag === true && that.passwordFlag === true) {
					console.log('全部达成')
					uni.showLoading({
						title: '艺术家登录中!',
						duration: 3000,
						success() {
							let pwd = md5(that.formData.password)
							const param = {
								phone: that.formData.phone,
								password: pwd
							}
							console.log('form', param)
							login(param).then(response => {
								if (response.data.code === 200) {
									console.log('response',response)
									//登录成功，设置艺术家信息，页面跳转到主页
									uni.setStorage({
										key: 'userInfo',
										data: response.data.data.userInfo
									})
									uni.switchTab({
										url: '../index/index',
										success() {
											uni.showToast({
												title: '艺术家登录成功!',
												icon: 'success',
												duration: 1500
											})
										}
									});
								} else {
									uni.showToast({
										title: response.data.msg,
										icon: 'none'
									})
								}
							})
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast("登录失败")
						},
						complete: function() {
							uni.hideLoading();
						}
					})
				} else {
					console.log('尚未全部达成')
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
.login-body {
	min-height: 100vh;
	background-color: #22343C;

	.auto-center {
		width: 622rpx;
		margin: 0 auto;
		border-top: 1rpx solid #22343C;
		border-bottom: 1rpx solid #22343C;
	}

	.logo-div {
		width: 86rpx;
		height: 86rpx;
		background: linear-gradient(180.00deg, rgba(63.59,223.05,158.63,1) 0%,rgba(62,213,152,1) 100%);
		box-shadow: 0 4rpx 8rpx rgba(15, 218, 137, 0.3);
		border-radius: 24rpx;
		margin-top: 154rpx;
	}
	.welcome-text {
		margin-top: 72rpx;
		margin-bottom: 72rpx;
		
		.welcome-title {
			font-size: 84rpx;
		}
		.welcome-subtitle {
			font-size: 48rpx;
			margin-left: 90rpx;
			margin-top: 44rpx;
		}
	}
	
	.uni-forms {
		
		.form-label {
			width: 76rpx;
			height: 96rpx;
			border-radius: 24rpx;
			line-height: 96rpx;
			text-align: center;
			margin-right: 24rpx;
			margin-bottom: 4rpx;
			margin-top: 4rpx;
		}
		
		.l-username {
			background: rgb(98, 91, 57);
		}
		
		.l-password {
			background: rgb(98, 58, 66);
		}
		
	}
	
	.login-btn {
		background: linear-gradient(180.00deg, rgba(63.59,223.05,158.63,1) 0%,rgba(62,213,152,1) 100%);
		box-shadow: 0 4rpx 8rpx rgba(15, 218, 137, 0.3);
		border-radius: 24rpx;
		margin-top: 52rpx;
	}
	.foget-password {
		text-align: right;
		margin-top: 26rpx;
		margin-right: 24rpx;
		margin-bottom: 100rpx;
	}
}
.login-body {
	::v-deep .uni-forms-item {
		margin-bottom: 0 !important; 
	}
}
.login-body {
	::v-deep input {
		height: 100rpx;
		border-bottom: 4rpx solid rgba(0, 0, 0, 0.05);
		background: none !important;
		font-size: 36rpx;
		color: rgb(150, 167, 175);
	}
}

.login-body {
	::v-deep .uni-easyinput__content {
		background: none !important;
	}
}
</style>