refactor: 优化反馈和布局

src/pages/mine/profile/complete-profile.vue

@@ -15,7 +15,47 @@
         <!-- #ifdef MP-WEIXIN -->
         <view class="form-section">
           <view class="section-title">基本信息</view>
-          <WechatProfile v-model="wechatProfileData" @change="onWechatProfileChange" />
+
+          <!-- 内联WechatProfile组件的内容 -->
+          <view class="wechat-profile">
+            <!-- 头像选择 -->
+            <view class="avatar-section">
+              <view class="section-title">头像</view>
+              <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+                <image
+                  v-if="profileForm.avatar"
+                  :src="profileForm.avatar"
+                  class="avatar-image"
+                  mode="aspectFill"
+                />
+                <view v-else class="avatar-placeholder">
+                  <wd-icon name="camera" size="40" color="#999" />
+                  <text class="placeholder-text">选择头像</text>
+                </view>
+              </button>
+            </view>
+
+            <!-- 昵称输入 -->
+            <view class="nickname-section">
+              <view class="section-title">昵称</view>
+              <input
+                v-model="profileForm.nickname"
+                type="nickname"
+                class="nickname-input"
+                placeholder="请输入昵称"
+                :maxlength="20"
+              />
+            </view>
+
+            <!-- 性别选择 -->
+            <view class="gender-section">
+              <view class="section-title">性别</view>
+              <wd-radio-group v-model="profileForm.gender" shape="button" class="gender-group">
+                <wd-radio :value="1" class="gender-radio">男</wd-radio>
+                <wd-radio :value="2" class="gender-radio">女</wd-radio>
+              </wd-radio-group>
+            </view>
+          </view>
         </view>
         <!-- #endif -->
 
@@ -120,7 +160,6 @@ import { useToast } from "wot-design-uni";
 import { useUserStore } from "@/store/modules/user.store";
 import UserAPI, { type UserProfileForm } from "@/api/user";
 import FileAPI, { type FileInfo } from "@/api/file";
-import WechatProfile from "@/components/business/WechatProfile.vue";
 
 const toast = useToast();
 const userStore = useUserStore();
@@ -136,13 +175,6 @@ const profileForm = reactive<UserProfileForm & { mobile?: string }>({
   mobile: "",
 });
 
-// 微信头像昵称数据
-const wechatProfileData = ref({
-  avatar: "",
-  nickname: "",
-  gender: 1,
-});
-
 // 表单验证规则
 const rules = {
   nickname: [
@@ -179,6 +211,26 @@ onLoad((options: any) => {
   }
 });
 
+// 微信小程序头像选择处理
+const onChooseAvatar = async (e: any) => {
+  try {
+    const { avatarUrl } = e.detail;
+
+    // 上传头像到服务器
+    uni.showLoading({ title: "上传中..." });
+
+    const fileInfo: FileInfo = await FileAPI.upload(avatarUrl);
+    profileForm.avatar = fileInfo.url;
+
+    uni.hideLoading();
+    uni.showToast({ title: "头像上传成功", icon: "success" });
+  } catch (error) {
+    uni.hideLoading();
+    console.error("头像上传失败:", error);
+    uni.showToast({ title: "头像上传失败", icon: "error" });
+  }
+};
+
 // 选择头像
 const chooseAvatar = () => {
   // #ifdef MP-WEIXIN
@@ -331,13 +383,6 @@ const handleSkip = () => {
   });
 };
 
-// 微信头像昵称变化处理
-const onWechatProfileChange = (data: { avatar?: string; nickname?: string; gender?: number }) => {
-  profileForm.avatar = data.avatar || "";
-  profileForm.nickname = data.nickname || "";
-  profileForm.gender = data.gender || 1;
-};
-
 // 返回
 function handleBack() {
   uni.navigateBack();
@@ -510,4 +555,86 @@ function handleBack() {
     }
   }
 }
+
+/* 内联WechatProfile组件的样式 */
+.wechat-profile {
+  padding: 20rpx;
+
+  .avatar-section {
+    margin-bottom: 40rpx;
+
+    .avatar-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 160rpx;
+      height: 160rpx;
+      padding: 0;
+      margin: 0 auto;
+      overflow: hidden;
+      background: transparent;
+      border: none;
+      border-radius: 50%;
+
+      &::after {
+        border: none;
+      }
+    }
+
+    .avatar-image {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    .avatar-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background: var(--wot-color-bg-light);
+      border: 2rpx dashed var(--wot-color-border);
+      border-radius: 50%;
+
+      .placeholder-text {
+        margin-top: 10rpx;
+        font-size: 24rpx;
+        color: var(--wot-color-text-secondary);
+      }
+    }
+  }
+
+  .nickname-section {
+    margin-bottom: 40rpx;
+
+    .nickname-input {
+      box-sizing: border-box;
+      width: 100%;
+      height: 80rpx;
+      padding: 0 20rpx;
+      font-size: 28rpx;
+      background: var(--wot-color-bg-light);
+      border: 1rpx solid var(--wot-color-border);
+      border-radius: 12rpx;
+    }
+  }
+
+  .gender-section {
+    .gender-group {
+      display: flex;
+      gap: 20rpx;
+
+      .gender-radio {
+        flex: 1;
+
+        :deep(.wd-radio) {
+          justify-content: center;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
 </style>