wlg/pages/public/login.vue

<template>
	<view class="container">
		<view class="top"><image src="../../static/img/login-bg.png" mode=""></image></view>
		<view class="logo">
			<view class="logo-img"><image src="../../static/img/logo.png" mode=""></image></view>
			<view class="logo-title">微乐购</view>
		</view>
		<view class="login-box">
			<view class="username"><image src="../../static/img/phone.png" mode=""></image></view>
			<view class="input-bbox">
				<input class="input-user" type="text" v-model="phone" placeholder="请输入账号" />
				<!-- <text class="select-box">
					<select class="select" @change="change($event)" ref='hhh'>
						<option value="1" @click="change">1</option>
						<option value="2">2</option>
					</select>
				</text> -->
			</view>
		</view>
		<view class="login-box">
			<view class="username" style="width: 30rpx; height: 36rpx;"><image src="../../static/img/zfpwd.png" mode=""></image></view>
			<input class="input-box" type="password" v-model="password" placeholder="请输入密码" />
		</view>

		<view class="login" @click="toLogin">登录</view>
		<view class="forget flex">
			<view @click="navTo('/pages/public/forget')">忘记密码</view>
			<view class="shu"></view>
			<view class="login-tip"><text class="register" @click="navTo('/pages/public/register')">立即注册</text></view>
		</view>
		<label class="two" @click="checkboxChange">
			<radio style="transform:scale(0.7)" color="#5dbc7c" :checked="istype" />
			我已阅读并同意
			<text @click.stop="navTo('/pages/contract/agreement')">《用户协议》</text>
			&nbsp
			<text @click.stop="navTo('/pages/contract/privacy')">《隐私政策》</text>
		</label>
		<!-- <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('weixin')"><image src="/static/img/login-weixin.png"></image></view>
		<view class="weixin_text" @click="wecahtLogin('weixin')">微信登录</view> -->
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<!-- <block v-if="!is_ios">
			<view class="weixin" @click="wecahtLogin('weixin')"><image src="/static/img/login-weixin.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/static/icon/appleIcon.png" mode=" scaleToFill"></image>
				<text class="weixin_text">通过Apple登录</text>
			</view>
		</block> -->
		<!-- #endif -->
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { login, loginWx } from '@/api/login.js';
import { getUserInfo } from '@/api/user.js';
import { getFileIndex, getFile, writerTxt, getFileText } from '@/utils/fileController.js';
// #ifdef H5
import { loginWinxin } from '@/utils/wxAuthorized';
// #endif
export default {
	data() {
		return {
			phone: '',
			password: '',
			istype: false,
			// #ifdef APP-PLUS
			is_ios: false, //判断是否为ios手机
			is_apple_login: false //是否有ios授权登录功能
			// #endif
		};
	},
	onLoad() {
		uni.hideLoading();
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'login']),
		checkboxChange() {
			this.istype = !this.istype;
			console.log(this.istype);
		},
		change(e) {
			this.phone = e.target.value;
		},
		//登录
		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) {
					console.log(e, 'e12345678989789');
					uni.getUserInfo({
						provider: type,
						success(es) {
							console.log(es, 'es123456789');
							if (type === 'weixin') {
								console.log('weixin');
								loginWx(es.userInfo)
									.then(e => {
										uni.showLoading({
											title: '登录中'
										});
										console.log(e, '123456');
										uni.setStorageSync('token', e.data.token);
										getUserInfo({}).then(e => {
											obj.login();
											// 保存返回用户数据
											obj.setUserInfo(e.data);
											uni.hideLoading();
											//成功跳转首页
											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() {
			uni.showLoading({
				title: '正在登陆中'
			});
			let obj = this;
			obj.logining = true;
			if (obj.phone == '') {
				obj.$api.msg('请输入账号');
				return;
			}
			if (obj.password == '') {
				obj.$api.msg('请输入密码');
				return;
			}
			if (!obj.istype) {
				obj.$api.msg('请查看并同意用户协议和隐私政策');
				return;
			}
			login({
				account: obj.phone,
				password: obj.password
			})
				.then(function(e) {
					uni.setStorageSync('token', e.data.token);
					getUserInfo({}).then(e => {
						obj.login();
						//#ifdef APP-PLUS
						getFileIndex().then(info => {
							getFile(info, 'userInfo').then(data => {
								writerTxt(data, e.data);
							});
						});
						//#endif
						// 保存返回用户数据
						obj.setUserInfo(e.data);

						uni.switchTab({
							url: '/pages/index/index'
						});
					});
					uni.hideLoading();
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 后退
		navBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
}
.top {
	width: 750rpx;
	height: 470rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.logo {
	position: absolute;
	left: 50%;
	right: 0;
	top: 110rpx;
	margin-left: -80rpx;
	.logo-img {
		width: 160rpx;
		height: 160rpx;
		box-shadow: 0px 12rpx 13rpx 0px rgba(51, 145, 255, 0.47);
		border-radius: 50%;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.logo-title {
		width: 160rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		margin-top: 10rpx;
	}
}
.loginTitle {
	font-weight: bold;
	color: #333333;
	font-size: 58rpx;
	padding-bottom: 34rpx;
}
.loginText {
	font-weight: 500;
	color: #333333;
	font-size: 34rpx;
	padding-bottom: 34rpx;
}
.login-box {
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px solid #eeeeee;
	margin: 90rpx 72rpx 0;
	padding-bottom: 28rpx;
	.username {
		width: 26rpx;
		height: 43rpx;
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		flex-shrink: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.input-box {
		margin-left: 40rpx;
		width: 100%;
	}
	.input-bbox {
		margin-left: 40rpx;
		width: 100%;
		position: relative;
		.input-user {
			background: #ffffff;
			position: absolute;
			z-index: 10;
			top: 0;
			left: 0;
			width: 90%;
		}
		.select-box {
			background: #ffffff;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			.select {
				background: #ffffff;
				outline: none;
				height: 100%;
				border: none;
				width: 100%;
			}
		}
	}
}
.forget {
	justify-content: center;
	text-align: right;
	margin: 36rpx 0rpx;
	font-weight: 500;
	color: #1dcbe4;
	font-size: 28rpx;
	.mui-checkbox {
		font-weight: 500;
		color: #333333;
		font-size: 35rpx;
	}
	.shu {
		height: 26rpx;
		width: 1px;
		background-color: #1dcbe4;
		margin: 0 10rpx;
	}
}
.login {
	margin: 100rpx auto 0;
	width: 604rpx;
	height: 90rpx;
	background: #08d29b;
	box-shadow: 0px 12rpx 13rpx 0px rgba(51, 145, 255, 0.2);
	border-radius: 10rpx;
	font-size: 34rpx;
	font-family: SourceHanSansCN;
	font-weight: 400;
	color: #ffffff;
	line-height: 90rpx;
	text-align: center;
}
.login-tip {
	text-align: center;
	font-weight: 500;
	color: #333333;
	font-size: 28rpx;
	.register {
		color: #08d29b;
	}
}
.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;
}
.two {
	margin: 20rpx 40rpx;
	font-size: 28rpx;
	text-align: center;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	text {
		color: #5dbc7c;
	}
}
</style>