施工详情页面开发

pages.json

@@ -93,6 +93,13 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/institutionalStructure/projectDetail",
+      "style": {
+        "navigationBarTitleText": "施工详情",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
     {
       "path": "pages/basePage/basePage",
       "style": {

pages/future/future.vue

@@ -50,16 +50,16 @@
             :key="item.id"
             class="constructionSituation"
           >
-            <view class="project-info">
+            <view class="project-info" @click="goProjectDetail(item)">
               <view class="line-left">
                 <image :src="buddhaIcon" mode="aspectFill"></image>
                 <view class="line"></view>
               </view>
-              <view class="info">
+              <view class="info" @click="">
                 <view class="time">
                   {{ item.createTime }}
                 </view>
-                <text>施工情况</text>
+                <text>{{ item.title }}</text>
                 <rich-text :nodes="item.content"></rich-text>
               </view>
               <image
@@ -127,7 +127,7 @@ export default {
         donorCount: 6,
         amountSum: 6666,
       },
-      listData: [
+      winB_List: [
         {
           id: "18",
           templeId: "12",
@@ -139,6 +139,17 @@ export default {
           coverUrl: "https://api.ccttiot.com/IMG01-1751968117197.jpg",
         },
 
+        {
+          id: "19",
+          templeId: "12",
+          title: "施工情况01232",
+          content:
+            "<p>施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02施工情况02...</p>",
+          status: "1",
+          templeName: "寒山寺",
+          createTime: "2025-07-09 13:50:57",
+          coverUrl: "https://api.ccttiot.com/IMG01-1751968117197.jpg",
+        },
         {
           id: "19",
           templeId: "12",
@@ -217,6 +228,11 @@ export default {
         },
       });
     },
+    goProjectDetail(item) {
+      uni.navigateTo({
+        url: `/pages/institutionalStructure/projectDetail?title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createTime=${encodeURIComponent(item.createTime)}&coverUrl=${encodeURIComponent(item.coverUrl)}`,
+      });
+    },
   },
 };
 </script>

pages/institutionalStructure/projectDetail.vue

@@ -0,0 +1,102 @@
+<template>
+  <view class="project-detail-container">
+    <!-- 封面图片 -->
+    <image
+      v-if="projectData.coverUrl"
+      :src="projectData.coverUrl"
+      class="cover-image"
+      mode="widthFix"
+    />
+
+    <!-- 标题和日期 -->
+    <view class="header">
+      <text class="title">{{ projectData.title }}</text>
+      <text v-if="projectData.createTime" class="time">
+        {{ formatDate(projectData.createTime) }}
+      </text>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="content-box">
+      <rich-text :nodes="projectData.content"></rich-text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "projectDetail",
+  data() {
+    return {
+      projectData: {
+        title: "",
+        content: "",
+        createTime: "",
+        coverUrl: "",
+      },
+    };
+  },
+  onLoad(options) {
+    this.projectData = {
+      title: decodeURIComponent(options.title || ""),
+      content: decodeURIComponent(options.content || ""),
+      createTime: decodeURIComponent(options.createTime || ""),
+      coverUrl: decodeURIComponent(options.coverUrl || ""),
+    };
+  },
+  methods: {
+    // 格式化日期
+    formatDate(timestamp) {
+      if (!timestamp) return "";
+      const date = new Date(timestamp);
+      return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
+
+      function padZero(num) {
+        return num < 10 ? `0${num}` : num;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.project-detail-container {
+  padding: 30rpx;
+  background-color: #fff;
+}
+
+.cover-image {
+  width: 100%;
+  border-radius: 12rpx;
+  margin-bottom: 30rpx;
+}
+
+.header {
+  margin-bottom: 30rpx;
+
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    line-height: 1.5;
+    display: block;
+    margin-bottom: 10rpx;
+  }
+
+  .time {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.content-box {
+  padding: 20rpx 0;
+
+  .content {
+    font-size: 30rpx;
+    color: #666;
+    line-height: 1.8;
+    white-space: pre-wrap;
+  }
+}
+</style>