vist_go_uniApp/packageUser/pages/login/index.vue

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

		<!-- 水墨背景 -->
		<view class="ink-bg">
			<view class="ink-wash ink-1"></view>
			<view class="ink-wash ink-2"></view>
			<view class="ink-wash ink-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="https://ndtk.tos-cn-guangzhou.volces.com/uploads/156adea827104e38ae0e25ec4701ecfe.jpg"
						mode="aspectFit"></image>
				</view>
				<view class="logo-shadow"></view>
			</view>
			<view class="title-section">
				<text class="title">宏匠</text>
				<view class="title-brush"></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 }">
					<view class="btn-ink"></view>
					<text class="font32">一键快捷登录</text>
				</button>
			</view>

			<view class="zen-divider">
				<view class="zen-dot"></view>
				<view class="zen-line"></view>
				<view class="zen-dot"></view>
			</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="zen-mountain">
				<view class="mountain-peak"></view>
				<view class="mountain-base"></view>
			</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) => {
								try {
									const loginData = await wxLogin({
										code: loginRes.code,
										account: profileRes.userInfo.nickName,
										avatarUrl: profileRes.userInfo.avatarUrl,
										grant_type: 'wechat'
									});

									if (loginData.code === 200) {
										// 检查是否为首次登录
										if (loginData.isFirstLogin) {
											// 首次登录，显示个人信息设置弹框
											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();
										} else {
											// 非首次登录，直接保存并跳转
											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: '/packageUser/pages/richtext/index'
				});
			},

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

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

			// 保存登录数据并跳转
			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(() => {
					if (this.redirectUrl) {
						uni.redirectTo({
							url: this.redirectUrl
						});
					} else {
						// 检查是否有待处理的邀请，如果有则跳转到首页触发邀请弹框
						const pendingInvitation = uni.getStorageSync('pendingInvitation');
						if (pendingInvitation && pendingInvitation.inviterId) {
							console.log('登录成功，发现待处理邀请，跳转到首页');
							// 使用 reLaunch 确保首页能重新加载并检查邀请
							uni.reLaunch({
								url: '/pages/index/indexNew'
							});
						} else {
							uni.switchTab({
								url: '/pages/index/indexNew'
							});
						}
					}
				}, 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: linear-gradient(135deg, #f8f6f0 0%, #e8e4d8 50%, #d4cfc0 100%);
		position: relative;
		overflow: hidden;
	}

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

	// 水墨背景
	.ink-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 1;

		.ink-wash {
			position: absolute;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, transparent 70%);

			&.ink-1 {
				width: 400rpx;
				height: 400rpx;
				top: 10%;
				right: -100rpx;
				transform: rotate(15deg);
			}

			&.ink-2 {
				width: 300rpx;
				height: 300rpx;
				top: 40%;
				left: -50rpx;
				transform: rotate(-20deg);
			}

			&.ink-3 {
				width: 200rpx;
				height: 200rpx;
				bottom: 20%;
				right: 20%;
				transform: rotate(45deg);
			}
		}
	}

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

		.back-btn {
			width: 80rpx;
			height: 80rpx;
			background: rgba(255, 255, 255, 0.8);
			border: 1rpx solid rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			&:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
			}
		}

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

	.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: 50%;
				background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
				border: 2rpx solid rgba(0, 0, 0, 0.05);

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

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

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

			.title {
				font-size: 64rpx;
				font-weight: normal;
				color: #2c3e50;
				letter-spacing: 12rpx;
				font-family: 'KaiTi', '楷体', serif;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

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

		.subtitle {
			font-size: 28rpx;
			color: rgba(44, 62, 80, 0.7);
			font-weight: 300;
			letter-spacing: 4rpx;
			font-style: italic;
			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, #fff 0%, #f8f9fa 100%);
			border: 2rpx solid rgba(0, 0, 0, 0.08);
			border-radius: 48rpx;
			color: #2c3e50;
			font-size: 32rpx;
			font-weight: normal;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
			}

			&.btn-loading {
				background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
				color: rgba(44, 62, 80, 0.5);
			}

			.btn-ink {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
				pointer-events: none;
			}

			.wechat-icon {
				width: 44rpx;
				height: 44rpx;
				margin-right: 16rpx;
			}
		}

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

			.zen-dot {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: rgba(44, 62, 80, 0.3);
			}

			.zen-line {
				width: 100rpx;
				height: 1rpx;
				background: linear-gradient(90deg, transparent, rgba(44, 62, 80, 0.2), transparent);
				margin: 0 20rpx;
			}
		}

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

			&:active {
				background: rgba(44, 62, 80, 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(44, 62, 80, 0.3);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				background: rgba(255, 255, 255, 0.8);

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

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

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

				.link {
					color: #2c3e50;
					text-decoration: underline;
				}
			}
		}
	}

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

		.zen-mountain {
			position: relative;
			width: 200rpx;
			height: 120rpx;

			.mountain-peak {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 60rpx solid transparent;
				border-right: 60rpx solid transparent;
				border-bottom: 80rpx solid rgba(44, 62, 80, 0.1);
			}

			.mountain-base {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 40rpx;
				background: linear-gradient(90deg, transparent, rgba(44, 62, 80, 0.05), transparent);
				border-radius: 50%;
			}
		}
	}

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

		.modal-header {
			text-align: center;
			padding: 60rpx 40rpx 40rpx;
			background: linear-gradient(135deg, #f8f6f0 0%, #e8e4d8 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 #e8e4d8;

					.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, #2c3e50 0%, #34495e 100%);
				color: #fff;
				border-radius: 40rpx;
				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(44, 62, 80, 0.3);
				}
			}
		}
	}
</style>