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

<template>
	<view class="container">
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="微信授权"></u-navbar>
		<view class="flex login">
			<view class="flex login-image">
				<image src="../../static/logo.png" mode=""></image>
				<view class="login-image-txt">盲票</view>
			</view>
			<view class="login-txt">盲票将为您提供</view>
			<view class="login-title">商品兑换、盲票购买等服务 请先完成授权登录</view>
			<view class="login-btn">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>
			</view>
		</view>

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

<script>
	import $http from '@/utils/request.js'
	import log from '@/common/log.js'
	import Auth from '../../components/auth/auth.vue'
	export default {
		components: {
			Auth
		},
		data() {
			return {
				authShow: false,
				token: '',
			};
		},
		methods: {
			getPhoneNumber(e) {
				let _this = this
				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
						}).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
								}).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 }.===`)
									  }
									})
								})
							}
						})
					}
				}
			},

			// 关闭授权
			authClose() {
				this.authShow = false
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 500)
			},

			getBaseInfo() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).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();
				})
			},
		}
	}
</script>

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

	.login {
		flex-direction: column;

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

			image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 10rpx;
				margin-bottom: 14rpx;
			}

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

		}

		&-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 {
			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;
			}
		}
	}
</style>