1

pagesA/edit-profile/edit-profile.vue

@@ -6,8 +6,12 @@
       <view class="profile-item" @click="changeAvatar">
         <view class="item-label">头像</view>
         <view class="item-content">
-					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+          <image
+            class="avatar"
+            :src="userInfo.avatar"
+            mode="aspectFill"
+          ></image>
+          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
         </view>
       </view>
 
@@ -16,7 +20,7 @@
         <view class="item-label">用户名</view>
         <view class="item-content">
           <text class="item-value">{{ userInfo.username }}</text>
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
         </view>
       </view>
 
@@ -25,7 +29,7 @@
         <view class="item-label">电话</view>
         <view class="item-content">
           <text class="item-value">{{ userInfo.phone }}</text>
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
         </view>
       </view>
 
@@ -34,7 +38,7 @@
         <view class="item-label">邮箱</view>
         <view class="item-content">
           <text class="item-value">{{ userInfo.email }}</text>
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
         </view>
       </view>
     </view>
@@ -42,11 +46,11 @@
     <!-- 应用设置 -->
     <view class="app-section">
       <!-- 缓存 -->
-<!-- 			<view class="profile-item" @click="clearCache">
+      <!-- 			<view class="profile-item" @click="clearCache">
 				<view class="item-label">缓存</view>
 				<view class="item-content">
 					<text class="item-value">{{ cacheSize }}</text>
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+					<uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
 				</view>
 			</view> -->
 
@@ -54,7 +58,7 @@
       <view class="profile-item" @click="viewUserAgreement">
         <view class="item-label">用户协议</view>
         <view class="item-content">
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
         </view>
       </view>
 
@@ -62,20 +66,25 @@
       <view class="profile-item" @click="viewAbout">
         <view class="item-label">关于我们</view>
         <view class="item-content">
-					<u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
+          <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
         </view>
       </view>
     </view>
 
     <!-- 退出登录按钮 -->
     <view class="logout-section">
-			<u-button type="primary" size="large" @click="logout" :loading="logoutLoading">
+      <uv-button
+        type="primary"
+        size="large"
+        @click="logout"
+        :loading="logoutLoading"
+      >
         退出登陆
-			</u-button>
+      </uv-button>
     </view>
 
     <!-- 编辑弹窗 -->
-		<u-popup :show="showEditModal" mode="center" @close="closeEditModal" :round="10">
+    <uv-popup ref="editPopup" mode="center" @close="closeEditModal" :round="10">
       <view class="edit-modal">
         <view class="modal-title">
           编辑{{
@@ -83,62 +92,65 @@
               ? "用户名"
               : editType === "phone"
               ? "电话"
-              : "邮箱"
+              : editType === 'email' ? "邮箱" : ''
           }}
         </view>
-				<u-input v-model="editValue" :placeholder="getPlaceholder()" :type="
+        <uv-input
+          v-model="editValue"
+          :placeholder="getPlaceholder()"
+          :type="
             editType === 'phone'
               ? 'number'
               : editType === 'email'
               ? 'email'
               : 'text'
-          " border="bottom" clearable></u-input>
+          "
+          border="bottom"
+          clearable
+        ></uv-input>
         <view class="modal-actions">
-					<u-button type="default" @click="closeEditModal">取消</u-button>
-					<u-button type="primary" @click="saveEdit">保存</u-button>
+          <uv-button type="default" @click="closeEditModal">取消</uv-button>
+          <uv-button type="primary" @click="saveEdit">保存</uv-button>
         </view>
       </view>
-		</u-popup>
+    </uv-popup>
 
     <!-- 头像选择弹窗 -->
-		<u-action-sheet :show="showAvatarSheet" :actions="avatarActions" @close="showAvatarSheet = false"
-			@select="onAvatarSelect"></u-action-sheet>
+    <uv-action-sheet
+      :show="showAvatarSheet"
+      :actions="avatarActions"
+      @close="showAvatarSheet = false"
+      @select="onAvatarSelect"
+    ></uv-action-sheet>
   </view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		onMounted
-	} from "vue";
-	import {
-		onShow
-	} from "@dcloudio/uni-app";
-	import {
-		useAuthStore,
-		useUserStore
-	} from "@/store";
-
-	const authStore = useAuthStore()
-	const userStore = useUserStore()
-
-	// 响应式数据
-	const userInfo = ref({
+import { ref, onMounted } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import { useAuthStore, useUserStore } from "@/store";
+
+const authStore = useAuthStore();
+const userStore = useUserStore();
+
+// 响应式数据
+const userInfo = ref({
   avatar: "/static/imgs/avatar.png",
   username: "张三",
   phone: "15825556676",
   email: "235382903@qq.com",
-	});
+});
 
-	const cacheSize = ref("36MB");
-	const logoutLoading = ref(false);
-	const showEditModal = ref(false);
-	const showAvatarSheet = ref(false);
-	const editType = ref("");
-	const editValue = ref("");
+const cacheSize = ref("36MB");
+const logoutLoading = ref(false);
+const showAvatarSheet = ref(false);
+const editType = ref("");
+const editValue = ref("");
+const editPopup = ref(null);
 
-	// 头像选择选项
-	const avatarActions = ref([{
+// 头像选择选项
+const avatarActions = ref([
+  {
     name: "拍照",
     value: "camera",
   },
@@ -146,15 +158,15 @@
     name: "从相册选择",
     value: "album",
   },
-	]);
+]);
 
-	// 更换头像
-	const changeAvatar = () => {
+// 更换头像
+const changeAvatar = () => {
   showAvatarSheet.value = true;
-	};
+};
 
-	// 头像选择回调
-	const onAvatarSelect = (item) => {
+// 头像选择回调
+const onAvatarSelect = (item) => {
   showAvatarSheet.value = false;
 
   uni.chooseImage({
@@ -182,31 +194,31 @@
       });
     },
   });
-	};
+};
 
-	// 编辑用户名
-	const editUsername = () => {
+// 编辑用户名
+const editUsername = () => {
   editType.value = "username";
   editValue.value = userInfo.value.username;
-		showEditModal.value = true;
-	};
+  editPopup.value.open();
+};
 
-	// 编辑电话
-	const editPhone = () => {
+// 编辑电话
+const editPhone = () => {
   editType.value = "phone";
   editValue.value = userInfo.value.phone;
-		showEditModal.value = true;
-	};
+  editPopup.value.open();
+};
 
-	// 编辑邮箱
-	const editEmail = () => {
+// 编辑邮箱
+const editEmail = () => {
   editType.value = "email";
   editValue.value = userInfo.value.email;
-		showEditModal.value = true;
-	};
+  editPopup.value.open();
+};
 
-	// 获取输入框占位符
-	const getPlaceholder = () => {
+// 获取输入框占位符
+const getPlaceholder = () => {
   switch (editType.value) {
     case "username":
       return "请输入用户名";
@@ -217,17 +229,17 @@
     default:
       return "请输入";
   }
-	};
+};
 
-	// 关闭编辑弹窗
-	const closeEditModal = () => {
-		showEditModal.value = false;
+// 关闭编辑弹窗
+const closeEditModal = () => {
+  editPopup.value.close();
   editType.value = "";
   editValue.value = "";
-	};
+};
 
-	// 保存编辑
-	const saveEdit = async () => {
+// 保存编辑
+const saveEdit = async () => {
   if (!editValue.value.trim()) {
     uni.showToast({
       title: "请输入内容",
@@ -278,10 +290,10 @@
       icon: "none",
     });
   }
-	};
+};
 
-	// 清除缓存
-	const clearCache = () => {
+// 清除缓存
+const clearCache = () => {
   uni.showModal({
     title: "清除缓存",
     content: "确定要清除应用缓存吗？",
@@ -303,24 +315,24 @@
       }
     },
   });
-	};
+};
 
-	// 查看用户协议
-	const viewUserAgreement = () => {
+// 查看用户协议
+const viewUserAgreement = () => {
   uni.navigateTo({
     url: "/pagesA/user-agreement/user-agreement",
   });
-	};
+};
 
-	// 查看关于我们
-	const viewAbout = () => {
-		uni.navigateTo({
-			url: "/pagesA/about/about",
-		});
-	};
+// 查看关于我们
+const viewAbout = () => {
+//   uni.navigateTo({
+//     url: "/pagesA/about/about",
+//   });
+};
 
-	// 退出登录
-	const logout = () => {
+// 退出登录
+const logout = () => {
   uni.showModal({
     title: "退出登录",
     content: "确定要退出登录吗？",
@@ -330,7 +342,7 @@
 
         // 模拟退出登录
         setTimeout(() => {
-						authStore.signOut()
+          authStore.signOut();
           logoutLoading.value = false;
 
           // 清除用户信息和token
@@ -349,10 +361,10 @@
       }
     },
   });
-	};
+};
 
-	// 加载用户信息
-	const loadUserInfo = async () => {
+// 加载用户信息
+const loadUserInfo = async () => {
   try {
     // 调用获取用户信息API
     // const result = await RPC.get('/api/user/info')
@@ -360,36 +372,36 @@
   } catch (error) {
     console.error("加载用户信息失败:", error);
   }
-	};
+};
 
-	// 计算缓存大小
-	const calculateCacheSize = () => {
+// 计算缓存大小
+const calculateCacheSize = () => {
   // 实际项目中应该计算真实的缓存大小
   // const size = await getCacheSize()
   // cacheSize.value = formatSize(size)
-	};
+};
 
-	onMounted(() => {
+onMounted(() => {
   loadUserInfo();
   calculateCacheSize();
-	});
+});
 
-	onShow(() => {
+onShow(() => {
   // 页面显示时刷新用户信息
   loadUserInfo();
-	});
+});
 </script>
 
 <style lang="scss" scoped>
-	.container {
+.container {
   font-size: 14px;
   min-height: 100vh;
   background-color: #f8f8f8;
   padding: 16px;
-	}
+}
 
-	.profile-section,
-	.app-section {
+.profile-section,
+.app-section {
   background: white;
   border-radius: 12px;
   margin-bottom: 16px;
@@ -429,13 +441,13 @@
       }
     }
   }
-	}
+}
 
-	.logout-section {
+.logout-section {
   margin-top: 32px;
-	}
+}
 
-	.edit-modal {
+.edit-modal {
   width: 300px;
   padding: 24px;
 
@@ -452,9 +464,9 @@
     gap: 12px;
     margin-top: 20px;
 
-			.u-button {
+    .uv-button {
       flex: 1;
     }
   }
-	}
+}
 </style>