1

pagesA/edit-profile/edit-profile.vue

@@ -92,7 +92,9 @@
               ? "用户名"
               : editType === "phone"
               ? "电话"
-              : editType === 'email' ? "邮箱" : ''
+              : editType === "email"
+              ? "邮箱"
+              : ""
           }}
         </view>
         <uv-input
@@ -116,12 +118,33 @@
     </uv-popup>
 
     <!-- 头像选择弹窗 -->
-    <uv-action-sheet
-      :show="showAvatarSheet"
-      :actions="avatarActions"
-      @close="showAvatarSheet = false"
-      @select="onAvatarSelect"
-    ></uv-action-sheet>
+    <uv-popup
+      ref="avatarSheet"
+      mode="bottom"
+      @close="closeAvatarSheet"
+      :round="10"
+    >
+      <view class="avatar-sheet">
+        <view class="sheet-header">
+          <view class="sheet-title">选择头像</view>
+        </view>
+        <view class="sheet-actions">
+          <view class="action-item" @click="selectAvatarSource('camera')">
+            <uv-icon name="camera-fill" size="24" color="#4285f4"></uv-icon>
+            <text class="action-text">拍照</text>
+          </view>
+          <view class="action-item" @click="selectAvatarSource('album')">
+            <uv-icon name="photo-fill" size="24" color="#4285f4"></uv-icon>
+            <text class="action-text">从相册选择</text>
+          </view>
+        </view>
+        <view class="sheet-cancel">
+          <uv-button type="default" size="large" @click="closeAvatarSheet">
+            取消
+          </uv-button>
+        </view>
+      </view>
+    </uv-popup>
   </view>
 </template>
 
@@ -143,38 +166,34 @@ const userInfo = 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([
-  {
-    name: "拍照",
-    value: "camera",
-  },
-  {
-    name: "从相册选择",
-    value: "album",
-  },
-]);
+const avatarSheet = ref(null);
 
 // 更换头像
 const changeAvatar = () => {
-  showAvatarSheet.value = true;
+  console.log("点击更换头像");
+  avatarSheet.value.open();
+};
+
+// 关闭头像选择弹窗
+const closeAvatarSheet = () => {
+  avatarSheet.value.close();
 };
 
-// 头像选择回调
-const onAvatarSelect = (item) => {
-  showAvatarSheet.value = false;
+// 选择头像来源
+const selectAvatarSource = (source) => {
+  console.log("选择头像方式:", source);
+  avatarSheet.value.close();
 
   uni.chooseImage({
     count: 1,
     sizeType: ["compressed"],
-    sourceType: item.value === "camera" ? ["camera"] : ["album"],
+    sourceType: source === "camera" ? ["camera"] : ["album"],
     success: (res) => {
       const tempFilePath = res.tempFilePaths[0];
+      console.log("选择图片成功:", tempFilePath);
 
       // 这里应该上传图片到服务器
       // uploadAvatar(tempFilePath)
@@ -187,7 +206,8 @@ const onAvatarSelect = (item) => {
         icon: "success",
       });
     },
-    fail: () => {
+    fail: (err) => {
+      console.error("选择图片失败:", err);
       uni.showToast({
         title: "选择图片失败",
         icon: "none",
@@ -326,9 +346,9 @@ const viewUserAgreement = () => {
 
 // 查看关于我们
 const viewAbout = () => {
-//   uni.navigateTo({
-//     url: "/pagesA/about/about",
-//   });
+  //   uni.navigateTo({
+  //     url: "/pagesA/about/about",
+  //   });
 };
 
 // 退出登录
@@ -469,4 +489,51 @@ onShow(() => {
     }
   }
 }
+
+.avatar-sheet {
+  padding: 20px;
+
+  .sheet-header {
+    text-align: center;
+    margin-bottom: 20px;
+
+    .sheet-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .sheet-actions {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px;
+
+    .action-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      padding: 20px;
+      border-radius: 8px;
+      background: #f8f9fa;
+      min-width: 100px;
+      transition: all 0.3s;
+
+      &:active {
+        background: #e9ecef;
+        transform: scale(0.95);
+      }
+
+      .action-text {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+
+  .sheet-cancel {
+    margin-top: 10px;
+  }
+}
 </style>