NN2023021801/addons/dbapp/pagesUser/userInfo/editName.vue

<template>
	<view>
		<view class="bg-white m mt-10 w editName">
			<u-input placeholder="请输入" v-model="nickname" border="none" fontSize="24rpx"></u-input>
		</view>
		<u-text text="请输入2~20个字符" type="info" size="24rpx" margin="10rpx 0 0 48rpx"></u-text>
		<u-button
			text="保存"
			color="var(--theme)"
			:disabled="disabled"
			@click="save"
			shape="circle"
			customStyle="width: 650rpx;height: 98rpx; position:fixed;bottom:100rpx;left:50%;transform:translate(-50%)"
		></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nickname: this.$store.state.user.nickname
		}
	},
	computed: {
		disabled() {
			return (
				this.nickname == this.$store.state.user.nickname ||
				this.nickname.length < 2 ||
				this.nickname.length > 20
			)
		}
	},
	methods: {
		save() {
			uni.$emit('editName', this.nickname)
			this.$common.back()
		}
	}
}
</script>

<style lang="scss" scoped>
.editName {
	height: 80rpx;
	display: flex;
	align-items: center;
	border-radius: 8px;
}
</style>