pay-video-applet-uniapp-24-8-22/pages_mine/mine/updateUserInfo.vue

<template>
	<view class='updateUserInfo'>
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="修改个人信息" />

		<!--主页面-->
		<view class="frame">
			<view class="headImage">

				<view style="" class="key">头像</view>
				<view style="" class="value" @click="chooseAndUpdateUserImage">
					<image :src='form.headImage' style="width: 100%;height: 100%"></image>
					<!-- <uv-upload :fileList="fileList" :maxCount="1" multiple width="150rpx" height="150rpx"
					:deletable="false" :previewFullImage="false"   @afterRead="afterRead" ></uv-upload> -->
				</view>
			</view>
			<view class="item">
				<view class="label">昵称</view>
				<view class="value">
					<uv-input v-model="form.nickName" placeholder="昵称" border="bottom" clearable></uv-input>
				</view>
			</view>
			<view class="item" @click="sexChange">
				<view class="label">性别</view>
				<view>{{form.sex}}</view>
			</view>
			<view class="item">
				<view class="label">联系方式</view>
				<view class="value">
					<uv-input v-model="form.phone" placeholder="联系方式" border="bottom" clearable></uv-input>
				</view>
			</view>
		</view>

		<!-- ActionSheet 操作菜单 -->
		<uv-action-sheet ref="actionSheet" :actions="sexList" title="性别" @select="select" @close="close">
		</uv-action-sheet>

		<!--确认修改个人信息按钮-->
		<button @click="confirmEditUserInfo" class="bottomBtn">
			确认修改
		</button>
	</view>
</template>

<script>
	import '../../common.css'; // 引入公共 CSS 文件
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				form: {
					sex: '',
					nickName: '1',
					phone: '',
					headImage: '',
				},
				// itemUserImage: userInfo.headImage,
				fileList: [],
				sexList: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},
				],

			}
		},
		mounted() {
			this.form = this.userInfo
			if (this.userInfo.sex == '' || this.userInfo.sex == null) {
				this.userInfo.sex = '未知'
			}
			console.log(this.userInfo.headImage, "this.userInfo.headImage");
			// this.fileList.push({
			// 	url: this.userInfo.headImage
			// })
		},
		methods: {

			// 确认修改个人信息
			confirmEditUserInfo() {
				this.$api('infoUpdateInfo', this.form, res => {
					if (res.code == 200) {
						// 修改VueX中的信息，是否有密码啥的
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}, 300)
					}
				})
			},

			// 打开图片选择器并更新头像
			chooseAndUpdateUserImage() {
				const self = this;

				uni.chooseImage({
					count: 1, // 限制选择一张图片
					sizeType: ['original', 'compressed'], // 可选择原图或压缩图
					sourceType: ['album', 'camera'], // 可以从相册或相机选择
					success: (res) => {
						// 获取选择的图片临时路径
						const tempFilePath = res.tempFilePaths[0];
						console.log(tempFilePath, "Selected Image");

						// 调用上传方法
						self.updateUserImage(tempFilePath);
					},
					fail: (err) => {
						console.error("Failed to select image:", err);
					}
				});
			},

			// 修改头像
			updateUserImage(filePath) {
				const self = this;

				console.log(filePath, "Selected Image Path");

				// 调用上传方法
				self.$Oss.ossUpload(filePath).then(url => {
					// 将上传后的图片URL设置到头像中
					self.form.headImage = url;
					console.log("Uploaded Image URL:", url);
				}).catch(err => {
					console.error("Failed to upload image:", err);
				});
			},

			deleteImage(e) {
				this.fileList.splice(e.index, 1)
			},
			afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},


			sexChange() {
				this.$refs.actionSheet.open() //打开ActionSheet 操作菜单
			},

			// ActionSheet 操作菜单选中
			select(e) {
				console.log('选中该项：', e);
				this.form.sex = e.name
				this.$refs.actionSheet.close() //关闭操作菜单
			},

			// ActionSheet 操作菜单关闭
			close() {
				this.$refs.actionSheet.close() //关闭操作菜单

			},
		}
	}
</script>


<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.updateUserInfo {
		.frame {
			padding: 28rpx 28rpx 0 28rpx;

			.headImage {
				display: flex;
				// width: 100vw;
				padding: 20rpx;

				.key {
					width: 70%;
					height: 150rpx;
					display: flex;
					align-items: center;
				}

				.value {
					border-radius: 50%;
					border: 1px solid red;
					overflow: hidden;
					width: 30%;
				}
			}


			.item {
				display: flex;
				justify-content: space-between;
				// border-bottom: 1px solid #c9c9c9;
				margin-top: 20rpx;
				padding: 20rpx;

				.label {
					width: 50%;
				}

				.value {
					width: 50%;
					text-align: right;
				}
			}
		}
	}

	/deep/ .input__content {
		/deep/.uv-input__content__field-wrapper {
			border: 1px solid red;

			input {
				text-align: right;
			}
		}
	}

	/deep/ .uv-input__content__field-wrapper__field {
		text-align: right;
	}
</style>