recycle-front/pages/wxUserInfo.vue

<template>
	<view class="login">
		<view class="header">
			<image :src='logoImage' mode="aspectFit" class="logo-img"></image>
			<view class="app-title">
				{{logoName}}
			</view>
			<view class="subtitle">
				申请获取你的头像、昵称
			</view>
		</view>

		<view class="form-container">
			<button class="avatar-section" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="avatar-label">头像</view>
				<view class="avatar-container">
					<image :src="userInfo.avatarUrl" v-if="userInfo.avatarUrl" class="avatar-img" mode="aspectFill"></image>
					<view v-else class="avatar-placeholder">
						<image src="/static/暂未登录 请先登录.png" class="placeholder-img" mode="aspectFit"></image>
						<text class="placeholder-text">点击选择头像</text>
					</view>
				</view>
			</button>
			
			<view class="nickname-section">
				<view class="nickname-label">昵称</view>
				<view class="nickname-input-container">
					<input type="nickname" placeholder="请输入昵称" class="nickname-input" id="nickName"
						v-model="userInfo.nickName" />
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatarUrl: '',
				nickName: '',
			},
			configData: [],
		};
	},
	onShow() { },
	computed: {
		logoImage() {
			console.log(getApp().globalData.configData,'getApp().globalData.configData')
      const item =  getApp().globalData.configData.find(i => i.keyName === 'logo_image')
      return item ? item.keyContent : ''
    },
		logoName() {
			const item =  getApp().globalData.configData.find(i => i.keyName === 'logo_name')
			return item ? item.keyContent : ''
		}
	},
	methods: {
		onChooseAvatar(res) {
			let self = this
			self.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					console.log(url);
					self.userInfo.avatarUrl = url
				})
		},
		submit() {
			let self = this
			console.log(self.userInfo.avatarUrl, '111');
			uni.createSelectorQuery().in(this)
				.select("#nickName")
				.fields({
					properties: ["value"],
				})
				.exec((res) => {
					const nickName = res?.[0]?.value
					self.userInfo.nickName = nickName
					if (getApp().globalData.phone) {
						self.userInfo.phone = getApp().globalData.phone
					}
					if (self.$utils.verificationAll(self.userInfo, {
						avatarUrl: '请选择头像',
						nickName: '请填写昵称',
					})) {
						return
					}
					if (uni.getStorageSync('shareId')) {
						self.userInfo.shareId = uni.getStorageSync('shareId')
					}

					self.$api('updateInfo', self.userInfo, res => {
						console.log(res, self.userInfo);
						if (res.code == 200) {
							uni.switchTab({
								url: '/pages/component/home'
							})
						}
					})
				})

		},
	}
}
</script>

<style lang="scss" scoped>
	.login {
		min-height: 100vh;
		background: linear-gradient(180deg, #fff7e6 0%, #fff 40%);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 48rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 120rpx;
		margin-bottom: 80rpx;

		.logo-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 32rpx;
			margin-bottom: 32rpx;
			box-shadow: 0 8rpx 24rpx rgba(255, 156, 0, 0.15);
		}

		.app-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 16rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
			line-height: 1.4;
		}
	}

	.form-container {
		width: 100%;
		max-width: 600rpx;
		margin-bottom: 80rpx;
	}

	.avatar-section {
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		padding: 48rpx 36rpx;
		margin-bottom: 32rpx;
		border: none;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32rpx;

		&::after {
			border: none;
		}

		.avatar-label {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}

		.avatar-container {
			position: relative;
			width: 200rpx;
			height: 200rpx;
		}

		.avatar-img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}

		.avatar-placeholder {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 4rpx dashed #ddd;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #f8f8f8;
			gap: 16rpx;

			.placeholder-img {
				width: 80rpx;
				height: 80rpx;
				opacity: 0.6;
			}

			.placeholder-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.nickname-section {
		background: #fff;
		border-radius: 24rpx;
		padding: 48rpx 36rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.nickname-label {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 32rpx;
			text-align: center;
		}

		.nickname-input-container {
			position: relative;
		}

		.nickname-input {
			width: 100%;
			height: 88rpx;
			background: #f8f8f8;
			border-radius: 16rpx;
			padding: 0 24rpx;
			font-size: 32rpx;
			color: #333;
			border: 2rpx solid transparent;
			box-sizing: border-box;
			transition: all 0.3s;

			&:focus {
				border-color: #ffb400;
				background: #fff;
				outline: none;
			}

			&::placeholder {
				color: #bbb;
				font-size: 28rpx;
			}
		}
	}

	.submit-btn {
		width: 100%;
		max-width: 600rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0 8rpx 24rpx rgba(255, 156, 0, 0.3);
		transition: all 0.3s;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(255, 156, 0, 0.3);
		}
	}
</style>