✨ feat: 新增页眉组件配置

@@ -6,8 +6,21 @@
  * @Description: 首页
  * @Description: 首页
 -->
 -->
 <template>
 <template>
-  <van-image v-if="table_cover" width="100%" height="200" :src="table_cover" />
-  <div v-if="table_title" class="table-title">{{ table_title }}</div>
+  <van-image
+    v-if="PHeader.type === '单张图'"
+    width="100%"
+    height="200"
+    :src="PHeader.cover"
+  />
+  <template v-if="PHeader.type === '轮播图'">
+    <van-swipe class="my-swipe" lazy-render indicator-color="white">
+      <van-swipe-item v-for="image in PHeader.cover" :key="index"
+        ><img :src="image" style="height: 12rem; width: 100%; object-fit: cover"
+      /></van-swipe-item>
+    </van-swipe>
+  </template>
+  <div v-if="PHeader.label" class="table-title">{{ PHeader.label }}</div>
+  <div v-if="PHeader.description" class="table-desc">{{ PHeader.description }}</div>
   <div class="table-box">
   <div class="table-box">
     <van-form @submit="onSubmit">
     <van-form @submit="onSubmit">
       <van-cell-group>
       <van-cell-group>
@@ -37,8 +50,9 @@ import { addFormDataAPI } from "@/api/data.js";
 import { showSuccessToast, showFailToast } from "vant";
 import { showSuccessToast, showFailToast } from "vant";
 
 
 const $route = useRoute();
 const $route = useRoute();
-const table_cover = ref("");
-const table_title = ref("");
+const PHeader = ref({});
+const PHeader_cover = ref("");
+const PHeader_title = ref("");
 const mockData = ref([]);
 const mockData = ref([]);
 const formData = ref([]);
 const formData = ref([]);
 const postData = ref({});
 const postData = ref({});
@@ -76,9 +90,38 @@ const formatData = (data) => {
 onMounted(async () => {
 onMounted(async () => {
   const { data } = await queryFormAPI({ form_code: $route.query.code });
   const { data } = await queryFormAPI({ form_code: $route.query.code });
   const form_data = data[0];
   const form_data = data[0];
-  table_cover.value = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
-  table_title.value = form_data.name;
-  formData.value = formatData(form_data.field_list);
+  // 重构数据结构
+  let page_header = {};
+  let page_form = [];
+  form_data.field_list.forEach((element) => {
+    if (element.component_code === "page_header") {
+      // 页眉组件
+      const list = element.property_list;
+      list.forEach((ele) => {
+        page_header[ele["property_code"]] =
+          ele.setting_value.length > 1 ? ele.setting_value : ele.setting_value[0];
+      });
+    } else {
+      page_form.push(element);
+    }
+  });
+  // TODO: 后期需要适配多种图片展示方式，展示只显示单张图片模式
+  /** 页眉属性
+   * @param label 表单标题
+   * @param banner_type 页眉类型：["文字", "单张图", "轮播图"]
+   * @param banner_url 页眉图片地址
+   * @param description 描述内容
+   * @param invisible 页眉展示
+   */
+  if (page_header && page_header.invisible) {
+    PHeader.value = {
+      label: page_header.label,
+      description: page_header.description,
+      type: page_header.banner_type,
+      cover: page_header.banner_url,
+    };
+  }
+  formData.value = formatData(page_form);
   // mockData.value = [
   // mockData.value = [
   //   {
   //   {
   //     key: "",
   //     key: "",
@@ -173,6 +216,13 @@ const validOther = () => {
 <style lang="less" scoped>
 <style lang="less" scoped>
 .table-title {
 .table-title {
   padding: 1rem;
   padding: 1rem;
+  font-size: 1.15rem;
+  text-align: center;
+}
+.table-desc {
+  padding: 0rem 1rem;
+  color: #666;
+  font-size: 0.9rem;
 }
 }
 .table-box {
 .table-box {
   padding: 1rem;
   padding: 1rem;