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

<template>
	<view class="login-body uni-bg-color">
		<div class="auto-center">
			<div class="logo-div">
        <image class="logo" src="/static/logo-white.png" mode=""></image>
      </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="#FFFFFF"></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="#FFFFFF"></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)">登录</button>
			<div class="foget-password uni-secondary-color">
				<span >忘记密码？</span>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/auth.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: '艺术家登录中!',
					})
          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)
              //登录成功，设置token、艺术家信息，页面跳转到主页
              uni.setStorage({
                key: 'userInfo',
                data: response.data.data.userInfo
              });
              uni.setStorage({
                key: 'token',
                data: response.data.data.access_token
              })
              uni.hideLoading();
              uni.switchTab({
                url: '../index/index',
                success() {
                  uni.showToast({
                    title: '艺术家登录成功!',
                    icon: 'success',
                    duration: 1500
                  })
                }
              });
            } else {
              uni.showToast({
                title: response.data.msg,
                icon: 'none'
              })
            }
          })
				} else {
					console.log('尚未全部达成')
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
.login-body {
	min-height: 100vh;
	background-color: $uni-bg-color;

	.auto-center {
		width: 622rpx;
		margin: 0 auto;
		border-top: 1rpx solid $uni-bg-color;
		border-bottom: 1rpx solid $uni-bg-color;
	}

	.logo-div {
		width: 86rpx;
		height: 86rpx;
		background: linear-gradient(180.00deg, $uni-primary 0%, $uni-primary 100%);
		border-radius: 24rpx;
		margin-top: 154rpx;
    text-align: center;
    line-height: 86rpx;
    font-weight: 600;

    .logo {
      width: 86rpx;
      height: 86rpx;
    }
	}
	.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 0 0 24rpx;
			line-height: 96rpx;
			text-align: center;
		}
		
		.l-username {
			background: $uni-bg-base-color;
		}
		
		.l-password {
			background: $uni-bg-base-color;
		}
		
	}
	
	.login-btn {
    height: 100rpx;
    line-height: 100rpx;
		background: linear-gradient(180.00deg, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 100%);
		border-radius: 24rpx;
		margin-top: 52rpx;
    color: $uni-btn-text-color;
	}
	.foget-password {
		text-align: right;
		margin-top: 26rpx;
		margin-right: 24rpx;
		margin-bottom: 100rpx;
	}
}
.login-body {
	::v-deep .uni-forms-item {

	}
}
.login-body {
	::v-deep input {
    height: 96rpx;
		background: $uni-bg-base-color !important;
		font-size: 36rpx;
		color: $uni-secondary-color;
    border-radius: 0 24rpx 24rpx 0;
	}
}

.login-body {
	::v-deep .uni-easyinput__content {
    background: $uni-bg-base-color !important;
    border-radius: 0 24rpx 24rpx 0;
	}
}
</style>