..

src/main/resources/views/platform/zhghh5/staffbenefit/huimin/mine/index.html

@@ -2,6 +2,61 @@
 layout("/layouts/platform_h5.html"){
 #-->
 
+<style>
+    .detail-content {
+        padding: 16px;
+        max-height: 70vh;
+        overflow-y: auto;
+    }
+
+    .detail-cover {
+        margin-bottom: 16px;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    .detail-text {
+        margin-bottom: 16px;
+    }
+
+    .content-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: #323233;
+        margin-bottom: 8px;
+    }
+
+    .content-html {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #646566;
+        word-break: break-all;
+    }
+
+    .content-html p {
+        margin: 8px 0;
+    }
+
+    .detail-link {
+        margin-bottom: 16px;
+    }
+
+    .detail-info {
+        border-top: 1px solid #ebedf0;
+        padding-top: 12px;
+    }
+
+    .info-item {
+        font-size: 12px;
+        color: #969799;
+        margin-bottom: 4px;
+    }
+
+    .info-item:last-child {
+        margin-bottom: 0;
+    }
+</style>
+
 <div id="app" v-cloak>
     <van-nav-bar title="惠民服务" left-text="返回" left-arrow @click-left="historyBack" placeholder fixed></van-nav-bar>
     <van-sticky offset-top="46px">
@@ -10,19 +65,57 @@ layout("/layouts/platform_h5.html"){
                 :show-action="false"
                 :reverse-color="false"
                 input-align="left"
-                placeholder="请输入姓名/工号搜索"
+                placeholder="请输入关键字搜索"
                 @search="doSearch"
         ></van-search>
     </van-sticky>
 
     <table-list api="/platform/huimin/mine/pageData"
                 :page_form.sync="pageForm"
-                json
                 @ready="onReady"
-                img=""
+                img="cover"
                 ref="tableListRef">
+        <template v-slot="{index,row}">
+            <table-column label="标题">{{row.title}}</table-column>
+        </template>
+        <template #actions="{index,row}">
+            <div class="action-btn" @click="onView(row)">
+                <i class="fa fa-eye"></i>
+                <span>查看</span>
+            </div>
+        </template>
     </table-list>
 
+    <!-- 详情弹出层 -->
+    <van-action-sheet v-model="showDetail" :title="currentItem.title">
+        <div class="detail-content">
+            <!-- 封面图片 -->
+            <div class="detail-cover" v-if="currentItem.cover">
+                <van-image :src="currentItem.cover" fit="cover" width="100%" height="200px"></van-image>
+            </div>
+
+            <!-- 内容 -->
+            <div class="detail-text" v-if="currentItem.content">
+                <div class="content-label">详细内容：</div>
+                <div class="content-html" v-html="currentItem.content"></div>
+            </div>
+
+            <!-- 外部链接 -->
+            <div class="detail-link" v-if="currentItem.link">
+                <van-button type="primary" block @click="openLink(currentItem.link)">
+                    <van-icon name="link"></van-icon>
+                    访问链接
+                </van-button>
+            </div>
+
+            <!-- 创建时间 -->
+            <div class="detail-info">
+                <div class="info-item">创建时间：{{ formatTime(currentItem.createdAt) }}</div>
+                <div class="info-item" v-if="currentItem.updatedAt !== currentItem.createdAt">更新时间：{{ formatTime(currentItem.updatedAt) }}</div>
+            </div>
+        </div>
+    </van-action-sheet>
+
 </div>
 
 <script>
@@ -39,12 +132,14 @@ layout("/layouts/platform_h5.html"){
                     delegationId: null,
                     roleId: null
                 },
+                showDetail: false,
+                currentItem: {}
             }
         },
         methods: {
             historyBack,
             onReady(){
-
+                this.doSearch()
             },
             doSearch() {
                 this.$nextTick(() => {
@@ -52,6 +147,26 @@ layout("/layouts/platform_h5.html"){
                     this.pageForm.totalCount = 0
                     this.$refs.tableListRef.doSearch()
                 })
+            },
+            onView(row){
+                this.currentItem = row
+                this.showDetail = true
+            },
+            openLink(url) {
+                if (url) {
+                    window.open(url, '_blank')
+                }
+            },
+            formatTime(timestamp) {
+                if (!timestamp) return ''
+                const date = new Date(timestamp)
+                return date.toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                })
             }
         }
     })