mdapp/pages/user/login/login.vue

<template>
	<view class="app">
		<!-- logo -->
		<view class="header">
			<u-avatar src="/static/logo.png" size="200"></u-avatar>
			<view class="nickname">登录</view>
		</view>

		<!-- 输入框 -->
		<view class="body">
			<u-form :model="form1" ref="uForm" style="width: 100%;">
				<u-form-item label-width="0" prop="username" :borderBottom="false">
					<u-input border placeholder="请输入用户名" v-model="form1.username" type="text" height="90"></u-input>
				</u-form-item>
				<u-form-item label-width="0" prop="password" :borderBottom="false">
					<u-input border placeholder="请输入密码" v-model="form1.password" type="password" height="90"></u-input>
				</u-form-item>
			</u-form>
			<u-gap></u-gap>
			<u-button class="bwin-btn-100 u-m-b-10" type="primary" @click="loginHandle">登录</u-button>
			<!-- <u-button class="bwin-btn-100">取消</u-button> -->
		</view>
		
		
		<!-- 忘记密码导航 -->
		<view class="function-row">
			<!-- <navigator url="/pages/user/login/login">忘记密码</navigator>
			<text style="margin: 0 16rpx;">|</text> -->
			<navigator url="/pages/user/login/register">立即注册</navigator>
		</view>

		<!-- 三方登录 -->
		<!-- #ifdef MP-WEIXIN -->
		<u-line margin="40rpx 0 0 0"></u-line>
		<view class="third-login u-m-b-40">
			<u-line margin="0 0 40rpx 0"></u-line>
			<view class="login-icon-item">
				<u-icon name="weixin-fill" size="64" color="#19be6b" label="微信一键登录" labelPos="bottom" labelSize="24"></u-icon>
			 <!-- @click="loginByWeixinModalShow = true" -->
			</view>
		</view>
		
		<u-modal
			v-model="loginByWeixinModalShow"
			title="提示"
			content="未注册用户请先完成注册并绑定微信后再使用微信登录~"
			showCancelButton
			showConfirmButton
			confirmText="继续微信登录"
			@confirm="loginByWeixin()"
		></u-modal>
		<!-- #endif -->

		

		<view class="footer">
			登录即代表同意
			<text class="agreement">《用户协议》</text>
		</view>
	</view>
</template>

<script>
var that;
export default {
	data() {
		// 页面数据变量
		return {
			loginByWeixinModalShow: false, //  微信登录提醒
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				username: '',
				password: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					},
				],
				password: [
					{
						min: 6,
						message: '密码不能少于6个字符',
						trigger: 'change'
					},
				]
			},
			scrollTop: 0
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		that.options = options;
		// if (xxx.checkToken()) {
		// 	xxx.toast('您已登录', 'none', 1500, true, function() {
		// 		xxx.navigateToHome();
		// 	});
		// }
		that.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	/**
	 * 监听 - 点击右上角转发时 文档 https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
	 * 如果删除onShareAppMessage函数，则微信小程序右上角转发按钮会自动变灰
	 */
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		async init(options = {}) {
			const username = uni.getStorageSync('MD_phone')
			this.form1.username = username
		},
		// 账密登录
		loginHandle() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.api.base.apilogin({
						phone: this.form1.username,
						password: this.form1.password,
					}).then(res => {
						console.log(res)
						uni.setStorageSync('MD_userInfo', res)
						uni.setStorageSync('MD_phone', res.phone)
						uni.setStorageSync('MD_token', res.token)
						uni.$msg('登录成功~')
						uni.navigateTo({
							url: '/pages/index/index'
						})
					})
				} else {
					console.log('验证失败');
					return;
				}
			});
			// 发送登录请求
			// vk.userCenter.login({
			// 	data: {
			// 		username: that.form1.username,
			// 		password: that.form1.password
			// 	},
			// 	success: res => {
			// 		// 成功后的逻辑
			// 		vk.callFunction({
			// 			url: 'client/agent/kh/getAgentInfo',
			// 			needAlert: false
			// 		}).then(res => {
			// 			vk.vuex.set('$user.agentInfo', res.info);
			// 			vk.alert('登录成功', '确定', '提示', function() {
			// 				vk.navigateToHome();
			// 			});
			// 		});
			// 	}
			// });
		},
		// 微信登录
		loginByWeixin() {
			// vk.userCenter.loginByWeixin({
			// 	data: {
			// 		type: 'login' // 无账号不注册
			// 	},
			// 	success: data => {
			// 		// 成功后的逻辑
			// 		vk.callFunction({
			// 			url: 'client/agent/kh/getAgentInfo',
			// 			needAlert: false
			// 		}).then(res => {
			// 			vk.vuex.set('$user.agentInfo', res.info);
			// 			vk.alert('登录成功', '确定', '提示', function() {
			// 				vk.navigateToHome();
			// 			});
			// 		});
			// 	}
			// });
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.header {
	padding-top: 15%;
	margin-bottom: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.avatar {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.nickname {
		font-size: $u-h3;
	}
}

.body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 100rpx;
	margin: 40rpx 0;

	.title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.third-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32rpx;
}

.function-row {
	font-size: $u-p2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 300rpx;
}

.footer {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 20rpx;
	font-size: $u-p2;
	color: $u-content-color;
	.agreement {
		color: $u-theme-color;
	}
}
</style>