xiyi/pages/public/login.vue

<template>
	<view class="container">
		
		<!-- <view class="loginTitle"><text>登录</text></view> -->
		<view class="tit">
			宏涤品牌欢迎您
		</view>
		<view class="tit1">
			注册登录账号即可查看更多精彩资讯
		</view>
		<!-- <view class="warp">
			<view class="nav flex nav1">
				<view class="item action">
					账号登录
				</view>
				<view class="item item1">
					注册账号
				</view>
			</view>
		</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" 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" 
						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">
				<!-- #ifdef H5 -->
				<!-- <view class="forget" style="text-align: left;" @click="goDown">下载APP</view> -->
				<!-- #endif -->
				<view class="forget">
					<navigator url="/pages/set/password">忘记密码</navigator>
				</view>
			</view>
			<!-- <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">
					<image src="/static/img/img05.png" mode="scaleToFill"></image>
				</view>
				<view class="weixin_text" @click="wecahtLogin">微信登录</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,
		getAppInfo
	} 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 {
				deviceId: '',
				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

			this.getDeviceMac()
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			goDown() {
				getAppInfo().then(res => {
					console.log(res)
					window.open(res.data.app_down)
				})
			},
			//获取设备的mac地址
			getDeviceMac() {
				let obj = this
				// #ifdef APP-PLUS
				let oaid = uni.getStorageSync('oaid')
				console.log('取值', oaid)
				if (oaid) {
					obj.deviceId = oaid
				} else {
					plus.device.getOAID({
						success: function(e) {
							obj.deviceId = e.oaid
							uni.setStorageSync('oaid', e.oaid)
							console.log('uuid', e.oaid)
						},
						fail: function(e) {
							console.log('getDeviceInfo failed: ' + JSON.stringify(e));
						}
					});
				}


				// #endif
				// #ifdef H5
				uni.getSystemInfo({
					success(e) {
						obj.deviceId = e.deviceId
					},
					fail(err) {
						console.log(err)
					}
				})
				// #endif
			},

			// 微信登录
			wecahtLogin(type) {
				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') {
									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);
										});
								}

							},
							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,
						deviceId: obj.deviceId
					})
					.then(function(e) {
						uni.setStorageSync('token', e.data.token);
						obj.$store.commit('login', 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">
	.tit {
		font-weight: 800;
		font-size: 50rpx;
		color: #FFFFFF;
		padding: 240rpx 0 40rpx 60rpx;
	}
	.tit1 {
		font-size: 30rpx;
		color: #FFFFFF;
		padding: 0 0 75rpx 60rpx;
		
	}
	/* #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%;
		background: #FFFFFF;
	}

	.container {
		width: 100%;
		height: 100%;
		background-size: 100%;
		background: linear-gradient($base-color 40%,#ffffff,#ffffff);
	}


	.login_text {
		margin: auto 30rpx;
		position: relative;
		padding: 100rpx 102rpx;
		background-color: #ffffff;
		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: $base-color;
			margin: 40rpx 10rpx;
			border-radius: 50rpx;
		}

		.uni-button-green-plain {
			border: 1px solid $base-color;
			margin: 40rpx 10rpx;
			border-radius: 50rpx;
			color: $base-color;
			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;
	}
	.warp {
		width: 674rpx;
		border-radius: 50rpx 50rpx 0 0;
		border: 1px solid #ffffff;
		// overflow: hidden;
		margin: auto;
		// background-image: radial-gradient(farthest-corner at 50% 0%, $base-color, #fff);
		.nav {
			text-align: center;
			.item {
				line-height: 107rpx;
				// border: 1px solid #ffffff;
				flex-grow: 1;
				border-radius: 50rpx 0 0 0;
				background: linear-gradient(to right top,#ffffff,$base-color);
				// border-right: none;
			}
			.item1 {
				border-radius: 0 50rpx 0 0;
				background: linear-gradient(to right bottom,$base-color,#ffffff);
				border-left: none;
			}
			// .action {
			// 	background: #fff;
			// 	border-radius: 50rpx 50rpx 0 0;
			// }
		}
		.nav1 {
			.item {
					background: #fff;
					border-radius: 50rpx 50rpx 0 0;
			}
			.item1 {
				// background: none;
				background: linear-gradient(to right bottom,$base-color,#ffffff);
				border-radius: 0rpx 50rpx 0 50rpx;
			}
		}
	}
</style>