websoft-cms/pages/developer/index.vue

<template>
  <PageBanner :layout="layout" title="入驻成为开发者" @done="onDone" />
  <div v-if="showContent" class="md:w-screen-xl md:px-0 px-4 m-auto relative sm:flex bg-white rounded-lg py-4 ">
    1231232
    <el-tabs class="px-4 bg-white" v-if="form">
      <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-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-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-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>
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {Navigation} from "~/api/cms/navigation/model";
import type {CompanyParam} from "~/api/system/company/model";
import type {Article} from "~/api/cms/article/model";

const route = useRoute();
// 页面信息
const runtimeConfig = useRuntimeConfig();
const list = ref<Article[]>([]);
const page = ref<number>(1);
const resultText = ref('');
const layout = ref<any>();
const disabled = ref<boolean>(false);

// 获取状态
const form = ref<Navigation>();
const showContent = ref<boolean>(false);
const website = useWebsite();

// 搜索表单
const where = reactive<CompanyParam>({
  keywords: ''
});

const onDone = (index: boolean) => {
  showContent.value = index;
}

// 请求数据
const reload = async (path: string) => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/cms-article/page',{baseURL: runtimeConfig.public.apiServer, params: {
      page: page.value,
      limit: 8,
      userId: 0,
      keywords: where.keywords
    }})
  if(response.value?.data){
    if (list.value.length < response.value?.data.count) {
      disabled.value = false;
      if (response.value?.data.list) {
        list.value = list.value.concat(response.value?.data.list);
      }
    }else {
      disabled.value = true;
    }
    if(response.value.data.count == 0){
      resultText.value = '暂无相关结果'
    }
  }
}

// const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-navigation/getNavigationByPath',{query: {path: route.path}})
// console.log(nav.value?.data)
// if(nav.value?.data){
//   form.value = nav.value?.data;
//   console.log(form.value,'form...')
// }
// // 页面布局
// if(form.value?.layout){
//   layout.value = JSON.parse(form.value?.layout)
// }

useHead({
  title: `开发者中心 - ${website.value?.websiteName}`,
  bodyAttrs: {
    class: "page-container",
  }
});

watch(
    () => route.path,
    (path) => {
      reload(path);
    },
    { immediate: true }
);
</script>