hookehuyr

feat(index): 新增页眉显示控制并重构模板结构

新增page_header.disabled配置项以控制页眉区域显示,重构模板结构优化代码可读性与维护性
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-05-25 18:13:47 4 + * @LastEditTime: 2026-06-02 14:59:03
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -9,24 +9,26 @@ ...@@ -9,24 +9,26 @@
9 <van-notice-bar v-if="formSetting.sjsj_is_count_down" left-icon="volume-o" :text="notice_text" scrollable 9 <van-notice-bar v-if="formSetting.sjsj_is_count_down" left-icon="volume-o" :text="notice_text" scrollable
10 mode="closeable" /> 10 mode="closeable" />
11 <div v-if="!show_loading" class="table-box"> 11 <div v-if="!show_loading" class="table-box">
12 - <template v-if="PHeader.visible && (page_type === 'add' || model === 'preview')"> 12 + <template v-if="PHeader.show_desc">
13 - <van-image v-if="PHeader.type === 'image' && PHeader.cover" width="100%" :src="PHeader.cover + '?imageView2/0/w/2000'" fit="cover" /> 13 + <template v-if="PHeader.visible && (page_type === 'add' || model === 'preview')">
14 - <template v-if="PHeader.type === 'carousel'"> 14 + <van-image v-if="PHeader.type === 'image' && PHeader.cover" width="100%" :src="PHeader.cover + '?imageView2/0/w/2000'" fit="cover" />
15 - <van-swipe class="my-swipe" lazy-render indicator-color="white"> 15 + <template v-if="PHeader.type === 'carousel'">
16 - <van-swipe-item v-for="image in PHeader.cover" :key="index"><img :src="image" 16 + <van-swipe class="my-swipe" lazy-render indicator-color="white">
17 - style="height: 12rem; width: 100%; object-fit: cover" /></van-swipe-item> 17 + <van-swipe-item v-for="image in PHeader.cover" :key="index"><img :src="image"
18 - </van-swipe> 18 + style="height: 12rem; width: 100%; object-fit: cover" /></van-swipe-item>
19 + </van-swipe>
20 + </template>
21 + <div v-if="PHeader.type === 'text'" class="PHeader-Text" v-html="PHeader.banner" />
19 </template> 22 </template>
20 - <div v-if="PHeader.type === 'text'" class="PHeader-Text" v-html="PHeader.banner" /> 23 + <div v-if="PHeader.label" class="table-title" v-html="PHeader.label" />
24 + <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
21 </template> 25 </template>
22 - <div v-if="PHeader.label" class="table-title" v-html="PHeader.label" />
23 <!-- TAG:总分支持0分显示,避免因真假值判断被隐藏 --> 26 <!-- TAG:总分支持0分显示,避免因真假值判断被隐藏 -->
24 <div 27 <div
25 v-if="PHeader.x_total_score !== undefined && PHeader.x_total_score !== null && PHeader.x_total_score !== ''" 28 v-if="PHeader.x_total_score !== undefined && PHeader.x_total_score !== null && PHeader.x_total_score !== ''"
26 style="font-weight: bold; color: red; text-align: center; font-size: 0.9rem;" 29 style="font-weight: bold; color: red; text-align: center; font-size: 0.9rem;"
27 >总分: {{ PHeader.x_total_score }}</div> 30 >总分: {{ PHeader.x_total_score }}</div>
28 <div v-if="PHeader.flow_node_name" style="text-align: center;">({{ PHeader.flow_node_name }})</div> 31 <div v-if="PHeader.flow_node_name" style="text-align: center;">({{ PHeader.flow_node_name }})</div>
29 - <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
30 <van-config-provider :theme-vars="themeVars"> 32 <van-config-provider :theme-vars="themeVars">
31 <van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true"> 33 <van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true">
32 <van-cell-group :border="false"> 34 <van-cell-group :border="false">
...@@ -467,6 +469,7 @@ onMounted(async () => { ...@@ -467,6 +469,7 @@ onMounted(async () => {
467 * @param banner_url 页眉图片地址 469 * @param banner_url 页眉图片地址
468 * @param description 描述内容 470 * @param description 描述内容
469 * @param invisible 页眉展示 471 * @param invisible 页眉展示
472 + * @param disabled 描述内容是否显示
470 */ 473 */
471 if (page_header) { 474 if (page_header) {
472 PHeader.value = { 475 PHeader.value = {
...@@ -476,6 +479,7 @@ onMounted(async () => { ...@@ -476,6 +479,7 @@ onMounted(async () => {
476 cover: page_header.banner_url, 479 cover: page_header.banner_url,
477 banner: page_header.banner, 480 banner: page_header.banner,
478 visible: !page_header.invisible, 481 visible: !page_header.invisible,
482 + show_desc: !page_header.disabled,
479 flow_node_name: formSetting.value.flow_node_name ? formSetting.value.flow_node_name : '', // 节点名称 483 flow_node_name: formSetting.value.flow_node_name ? formSetting.value.flow_node_name : '', // 节点名称
480 }; 484 };
481 } 485 }
......