添加修改用户名功能

pages/mine/index.vue

@@ -16,7 +16,7 @@
 	
 	
 	import {
-		getUserInfo,updateNickname
+		getUserInfo,updateNickname,uploadAvatar
 	} from './api.js';
 	import {
 		useUserStore
@@ -127,9 +127,50 @@
 	
 	//弹窗控制
 	const show = ref(false)
-	const showPopup = () =>{
+	const newNickname = ref('')
+	const showPopup = () => {
+		newNickname.value = userName.value || ''
 		show.value = true
 	}
+	
+	// 关闭弹窗方法
+	const hidePopup = () => {
+		show.value = false
+	}
+	
+	// 确认修改用户名
+	const confirmUpdateNickname = async () => {
+		if (!newNickname.value.trim()) {
+			uni.showToast({
+				title: 'Username cannot be empty',
+				icon: 'none'
+			})
+			return
+		}
+		
+		try {
+			const res = await updateNickname({ nickname: newNickname.value })
+			if (res.data) {
+				userName.value = newNickname.value
+				userStore.updateUserInfo('nickname', newNickname.value)
+				hidePopup()
+				uni.showToast({
+					title: 'Update success',
+					icon: 'success'
+				})
+			} else {
+				uni.showToast({
+					title: 'Update failed',
+					icon: 'none'
+				})
+			}
+		} catch (error) {
+			uni.showToast({
+				title: 'Update failed',
+				icon: 'none'
+			})
+		}
+	}
 </script>
 
 <template>
@@ -318,8 +359,30 @@
 		
 		</view>
 		
-		<u-popup v-model="show" mode="center" border-radius="10" closeable>
+		<u-popup :show="show" @close="hidePopup" round="10" :closeable="true">
-			hello
+			<view class="p-6 w-64">
+				<view class="text-lg font-bold mb-4 text-center">Edit Username</view>
+				<input 
+					v-model="newNickname" 
+					class="border border-gray-300 rounded-lg p-3 mb-4" 
+					placeholder="Enter new username"
+					maxlength="20"
+				/>
+				<view class="flex gap-3">
+					<button 
+						class="flex-1 py-2 rounded-lg bg-gray-200 text-gray-700" 
+						@click="hidePopup"
+					>
+						Cancel
+					</button>
+					<button 
+						class="flex-1 py-2 rounded-lg bg-theme text-white" 
+						@click="confirmUpdateNickname"
+					>
+						Confirm
+					</button>
+				</view>
+			</view>
 		</u-popup>
 		
 		<CustomTabBar />