koyo_crm/RuoYi-Mobile-master/pages/login/index.vue

<!-- 蓝色简洁登录页面 -->
<template class="denglu">
	<view class="t-login">
		<!-- 标题 -->
		<view class="t-b">
			<image class="logo" src="~@/static/img/logo.png"></image>
		</view>
		<view class="t-b2">{{ subTitle }}</view>
		<form>
			<!-- 登录账号 -->
			<view class="login-form-item">
				<u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
					<u-icon color="#E60012" slot="prefix" name="account" size="25px"></u-icon>
				</u-input>
			</view>
			<!-- 登录密码 -->
			<view class="login-form-item">
				<u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
					<u-icon color="#E60012" slot="prefix" name="lock" size="25px"></u-icon>
				</u-input>
			</view>
			<!-- 图形验证码 -->
			<view class="login-form-item t-captcha" v-if="false">
				<u-input v-model="captchaCode" type="number" placeholder="请输入验证码" maxlength="4">
					<u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
				</u-input>
				<image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
			</view>
			<button class="login-button" @tap="login()">登 录</button>
		</form>
	</view>
</template>
<script>
	import * as CaptchaApi from '@/api/captcha'
	import {
		isEmpty
	} from '@/utils/verify.js'

	export default {
		data() {
			return {
				// subTitle: 'Global Project Management Syste',
				subTitle: '全球项目管理平台',
				// 图形验证码信息
				captcha: null,
				// 登录账号
				username: 'admin',
				// 密码
				password: 'admin123',
				// 图形验证码
				captchaCode: '',
				uuid: '',
				//是否开启验证码
				captchaEnabled: false
			};
		},
		created() {
			// 获取图形验证码
			this.getCaptcha()
		},
		methods: {
			// 获取图形验证码
			getCaptcha() {
				const app = this
				CaptchaApi.image().then(result => {
					let {
						captchaEnabled
					} = result
					app.captchaEnabled = captchaEnabled
					if (captchaEnabled) {
						app.captcha = 'data:image/gif;base64,' + result.img
						app.uuid = result.uuid
					}
				})
			},
			// 验证表单内容
			validItem() {
				const app = this
				if (isEmpty(app.username)) {
					uni.$u.toast('请输入登录用户名')
					return false
				}
				if (isEmpty(app.password)) {
					uni.$u.toast('请输入登录密码')
					return false
				}
				return true
			},
			// 确认登录
			login() {
				const app = this
				let valid = app.validItem();
				if (valid) {
					app.isLoading = true
					app.$store.dispatch('Login', {
							username: app.username,
							password: app.password,
							code: app.captchaCode,
							uuid: app.uuid
						}).then(result => {
							// uni.switchTab({
							//   url: '/pages/work/index',
							//   fail(err) {
							//     console.log(err)
							//   }
							// })
							// 直接跳转审批页面
							uni.navigateTo({
								url: '/pages/work/approve/list',
								fail(err) {
									console.log(err)
								}
							})
						})
						.catch(err => {
							app.captchaCode = ''
							app.getCaptcha()
						})
						.finally(() => app.isLoading = false)
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background: linear-gradient(181deg, rgba(255, 224, 224, 0.17) 0%, rgba(252, 247, 247, 0.84) 18%, #FFFFFF 100%);
		overflow-y: hidden;
	}
</style>