From e1aa8a7326ed3b4d065e9d345764c79f0f6ab94d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B3=A2?= <>
Date: Mon, 28 Oct 2024 23:03:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/my-info/components/InfoEdit.vue     | 129 ++++++++++++++++++
 src/pages/my-info/components/PasswordEdit.vue |  11 +-
 src/pages/my-info/index.vue                   |  87 ++++++------
 3 files changed, 181 insertions(+), 46 deletions(-)
 create mode 100644 src/pages/my-info/components/InfoEdit.vue

diff --git a/src/pages/my-info/components/InfoEdit.vue b/src/pages/my-info/components/InfoEdit.vue
new file mode 100644
index 0000000..98173e9
--- /dev/null
+++ b/src/pages/my-info/components/InfoEdit.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+  import { useToast } from 'wot-design-uni'
+
+  const { success: showSuccess, error: showError } = useToast()
+
+  const props = defineProps<{
+    modelValue: boolean
+    userInfo: object
+  }>()
+  const emit = defineEmits(['update:modelValue', 'confirm'])
+
+  const form = reactive({
+    nickname: '',
+    email: '',
+    sex: ''
+  })
+
+  const formRef = ref()
+
+  const rules = {
+    nickname: [{ required: true, message: '请输入用户名' }],
+    email: [
+      {
+        required: true,
+        message: '请输入邮箱',
+        type: 'email'
+      }
+    ]
+  }
+
+  const resetForm = () => {
+    form.nickname = ''
+    form.email = ''
+    form.sex = ''
+  }
+  watch(
+    () => props.modelValue,
+    () => {
+      if (!props.userInfo) {
+        return
+      }
+      form.nickname = props.userInfo.nickname
+      form.email = props.userInfo.email
+      form.sex = props.userInfo.sex
+    }
+  )
+
+  const handleClose = () => {
+    emit('update:modelValue', false)
+    resetForm()
+  }
+
+  const handleConfirm = () => {
+    formRef.value.validate().then(({ valid, errors }) => {
+      if (!valid) {
+        showError({ msg: '请检查输入是否正确' })
+        return
+      }
+      // 这里可以添加修改密码的逻辑
+      emit('confirm', form)
+      handleClose()
+    })
+  }
+</script>
+
+<template>
+  <wd-popup
+    customStyle="border-radius: 26rpx 26rpx 0 0;"
+    :model-value="props.modelValue"
+    position="bottom"
+    @close="handleClose"
+  >
+    <view class="edit-container">
+      <view class="edit-title">修改信息</view>
+      <wd-form ref="formRef" :model="form" :rules="rules">
+        <wd-input
+          label="用户名"
+          label-width="180rpx"
+          prop="nickname"
+          v-model="form.nickname"
+          placeholder="请输入用户名"
+        />
+        <wd-input
+          label="邮箱"
+          label-width="180rpx"
+          prop="email"
+          v-model="form.email"
+          placeholder="请输入邮箱"
+        />
+        <wd-cell title="性别" title-width="180rpx">
+          <view class="gender-selection">
+            <wd-radio-group v-model="form.sex" inline shape="dot">
+              <wd-radio :value="1">男</wd-radio>
+              <wd-radio :value="2">女</wd-radio>
+            </wd-radio-group>
+          </view>
+        </wd-cell>
+      </wd-form>
+      <view class="edit-buttons">
+        <wd-button size="large" type="primary" block @click="handleConfirm"
+          >确认</wd-button
+        >
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<style scoped lang="scss">
+  .gender-selection {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .edit-container {
+    width: 100%;
+    padding: 30rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+  }
+
+  .edit-title {
+    margin-bottom: 30rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+  }
+
+  .edit-buttons {
+    margin-top: 40rpx;
+  }
+</style>
diff --git a/src/pages/my-info/components/PasswordEdit.vue b/src/pages/my-info/components/PasswordEdit.vue
index d41181c..10c580a 100644
--- a/src/pages/my-info/components/PasswordEdit.vue
+++ b/src/pages/my-info/components/PasswordEdit.vue
@@ -59,6 +59,7 @@
 
 <template>
   <wd-popup
+    customStyle="border-radius: 26rpx 26rpx 0 0;"
     :model-value="props.modelValue"
     position="bottom"
     @close="handleClose"
@@ -89,8 +90,9 @@
         />
       </wd-form>
       <view class="password-edit-buttons">
-        <wd-button type="info" @click="handleClose">取消</wd-button>
-        <wd-button type="primary" @click="handleConfirm">确认</wd-button>
+        <wd-button size="large" type="primary" block @click="handleConfirm"
+          >确认</wd-button
+        >
       </view>
     </view>
   </wd-popup>
@@ -98,7 +100,7 @@
 
 <style scoped lang="scss">
   .password-edit-container {
-    width: 600rpx;
+    width: 100%;
     padding: 30rpx;
     background-color: #fff;
     border-radius: 16rpx;
@@ -108,12 +110,9 @@
     margin-bottom: 30rpx;
     font-size: 36rpx;
     font-weight: bold;
-    text-align: center;
   }
 
   .password-edit-buttons {
-    display: flex;
-    justify-content: space-between;
     margin-top: 40rpx;
   }
 </style>
diff --git a/src/pages/my-info/index.vue b/src/pages/my-info/index.vue
index cb37b92..e1cce7c 100644
--- a/src/pages/my-info/index.vue
+++ b/src/pages/my-info/index.vue
@@ -36,12 +36,20 @@
     <wd-form ref="form" :model="formData" class="info-form" errorType="toast">
       <!-- 可编辑信息部分 -->
       <wd-cell-group border class="form-group editable-group">
-        <view class="section-title">个人信息</view>
+        <view
+          class="flex justify-between items-center"
+          style="border-bottom: 2rpx solid #eaeaea"
+        >
+          <view class="section-title">个人信息</view>
+          <view @click="editInfo" class="section-des"
+            >修改信息<wd-icon name="arrow-right"></wd-icon
+          ></view>
+        </view>
         <wd-input
           label="用户名"
           label-width="180rpx"
           prop="nickname"
-          clearable
+          disabled
           v-model="formData.nickname"
           placeholder="请输入用户名"
           :rules="[{ required: true, message: '请输入用户名' }]"
@@ -50,7 +58,7 @@
           label="邮箱"
           label-width="180rpx"
           prop="email"
-          clearable
+          disabled
           v-model="formData.email"
           placeholder="请输入邮箱"
           :rules="[
@@ -63,10 +71,7 @@
         />
         <wd-cell title="性别" title-width="180rpx">
           <view class="gender-selection">
-            <wd-radio-group v-model="formData.sex" inline shape="dot">
-              <wd-radio :value="1">男</wd-radio>
-              <wd-radio :value="2">女</wd-radio>
-            </wd-radio-group>
+            {{ formData.sex == 1 ? '男' : '女' }}
           </view>
         </wd-cell>
       </wd-cell-group>
@@ -134,12 +139,11 @@
         </wd-cell>
       </wd-cell-group>
 
-      <view class="submit-button">
-        <wd-button type="primary" size="large" block @click="handleSubmit">
-          保存
-        </wd-button>
-      </view>
-
+      <InfoEdit
+        :user-info="formData"
+        v-model="showInfoEdit"
+        @confirm="handleInfoEditConfirm"
+      />
       <!-- 添加 PasswordEdit 组件 -->
       <PasswordEdit
         v-model="showPasswordEdit"
@@ -150,19 +154,15 @@
 </template>
 
 <script lang="ts" setup>
-  import { useUserStore } from '@/store'
-  import { useMessage, useToast } from 'wot-design-uni'
+  import { useToast } from 'wot-design-uni'
   import PasswordEdit from './components/PasswordEdit.vue'
+  import InfoEdit from './components/InfoEdit.vue'
   import {
     getUserProfile,
     updateUserProfile,
     updateUserProfilePassword
   } from '@/service/my-info/MyInfoAPI'
 
-  // TODO @dengbo：这几个用不到的变量，可以去掉哈
-  const message = useMessage()
-  const userStore = useUserStore()
-
   const src = ref<string>('')
   const imgSrc = ref<string>('')
   const show = ref<boolean>(false)
@@ -185,6 +185,7 @@
   const { success: showSuccess } = useToast()
   const form = ref()
 
+  const showInfoEdit = ref(false)
   const showPasswordEdit = ref(false)
 
   // 添加微信信息
@@ -196,24 +197,20 @@
   // 添加微信绑定状态
   const isWechatBound = ref(true)
 
-  function handleSubmit() {
-    form.value
-      .validate()
-      .then(async ({ valid, errors }) => {
-        if (valid) {
-          // 这里可以添加保存用户信息的逻辑
-          const result = await updateUserProfile(formData)
-          if (!result) {
-            return
-          }
-          showSuccess({
-            msg: '修改成功'
-          })
-        }
-      })
-      .catch((error) => {
-        console.log(error, 'error')
-      })
+  function editInfo() {
+    showInfoEdit.value = true
+  }
+
+  async function handleInfoEditConfirm(formData: any) {
+    // 这里可以添加修改密码的逻辑
+    const result = await updateUserProfile(formData)
+    if (!result) {
+      return
+    }
+    showSuccess({
+      msg: '修改成功'
+    })
+    initInfo()
   }
 
   function changePassword() {
@@ -258,9 +255,8 @@
 
   const user = ref<any>({})
 
-  onLoad(async (_option) => {
+  async function initInfo() {
     const res = await getUserProfile()
-    console.log(res)
     if (!res) {
       return
     }
@@ -290,6 +286,10 @@
     // } else {
     //   isWechatBound.value = false
     // }
+  }
+
+  onLoad(async (_option) => {
+    initInfo()
   })
 
   // 添加这两个新函数
@@ -352,6 +352,9 @@
 </script>
 
 <style lang="scss" scoped>
+  :deep(.uni-input-input:disabled) {
+    color: var(--wot-cell-value-color, rgba(0, 0, 0, 0.85)) !important;
+  }
   .my-info-container {
     min-height: 100vh;
     padding: 30rpx;
@@ -413,7 +416,11 @@
     font-weight: 600;
     color: #333;
     background-color: #fff;
-    border-bottom: 2rpx solid #eaeaea;
+  }
+  .section-des {
+    margin-right: 20rpx;
+    font-size: 28rpx;
+    color: red;
   }
 
   .editable-group {
-- 
Gitee