BJ_web_developers / jy_parkingOS

  <template>

  	<view>
  		<view class="login-content">
  			<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="username" 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-if="userIsLogin">
  			<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">张三</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">
  							<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: false,
  				appName: '江阴慧停车',
  				apptitle: '江阴慧停车·智慧便捷',

  				username: '',
  				password: '',

  			}
  		},
  		onLoad() {
  
  		},
  		methods: {

  			login() {
  				let that = this;

  				let data = {
  					userCode: that.username,
  					userPwd: that.password
  				};

  				if (that.username.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 => {

  						var userInfo = res.data.data;
  						// 保存用户信息到全局的缓存中
  						uni.setStorageSync("globalUser", userInfo);
  						that.userIsLogin = true;

  
  					})
  
  
  				}

  			},

  			toSetting() {
  				uni.navigateTo({
  					url: '../setting/setting'
  
  				});

  			},
  			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>