high-mini/pages/login/login.vue

<template>
	<view>
		<view class="logo">
			<view class="img">
				<image mode="widthFix" src="../../static/img/logo2.jpg">
				</image>
			</view>
		</view>
		<!-- 账号密码输入框 -->
		<view class="form">
			<view class="username">
				<image src="../../static/img/phone.png" style="width: 40rpx;height: 40rpx;"></image> <input
					placeholder="请输入账号" v-model="phoneNumber" placeholder-style="color: #333333;" />
			</view>
			<view class="password">
				<image src="../../static/img/pas.png" style="width: 40rpx;height: 40rpx;"></image><input
					placeholder="请输入密码" v-model="passwd" password=true placeholder-style="color: #333333;" />
			</view>
			<view class="btn mart50" @tap="doLogin">登 录</view>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	import {
		userLogin
	} from "../../Utils/Api.js";
	let app = getApp();
	export default {
		data() {
			return {
				phoneNumber: '',
				passwd: '',
				isShowOauth: false,
				showProvider: {
					weixin: false,
					qq: false,
					sinaweibo: false,
					xiaomi: false
				},
				typeId: ''
			}
		},
		onShow() {
			let that = this;
			uni.getStorage({
				key: 'phoneNum',
				success(e) {
					that.phoneNumber = e.data;
				}
			})
			uni.getStorage({
				key: 'pasNum',
				success(e) {
					that.passwd = e.data;
				}
			})
		},
		onLoad(options) {
			let that = this;
			that.typeId = options.id;
			if (that.typeId == 1) {
				uni.setNavigationBarTitle({
					title: '门店登录'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '代理商登录'
				})
			}


			//APP显示第三方登录
			// #ifdef APP-PLUS
			that.isShowOauth = true;
			// #endif
			that.getProvider();

		},
		methods: {
			oauthLogin(provider) {
				uni.showLoading();
				//第三方登录
				uni.login({
					provider: provider,
					success: (loginRes) => {
						console.log("success: " + JSON.stringify(loginRes));
						//案例直接获取用户信息，一般不是在APP端直接获取用户信息，比如微信，获取一个code，传递给后端，后端再去请求微信服务器获取用户信息
						uni.getUserInfo({
							provider: provider,
							success: (infoRes) => {
								console.log('用户信息：' + JSON.stringify(infoRes.userInfo));
								uni.setStorage({
									key: 'UserInfo',
									data: {
										username: infoRes.userInfo.nickName,
										face: infoRes.userInfo.avatarUrl,
										signature: '个性签名',
										integral: 0,
										balance: 0,
										envelope: 0
									},
									success: function() {
										uni.hideLoading()
										uni.showToast({
											title: '登录成功',
											icon: "success"
										});
										setTimeout(function() {
											uni.navigateBack();
										}, 300)
									}
								});
							}
						});
					},
					fail: (e) => {
						console.log("fail: " + JSON.stringify(e));
					}
				});
			},
			getProvider() {
				//获取第三方登录服务
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						let len = res.provider.length;
						for (let i = 0; i < len; i++) {
							//有服务才显示按钮图标
							this.showProvider[res.provider[i]] = true;
						}
						if (res.provider.length == 0) {
							this.isShowOauth = false;
						}
					}
				});
			},
			toPage(page) {
				uni.hideKeyboard()
				uni.navigateTo({
					url: page
				});
			},
			doLogin() {
				uni.hideKeyboard();
				if (this.phoneNumber == '') {
					uni.showToast({
						title: '请填写账号',
						icon: "none"
					});
					return false;
				} else if (this.passwd == '') {
					uni.showToast({
						title: '请填写密码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '登录中...'
				})
				let datas = {
					"loginName": this.phoneNumber,
					"password": this.passwd
				}
				userLogin(datas).then(res => {
					if (res.return_code == '000000') {
						uni.setStorage({
							key: "phoneNum",
							data: this.phoneNumber
						})
						uni.setStorage({
							key: "pasNum",
							data: this.passwd
						})
						uni.hideLoading();
						if (this.typeId == 1) {
							uni.navigateTo({
								url: '../user/business/business'
							})
						} else {
							uni.navigateTo({
								url: '/pages/user/minePromotion/minePromotion'
							})
						}
						app.globalData.brestUserInfo = res.return_data.object.secUser;
						app.globalData.brestToken = res.return_data.uniqueCode;
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	.form {
		.res {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: rgba($color: #ffffff, $alpha: 0.8);
		}
	}

	.oauth {
		@media all and (max-height:150vw) {
			display: none;
		}

		position: absolute;
		bottom: 50upx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333333;
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}
</style>