nongxiaoyu/pages/userInfo/index.vue

<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="back" @click="goBack">
				<text class="iconfont">←</text>
			</view>
			<!-- <text class="title">登录2</text> -->
			<view class="more-options">
				<text class="iconfont">→</text>
			</view>
		</view>

		<!-- 头像授权 -->
		<view class="avatar-section">
			<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="userInfo.avatarUrl || '/static/icons/user_icon.png'" mode="aspectFill"></image>
			</button>
			<text class="avatar-text" v-if="isShow">授权头像</text>
		</view>


		<!-- 昵称输入 -->
		<view class="form">
			<view class="form-item">
				<text class="label">昵称</text>
				<input name="nickName" type="nickname" placeholder="请填写昵称" class="input" v-model="userInfo.nickName" />
			</view>
		</view>

		<!-- 微信一键登录按钮 -->
		<button class="wx-login-btn" @tap="loginWithWeChat" :loading="loading" :disabled="loading">
			<image class="wx-icon" src="/static/wechat-icon.png" mode="widthFix" />
			微信一键授权登录
		</button>

		<!-- 提示文字 -->
		<text class="tip-text">微信授权登录后才可进行更多操作哦</text>
	</view>
</template>

<script>
	import {
		uploadInfo
	} from "@/api/services/connect.js";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				isShow: true,
				userInfo: {
					avatarUrl: '',
					nickName: '',
					openId: ''
				},
				loading: false,
			};
		},
		methods: {
			//获取微信头像
			onChooseAvatar(e) {
				this.userInfo.avatarUrl = e.detail.avatarUrl;
				console.log("eeee", e);
			},
			goBack() {
				uni.navigateBack();
			},

			async requestProfile() {
				try {
					const res = await uni.getUserProfile({
						desc: '用于完善会员资料',
					});
					this.userInfo = res.userInfo;
				} catch (err) {
					uni.showToast({
						icon: 'none',
						title: '授权失败',
					});
				}
			},

			async loginWithWeChat() {
				// 防止进入后重复点击（双保险）
				if (this.loading) return;
				if (!this.userInfo.nickName) {
					uni.showToast({
						title: '请先授权头像昵称',
						icon: 'none'
					});
					return;
				}

				this.loading = true;
				try {
					// TODO: 调用后端接口完成注册/登录
					const res = await uploadInfo(this.userInfo);
					console.log("res", res);
					if (res.data.code == 200) {
						storage.setUserInfo(res.data.data);
					}
					uni.showToast({
						title: '登录成功',
					});

					// 成功跳转页面
					wx.switchTab({
						url: '/pages/user/index'
					});
				} catch (err) {
					console.log("err", err);
					uni.showToast({
						icon: 'none',
						title: '登录失败，请重试',
					});
				} finally {
					this.loading = false;
				}
			},
		},
		onLoad(options) {
			console.log("options", options);
			this.userInfo.openId = options.openId || '';
		}
	};
</script>

<style>
	.container {
		background-color: #fff;
		height: 100vh;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0 20rpx;
	}

	.back,
	.more-options {
		width: 60rpx;
		text-align: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
	}

	.avatar-button {
		padding: 0;
		margin: 0;
		border: none;
		background-color: transparent;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
	}

	.avatar-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #888;
	}

	.form {
		margin: 60rpx 0 40rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}

	.label {
		width: 100rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 28rpx;
		padding-left: 20rpx;
	}

	.wx-login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #1aad19;
		color: #fff;
		border-radius: 100rpx;
		height: 88rpx;
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.wx-icon {
		width: 40rpx;
		margin-right: 20rpx;
	}

	.tip-text {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
	}
</style>