feat:更新朋友圈功能

2025-06-28 15:54:02 +08:00
parent c77c3ff512
commit 0969af5ade
22 changed files with 598 additions and 70 deletions
--- a/src/views/profile/info.vue
+++ b/src/views/profile/info.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="profile-info common-mobile-view">
+    <el-form ref="ruleFormRef"
+             :model="userStore.userInfo"
+             :rules="rules" label-width="auto">
+      <el-form-item label="姓名" prop="username">
+        <el-input v-model="userStore.userInfo.username"
+                  :maxlength="10" show-word-limit
+                  clearable/>
+      </el-form-item>
+
+      <el-form-item label="头像">
+        <upload-image v-model="userStore.userInfo.avatar"
+                      :image-limit="1"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="userStore.imagePath"/>
+      </el-form-item>
+
+      <el-form-item label="性别">
+        <el-radio-group v-model="userStore.userInfo.gender">
+          <el-radio :value="1">男</el-radio>
+          <el-radio :value="0">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="生日">
+        <el-date-picker v-model="userStore.userInfo.birthDate"
+                        type="date" :editable="false" value-format="YYYY-MM-DD"
+                        placeholder="请选择日期"/>
+      </el-form-item>
+
+      <el-form-item label="地区">
+        <el-cascader v-model="userStore.userInfo.area"
+                     placeholder="请选择地区" :options="pcTextArr">
+        </el-cascader>
+      </el-form-item>
+
+      <el-form-item label="手机号">
+        <el-input v-model="userStore.userInfo.phoneNumber"
+                  :maxlength="11" show-word-limit clearable
+                  placeholder="请输入手机号"/>
+      </el-form-item>
+
+      <el-form-item label="邮箱">
+        <el-input v-model="userStore.userInfo.email"
+                  :maxlength="20" show-word-limit clearable
+                  placeholder="请输入邮箱"/>
+      </el-form-item>
+
+      <el-form-item label="地址">
+        <el-input v-model="userStore.userInfo.address"
+                  :maxlength="20" show-word-limit clearable
+                  placeholder="请输入地址"/>
+      </el-form-item>
+
+      <el-form-item label="职业">
+        <el-input v-model="userStore.userInfo.job"
+                  :maxlength="10" show-word-limit clearable
+                  placeholder="请输入职业"/>
+      </el-form-item>
+
+      <el-form-item label="标签">
+        <el-input-tag v-model="userStore.userInfo.tags"
+                      :max="3" placeholder="请输入标签（最多3个）" />
+      </el-form-item>
+
+      <el-form-item label="描述">
+        <el-input v-model="userStore.userInfo.description"
+                  :maxlength="20" show-word-limit clearable
+                  placeholder="用一句话描述自己"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
+      <el-button @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UploadImage } from 'vue3-common'
+import { pcTextArr } from 'element-china-area-data'
+import { useUserStore } from '@/store/user.ts'
+import { reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { profileInfoRules } from '@/utils/element/elRules.ts'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const userStore = useUserStore()
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>(profileInfoRules)
+
+const cancelClick = () => {
+  history.back()
+}
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      await userStore.updateUser()
+      await userStore.queryUser(userStore.userInfo.id)
+      ElMessage.success('更改信息成功')
+      history.back()
+    } else {
+      ElMessage.error('请先填写信息')
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.profile-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>