province-uniapp-qinghai-gsq/queue-monitor/pages/index/index.vue

<template>
	<view class="content">
		<view class="welcome">
			<!-- <img :src="require('~/static/login-bg-top.png')" /> -->
			<!-- <view class="welcome-text">
				
			</view> -->
			<image :src="require('@/static/text.png')" mode="aspectFit" class="text" />
			<view class="btns">
				<view :class="{act: index === 0, btn: true}" @click="index = 0">
					<view>登录</view>
					<view class="arrow"></view>
				</view>
				<view :class="{act: index === 1, btn: true}" @click="index = 1">
					<view>注册</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
		<view class="text-area">

			<view v-if="index === 0" class="login-form">
				<u--form labelPosition="top" :model="userInfo" labelWidth="100px">
					<u-form-item label="手机号" prop="userInfo.name">
						<u--input v-model="userInfo.name" placeholder="请输入您的账号"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="userInfo.password">
						<u--input v-model="userInfo.password" type="password" placeholder="请输入您的密码"></u--input>
					</u-form-item>
				</u--form>
				
				<view>
					<view class="login-btn" @click="login">登录</view>
				</view>
			</view>
			
			<view v-if="index === 1" class="login-form">
				<u--form labelPosition="top" :model="registInfo" labelWidth="100px">
					<u-form-item label="注册账号" prop="name">
						<u--input v-model="registInfo.name" placeholder="请输入您的账号"></u--input>
					</u-form-item>
					<u-form-item label="登录密码" prop="password">
						<u--input v-model="registInfo.password" type="password" placeholder="请输入您的密码"></u--input>
					</u-form-item>
					<u-form-item label="确认密码" prop="password">
						<u--input v-model="registInfo.password2" type="password" placeholder="请输入您的密码"></u--input>
					</u-form-item>
				</u--form>
				
				<view>
					<view class="login-btn" @click="register">注册</view>
				</view>
			</view>
		</view>
		
		<view style="text-align: center;">
			version: 1.6
		</view>
	</view>
</template>

<script>
	import {
		login,
		cryptoPassword,
		register
	} from '@/api/login.js'
	import {
		validate
	} from '@/utils/common.js'
	import { setCache } from '@/utils/cache'
	export default {
		data() {
			return {
				index: 0,
				userInfo: {
					// name: null,
					// password: null,
					name: "13777777777",
					password: "123456",
				},
				registInfo: {
					name: null,
					password: null,
					password2: null,
				}
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				if (
					validate(this.userInfo.name, '请输入用户名') &&
					validate(this.userInfo.password, '请输入密码')
				) {
					const pwd = cryptoPassword(this.userInfo.password.trim())
					login({
						username: this.userInfo.name,
						//password: this.userInfo.password,
						password: pwd,
					}).then(resp => {
						if (resp.code === 200) {
							const {token, type} = resp.data
							setCache('token', token).then(_ => {
								getApp().globalData.userType = type
								getApp().globalData.tabIndex = 0
								return setCache('userType', type)
							}).then(_ => {
								uni.redirectTo({
									url: '/pages/home/home'
								})
							})
						} else {
							uni.showToast({
								title: resp.msg
							})
						}

					})
				}
			},
			register() {
				if (
					validate(this.registInfo.name, '请输入用户名') &&
					validate(this.registInfo.password, '请输入密码') && 
					validate(this.registInfo.password2, '请输入确认密码')
				) {
					if(this.registInfo.password !== this.registInfo.password2) {
						uni.showToast({
							title: '两次密码不一致'
						})
						return
					}
					const pwd = cryptoPassword(this.registInfo.password.trim())
					register({
						username: this.registInfo.name,
						password: pwd
					}).then(resp => {
						if(resp.code === 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'success'
							})
							this.index = 0
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.welcome {
		background: url('@/static/login-bg-top.jpg');
		background-size: 100% 100%;
		height: 40vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		.text {
			max-height: 80%;
		}
		.btns {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-bottom: 10px;
			.btn {
				color: #bdc8ee;
				width: 100%;
				text-align: center;
			}
			
			.act {
				color: #fefffd;
				.arrow {
					/* background: url('~@/static/arrow.png') no-repeat;
					height: 15px;
					margin: 0px 19px; */
				}
			}
		}
	}
	.text-area {
		padding-left: 10px;
		padding-right: 10px;
	}
	.login-btn {
		background-image: url("~@/static/login-btn.png");
		background-size: 100% 100%;
		height: 50px;
		text-align: center;
		color: white;
		box-sizing: border-box;
		padding-top: 10px;
	}
</style>