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="item">
				<view style="width: 70%;height: 150rpx;">头像</view>
				<view style="border-radius: 50%;border: 1px solid red;overflow: hidden;width: 30%;"
					@click="updateUserImage">
					<image :src='itemUserImage' 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: userInfo.sex || '',
					nickName: '1',
					phone: userInfo.phone || '',
					image: userInfo.headImage,
				},
				itemUserImage: userInfo.headImage,
				fileList: [],
				sexList: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},
				],

			}
		},
		mounted() {
			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)
					}
				})
			},

			// 修改头像
			updateUserImage(e) {
				console.log(e, "e");
				let self = this
				// e.file.forEach(file => {
				self.$Oss.ossUpload(file.url).then(url => {
					self.itemUserImage = {
						url
					}
				})
				// })
			},

			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;

			.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;
				}
			}
		}
	}
</style>