vist_go_uniApp/pages/user/sex-change.vue

<template>
	<view class="gender-selection-page">
		<!-- 页面标题 -->
		<view class="title">请选择您的性别</view>
		<!-- 性别选项 -->
		<view class="gender-options">
			<view class="gender-option" :class="{ 'selected': selectedGender === 1}" @click="selectGender(1)">
				男性
			</view>
			<view class="gender-option" :class="{ 'selected': selectedGender ===0 }" @click="selectGender(0)">
				女性
			</view>
			<view class="gender-option" :class="{ 'selected': selectedGender === 2 }" @click="selectGender(2)">
				其他
			</view>
		</view>
		<!-- 确认按钮 -->
		<button class="save-button" @click="ack">保存</button>
	</view>
</template>

<script>
	import {
		memberUpdate,
		memberDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				// 存储选中的性别，初始值为空
				selectedGender: '',
				user: {}
			};
		},
		onLoad(op) {
			this.detail()

		},
		methods: {
			async detail() {
				const data = await memberDetail()
				if (data.code == 200) {
					this.user = data.data
					this.selectedGender = this.user.sex
				}
			},
			// 选择性别
			selectGender(gender) {
				this.selectedGender = gender;
			},
			ack() {
				this.user.sex = this.selectedGender
				memberUpdate(this.user).then((res) => {
					if (res.code == 200) {
						uni.$u.toast("操作成功")
						uni.navigateBack({
							delta: 1 // delta 表示返回的页面数，1 表示返回上一页
						});
					}
				})
			},

		}
	};
</script>

<style scoped>
	.gender-selection-page {
		padding: 30px;
		background-color: white;
		min-height: 100vh;
		text-align: center;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.gender-options {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		flex-wrap: nowrap;
	}

	.gender-option {
		width: 100px;
		padding: 10px 20px;
		border: 1px solid #ccc;
		margin: 0 10px;
		cursor: pointer;
		border-radius: 5px;
		box-sizing: border-box;
		/* 明确设置高度 */
		height: 40px;
		line-height: 20px;
		/* 使文字垂直居中 */
	}

	.gender-option.selected {
		background-color: #007aff;
		color: white;
		border-color: #007aff;
		/* 确保边框颜色与背景颜色一致 */
	}

	.save-button {
		background-color: #007aff;
		color: white;
		margin-top: 50rpx;
		border: none;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 16px;
	}
</style>