提现功能需要添加

pages/my-index/personal-center/index.vue

@@ -1,27 +1,84 @@
 <script setup>
+  import { reactive } from 'vue'
   import { useAuthUser } from '@/composables/useAuthUser'
+  import PopupBox from '../components/popup-box.vue'
+  import { chooseImage } from '@/utils/media.js'
+  import { uploadSingleFile } from '@/utils/uploadFile'
+  import { useUserStore } from '@/stores/user'
+
+  const { updateUserInfo } = useUserStore()
 
   const itemList = [
     { title: '我的二维码', key: '1', value: '' },
     { title: 'ID', key: '2', value: 'userId' },
     { title: '昵称', key: '3', value: 'userName' },
-    { title: '性别', key: '4', value: '' },
+    { title: '性别', key: '4', value: 'sex' },
     { title: '手机号码', key: '5', value: 'mobile' },
-    { title: '个性签名', key: '6', value: '' }
+    { title: '个性签名', key: '6', value: 'perSignature' }
   ]
+  /** 可修改的 key  */
+  const MODIFY_KEY = ['3', '4', '6']
 
   const { userInfo } = useAuthUser()
+
+  const popupData = reactive({
+    show: false,
+    title: '修改信息',
+    name: '',
+    key: '',
+    value: ''
+  })
+  const formData = reactive({
+    avatar: '',
+    userName: '',
+    sex: '',
+    perSignature: ''
+  })
+  const upInfo = (key, value) => {
+    if (MODIFY_KEY.includes(key)) {
+      const titleData = {
+        3: '昵称',
+        4: '性别',
+        6: '个性签名'
+      }[key]
+      popupData.value = value
+      popupData.key = key
+      popupData.title = titleData
+      popupData.name = userInfo.value[value]
+      popupData.show = true
+    }
+  }
+
+  const editAvatar = async () => {
+    const paths = await chooseImage({ count: 1 })
+    const url = await uploadSingleFile(paths[0], {
+      url: '/api/common/admin/upload/up/single'
+    })
+    formData.avatar = url
+    updateUserInfo({ avatar: url })
+  }
+
+  const onConfirm = () => {
+    if (MODIFY_KEY.includes(popupData.key)) {
+      if (popupData.name === userInfo.value[popupData.value]) return
+      if (popupData.name === '') return
+      updateUserInfo({ [popupData.value]: popupData.name })
+    }
+  }
 </script>
 
 <template>
+  <nav-bar isTopBg isPlaceholder title="个人中心"></nav-bar>
   <view class="personal-center">
-    <view class="public-card">
+    <view class="public-card" @click="editAvatar">
       <view class="left-img">
         <image
-          src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
+          v-if="userInfo.avatar"
+          :src="userInfo.avatar"
           mode="aspectFill"
           class="avatar"
         ></image>
+        <uni-icons v-else type="contact-filled" size="60"></uni-icons>
       </view>
       <view class="right-box">
         <text class="value">换头像</text>
@@ -33,20 +90,37 @@
       v-for="(item, index) in itemList"
       :key="index"
       class="public-card"
+      @click="upInfo(item.key, item.value)"
     >
       <view class="left-box">
         <text>{{ item.title }}</text>
         <text v-if="item.key === '6'" class="text">
-          这个人很懒，什么也没有
+          {{ userInfo[item.value] || '这个人很懒，什么也没有' }}
         </text>
       </view>
       <view class="right-box">
-        <text v-if="!['1', '6'].includes(item.key)" class="value">
-          {{ item.value ? userInfo[item.value] : '' }}
-        </text>
+        <view v-if="!['1', '6'].includes(item.key)" class="value">
+          <text v-if="item.key === '4'">
+            {{
+              userInfo[item.value] === '2'
+                ? '未设置'
+                : userInfo[item.value] === '0'
+                ? '男'
+                : '女'
+            }}
+          </text>
+          <text v-else>{{ item.value ? userInfo[item.value] : '' }}</text>
+        </view>
         <uni-icons type="right" size="16" color="#999999"></uni-icons>
       </view>
     </view>
+    <popup-box
+      v-model="popupData.show"
+      v-model:name="popupData.name"
+      :isSex="popupData.key === '4'"
+      :title="popupData.title"
+      @confirm="onConfirm"
+    />
   </view>
 </template>