dati/pages/auth/login/index.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head" v-if="mode == 3">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left">
					<view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
				</view>
			</view>
			<view class="kaoshi-logo">
				<image :src="static_media.img01" class="kaoshi-logo-img"></image>
			</view>
			<view class="kaoshi-login">
				<view class="kaoshi-login-content">
					<view class="kaoshi-login-title">
						<view
							:class="{ 'kaoshi-login-title-active': form_type == 0, 'kaoshi-login-title-other': form_type != 0 }"
							@tap="form_type = 0">登录
						</view>
						<view
							:class="{ 'kaoshi-login-title-active': form_type == 1, 'kaoshi-login-title-other': form_type != 1 }"
							@tap="form_type = 1">注册
						</view>
					</view>
					<view v-if="form_type == 0" class="kaoshi-input-group">
						<view class="kaoshi-input-row border kaoshi-login-flex">
							<text class="iconfont icon-shouji"></text>
							<m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入账号"
								style="flex: 1;"></m-input>
						</view>
						<view class="kaoshi-input-row kaoshi-login-flex ">
							<text class="iconfont icon-suo"></text>
							<m-input type="password" displayable v-model="password" placeholder="请输入密码"
								style="flex: 1;"></m-input>
						</view>
					</view>
					<view v-if="form_type == 1" class="kaoshi-input-group">
						<view class="kaoshi-input-row border kaoshi-login-flex">
							<text class="iconfont icon-shouji"></text>
							<m-input type="text" clearable v-model="account" placeholder="请输入用户名" style="flex: 1;">
							</m-input>
						</view>
						<view class="kaoshi-input-row kaoshi-login-flex">
							<text class="iconfont icon-suo"></text>
							<m-input type="password" displayable v-model="password" placeholder="请输入密码"
								style="flex: 1;"></m-input>
						</view>
					</view>
					<view class="kaoshi-login-forget">
					</view>
					<view style="font-size: 14px;color: #888;margin: 40px auto 17px;text-align: center;">暂不登录，<text
							style="color: #3b7bf9;" @tap="toMain">随便逛逛</text></view>
					<view class="kaoshi-login-button" v-if="form_type == 0">
						<button type="primary" class="kaoshi-primary" @tap="bindLogin">登录</button>
					</view>
					<view class="kaoshi-login-button" v-if="form_type == 1">
						<button type="primary" class="kaoshi-primary" @tap="creaet_user">注册</button>
					</view>
				</view>
			</view>
		</view>

		<view v-else>
			<view class="layout">
				<view class="kaoshi-logo" style="margin-top: 30px;">
					<image :src="static_media.img01" class="kaoshi-logo-img"></image>
				</view>
				<button style="margin-top: 80px;" v-if="canIUseGetUserProfile" @tap="getUserProfile" class="ydy-button">
					立即登录</button>
				<button v-else open-type="getUserInfo" lang="zh_CN" @getuserinfo="passive_authorize"
					class="ydy-button">立即登录
				</button>
				<view @tap="cancel" style="font-size:15px;color: #8a8a8a;margin-top:9px;">取消登录</view>
				<view class="ydy-b">您需要授权才能正常使用此功能，我们承诺您的信息只应用在本平台，不做其他无关使用。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import mInput from "@/components/m-input.vue";

	export default {
		components: {
			mInput,
		},
		data() {
			return {
				recommend: '',//邀请人Uid
				source: '',//邀请人ABCDE
				mode: 1, //程序编译版本：mode：3为账号密码登录
				Shouquan: false,
				showmodal: false,
				account: "",
				password: "",
				form_type: 0, // 0 登录；1 注册
				rawData: {},
				canIUseGetUserProfile: false, //小程序更改授权方式  2021年5月17日   不再使用get-authorize组件
			};
		},
		computed: {
			...mapState(["userinfo", "forcedLogin", "subject"]),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/login.png'
				}
			}
		},
		onLoad(opts) {
			this.mode = this.$myConfig.mode
			if (opts && opts.form_type) {
				this.form_type = opts.form_type
			}
			if (this.userinfo && this.userinfo.token) {
				this.toMain()
			}
			//小程序更改授权方式  2021年5月17日   不再使用get-authorize组件
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
			// #ifdef H5
			if(opts.recommend) {
				this.recommend = opts.recommend
				uni.setStorageSync('recommend',opts.recommend)
			}else {
				this.recommend = uni.getStorageSync('recommend') || ''
			}
			if(opts.source) {
				this.source = opts.source
				uni.setStorageSync('source',opts.source)
			}else {
				this.source = uni.getStorageSync('source') || ''
			}
			// #endif
			
			// #ifdef MP
			this.recommend = uni.getStorageSync('spread_code') || ''
			// #endif
		},
		onShow() {
		},
		methods: {
			
			async creaet_user() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.account.length < 2) {
					uni.showToast({
						icon: "none",
						title: "账号最短为 2 个字符"
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: "none",
						title: "密码最短为 6 个字符"
					});
					return;
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.register,
					data: {
						username: this.account,
						password: this.password,
						source: this.source,
						recommend: this.recommend
					}
				});

				if (res.code === 1) {
					this.$myUtils.$prompt.showToast({
						icon: "none",
						title: "注册成功"
					});
					const data = {
						account: this.account,
						password: this.password
					};
					const valid = await this.$myUserLogin.login(data);
					if (valid) {
						//如果已经选择了科目，直接进入首页，否者进入选择科目页面
						this.toMain();
					}
				}
			},
			async bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.account.length < 2) {
					uni.showToast({
						icon: "none",
						title: "账号最短为 2 个字符"
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: "none",
						title: "密码最短为 6 个字符"
					});
					return;
				}
				const data = {
					account: this.account,
					password: this.password
				};
					const valid = await this.$myUserLogin.login(data);
				
				
				if (valid) {
					//如果已经选择了科目，直接进入首页，否者进入选择科目页面
					this.toMain();
				}else {
					
				}
			},

			//小程序更改授权方式  2021年5月17日  不再使用get-authorize组件
			getUserProfile(e) {
				let that = this,
					code = '';
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res.errMsg == "login:ok") {
							code = res.code
						}
					}
				});
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						if (res.errMsg == "getUserProfile:ok") {
							this.bindGetUserInfo({
								code,
								...res
							});
						}
					}
				})
			},
			cancel() {
			 uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * 被动授权
			 * */
			passive_authorize(params) {
				uni.showLoading();
				if (params.detail) {
					if (params.detail.errMsg == 'getUserInfo:ok') {
						this.getLoginCode();
					}
				}
			},
			/**
			 * 获取微信登录code
			 * */
			getLoginCode() {
				let that = this;
				console.log('根据获取到的用户信息处理业务代码');
				//接下来写业务代码
				uni.login({
					provider: 'weixin',
					success: function(res) {
						// console.log(res)
						if (res.errMsg == "login:ok") {
							that.getUserInfo(res);
						}
					}
				});
			},
			/**
			 * 获取到用户信息
			 * */
			getUserInfo(loginCode) {
				let that = this;
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success(res) {
						console.log('获取用户信息成功');
						uni.hideLoading();

						//此处得到userInfo
						if (res.errMsg == 'getUserInfo:ok') {
							//接下来写业务代码
							that.bindGetUserInfo({
								...loginCode,
								...res
							});
						}

					},
					fail() {
						console.log('获取用户信息失败');
					}
				});
			},
			/**
			 * 添加用户到后台数据库中
			 * */
			async bindGetUserInfo(params) {
				let that = this
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.authMini,
					data: {
						code: params.code,
						rawData: params.rawData,
						recommend: that.recommend
					},
					permission: '',
					need_login: false,
				});

				if (res.code == 1) {
					uni.hideLoading();

					// 注册用户成功
					// 保存用户信息
					let userinfo = {
						'user_id': res.data.user_id,
						'group_id': res.data.group_id,
						avatarUrl: params.userInfo.avatarUrl,
						city: params.userInfo.city,
						country: params.userInfo.country,
						gender: params.userInfo.gender,
						language: params.userInfo.language,
						nickName: params.userInfo.nickName,
						province: params.userInfo.province,
						expTime: 0,
						token: res.data.token,
					};

					this.$store.commit('setUserInfo', {
						userinfo: {
							...userinfo,
							token: res.data.token
						}
					});
					uni.showToast({
						icon: 'success',
						title: '登录成功'
					})
					this.$myUtils.$router.switchTab({
						url: "/pages/index/index"
					});
				} else {
					this.canIUse = wx.canIUse('button.open-type.getUserInfo');
				}
			},
			// async toMain() {
			//     // 判断是否选择了科目
			//     if (this.subject && this.subject.id && this.subject.id !== 0) {
			//         // 进入首页
			// 		await this.$myUserLogin.getSubvip(this.subject.id)
			//         this.$myUtils.$router.switchTab({
			//             url: "/pages/index/index"
			//         });
			//     } else {
			//         // 进入选择科目
			//         this.$myUtils.$router.navigateTo({
			//             url: "/pages/auth/choiceSubject/index"
			//         });
			//     }
			// },
			toMain() {
				// 判断是否选择了科目
				if (this.subject && this.subject.id && this.subject.id !== 0) {
					// 进入首页
					this.$myUtils.$router.switchTab({
						url: "/pages/index/index"
					});
				} else {
					// 进入选择科目
					this.$myUtils.$router.navigateTo({
						url: "/pages/auth/choiceSubject/index"
					});
				}
			},
		}
	};
</script>

<style>
	page {
		background: #f9fafe;
	}

	.kaoshi-head {
		border-bottom: none;
		background: #f9fafe
	}

	.kaoshi-logo {
		text-align: center;
	}

	.kaoshi-logo-img {
		width: 156px;
		height: 156px;
		margin-top: 25px;
	}

	.kaoshi-login {
		width: 90%;
		margin: 0 auto;
		background: #f9fafe;
	}

	.kaoshi-login-content {
		margin-top: 22px;
		margin-right: 22px;
		margin-left: 22px;
	}

	.kaoshi-login-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		width: 44%;
		margin: 0 auto 18px;
		line-height: 42px;
	}

	.kaoshi-login-title-active {
		border-bottom: solid 2px #3c7bfc;
		width: 30%;
		text-align: center;
		color: #000;
		font-weight: bold;
	}

	.kaoshi-login-title-other {
		border-bottom: solid 2px transparent;
		text-align: center;
		width: 30%;
		color: #888;
	}

	.kaoshi-login-flex {
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.kaoshi-login-button {
		margin-top: 15px;
	}

	.kaoshi-login-forget {
		color: #000;
		font-size: 14px;
		margin: 12px 0;
	}

	.kaoshi-input-group {
		margin-top: 4px;
	}

	.kaoshi-input-group::before {
		background-color: #fff;
	}

	.kaoshi-input-row {
		background-color: #fff;
		margin-top: 15px;
		padding: 0 15px;
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	}

	.kaoshi-input-group::after,
	.kaoshi-input-row.border::after {
		background-color: #f6f7f9 !important;
	}


	.kaoshi-primary {
		width: 175px;
		background: #3c7bfc !important;
		color: #fff !important;
		border-radius: 8px;
		font-size: 14px;
		box-shadow: 0 2px 11px rgba(0, 100, 204, 0.27);
		line-height: 35px;
	}

	.kaoshi-yanzheng {
		width: 81px;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		color: #fff;
		background: #3c7bfc;
		text-align: center;
		border-radius: 16px 16px 16px 0;
	}

	.kaoshi-password {
		text-align: right;
		color: #7d7d7d;
	}

	.border {
		border-bottom: solid 1px #fbfbfb;
	}

	.kaoshi-xieyi {
		font-weight: bold;
		text-decoration: underline;
		color: #3c7bfc;
	}

	.kaoshi-xieyi-flex {
		font-size: 13px;
		display: flex;
		align-items: center;
		color: #cecece;
		margin-top: 5px
	}

	.kaoshi-xieyi-check {
		transform: scale(0.7);
		color: #4c8cf8
	}

	.kaoshi-xieyi-text {
		color: #000;
		display: flex;
		align-items: center;
	}

	.layout {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.ydy {
		width: 90%;
		height: 325px;
		margin: 0 auto;
	}

	.ydy-button {
		background: #3c7bfc;
		width: 82%;
		margin: 0 auto;
		text-align: center;
		font-size: 17px;
		padding: 3px;
		color: #fff;
		border-radius: 5px;
		letter-spacing: 2px;
	}

	.ydy-b {
		font-size: 13px;
		width: 83%;
		color: #888888;
		text-align: center;
		margin-top: 17px;
		line-height: 19px;
	}

	.icon-suo,
	.icon-shouji {
		color: #0f74c6;
		margin-right: 5px;
	}
</style>