protection-applets/pages/login/index.vue

<template>
	<view class="content">
		<u-card :show-head="false" :show-foot="false" padding="40" margin="20rpx 20rpx" borderRadius="20" box-shadow="0 0 4px rgba(0, 0, 0, 0.4)"
		 class="card-box">
			<view slot="body" class="login-form">
				<u-image :src="logo" mode="aspectFit" width="321rpx" height="109rpx" class="logo"></u-image>
				<u-cell-group :border="false">
					<u-cell-item icon="account" icon-size="46" :icon-style="iconStyle" :arrow="false">
						<u-input v-model="userAccount" placeholder="请输入账号" />
					</u-cell-item>
					<u-cell-item icon="lock" icon-size="46" :icon-style="iconStyle" :arrow="false">
						<u-input v-model="password" type="password" :password-icon="true" placeholder="请输入密码" />
					</u-cell-item>
				</u-cell-group>
				<view style="text-align: right;">
					<text @click="goToChangePassword" :style="{borderBottom: '1px solid '+ mainColor, color: mainColor}">修改密码</text>
				</view>
				<u-button type="primary" :ripple="true" :custom-style="{...customStyle, margin: '10px 0'}" @click="login()">登录</u-button>
			</view>
		</u-card>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'customStyle',
			])
		},
		data() {
			return {
				logo: API.getServerImg + '1.png',
				userAccount: '',
				password: '',
				iconStyle: {
					color: '#999999',
					marginRight: '10px'
				}
			}
		},
		methods: {
			//  登录
			login() {
				if (!this.userAccount || !this.password) {
					this.$refs.uTips.show({
						title: '请输入账号密码',
						type: 'warning',
					})
					return
				}
				NET.request(API.loginByPassword, {
					userAccount: this.userAccount,
					pwd: this.password,
				}, 'POST').then(res => {
					uni.setStorage({
						key: 'token',
						data: res.data.token
					})
					uni.setStorage({
						key: 'userData',
						data: {
							userId: res.data.userId,
							companyId: res.data.companyId,
							userName: res.data.userName,
						}
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(error => {
					this.$refs.uTips.show({
						title: '登录失败',
						type: 'warning',
					})
				})
			},
			//  修改密码
			goToChangePassword() {
				uni.navigateTo({
					url: '/pages/login/passwordForm'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		padding: 150rpx 0 0 0;
		float: left;
		background-color: #5976ba;

		.card-box {
			.login-form {
				height: calc(100vh - 280rpx);
				padding-top: 120px;
				position: relative;

				.logo {
					width: 321rpx;
					margin-bottom: 40rpx;
					top: 25px;
					left: 50%;
					transform: translateX(-50%);
					position: absolute;
				}
			}

			/deep/.u-cell {
				border: 1px solid #eeeeee;
				border-radius: 8px;
				padding: 8px 10px;
				margin-bottom: 16px;
			}
		}
	}
</style>