recycle-front/pages/wxUserInfo.vue

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

		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="line">
				<view class="">
					头像
				</view>
				<view class="">
					<image :src="userInfo.avatarUrl" v-if="userInfo.avatarUrl" style="width: 60rpx;height: 60rpx;"
						mode=""></image>

					<image src="/static/暂未登录 请先登录.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
				</view>
			</view>
		</button>
		<view class="line">
			<view class="">
				昵称
			</view>
			<view class="">
				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
					v-model="userInfo.nickName" />
			</view>
		</view>
		<view class="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
					}

					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>
	.img{
		width: 20%;
		height: 15%;
		margin-top: 10%;
	}
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80vh;

		.title {
			line-height: 45rpx;
			font-weight: 900;
		}

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 80%;
			border-bottom: 1px solid #00000023;
			padding: 30rpx 0;
			margin: 0 auto;
		}

		.chooseAvatar {
			width: 100%;
			padding: 0;
			margin: 0;
			margin-top: 10vh;
			border: none;
		}

		.btn {
			// background: $uni-linear-gradient-btn-color;
			background: red;
			color: #fff;
			width: 80%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 15rpx;
			margin-top: 10vh;
		}
	}
</style>