zhuoxin-user-uniapp/pages/login/index.vue

<template>
	<view class="content">
		<u-image width="100%" height="100%" :fade="false" src="../../static/images/loginBg.png"></u-image>
		<view style="position:fixed;top:350rpx;z-index:10">
			<u-image style="margin-left: 292rpx;"  width="169rpx" height="169rpx" :fade="false" src="../../static/images/logo.png"></u-image>
			<u-input style="margin-left:140rpx;margin-top:142rpx;width:475rpx;" 
					 :clearable="false" 
					 placeholder="用户名" 
					 placeholder-style="color: #FFFFFF;font-size: 29rpx;font-family: Segoe UI;font-weight: 400;line-height: 40rpx;" 
					 height="80" 
					 v-model="userinfo.username" 
					 type="text" 
					 :custom-style="{'color':'#fff'}"
					 borderZ />
			<u-input style="margin-left:140rpx;margin-top:83rpx;width:475rpx;" 
				     :clearable="false" 
					 placeholder="密码" 
					 placeholder-style="color: #FFFFFF;font-size: 29rpx;font-family: Segoe UI;font-weight: 400;line-height: 40rpx;"
					 v-model="userinfo.password" 
					 type="password" 
					 borderZ 
					 password-icon 
					 iconName="suo" 
					 :custom-style="{'color':'#fff'}" />
			<view style="margin-left:140rpx;margin-top:38rpx;">
				<u-checkbox 
					 v-model="userinfo.checked" 
					 active-color="transparent">
					 <text class="rem-password">记住密码</text>
				</u-checkbox>
			</view>
			<fxyk-button style="margin-left:131rpx;margin-top:83rpx;border-radius: 58rpx;" 
						 width="488" 
						 height="99" 
						 content="登录" 
						 bgColor="#EBB162" 
						 isLoginButton 
						 @click.native="jump_index"/>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapGetters,mapMutations } from "vuex"
	export default {
		data() {
			return {
				userinfo: {
					username: '',
					password: '',
					checked: false
				}
			}
		},
		onLoad() {
			this.init()
		},
		computed: {
			...mapGetters(['info'])
		},
		methods: {
			...mapMutations(['login']),
			init() {
				if(this.info.checked) {
					this.userinfo = this.info
				}
			},
			// 跳到首页
			jump_index() {
				// 验证账号密码
				// 是否输入账号和密码
				if (!this.userinfo.username || !this.userinfo.password) {
					this.$refs.uToast.show({
						title: '请输入用户名和密码',
						type: 'error',
						icon: false
					}) 
					return
				}
				// 存储用户信息
				this.login(this.userinfo)
				// 跳转
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					icon: false,
					duration: 200,
					isTab: true,
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: $yk-main-bg-color;
	}
	.rem-password {
		height: 40rpx;
		font-size: 30rpx;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 40rpx;
		color: #D8D7D7;
	}
</style>