hotel-tablecloth-uniapp-24-08-29/pages_order/mine/updateUserInfo.vue

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

		<!--主页面-->
		<view class="frame">
			<view class="headImage">
				<view style="" class="key">头像</view>
				<button style="" class="value" @chooseavatar="onChooseAvatar" open-type="chooseAvatar">
					<image 
					:src="form.headImage" v-if="form.headImage" 
					style="width: 100%;height: 100%" mode="aspectFill">
					</image>
					<image src="/static/image/tabbar/6.png" v-else style="width: 100%;height: 100%" mode="aspectFill">
					</image>
				</button>
			</view>
			<view class="item">
				<view class="label">昵称</view>
				<view class="value">
					<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
						v-model="form.nickName" />
				</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 {
		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
					},
				],
			}
		},
		onLoad() {
			this.form.phone = this.userInfo.phone
			this.form.headImage = this.userInfo.headImage
			this.form.nickName = this.userInfo.nickName
			this.form.sex = this.userInfo.sex
			if (this.userInfo.sex == '' || this.userInfo.sex == null) {
				this.form.sex = '未知'
			}
		},
		methods: {

			onChooseAvatar(res) {
				let self = this
				console.log(res.target.avatarUrl, "res.target.avatarUrl");
				self.$Oss.ossUpload(res.target.avatarUrl)
					.then(url => {
						console.log(url, "url");
						self.form.headImage = url
					})
			},

			// 确认修改个人信息
			confirmEditUserInfo() {
				let self = this
				uni.createSelectorQuery().in(this)
				.select("#nickName")
				.fields({
					properties: ["value"],
				})
				.exec((res) => {
					const nickName = res?.[0]?.value
					self.form.nickName = nickName

					if (self.$utils.verificationAll(self.form, {
							headImage: '请选择头像',
							nickName: '请填写昵称'
						})) {
						return
					}

					self.$api('updateInfo', {
						headImg : self.form.headImage,
						nickname : self.form.nickName,
					}, res => {
						if (res.code == 200) {
							uni.redirectTo({
								url: '/pages/index/center'
							})
						}
					})
				})

			},

			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: 500rpx;
					display: flex;
					align-items: center;
				}

				.value {
					border-radius: 50rpx;
					border: 1px solid red;
					box-sizing: border-box;
					overflow: hidden;
					width: 100rpx;
					height: 100rpx;
					padding: 0;
				}
			}


			.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;
	}
	.bottomBtn {
	    position: fixed;
	    bottom: 5%;
	    left: 10%;
	    width: 80%;
	    height: 80rpx;
	    text-align: center;
	    color: #ffffff;
	    background: $uni-color;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
	}
</style>