xihaigou/pages/public/login.vue

<template>
	<view class="container">
		<view class="container_text">
			<image class="banner-img" src="/static/img/img01.png" mode="scaleToFill"></image>
		</view>
		<view class="loginTitle"><text>登录</text></view>
		<view class="login_text">
			<view class="login_input flex">
				<view class="login_img">
					<image src="/static/icon/img03.png"></image>
				</view>
				<view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" />
				</view>
			</view>
			<view class="login_input flex">
				<view class="login_img">
					<image src="/static/icon/img04.png"></image>
				</view>
				<view class="login_name"><input class="uni-input" type="password" v-model="passward" focus
						placeholder="请输入密码" /></view>
			</view>
			<view><button type="green" class="uni-button uni-button-green" @click="toLogin">登录</button></view>
			<view><button type="green" class="uni-button uni-button-green uni-button-green-plain" plain="true"
					hover-class="none" @click="register">注册</button></view>
			<navigator url="./forget">
				<view class="forget">忘记密码</view>
			</navigator>
			<view class="flex other">
				<view class="fenge"></view>
				<view class="qita">其他方式登录</view>
				<view class="fenge"></view>
			</view>
			<!-- #ifndef APP-PLUS -->
			<view class="weixin" @click="wecahtLogin">
				<image src="/static/img/img05.png"></image>
			</view>
			<view class="weixin_text" @click="wecahtLogin">微信登录</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<block v-if="!is_ios">
				<view class="weixin" @click="wecahtLogin('weixin')">
					<image src="/static/img/img05.png" mode="scaleToFill"></image>
				</view>
				<view class="weixin_text" @click="wecahtLogin('weixin')">微信登录</view>
			</block>
			<block v-else>
				<view class="ios_login flex" @click="wecahtLogin('weixin')">
					<text class="iconfont iconweixin"></text>
					<text class="weixin_text">微信登录</text>
				</view>
				<view v-if='is_apple_login' class="ios_login flex" @click="wecahtLogin('apple')">
					<image class="loginIcon" src="/static/icon/appleIcon.png" mode=" scaleToFill"></image>
					<text class="weixin_text">通过Apple登录</text>
				</view>
			</block>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		login
	} from '@/api/login.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	// #ifdef APP-PLUS
	// applelogin接口需要开发编写，基础项目中可能没有
	import {
		applelogin
	} from '@/api/set.js';
	// loginWx接口需要开发编写，基础项目中可能没有
	import {
		loginWx
	} from '@/api/login.js';
	// #endif
	// #ifdef H5
	import {
		loginWinxin
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				username: '',
				passward: '',
				// #ifdef APP-PLUS
				is_ios: false, //判断是否为ios手机
				is_apple_login: false, //是否有ios授权登录功能
				// #endif
			};
		},
		onLoad() {
			let obj = this;
			// #ifdef APP-PLUS
			let system = uni.getStorageSync('platform');
			// 判断是否为ios
			if (system == 'ios') {
				obj.is_ios = true;
			}
			uni.getSystemInfo({
				success(e) {
					if (+e.system.split('.')[0] >= 13) {
						obj.is_apple_login = true;
					}
				}
			})
			// #endif
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			// 微信登录
			wecahtLogin(type) {
				console.log(type,'123456');
				let obj = this;
				// #ifdef H5
				let weichatBrowser = uni.getStorageSync('weichatBrowser');
				if (weichatBrowser) {
					loginWinxin();
				}
				// #endif
				// #ifdef APP-PLUS
				uni.login({
					provider: type,
					success(e) {
						uni.getUserInfo({
							provider: type,
							success(es) {
								if (type === 'weixin') {
								console.log(es,'123456789');
									loginWx(es.userInfo)
										.then(e => {
											uni.setStorageSync('token', e.data.token);
											getUserInfo({}).then(e => {
												obj.login();
												// 保存返回用户数据
												obj.setUserInfo(e.data);
												//成功跳转首页
												uni.switchTab({
													url: '/pages/index/index'
												});
											});
										})
										.catch(e => {
											console.log(e);
											uni.showModal({
												content: JSON.stringify(e),
												success() {},
												fail() {}
											});
										});
								}
								if (type === 'apple') {
									console.log(es.userInfo);
									applelogin({
											account: es.userInfo.openId,
										})
										.then(function(e) {
											console.log(e, 'token')
											uni.setStorageSync('token', e.data.token);
											getUserInfo({}).then(e => {
												obj.login();
												// 保存返回用户数据
												obj.setUserInfo(e.data);

												//成功跳转首页
												uni.switchTab({
													url: '/pages/index/index'
												});
											});

										})
										.catch(function(e) {
											console.log(e);
											uni.showModal({
												content: JSON.stringify(e),
										  success() {},
												fail() {}
											});
										});
								}
							},
							fail(es) {
								uni.showModal({
									content: JSON.stringify(es),
									success() {
										// obj.login();
										// // 保存返回用户数据
										// obj.setUserInfo(e.data);
										// //成功跳转首页
										// uni.switchTab({
										// 	url: '/pages/index/index'
										// });
									}
								});
							}
						});
					},
					fail(e) {
						uni.showModal({
							title: '提示',
							content: JSON.stringify(e),
							showCancel: false
						});
					}
				});
				// #endif
			},
			//登录
			async toLogin() {
				let obj = this;
				obj.logining = true;
				if (obj.username == '') {
					obj.$api.msg('请输入手机号');
					return;
				}
				if (obj.passward == '') {
					obj.$api.msg('请输入密码');
					return;
				}
				login({
						account: obj.username,
						password: obj.passward
					})
					.then(function(e) {
						uni.setStorageSync('token', e.data.token);
						obj.$store.commit('hasLogin', true);
						getUserInfo({}).then(e => {
							obj.login();
							// 保存返回用户数据
							obj.setUserInfo(e.data);
							let ur = uni.getStorageSync('present') || '/pages/index/index';
							//成功跳转首页
							uni.switchTab({
								url: ur,
								fail(e) {
									uni.navigateTo({
										url: ur,
										fail(e) {
											uni.navigateTo({
												url: '/pages/index/index',
											});
										}
									});
								}
							});
						});
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			//跳转注册页
			register() {
				uni.navigateTo({
					url: `/pages/public/register`
				});
			},
			// 后退
			navBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */

	.ios_login {
		width: 260rpx;
		border-radius: 12rpx;
		justify-content: center;
		border: 1px solid #212121;
		margin: 24rpx auto;
		padding: 10rpx;
		background-color: #212121;
		color: #ffffff;

		.loginIcon {
			width: 50rpx;
			height: 50rpx;
		}

		.weixin_text {
			line-height: 1;
			margin-left: 20rpx;
			color: #ffffff !important;
		}
	}

	/* #endif */
	.ios_login {
		width: 350rpx;
		border-radius: 12rpx;
		justify-content: center;
		border: 1px solid #212121;
		margin: 24rpx auto;
		padding: 15rpx;
		background-color: #212121;
		color: #ffffff;
		font-size: 32rpx;

		.loginIcon {
			font-size: 35rpx;
			width: 35rpx;
			height: 35rpx;
		}

		.weixin_text {
			line-height: 1;
			margin-left: 20rpx;
			color: #ffffff !important;
		}
	}

	page {
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-size: 100%;
	}

	.container_text {
		width: 100%;
		height: 500rpx;
		top: 0rpx;

		.banner-img {
			width: 100%;
			height: 100%;
		}
	}

	.login_text {
		margin: auto 30rpx;
		position: relative;
		padding: 100rpx 102rpx;
		background-color: #ffffff;
		margin-top: -180rpx;
		border-radius: 20rpx;

		.login_input {
			border-bottom: 1px solid #f0f0f0;
			margin-bottom: 65rpx;

			.login_img image {
				height: 35rpx;
				width: 29rpx;
				margin-right: 20rpx;
			}

			.uni-input {
				text-align: left;
				width: 470rpx;
				font-size: 28rpx !important;
			}

			.login_name {
				color: #333333;
			}
		}

		.other {
			margin-top: 60rpx;

			.fenge {
				width: 30%;
				height: 2rpx;
				background-color: #eeeeee;
			}

			.qita {
				font-size: 28rpx;
				color: #999999;
			}
		}

		.weixin {
			width: 75rpx;
			height: 75rpx;
			margin: 25rpx auto;
		}

		.weixin image {
			width: 100%;
			height: 100%;
		}

		.weixin_text {
			text-align: center;
			font-size: 28rpx;
			color: #999999;
		}

		.forget {
			font-size: 28rpx;
			width: 100%;
			text-align: right;
			color: #999999;
		}

		.uni-button-green {
			color: #ffffff;
			background-color: #5dbc7c;
			margin: 40rpx 10rpx;
			border-radius: 50rpx;
		}

		.uni-button-green-plain {
			border: 1px solid #5dbc7c;
			margin: 40rpx 10rpx;
			border-radius: 50rpx;
			color: #5dbc7c;
			background-color: #ffffff;
		}

		.uni-button {
			height: 85rpx;
			line-height: 85rpx;
		}
	}

	.loginTitle {
		position: absolute;
		top: 250rpx;
		width: 100%;
		text-align: center;
		color: white;
		font-size: 40rpx;
	}
</style>