sports-miniapp/src/pages/mine/reviseNickname/index.vue

<template>
	<view class="content">
		<view class="r-nickname-card">
			<view class="r-nickinput">
				<input type="text" v-model="username" maxlength="10" placeholder="请输入新昵称" />
			</view>
			<view class="r-clear-icon" v-if="username!==''" @click="username=''">
				<zzx-icon name="m-clear" size="16"></zzx-icon> 
			</view>
		</view>
		<view class="r-tips">限2-10个汉字</view>
	</view>
	<view class="r-bottom-btn">
		<view class="submit-btn" @click="submit">确定</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted,computed } from 'vue'
	import { http } from '@/utils/http'
	import { RouterUtils, TipsUtils } from '@/utils/util';
	import { useCacheStore } from '@/stores/cache'
	const cache = useCacheStore()
	const username=ref('')
	const submit=()=>{
		if(username.value=='') return TipsUtils.tips_toast('请输入昵称')
		http.get('/user/updateUserInfo',{data:{nickName:username.value,avatarUrl:'https://c-ssl.dtstatic.com/uploads/blog/202107/11/20210711174826_ba57b.thumb.1000_0.jpg'},loading:true}).then((res)=>{
			get_userinfo()
		})
	}
	const get_userinfo=()=>{
		http.get('/user/getUserInfo', { loading: true }).then(res => {
			cache.set('USER_INFO',res.result)
			TipsUtils.tips_toast('修改成功')
			RouterUtils.back()
		})
	}
</script>

<style lang="less" scoped>
	.r-nickname-card{
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin-top: 20rpx;
		.r-nickinput{
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}
	}
	.r-tips{
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #AAAAAA;
	}
	.r-bottom-btn{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.09);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.submit-btn{
			width: 686rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
			line-height: 100rpx;
		}
	}
</style>