vist_go_uniApp/pages/user/about-us.vue

<template>
	<view class="page-container">
		<view class="font40 font-bold text-align   pad-t-40 mar-b-50">
			昵称
		</view>
		<view class="inputBg ">
			<input class="" v-model="user.account" placeholder="请输入昵称" />
			<view class="clear-button" @click="clearInput" v-if=" user.account.length> 0">
				×
			</view>
		</view>
		<button class="saveBtn" style="background-color: #3C86F7;" type="primary" @click="save">保存</button>
	</view>
</template>

<script>
	import {
		memberUpdate,
		memberDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				user: {
					account: ""
				}
			}
		},
		methods: {
			clearInput() {
				this.user.account = ""
			},
			save() {
				memberUpdate(this.user).then((res) => {
					if (res.code == 200) {
						uni.$u.toast("操作成功")
						uni.navigateBack({
							delta: 1 // delta 表示返回的页面数，1 表示返回上一页
						});
					}
				})
			},
			async detail() {
				const data = await memberDetail()
				if (data.code == 200) {
					this.user = data.data
				}
			},
		},
		onLoad(op) {
			console.log(op, "op")
			this.user = op
			this.detail()
		}
	}
</script>

<style>
	.page-container {

		background-color: #FFFFFF;
		/* 设置页面背景色为白色 */
		min-height: 100vh;
		/* 确保背景色覆盖整个可视区域 */
	}

	.inputBg {
		background-color: #f3f3f3;
		width: 700rpx;
		margin-left: 25rpx;
		border-radius: 40rpx;
		font-size: 38rpx;
		padding: 20rpx;
		position: relative;
	}

	.saveBtn {
		margin-top: 50rpx;
		width: 700rpx;
		margin-left: 25rpx;
		border-radius: 10rpx;
	}

	.clear-button {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 20px;
		margin-right: 10rpx;
		color: #999;
		cursor: pointer;
	}
</style>