mkw-visit-wx/pages/index/login.vue

<template>
	<view class="containers" :style="{'height':winHeight+'px'}">
		<view :style="{'height':winHeight*.5+'px','position':'relative'}" class="logo">
			<view>
				<u--image :showLoading="true" :src="logo" width="336rpx" height="336rpx"></u--image>
			</view>
		</view>
		
		<view class="login">
			<uni-forms ref="formdata" :model="form" :border="true" :rules="rules" labelWidth="100px" label-position="top">
				<uni-forms-item name="name">
					<template slot="label">
						<view class="label-with-en-inline">
							<text>用户名</text>
							<text class="en-text">Username</text>
						</view>
					</template>
					<uni-easyinput :inputBorder="false" v-model="form.name" placeholder="请输入用户名 / Please enter username" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<template slot="label">
						<view class="label-with-en-inline">
							<text>密码</text>
							<text class="en-text">Password</text>
						</view>
					</template>
					<uni-easyinput :inputBorder="false" type="password" v-model="form.password" placeholder="请输入密码 / Please enter password" />
				</uni-forms-item>
			</uni-forms>
				<view class="sbtn">
					<u-button type="primary" size="large" :custom-style="{'background-color': '#182849','border-color': '#182849'}" @click="submit">
						<view class="button-text">
							<view>登录</view>
							<view class="en-text">Login</view>
						</view>
					</u-button>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: require("../../static/img/bdlogo.png"),
				winHeight: 0,
				form: {},
					rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名 / Please enter username'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码 / Please enter password'
						}]
					}
				},
				labelStyle:{
					fontSize:'12px',
					color:"#ccc"
				}
			}
		},
		onLoad() {
			this.winHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight * 2 - 20;
		},
		methods: {
			
			submit(){
				let that = this
				this.$refs['formdata'].validate().then(res => {
					this.util.request({
						api: '/api/admin/auth/login',
						data: {
							username:this.form.name,
							password:this.form.password
						},
						method:'POST',
						utilSuccess: function(res) {
							console.log(res)
							uni.setStorageSync("userInfo_BD_token", {
								token:res.access_token
							})
							that.getBdInfo();
						},
						utilFail: function(res) {
							uni.showToast({
								title: '登陆失败 / Login failed',
								duration: 2000,
								icon:'none'
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
				// uni.navigateTo({
				// 	url:"/pages/bd/mine"
				// })
			},
			getBdInfo() {
				let that = this
				this.util.request({
					api: '/api/admin/auth/me',
					method: "POST",
					requestType: 'bd',
					utilSuccess: function(res) {
						// that.userName = res.name
						// that.userEmail = res.email?res.email:''
						uni.setStorageSync('userInfo_Bd',res)
						uni.showToast({
							title:"登录成功 / Login successful",
							success() {
								uni.redirectTo({
									url:"/pages/bd/mine"
								})
							}
						})
					},
					utilFail: function(res) {
						uni.showToast({
							title: '登陆失败 / Login failed',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			
			},
		}
	}
</script>

<style scoped>
	.containers {
		background-color: #fff;
		padding: 0 40rpx;
		padding-bottom: 20px;
	}

	.logo view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.sbtn{
		margin-top:60rpx
	}
	.label-with-en-inline {
		display: flex;
		flex-direction: column;
		font-weight: 500;
	}
	.label-with-en-inline text {
		display: block;
		line-height: 1.5;
	}
	.label-with-en-inline .en-text {
		font-size: 20rpx;
		color: #999;
		margin-top: 4rpx;
		font-weight: normal;
	}
	.button-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.button-text .en-text {
		font-size: 20rpx;
		opacity: 0.9;
		margin-top: 2rpx;
	}
	/deep/ .uni-forms-item__label {
		padding-bottom: 8rpx;
	}
</style>