web/pages/user/auth.vue

<template>
  <div class="login-layout mt-[100px] m-auto sm:w-screen-xl w-full">
    <div class="mt-[100px] m-auto flex sm:flex-row flex-col sm:p-0 p-3">
      <!-- 用户菜单 -->
      <UserMenu :activeIndex="activeIndex" @done="onDone" />
      <div class="flash ml-8 bg-white rounded-lg px-7 py-4 w-full">
        <el-tabs class="flash bg-white ml-0">
          <el-tab-pane label="个人认证">
            <el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:py-2">
              <el-form-item label="真实姓名">
                <el-input v-model="form.realName" placeholder="请输入真实姓名" />
              </el-form-item>
              <el-form-item label="证件号码">
                <el-input v-model="form.idCard"  placeholder="请输入证件号码" />
              </el-form-item>
              <el-form-item label="身份证(正面)">
                <Upload />
              </el-form-item>
              <el-form-item label="身份证(反面)">
                <Upload />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="企业认证">
            <el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:py-2">
              <el-form-item label="企业名称">
                <el-input v-model="form.companyName" placeholder="请输入企业名称" />
              </el-form-item>
              <el-form-item label="社会信用代码">
                <el-input v-model="form.idCard"  placeholder="请输入社会信用代码" />
              </el-form-item>
              <el-form-item label="营业执照">
                <Upload />
              </el-form-item>
              <el-form-item label="所属行业">
                <el-select v-model="form.city" placeholder="请选择所属行业">
                </el-select>
              </el-form-item>
              <el-form-item label="网站信息">
                <el-input v-model="form.idCard"  placeholder="请输入网站信息" />
              </el-form-item>
              <el-form-item label="您的身份">
                <el-radio-group v-model="form.sex">
                  <el-radio value="1">法定代表人</el-radio>
                  <el-radio value="2">被授权人</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="用户协议">
                <el-checkbox v-model="form.status">请务必提供真实信息，我司有权自行或委托第三方审查您提供的身份信息是否属真实，有效。若提供虚假信息，由此的全部后果由您承担。</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人认证成功">
            <el-result
                icon="success"
                title="个人认证成功"
                sub-title="认证完成时间 2024-09-30"
            >
              <template #extra>
                <el-button type="text">修改认证信息</el-button>
              </template>
            </el-result>
          </el-tab-pane>
          <el-tab-pane label="企业认证成功">
            <el-result
                icon="success"
                title="企业认证成功"
                sub-title="认证完成时间 2024-09-30"
            >
              <template #extra>
                <el-button type="text">修改认证信息</el-button>
              </template>
            </el-result>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import UserMenu from "~/components/UserMenu.vue";

// 配置信息
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
const activeIndex = ref('');
const website = useWebsite()
const config = useConfigInfo();
const token = useToken();
const userInfo = ref<User>();

// 配置信息
const { form, assignFields } = useFormData<User>({
  userId: undefined,
  nickname: '',
  username: '',
  phone: '',
  mobile: '',
  sex: '',
  sexName: '',
  email: '',
  password: '',
  code: '',
  smsCode: '',
  comments: '',
  remember: true,
  isAdmin: true
});

useHead({
  title: `用户中心 - ${config.value?.siteName}`,
  meta: [{ name: website.value.keywords, content: website.value.comments }]
});

const onSubmit = async () => {
  const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{
    baseURL: runtimeConfig.public.apiServer,
    method: 'put',
    body: form
  })
  if(modify.value?.code == 0){
    ElMessage.success('修改成功')
  }
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer})
  if(response.value?.data){
    userInfo.value = response.value?.data;
    assignFields(response.value?.data);
  }
}

watch(
    () => route.path,
    (path) => {
      activeIndex.value = path;
      console.log(path,'=>Path')
      reload();
    },
    { immediate: true }
);
</script>