clockIn-wechat-uniapp-241018/pages/login/wxUserInfo.vue

<!-- 用户信息 -->
<template>
	<view class="login">
		<!-- logo -->
		<div class="logo">
			打卡系统
		</div>

		<!-- 标题 -->
		<view class="login-title">工程项目打卡系统</view>

		<view class="title">
			申请获取你的头像、昵称
		</view>

		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="line">
				<view class="">
					头像
				</view>
				<view class="">
					<image
						:src="userInfo.headImage ? userInfo.headImage : 'https://tennis-oss.xzaiyp.top/2024-10-22/29ce46a1-33f2-4fda-8203-aaf441c678aa.png'"
						style="width: 70rpx;height: 70rpx;border-radius: 50%;" mode="widthFix"></image>
					<!-- <image src="@/static/login/logo.png" v-else style="width: 70rpx;height: 70rpx;border-radius: 50%;" mode="widthFix"></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: {
					headImage: '', //设置了一个本地默认头像
					nickName: '',
					name: ''
				}
			};
		},
		onShow() {},
		computed: {},
		methods: {
			onChooseAvatar(res) {
				let self = this
				self.$Oss.ossUpload(res.target.avatarUrl)
					.then(url => {
						self.userInfo.headImage = url
					})
			},
			submit() {
				let self = this

				uni.createSelectorQuery().in(this)
					.select("#nickName")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						const nickName = res?.[0]?.value
						self.userInfo.nickName = nickName
						self.userInfo.name = nickName

						if (self.$utils.verificationAll(self.userInfo, {
								headImage: '请更换默认头像',
								nickName: '请填写昵称',
							})) {
							return
						}
						
						self.$api('updateInfo', {
							headImg : self.userInfo.headImage,
							nickname : self.userInfo.nickName,
						}, res => {
							if (res.code == 200) {
								this.$store.commit('getUserInfo')
								uni.redirectTo({
									url:'/pages/index/index'
								})
							}
						})

						// uni.reLaunch({
						// 	url: "/pages/subPack/team/team"
						// })
					})
			},

			//刷新存放在vuex的用户信息
			replushUserInfo() {
				this.$api('getUserInfo', res => {
					if (res.code == 200) {
						this.$store.commit('setUserInfo', res.result)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;

		// logo
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0rpx;
			width: 40%;
			color: white;
			background: linear-gradient(180deg, #4C9EEA, #6DB9FF);
			border-radius: 45rpx 13rpx 45rpx 13rpx;
			font-size: 60rpx;
		}

		// 标题
		.login-title {
			font-size: 40rpx;
			font-weight: bold;
			margin: 20rpx 0rpx;
		}

		.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: $main-color;
			color: #fff;
			width: 80%;
			padding: 30rpx 0;
			border-radius: 100rpx;
			text-align: center;
			margin-top: 10vh;
		}
	}
</style>