group_web_merchant/src/views/home/userInfo.vue

<template>
  <div class="user-info-page">
    <div class="top-bar">
      <el-button class="back-btn" @click="handleBack"> 返回 </el-button>
      <div class="title">个人信息111</div>
    </div>
    <div class="form-wrap">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="72px">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="#"
            list-type="picture-card"
            :limit="1"
            :on-exceed="onExceed"
            v-model:file-list="form.avatarList"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入昵称" />
        </el-form-item>

        <el-form-item label="简介" prop="intro">
          <el-input v-model="form.intro" type="textarea" :rows="6" placeholder="请输入简介" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { localGet } from "@/utils/index";
console.log(localGet);
const info = localGet("geeker-user");
console.log(1111111, info);
const formRef = ref<FormInstance>();
const form = reactive({
  avatarList: [] as any[],
  nickname: "重庆老火锅",
  intro: "这——家优秀的火锅店"
});

const rules: FormRules = {
  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  intro: [{ required: true, message: "请输入简介", trigger: "blur" }]
};

const onExceed = () => {
  ElMessage.warning("仅允许上传一张头像");
};

const handleBack = () => {
  history.back();
};

const handleSave = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(valid => {
    if (!valid) return;
    // TODO: 接口保存
    ElMessage.success("保存成功");
  });
};
</script>

<style scoped lang="scss">
.user-info-page {
  padding: 16px;
  background: #ffffff;
  .top-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    .title {
      flex: 1;
      margin-right: 48px; // 平衡左侧返回按钮的宽度
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      text-align: center;
    }
  }
  .form-wrap {
    max-width: 640px;
    margin-top: 16px;
    .avatar-uploader {
      :deep(.el-upload--picture-card) {
        width: 96px;
        height: 96px;
      }
    }
    :deep(.el-form-item__label) {
      color: #303133;
    }
    .actions {
      margin-top: 24px;
      text-align: center;
      .save-btn {
        width: 140px;
      }
    }
  }
}
</style>