pages/index/index.vue

<template>
	<view>
		<view class="login-content" v-if="userIsLogin">
			<view>
				<image class="logo" src="/static/logo.png"></image>
				<view>
					<view class="title">{{appName}}</view>
					<view class="title-msg">{{apptitle}}</view>
				</view>
			</view>
			<view class="uni-common-mt paddinglr30">
				<view class="uni-form-item uni-column">
					<input class="uni-input" type="text" v-model="userCode" placeholder="请输入用户名" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" password type="text" v-model="password" placeholder="请输入密码" />
				</view>
			</view>
			<view class="paddinglr30 uni-common-mt">
				<button type="primary" @click="login">登录</button>
			</view>
			<view class="uni-common-mt login-foot">
				点击”登录“，即表示你同意《商户用户协议》
			</view>
		</view>
		<view class="bg-white" v-else>
			<view class="index-top">
				<view>
					<view style="z-index: 2;">
						<image src="http://122.152.205.72:88/group1/M00/00/05/CpoxxFw_-5-AFyVyAABLIH8xBTw233.png"
							class="face"></image>
						<view class="username">{{userName}}</view>
					</view>
				</view>
				<view class="set-wapper">
					<image src="../../static/me/settings.png" class="settings" @tap="toSetting"></image>
				</view>
			</view>
			<view class="index-menu">
				<view class="uni-padding-wrap uni-common-mt">
					<view class="uni-flex uni-row">
						<view class="flex-item">
							<view class="">
								<image src="../../static/me/me-parkrecord.png" class="index-icon"></image>
							</view>
							<view class="index-title">停车缴费</view>
						</view>
						<view class="flex-item">
							<view class="">
								<image src="../../static/me/me-recoder.png" class="index-icon"></image>
							</view>
							<view class="index-title">停车记录</view>
						</view>
						<view class="flex-item" @click="toPursePage">
							<view class="">
								<image src="../../static/me/me-balance.png" class="index-icon"></image>
							</view>
							<view class="index-title">我的钱包</view>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="flex-item">
							<view class="">
								<image src="../../static/me/me-coupon.png" class="index-icon"></image>
							</view>
							<view class="index-title">卡券管理</view>
						</view>
						<view class="flex-item" @click="toInvoicePage">
							<view class="">
								<image src="../../static/me/me-fapao.png" class="index-icon"></image>
							</view>
							<view class="index-title">发票申领</view>
						</view>
						<view class="flex-item" @click="toRatingPage">
							<view class="">
								<image src="../../static/me/me-aboutus.png" class="index-icon"></image>
							</view>
							<view class="index-title">信用等级</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userIsLogin: true,
				appName: '江阴慧停车',
				apptitle: '江阴慧停车·智慧便捷',
				userCode: '',
				password: '',
				userName: '',
			}
		},
		onLoad() {
				let userToken= uni.getStorageSync("globalUser").token;
				if(userToken){
					this.userIsLogin = false;
					let indexInfo= uni.getStorageSync("indexInfo");
					this.userName=indexInfo.userName;
					
				}else{
					this.userIsLogin = true;
				}
		},
		methods: {
			login() {
				let that = this;
				let data = {
					userCode: that.userCode,
					userPwd: that.password
				};
				if (that.userCode.trim() === "" || that.password.trim() === "") {
					uni.showToast({
						title: '用户名密码必填',
						icon: 'error',
						duration: 2000
					})
					return;
				} else {
					that.$myRequest({
						url: that.$common.userLogin,
						method: 'POST',
						data: that.$common.requestSign(data)
					}).then(res => {
						console.log(res)
						let userInfo = res.data;
						console.log(res.data)
						// 保存用户信息到全局的缓存中
						uni.setStorageSync("globalUser", userInfo);
						// 登陆成功 展示首页
						that.userIsLogin = false;
						// 首页信息获取 接口
						that.$myRequest({
							url: that.$common.indexInfo,
							method: 'POST',
							data: that.$common.requestSign()
						}).then(res => {
							console.log(res)
							var indexInfo = res.data;
							// 保存首页用户信息到全局的缓存中
							uni.setStorageSync("indexInfo", indexInfo);
							that.userName = indexInfo.userName;
						})
					})
				}
			},
			toSetting() {
				uni.navigateTo({
					url: '../setting/setting'
				});
			},
			toPursePage() {
				uni.navigateTo({
					url: '../moneyRecharge/moneyRecharge'
			
				});
			},
			toInvoicePage() {
				uni.navigateTo({
					url: '../invoiceClaim/invoiceClaim'
				});
			},
			toRatingPage() {
				uni.navigateTo({
					url: '../creditRating/creditRating'
				});
			},
			
		}
	}
</script>
<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		position: relative;
	}
	.login-content {
		background-color: #f6f6f6;
		text-align: center;
		height: 100vh;
	}
	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}
	.title {
		font-size: 32upx;
		color: #000;
		font-weight: 400;
	}
	.title-msg {
		font-size: 26upx;
		color: #8d8d8d;
	}
	.login-foot {
		font-size: 26upx;
	}
	// 首页
	.index-top {
		height: 200upx;
		background-color: #2d7bf7;
		position: relative;
		text-align: center;
		z-index: 2;
	}
	.index-top:after {
		width: 140%;
		height: 300upx;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: linear-gradient(#2d7bf7, #2d7bf7);
	}
	.face {
		margin-top: 50upx;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.username {
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		color: #fff;
		z-index: 2;
	}
	.set-wapper {
		height: 40rpx;
		position: absolute;
		top: 30upx;
		right: 50upx;
		z-index: 2;
	}
	.settings {
		width: 40upx;
		height: 40upx;
	}
	.index-menu {
		width: 100%;
		height: 440upx;
		margin-top: 160upx;
	}
	.flex-item {
		width: 33.3%;
		height: 200upx;
		text-align: center;
	}
	.index-icon {
		width: 48upx;
		height: 48upx;
		// border: 50%;
	}
	.index-title {
		height: 80upx;
		line-height: 80upx;
		// width: 80upx;
	}
</style>