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 class="t2">内部报备系统，需登录后才能使用</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" v-if="isSelect">登录</u-button>
			<u-button class="bwin-btn-100 u-m-b-10" type="info" v-else disabled>请勾选同意协议内容</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 10rpx 0"></u-line>
			<button class="login-icon-item scoped-login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
		</view>
		
		<u-modal
			v-model="loginByWeixinModalShow"
			title="提示"
			content="未注册用户请先完成注册并绑定微信后再使用微信登录~"
			showCancelButton
			showConfirmButton
			confirmText="继续微信登录"
			@confirm="loginByWeixin()"
		></u-modal>
		<!-- #endif -->

		

		<view class="footer">
			<u-image v-if="isSelect" src="/static/icon_g_check01.png" @click="isSelect = false" mode="heightFix" height="30rpx" class="img"></u-image>
			<u-image v-else src="/static/icon_g_check02.png" @click="isSelect = true" mode="heightFix" height="30rpx" class="img"></u-image>
			我已阅读并同意
			<text class="agreement" @click="pageTo('/pages/agreement/agreement?type=user_agreement')">《用户协议》</text>
		</view>
	</view>
</template>

<script>
var that;
export default {
	data() {
		// 页面数据变量
		return {
			isSelect: false,
			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: {
		pageTo(path) {
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},
		getPhoneNumber (e) {
			const dtlObj = e.detail || {}
			let _that = this
			uni.login({
				success: function (res) {
					if (res.code) {
						uni.api.base.apiwxlogin({
							code: res.code,
							phone_code: dtlObj.code,
							iv: dtlObj.iv,
							encrypted_data: dtlObj.encryptedData,
						}).then(cData => {
							uni.setStorageSync('MD_token', cData.token)
							uni.setStorageSync('MD_userInfo', cData)
							uni.setStorageSync('MD_phone', cData.phone)
							uni.$msg('登录成功~')
							_that.getUserInfo()
						}).catch(err => {
							console.log(err)
						})
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
		},
		// 页面数据初始化函数
		async init(options = {}) {
			const username = uni.getStorageSync('MD_phone')
			this.form1.username = username
		},
		// 账密登录
		loginHandle() {
			const _that = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.api.base.apilogin({
						phone: this.form1.username,
						password: this.form1.password,
					}).then(res => {
						uni.setStorageSync('MD_userInfo', res)
						uni.setStorageSync('MD_phone', res.phone)
						uni.setStorageSync('MD_token', res.token)
						uni.$msg('登录成功~')
						_that.getUserInfo()
					})
				} 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();
			// 			});
			// 		});
			// 	}
			// });
		},
		getUserInfo () {
			uni.api.base.apiuserinfo().then(res => {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				uni.setStorageSync('MD_userInfo2', res)
			})
			uni.api.base.apidicttree().then(res => {
				const cObj = res || {}
				let newDict = {}
				for (let k in cObj) {
					const cArr = cObj[k].map(item => {
						return {
							...item,
							key: item.dict_label,
							val: item.dict_value
						}
					})
					newDict[k] = cArr
				}
				uni.setStorageSync('MD_dict', newDict)
			})
		},
		// 微信登录
		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;
	}
	.t2 {
		font-size: 24rpx;
		color: #999;
	}
}

.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: 20rpx;
}

.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;
	}
	.img {
		display: inline-block;
		margin-right: 10rpx;
	}
}

.scoped-login-btn {
	background: transparent;
	border: 0;
	outline:0px;
	-webkit-appearance: none;
	background: #13CE66;
	color: #fff;
	font-size: 28rpx;
	&::after {
		display: none;
	}
}

</style>