待测试

pages/profile/m02-edit-profile.vue

@@ -48,13 +48,21 @@
               placeholder-class="placeholder"
               :disabled="saving || uploading"
           /></view>
-          <view class="form-row form-row--readonly"
-            ><text>性别</text
-            ><view class="readonly-value"
-              ><text>{{ form.sex ? "待确认" : "未设置" }}</text
-              ><text>选项待提供</text></view
-            ></view
-          >
+          <view class="form-row">
+            <text>性别</text>
+            <picker
+              :range="sexOptions"
+              range-key="label"
+              :value="sexIndex"
+              :disabled="saving || uploading"
+              @change="changeSex"
+              ><view
+                class="picker-value"
+                :class="{ 'picker-value--placeholder': !form.sex }"
+                >{{ sexOptions[sexIndex].label }}</view
+              ></picker
+            >
+          </view>
           <view class="form-row">
             <text>生日</text>
             <picker
@@ -142,6 +150,17 @@ const feedbackMessage = ref("");
 const requestController = createRequestController();
 let feedbackTimer = null;
 let pageActive = true;
+const sexOptions = [
+  { value: "", label: "请选择" },
+  { value: "0", label: "男" },
+  { value: "1", label: "女" },
+  { value: "2", label: "未知" },
+];
+
+const sexIndex = computed(() => {
+  const index = sexOptions.findIndex((option) => option.value === form.sex);
+  return index === -1 ? 0 : index;
+});
 
 const avatarMessage = computed(() => {
   if (avatarFileName.value) return `已选择 ${avatarFileName.value}`;
@@ -190,6 +209,10 @@ const changeBirthday = (event) => {
   form.birthday = event?.detail?.value || "";
 };
 
+const changeSex = (event) => {
+  form.sex = sexOptions[Number(event?.detail?.value)]?.value || "";
+};
+
 const uploadAvatar = async () => {
   if (uploading.value || saving.value) return;
   uploading.value = true;
@@ -359,22 +382,6 @@ onUnload(() => {
   align-items: center;
   justify-content: flex-end;
 }
-.readonly-value {
-  display: flex;
-  min-height: 68rpx;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12rpx;
-  color: $ink-muted;
-}
-.readonly-value text:first-child {
-  color: $ink;
-  font-size: 23rpx;
-}
-.readonly-value text:last-child {
-  color: $ink-muted;
-  font-size: 19rpx;
-}
 .picker-value--placeholder,
 .placeholder {
   color: #ab9a86;