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 setup>
import { ref, reactive } from 'vue'
import { uploadInfo } from "@/api/services/connect.js"
import storage from "@/utils/storage.js"

// 响应式数据
const isShow = ref(true)
const userInfo = reactive({
	avatarUrl: '',
	nickName: '',
	openId: ''
})
const loading = ref(false)

// 获取微信头像
const onChooseAvatar = (e) => {
	userInfo.avatarUrl = e.detail.avatarUrl
	console.log("eeee", e)
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

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

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

	loading.value = true
	try {
		// TODO: 调用后端接口完成注册/登录
		// 原因: 当前使用的是 uploadInfo 接口，需要确认是否为正确的注册/登录接口
		// 推荐: 确认后端接口文档，使用正确的注册或登录接口
		const res = await uploadInfo(userInfo)
		console.log("res", res)
		if (res.data.code == 200) {
			storage.setUserInfo(res.data.data)
		}
		uni.showToast({
			title: '登录成功',
		})

		// 成功跳转页面
		uni.switchTab({
			url: '/pages/user/index'
		})
	} catch (err) {
		console.log("err", err)
		uni.showToast({
			icon: 'none',
			title: '登录失败，请重试',
		})
	} finally {
		loading.value = false
	}
}

// uni-app 生命周期 - onLoad
onLoad((options) => {
	console.log("options", options)
	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>