supervise/supervise-uniapp/pages/login/index.vue

<template>
	<view class="u-page">
		<uni-section title="使用uni-ui表单" type="line">
			<uni-card :is-shadow="false" :isFull="true">
				<text>
					使用uni-ui的组件创建表单，提交时使用的request.api.js中的网络请求方式，在VUEX里发起登录请求并将结果保存到本地。先调用VUEX，在VUEX中发送网络请求。
				</text>
			</uni-card>
			<uni-card title="uni-ui的表单" :thumbnail="avatar" sub-title="输入框为uni-easyinput" extra="使用uni-forms" note="Tips">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="账号:" name="userName">
						<uni-easyinput prefixIcon="person" type="text" v-model="formData.userName" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码:" name="password">
						<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button @click="dologin">登录</button>
			</uni-card>
		</uni-section>
		<uni-section title="使用uView表单" type="line">
			<uni-card :is-shadow="false" :isFull="true">
				<text>
					使用uView的组件创建表单，提交时使用uview封装的网络请求，请求成功后再将返回的数据通过VUEX保存到本地。先发起网络请求，请求返回后再调用VUEX保存状态。
				</text>
			</uni-card>
			<uni-card title="uView表单" :thumbnail="vavatar" sub-title="输入框为u--input" extra="使用u--form" note="Tips">
				<u--form ref="vform" :model="formData" :rules="vrules" labelPosition="left">
					<u-form-item label="账号:" prop="userName">
						<u--input prefixIcon="account" v-model="formData.userName" type="text" placeholder="请输入账号" />
					</u-form-item>
					<u-form-item label="密码:" prop="password">
						<u--input prefixIcon="lock" v-model="formData.password" type="password" placeholder="请输入密码" />
					</u-form-item>
				</u--form>
				<button @click="vdologin">登录</button>
			</uni-card>
		</uni-section>
	</view>
</template>

<script>
import req from '@/common/req.js'
export default {
	data() {
		return {
			avatar: '/static/uniui.png',
			vavatar: '/static/uview/common/logo.png',
			// 表单数据
			formData: {
				userName: '',
				password: ''
			},
			rules: {
				// 对name字段进行必填验证
				name: {
					rules: [
						{
							required: true,
							errorMessage: '账号不可以为空'
						}
					]
				},
				// 对passwd字段进行必填验证
				passwd: {
					rules: [
						{
							required: true,
							errorMessage: '密码不可以为空'
						}
					]
				}
			},
			vrules: {
				// 对name字段进行必填验证
				name: {
					type: 'string',
					required: true,
					message: '账号不可以为空',
					trigger: ['blur', 'change']
				},
				// 对passwd字段进行必填验证
				passwd: {
					type: 'string',
					required: true,
					message: '密码不可以为空',
					trigger: ['blur', 'change']
				}
			}
		}
	},
	methods: {
		dologin() {
			let _this = this
			this.$refs.form
				.validate()
				.then(r => {
					_this.$store
						.dispatch('login', _this.formData)
						.then(uinfo => {
							console.log('MMMM:', uinfo)
							getApp().globalData.username = uinfo.name
							getApp().globalData.token = uinfo.token
							console.log('gd--:', getApp().globalData)
							uni.redirectTo({ url: '/pages/index/index' })
						})
						.catch(er => {
							console.log('EEEE:', er)
						})
				})
				.catch(err => {
					console.log('eeee:', err)
				})
		},
		vdologin() {
			let _this = this
			this.$refs.vform
				.validate()
				.then(r => {
					uni.showLoading()
					// uni.showLoading({
					// 	mask: true,
					// 	title: '请求中~~~'
					// })
					req
						.login(_this.formData)
						.then(uinfo => {
							uni.hideLoading()
							console.log('vMMMM:', uinfo)
							_this.$store.dispatch('logined', uinfo).then(() => {
								getApp().globalData.username = uinfo.name
								getApp().globalData.token = uinfo.token
								console.log('vgd--:', getApp().globalData)
								uni.redirectTo({ url: '/pages/index/index' })
							})
						})
						.catch(er => {
							uni.hideLoading()
							console.log('vEEEE:', er)
						})
				})
				.catch(err => {
					console.log('veeee:', err)
				})
		}
	}
}
</script>

<style></style>