yunxinwei-uniapp/pages/login/login.vue

<template>
	<view class="ws-page">
		<view class="logo">
			<image src="../../static/logo.png" mode="widthFix"></image>
		</view>
		<!-- 支付宝授权手机号一键登录 -->
		<view class="alipay-auth">
			<button @click="login" :disabled="loding">支付宝授权一键登录</button>
		</view>
		<!-- 手机号登录 -->
		<view class="mobile-auth">
			<button @click="loginByUserName">账号登录</button>
		</view>
		<!-- <view class="xieyi">
			<checkbox-group @change="onAgree" style="display: flex; align-items: center;">
				<checkbox :checked="agree" class="agree" />登录即代表您已同意<div class="xieyi-text" @click="showXieyi">《服务协议与隐私协议》</div>
			</checkbox-group>
		</view> -->
	</view>
</template>

<script>
	import store from '@/store'
	import { getAuthCode, getPhoneNumber, login, alipayLogin, register } from '@/websoft/api/login.js'
	import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
	import storage from '@/utils/storage'
	import http from '@/websoft/api'
	import { roleId } from '@/config.js'
	import {
		isEmpty,
		inArray
	} from '@/utils/util'

	export default {
		data() {
			return {
				agree: true,
				userId: '',
				loding: false
			}
		},

		methods: {

			// 按钮点击事件: 获取支付宝手机号按钮
			login() {
				const app = this
				my.getAuthCode({
					scopes: 'auth_user',
					success: ({ authCode }) => {
						console.log("获取支付宝授权码: ",authCode);
						app.loding = true
						// 跟进授权码获取支付宝用户ID
						getAuthCode({authCode})
							.then(res => {
								store.dispatch('setUserInfo',res.data.user)
								store.dispatch('setUserId',res.data.user.userId)
								store.dispatch('setToken',res.data.access_token)
								const expiryTime = 30 * 86400 // 过期时间30天
								storage.set(ACCESS_TOKEN, res.data.access_token, expiryTime)
								storage.set(USER_ID, res.data.user.userId, expiryTime)
								// 显示登录成功
								http.setConfig((config) => {
								    config.header = {
										Authorization: res.data.access_token
								    }
								    return config
								})
								app.$toast(res.message)
								// 跳转回原页面
								setTimeout(() => {
									app.$navTo('pages/user/user')
								}, 2000)
							})
							.catch(e => {
								app.$error(e.message)
							})
					}
				});
			},

			onAgree() {
				this.agree = !this.agree
			},
			
			loginByUserName(){
				this.$navTo('pages/login/index')
			},
			
			// // #ifdef MP-ALIPAY
			// my.getPhoneNumber({
			//   success: (res) => {
			//     let encryptedData = res.response;
			//     getPhoneNumber({encryptedData}).then(response => {
			// 		console.log("授权手机号码: ",response);
			// 		const json = JSON.parse(response.data)
			// 		console.log("json: ",json);
			// 		if(json.mobile){
			// 			// 执行登录
			// 			app.onAuthSuccess(json.mobile)
			// 		}
			// 	})
			//   },
			//   fail: (res) => {
			//     console.log(res);
			//   },
			// });
			// // #endif

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/user/user')
				}
			},
			showXieyi(){
				this.$navTo('pages/help/xieyi')
			}

		}
	}
</script>

<style lang="scss" scoped>
	.ws-page {
		padding: 40rpx;
		height: 70vh;
		display: flex;
		flex-direction: column;

		.logo {
			margin: 100rpx auto;
			text-align: center;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 20rpx;
			}
		}

		.alipay-auth {
			margin: 12rpx 0;

			button {
				background-color: #3869ea;
				color: #ffffff;
				border-radius: 12rpx;
			}
		}

		.mobile-auth {
			margin: 12rpx 0;

			button {
				border-radius: 12rpx;
			}
		}

		.xieyi {
			margin-top: 100rpx;
			font-size: 28rpx;
			text-align: center;

			text {
				color: #3869ea;
			}

			.agree {
				border-radius: 100%;
			}
		}
	}

	// 微信授权登录
	.wechat-auth {
		width: 320rpx;
		margin: 50rpx auto 0 auto;

		.wechat-auth-container {
			display: flex;
			justify-content: center;
		}

		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 15rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666666;
		}
	}
	
	.xieyi-text{
		color: #0000ff;
	}
</style>