vist_go_uniApp/pagesA/public/login.vue

<template>
	<view class="login-page">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>

		<!-- 现代化背景 -->
		<view class="modern-bg">
			<view class="bg-shape shape-1"></view>
			<view class="bg-shape shape-2"></view>
			<view class="bg-shape shape-3"></view>
		</view>

		<!-- 返回按钮 -->
		<view class="nav-back pad-t-20" @click="goBack">
			<view class="back-btn">
				<u-icon size="30" name="arrow-left"></u-icon>
			</view>
		</view>

		<!-- Logo和标题 -->
		<view class="header">
			<view class="logo-container">
				<view class="logo-circle">
					<image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
				</view>
				<view class="logo-shadow"></view>
			</view>
			<view class="title-section">
				<text class="title">知己</text>
				<view class="title-underline"></view>
			</view>
			<text class="subtitle">访客记录软件</text>
		</view>

		<!-- 登录按钮 -->
		<view class="login-section">
			<view class="btn-container">
				<button class="wechat-btn" @tap="handleWxLogin" :class="{ 'btn-loading': isLoading }">
					<u-icon name="weixin-fill" size="20" color="#fff" style="margin-right: 12rpx;"></u-icon>
					<text>授权快捷登录</text>
				</button>
			</view>

			<view class="divider">
				<view class="divider-line"></view>
				<text class="divider-text">或</text>
				<view class="divider-line"></view>
			</view>

			<view class="btn-container">
				<button class="phone-btn" @tap="handlePhoneLogin">
					<u-icon name="phone" size="20" color="#e28669" style="margin-right: 12rpx;"></u-icon>
					<text>手机号登录</text>

				</button>
			</view>

			<view class="btn-container">
				<button class="browse-btn" @tap="handleBrowse">
					<text>暂不登录，先去看看</text>
				</button>
			</view>

			<view class="agreement">
				<view class="checkbox-wrapper" @tap="toggleAgreement">
					<view class="zen-checkbox" :class="{ 'checked': isAgree }">
						<view class="zen-circle-inner" v-if="isAgree"></view>
					</view>
				</view>
				<text class="agreement-text">
					登录即代表您已同意
					<text class="link" @tap="goToPrivacy">《隐私政策》</text>
					和
					<text class="link" @tap="goToService">《服务协议》</text>
				</text>
			</view>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="company-info">
				<text class="company-name">知己访客记录系统</text>
				<text class="version">v1.0.0</text>
			</view>
		</view>

		<!-- 首次登录设置弹框 -->
		<u-popup :show="showProfileModal">
			<view class="profile-modal">
				<view class="modal-header">
					<text class="modal-title">完善个人信息</text>
					<text class="modal-subtitle">请设置您的账号和头像</text>
				</view>

				<view class="modal-content">
					<!-- 头像选择 -->
					<view class="avatar-section">
						<text class="section-label">头像</text>
						<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							:disabled="isUploadingAvatar">
							<view class="avatar-container">
								<image class="avatar-preview" :src="tempAvatar || '/static/images/avatar.png'"
									mode="aspectFill"></image>
								<view class="avatar-overlay">
									<u-icon v-if="!isUploadingAvatar" name="camera" size="24" color="#fff"></u-icon>
									<u-loading-icon v-else mode="spinner" size="24" color="#fff"></u-loading-icon>
								</view>
							</view>
						</button>
					</view>

					<!-- 账号输入 -->
					<view class="account-section">
						<text class="section-label">用户名</text>
						<u-input v-model="tempAccount" placeholder="请输入用户名" :maxlength="20" :clearable="true"
							border="surround"></u-input>
					</view>
				</view>

				<view class="modal-actions">
					<button class="confirm-btn" @tap="confirmProfile"
						:disabled="!tempAccount.trim() || isUploadingAvatar">
						<text v-if="!isUploadingAvatar">确认</text>
						<text v-else>头像上传中...</text>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		wxLogin,
		updateProfile
	} from '@/config/api.js';
	import {
		UPLOAD_URL
	} from '@/common/config.js';

	export default {
		data() {
			return {
				isAgree: false,
				isLoading: false,
				redirectUrl: '', // 登录成功后的重定向地址
				showProfileModal: false, // 显示个人信息设置弹框
				tempAccount: '', // 临时账号
				tempAvatar: '', // 临时头像
				loginData: null, // 临时保存登录数据
				isUploadingAvatar: false // 头像上传状态
			}
		},
		onLoad(options) {
			// 获取重定向地址
			if (options.redirect) {
				this.redirectUrl = decodeURIComponent(options.redirect);
			}
		},
		methods: {
			// 处理微信登录
			async handleWxLogin() {
				if (!this.isAgree) {
					let that = this
					// 弹出确认弹框询问用户是否同意协议
					uni.showModal({
						title: '提示',
						content: '登录需要您同意《隐私政策》和《服务协议》，是否同意？',
						success: function(res) {
							if (res.confirm) {
								// 用户点击同意，自动勾选协议并执行登录
								that.isAgree = true;
								that.executeLogin();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

					return;
				}

				this.executeLogin();
			},

			// 执行登录逻辑
			async executeLogin() {
				uni.showLoading({
					mask: true
				})
				this.isLoading = true;

				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: (profileRes) => {
						uni.login({
							provider: 'weixin',
							success: async (loginRes) => {
								console.log(loginRes.code, "code")
								try {
									const loginData = await wxLogin({
										code: loginRes.code,
										account: profileRes.userInfo.nickName,
										avatarUrl: profileRes.userInfo.avatarUrl,
										grant_type: 'wechat'
									});

									if (loginData.code === 200) {
										this.loginData = loginData;
										this.tempAccount = loginData.account || '';
										this.tempAvatar = loginData.avatar || '';
										this.showProfileModal = true;
										this.isLoading = false;
										uni.setStorageSync('access_token', loginData
											.access_token);
										uni.setStorageSync('refresh_token', loginData
											.refresh_token);
										uni.setStorageSync('user', loginData);

										this.$store.commit('isLogin', true);
										this.$store.commit('refresh_token', loginData
											.refresh_token);
										uni.hideLoading();
										this.saveLoginDataAndRedirect(loginData);

									} else {
										uni.showToast({
											title: loginData.msg || '登录失败',
											icon: 'none'
										});
									}
								} catch (e) {
									console.error('登录错误:', e);
									uni.showToast({
										title: '登录失败，请重试',
										icon: 'none'
									});
								} finally {
									this.isLoading = false;
								}
							},
							fail: () => {
								this.isLoading = false;
							}
						});
					},
					fail: (err) => {
						this.isLoading = false;
						if (err.errMsg.includes('cancel')) {
							return; // 用户取消，不显示提示
						}
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				});
			},

			// 切换协议同意状态
			toggleAgreement() {
				this.isAgree = !this.isAgree;
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 跳转到隐私政策
			goToPrivacy() {
				uni.navigateTo({
					url: '/pagesA/public/richtext'
				});
			},

			// 跳转到服务协议
			goToService() {
				uni.navigateTo({
					url: '/pagesA/public/richtext'
				});
			},

			handleBrowse() {
				// 直接返回首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			// 跳转到手机登录页面
			handlePhoneLogin() {
				uni.navigateTo({
					url: '/pagesA/public/phone-login'
				});
			},

			// 保存登录数据并跳转
			saveLoginDataAndRedirect(loginData) {
				uni.setStorageSync('access_token', loginData.access_token);
				uni.setStorageSync('refresh_token', loginData.refresh_token);
				uni.setStorageSync('user', loginData);

				this.$store.commit('isLogin', true);
				this.$store.commit('refresh_token', loginData.refresh_token);

				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1000
				});

				// 登录成功后的跳转
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1000);
			},

			// 微信小程序头像选择回调
			async onChooseAvatar(e) {
				console.log('选择头像:', e.detail.avatarUrl);

				// 显示上传状态
				this.isUploadingAvatar = true;
				uni.showLoading({
					title: '上传头像中...',
					mask: true
				});

				try {
					// 上传头像到服务器
					const uploadResult = await this.uploadFilePromise(e.detail.avatarUrl);
					if (uploadResult && uploadResult.data && uploadResult.data.link) {
						this.tempAvatar = uploadResult.data.link;
						uni.showToast({
							title: '头像上传成功',
							icon: 'success'
						});
					} else {
						throw new Error('上传失败');
					}
				} catch (error) {
					console.error('头像上传失败:', error);
					uni.showToast({
						title: '头像上传失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isUploadingAvatar = false;
					uni.hideLoading();
				}
			},

			// 上传文件到服务器
			uploadFilePromise(filePath) {
				return new Promise((resolve, reject) => {
					// 优先使用登录数据中的token，如果没有则使用本地存储的token
					const token = (this.loginData && this.loginData.access_token) || uni.getStorageSync(
						'access_token');

					if (!token) {
						reject(new Error('未找到访问令牌'));
						return;
					}

					uni.uploadFile({
						url: UPLOAD_URL,
						filePath: filePath,
						header: {
							"Blade-Auth": token
						},
						name: 'file',
						formData: {
							user: 'avatar'
						},
						success: (res) => {
							try {
								const result = JSON.parse(res.data);
								if (result.success || result.code === 200) {
									resolve(result);
								} else {
									reject(new Error(result.msg || '上传失败'));
								}
							} catch (e) {
								reject(new Error('解析响应失败'));
							}
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},

			// 确认个人信息设置
			async confirmProfile() {
				if (!this.tempAccount.trim()) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '保存中...',
					mask: true
				});

				try {
					// 调用更新用户信息接口
					const updateRes = await updateProfile({
						account: this.tempAccount.trim(),
						avatar: this.tempAvatar
					});

					if (updateRes.code == 200) {
						// 更新登录数据中的用户信息
						this.loginData.account = this.tempAccount.trim();
						if (this.tempAvatar) {
							this.loginData.avatar = this.tempAvatar;
							this.loginData.avatarUrl = this.tempAvatar; // 同时更新 avatarUrl 字段
						}

						// 更新本地存储的用户信息
						uni.setStorageSync('user', this.loginData);

						// 保存登录数据并跳转
						this.saveLoginDataAndRedirect(this.loginData);
						this.showProfileModal = false;
					} else {
						uni.showToast({
							title: updateRes.msg || '保存失败，请重试',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('更新用户信息错误:', error);
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		min-height: 100vh;
		background: #F5F5F5;
		position: relative;
		overflow: hidden;
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	// 现代化背景
	.modern-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 1;

		.bg-shape {
			position: absolute;
			border-radius: 50%;

			&.shape-1 {
				width: 300rpx;
				height: 300rpx;
				top: 15%;
				right: -80rpx;
				background: linear-gradient(135deg, rgba(255, 91, 5, 0.1) 0%, transparent 70%);
			}

			&.shape-2 {
				width: 200rpx;
				height: 200rpx;
				top: 50%;
				left: -60rpx;
				background: linear-gradient(135deg, rgba(41, 44, 53, 0.08) 0%, transparent 70%);
			}

			&.shape-3 {
				width: 150rpx;
				height: 150rpx;
				bottom: 25%;
				right: 15%;
				background: linear-gradient(135deg, rgba(255, 91, 5, 0.06) 0%, transparent 70%);
			}
		}
	}

	.nav-back {
		position: fixed;
		left: 30rpx;
		top: calc(var(--status-bar-height) + 20rpx);
		z-index: 100;

		.back-btn {
			width: 80rpx;
			height: 80rpx;
			background: #FFFFFF;
			border: 1rpx solid rgba(255, 91, 5, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 16rpx rgba(41, 44, 53, 0.1);

			&:active {
				transform: scale(0.95);
				background: rgba(255, 91, 5, 0.1);
			}
		}

		.back-icon {
			font-family: "iconfont";
			font-size: 36rpx;
			color: #292C35;
		}
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 120rpx;
		position: relative;
		z-index: 2;

		.logo-container {
			position: relative;
			margin-bottom: 60rpx;

			.logo-circle {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(41, 44, 53, 0.1);
				border: 2rpx solid rgba(255, 91, 5, 0.2);

				.logo {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
				}
			}

			.logo-shadow {
				position: absolute;
				bottom: -20rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 160rpx;
				height: 20rpx;
				background: radial-gradient(ellipse, rgba(255, 91, 5, 0.1) 0%, transparent 70%);
				border-radius: 50%;
			}
		}

		.title-section {
			text-align: center;
			margin-bottom: 20rpx;
			position: relative;

			.title {
				font-size: 64rpx;
				font-weight: 600;
				color: #292C35;
				letter-spacing: 8rpx;
				font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
				text-shadow: 0 2rpx 8rpx rgba(41, 44, 53, 0.1);
			}

			.title-underline {
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 4rpx;
				background: linear-gradient(90deg, transparent, #FF5B05, transparent);
				border-radius: 2rpx;
			}
		}

		.subtitle {
			font-size: 28rpx;
			color: rgba(41, 44, 53, 0.7);
			font-weight: 300;
			letter-spacing: 4rpx;
			font-family: inherit;
		}
	}

	.login-section {
		padding: 80rpx 60rpx;
		position: relative;
		z-index: 2;

		.btn-container {
			margin-bottom: 40rpx;
		}

		.wechat-btn {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 96rpx;
			background: linear-gradient(135deg, #FF5B05 0%, #FF8E3C 100%);
			border: none;
			border-radius: 48rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 16rpx rgba(255, 91, 5, 0.3);

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(255, 91, 5, 0.4);
			}

			&.btn-loading {
				background: linear-gradient(135deg, #FFB088 0%, #FFA573 100%);
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.phone-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 96rpx;
			background: #FFFFFF;
			border: 2rpx solid #FF5B05;
			border-radius: 48rpx;
			color: #FF5B05;
			font-size: 32rpx;
			font-weight: 500;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 16rpx rgba(41, 44, 53, 0.1);

			&:active {
				transform: translateY(2rpx);
				background: rgba(255, 91, 5, 0.05);
			}
		}

		.divider {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 40rpx 0;

			.divider-line {
				flex: 1;
				height: 1rpx;
				background: linear-gradient(90deg, transparent, rgba(41, 44, 53, 0.1), transparent);
			}

			.divider-text {
				margin: 0 30rpx;
				font-size: 26rpx;
				color: rgba(41, 44, 53, 0.5);
			}
		}

		.browse-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 88rpx;
			background: transparent;
			border: 1rpx solid rgba(41, 44, 53, 0.2);
			border-radius: 44rpx;
			color: #292C35;
			font-size: 28rpx;
			transition: all 0.3s ease;

			&:active {
				background: rgba(41, 44, 53, 0.05);
				transform: translateY(1rpx);
			}
		}

		.agreement {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;

			.checkbox-wrapper {
				margin-right: 16rpx;
			}

			.zen-checkbox {
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid rgba(255, 91, 5, 0.4);
				border-radius: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				background: rgba(255, 255, 255, 0.9);

				&.checked {
					background: #FF5B05;
					border-color: #FF5B05;
				}

				.zen-circle-inner {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #fff;
				}
			}

			.agreement-text {
				font-size: 24rpx;
				color: rgba(41, 44, 53, 0.6);
				line-height: 1.5;

				.link {
					color: #FF5B05;
					text-decoration: none;
				}
			}
		}
	}

	// 底部装饰
	.bottom-decoration {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;

		.company-info {
			text-align: center;

			.company-name {
				display: block;
				font-size: 24rpx;
				color: rgba(41, 44, 53, 0.6);
				margin-bottom: 8rpx;
				font-weight: 400;
			}

			.version {
				font-size: 20rpx;
				color: rgba(41, 44, 53, 0.4);
				font-weight: 300;
			}
		}
	}

	// 个人信息设置弹框样式
	.profile-modal {
		width: 750rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.modal-header {
			text-align: center;
			padding: 60rpx 40rpx 40rpx;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

			.modal-title {
				display: block;
				font-size: 36rpx;
				font-weight: 600;
				color: #2c3e50;
				margin-bottom: 12rpx;
			}

			.modal-subtitle {
				font-size: 26rpx;
				color: rgba(44, 62, 80, 0.7);
			}
		}

		.modal-content {
			padding: 40rpx;

			.avatar-section {
				margin-bottom: 40rpx;
				text-align: center;

				.section-label {
					display: block;
					font-size: 28rpx;
					color: #2c3e50;
					margin-bottom: 20rpx;
					font-weight: 500;
				}

				.avatar-button {
					background: none;
					border: none;
					padding: 0;
					margin: 0 auto;
					display: block;
					width: 160rpx;
					height: 160rpx;

					&::after {
						border: none;
					}

					&:disabled {
						opacity: 0.7;
					}
				}

				.avatar-container {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 3rpx solid #4A90E2;

					.avatar-preview {
						width: 100%;
						height: 100%;
					}

					.avatar-overlay {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 50rpx;
						background: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.account-section {
				.section-label {
					display: block;
					font-size: 28rpx;
					color: #2c3e50;
					margin-bottom: 20rpx;
					font-weight: 500;
				}
			}
		}

		.modal-actions {
			padding: 0 40rpx 40rpx;

			.confirm-btn {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
				color: #fff;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: none;
				transition: all 0.3s ease;

				&:disabled {
					background: #bdc3c7;
					color: rgba(255, 255, 255, 0.7);
				}

				&:not(:disabled):active {
					transform: translateY(2rpx);
					box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.3);
				}
			}
		}
	}
</style>