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>头像</view>
				<view>11</view>
			</view>
			<view class="item">
				<view class="label">昵称</view>
				<view class="value">
					<uv-input v-model="form.nickName" placeholder="昵称" border="bottom" clearable
						@change="keyWordChange"></uv-input>
				</view>
			</view>
			<view class="item" @click="sexChange">
				<view class="label">性别</view>
				<view>{{form.sex}}<span style="color: #8b8f97;">&nbsp;&nbsp;&nbsp;></span></view>
			</view>
			<view class="item">
				<view class="label">联系方式</view>
				<view class="value">
					<uv-input v-model="form.phone" placeholder="联系方式" border="bottom" clearable
						@change="keyWordChange"></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 文件
	export default {
		data() {
			return {
				form: {
					sex: '男',
					nickName: '库里yyds',
					phone: '15346993500',
				},
				sexList: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},
				]
			}
		},
		methods: {

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

			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: 60%;
				}

				.value {
					width: 40%;
					text-align: right;
				}
			}
		}
	}
</style>