mp-ui-user/src/pages/login/index.vue

<template>
	<view class="container">
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录" leftIconSize="0"></u-navbar>
		<!-- #endif -->

		<!-- #ifndef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录"></u-navbar>
		<!-- #endif -->

		<view class="flex login">
			<view class="flex login-image">
				<image src="../../static/public/logo.png" mode="scaleToFill"></image>
				<view class="login-image-txt" v-if="appId == 2">码上兑券</view>
				<view class="login-image-txt" v-else>盲票</view>
			</view>
			<!-- #ifdef MP-ALIPAY -->
			<view class="login-btn">
				<button open-type="getAuthorize" @getAuthorize="onGetAuthorize" scope='phoneNumber'>支付宝登录</button>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<view class="login-btn">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="checked">微信登录</button>
				<button @click="getPhoneNumber" v-else>微信登录</button>
			</view>
			<!-- #endif -->
			<view class="flex login-code" @click="toCode">手机号登录/注册</view>
		</view>

		<view class="footer-fixed">
			<view class="flex about">
				<view class="checked">
					<u-checkbox-group>
						<u-checkbox :value="checked" :checked="checked" size="20" shape="circle" activeColor="#E96737"
							@change="changeChecked"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="txt">登录代表您已同意</view>
				<navigator hover-class="none" class="txt-about" url="/packageOther/about/protect">《用户使用协议》</navigator>
				<navigator hover-class="none" class="txt-about" url="/packageOther/about/conceal">、《隐私保护声明》</navigator>
			</view>
		</view>

		<auth :auth-show="authShow" :auth-token="token" @close="authClose" @fail="fail" />
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	import log from '@/common/log.js'
	import appId from '@/config/appId.js'
	import Auth from '../../components/auth/auth.vue'
	export default {
		components: {
			Auth
		},
		data() {
			return {
				authShow: false,
				token: '',
				checked: true,
				appId: 1,
			};
		},
		created() {
			this.appId = appId
		},
		methods: {
			getPhoneNumber(e) {
				let _this = this
				if (!_this.checked) {
					uni.$u.toast('请阅读并勾选底部协议');
					return
				}
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '登录中'
					});
					if (e.detail & e.detail.code) {
						$http.post('/api/v1/mp/user/wxauth/mobile', {
							...e.detail,
							identity: 1,
							noToken: true,
							appSource: appId,
						}).then(res => {
							uni.hideLoading();
							if (res.code == 0) {
								uni.setStorageSync('token', res.token)
								_this.getBaseInfo()
							} else {
								uni.getSystemInfo({
									success(res) {
										log.info(
											`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
										)
									}
								})
							}
						}).catch(() => {
							uni.hideLoading();
							uni.getSystemInfo({
								success(res) {
									log.info(
										`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
									)
								}
							})
						})
					} else {
						uni.login({
							success(res) {
								$http.post('/api/v1/mp/user/wxauth/mobile', {
									...e.detail,
									loginCode: res.code,
									identity: 1,
									noToken: true,
									appSource: appId,
								}).then(res => {
									uni.hideLoading();
									if (res.code == 0) {
										uni.setStorageSync('token', res.token)
										_this.getBaseInfo()
									} else {
										uni.getSystemInfo({
											success(res) {
												log.info(
													`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
												)
											}
										})
									}
								}).catch(() => {
									uni.hideLoading();
									uni.getSystemInfo({
										success(res) {
											log.info(
												`错误信息：===基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system }.===`
											)
										}
									})
								})
							}
						})
					}
				}
			},
			//拒绝授权
			fail() {
				this.authShow = false
			},
			// 关闭授权
			authClose() {
				this.authShow = false
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 500)
			},

			changeChecked(e) {
				this.checked = e
			},

			toCode() {
				if (!this.checked) {
					uni.$u.toast('请阅读并勾选底部协议');
					return
				}
				uni.navigateTo({
					url: '/pages/login/code'
				})
			},

			getBaseInfo() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data)
						if (res.data.openId) {
							uni.$u.toast('登录成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						} else {
							this.authShow = true
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			getBaseInfoAli() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data)
						if (res.data.aliuserId) {
							uni.$u.toast('登录成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						} else {
							this.authShow = true
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			onGetAuthorize(e) {
				let _this = this
				if (!_this.checked) {
					uni.$u.toast('请阅读并勾选底部协议');
					return
				}
				my.getPhoneNumber({
					success: (res) => {
						uni.showLoading({
							title: '登录中'
						});
						$http.post('/api/v1/mp/user/aliAuth/mobile', {
							encryptedData: res.response,
							identity: 1,
							noToken: true
						}).then(res => {
							if (res.code == 0) {
								uni.setStorageSync('token', res.token)
								_this.getBaseInfoAli()
							} else {
								uni.hideLoading();

							}
						})
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100%;
	}

	.login {
		flex-direction: column;

		&-image {
			flex-direction: column;
			padding: 128rpx 0 200rpx;

			image {
				width: 296rpx;
				height: 296rpx;
				margin-bottom: 28rpx;
			}

			&-txt {
				text-align: center;
				line-height: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				font-size: 28rpx;
			}

		}

		&-txt {
			text-align: center;
			line-height: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		&-title {
			text-align: center;
			font-size: 24rpx;
			font-weight: normal;
			margin-bottom: 50rpx;
		}

		&-btn {
			margin-bottom: 44rpx;

			button {
				width: 600rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background-color: rgba(235, 112, 9, 100);
				color: rgba(255, 255, 255, 100);
				text-align: center;
				font-size: 28rpx;
			}
		}

		&-code {
			text-align: center;
			color: rgba(242, 113, 32, 100);
		}
	}

	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		background: #fff;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.about {
			padding: 60rpx 0;
			font-size: 24rpx;

			.txt-about {
				color: #007aff;
			}
		}
	}
</style>