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

<template>
	<view>
		<uni-forms validate-trigger='blur' :modelValue="formData" ref="form">
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="login(formData)">登录</button>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/index.js'
	import md5 from "js-md5"
	export default {
		data() {
			return {
				phoneFlag: false,
				passwordFlag: false,
				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.redirectTo({
										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>

</style>