未来规划动态0.5

pages/future/future.vue

@@ -1,22 +1,24 @@
 <template>
   <view class="page">
-    <custom-navbar title="未来规划" />
+    <custom-navbar ref="customNavbar" title="未来规划" />
     <tile-grid />
     <view class="bg">
       <view class="container">
         <text class="proName">{{ projectDetails.proName }}</text>
-        <image :src="imgUrl" class="imgUrl" mode="aspectFill"></image>
+        <image
+          :src="projectDetails.imgUrl"
+          class="imgUrl"
+          mode="aspectFill"
+        ></image>
         <text class="tip">{{ projectDetails.proName }}效果图</text>
         <text class="planTitle">用善意，筑就明天的模样</text>
         <text class="proProfile">{{ projectDetails.proProfile }}</text>
         <text class="introduce">项目介绍</text>
-        <rich-text :nodes="proIntroduce"></rich-text>
+        <rich-text :nodes="projectDetails.proIntroduce"></rich-text>
         <view class="donorContainer">
           <text>项目筹款情况</text>
           <view class="donorData">
-            <view class="CircleProgress">
+            <view class="CircleProgress"></view>
-              <CircleProgress :percentage="30" />
-            </view>
 
             <view class="data-info">
               <view class="data-row">
@@ -37,27 +39,48 @@
             >查看捐款记录
             <u-icon name="arrow-right"></u-icon>
           </view>
-          <view class="new-develop-container">
+        </view>
-            <text>最新进展</text>
+        <view class="new-develop-container">
-            <view
+          <text class="section-title">最新进展</text>
-              v-for="(index, item) in listData"
+          <view
-              :key="item"
+            v-for="item in listData"
-              class="constructionSituation"
+            :key="item.id"
-            >
+            class="constructionSituation"
+          >
+            <view class="project-info">
+              <view class="line-left">
+                <image :src="buddhaIcon" mode="aspectFill"></image>
+                <view class="line"></view>
+              </view>
+              <view class="info">
+                <view class="time">
+                  {{ item.createTime }}
+                </view>
+                <text>施工情况</text>
+                <rich-text :nodes="item.content"></rich-text>
+              </view>
+              <image
+                v-if="item.coverUrl"
+                :src="item.coverUrl"
+                class="content-image"
+                mode="aspectFill"
+              ></image>
             </view>
           </view>
+          <view class="more">查看更多{{ listData.length }}条数据</view>
         </view>
       </view>
     </view>
+    <button>捐一笔</button>
   </view>
 </template>
 
 <script>
 import CommonEnum from "../../enum/common";
-import CircleProgress from "../../components/CircleProgress/CircleProgress.vue";
+import { getInstitutionalDetail } from "../../api/institutionalStructure/institutionalStructureDetail";
 
 export default {
-  components: { CircleProgress },
+  components: {},
   data() {
     return {
       CommonEnum,
@@ -72,9 +95,9 @@ export default {
         scope: null,
         deleted: null,
         areaPermissions: null,
-        id: "1",
+        id: "6",
         templeId: "11",
-        proName: "某某大殿少林寺",
+        proName: "123",
         proProfile: "我们计划在202X-203X年完成这些重要建设，邀您共同见证",
         formedYear: null,
         imgUrl: "https://api.ccttiot.com/IMG01-1751968117197.jpg",
@@ -84,8 +107,8 @@ export default {
         state: "1",
         createId: null,
         templeName: "少林寺",
-        donorCount: 0,
+        donorCount: 6,
-        amountSum: null,
+        amountSum: 6666,
       },
       listData: [
         {
@@ -96,6 +119,17 @@ export default {
           status: "1",
           templeName: "寒山寺",
           createTime: "2025-07-09 13:50:57",
+          coverUrl: "https://api.ccttiot.com/IMG01-1751968117197.jpg",
+        },
+        {
+          id: "17",
+          templeId: "12",
+          title: "施工情况02",
+          content: "<p>施工情况02施工情况02...</p>",
+          status: "1",
+          templeName: "寒山寺",
+          createTime: "2025-07-09 13:50:57",
+          coverUrl: "https://api.ccttiot.com/IMG01-1751968117197.jpg",
         },
       ],
     };
@@ -109,12 +143,10 @@ export default {
     async loadPageData() {
       this.loading = true;
       try {
-        // TODO: 调用页面数据API
+        const response = await getInstitutionalDetail(6);
-        // const response = await getPageData()
+        if (response.code === 200) {
-        // 模拟加载
+          this.projectDetails = response.data;
-        setTimeout(() => {
+        }
-          this.loading = false;
-        }, 1000);
       } catch (error) {
         console.error("获取页面数据失败:", error);
         this.loading = false;
@@ -126,7 +158,7 @@ export default {
 
 <style lang="scss" scoped>
 .page {
-  background: #f5f0e7;
+  background: linear-gradient(to bottom, #f5f0e7 500rpx, #fff 500rpx);
 
   .bg {
     //background: #faf8f3;
@@ -189,7 +221,7 @@ export default {
         margin-top: 16rpx;
         padding-left: 30rpx;
         width: 100%;
-        height: 32rpx;
+
         font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
         font-weight: 400;
         font-size: 24rpx;
@@ -231,13 +263,13 @@ export default {
       }
 
       .donorContainer {
+        margin-bottom: 34rpx;
         padding: 30rpx;
         margin-top: 30rpx;
         width: 100%;
         background: #fffbf5;
         border-radius: 20rpx 20rpx 20rpx 20rpx;
         border: 2rpx solid #c7a26d;
-        padding: 30rpx;
 
         text {
           width: 190rpx;
@@ -309,17 +341,130 @@ export default {
           text-transform: none;
         }
       }
+
+      .new-develop-container {
+        width: 708rpx;
+        height: 586rpx;
+        background: #fffbf5;
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        border: 2rpx solid #c7a26d;
+        padding: 30rpx;
+        display: flex;
+        flex-direction: column;
+
+        .section-title {
+          width: 100%;
+          height: 44rpx;
+          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+          font-weight: 400;
+          font-size: 32rpx;
+          color: #695347;
+          line-height: 44rpx;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+
+        .constructionSituation {
+          .project-info {
+            display: flex;
+
+            .line-left {
+              margin-right: 16rpx;
+
+              image {
+                width: 18rpx;
+                height: 19rpx;
+              }
+
+              .line {
+                margin-left: 8rpx;
+                width: 0;
+                height: 189rpx;
+                border: 2rpx #d8d8d8 dashed;
+              }
+            }
+
+            .info {
+              margin-right: 46rpx;
+              width: 368rpx;
+
+              .time {
+                width: 100%;
+                height: 28rpx;
+                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+                font-weight: 400;
+                font-size: 20rpx;
+                color: #808080;
+                line-height: 28rpx;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+              }
+
+              text {
+                width: 112rpx;
+                height: 38rpx;
+                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+                font-weight: 400;
+                font-size: 28rpx;
+                color: #695347;
+                line-height: 38rpx;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+              }
+
+              rich-text {
+                width: 368rpx;
+                height: 114rpx;
+                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+                font-weight: 400;
+                font-size: 24rpx;
+                color: #808080;
+                line-height: 38rpx;
+                letter-spacing: 2px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+
+            .content-image {
+              width: 198rpx;
+              height: 198rpx;
+              background: #d8d8d8;
+              border-radius: 8rpx 8rpx 8rpx 8rpx;
+            }
+          }
+        }
+
+        .more {
+          width: 100%;
+          height: 32rpx;
+          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #522510;
+          line-height: 32rpx;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
     }
   }
 }
 
-.header {
+button {
-  width: 100%;
+  position: fixed;
-  min-height: 100vh;
+  left: 51rpx;
-  display: flex;
+  bottom: 24rpx;
-  align-items: flex-start;
+  width: 648rpx;
-  flex-direction: column;
+  height: 90rpx;
-  padding: 0 15rpx;
+  background: #a24242;
-  padding-bottom: 40rpx;
+  border-radius: 45rpx 45rpx 45rpx 45rpx;
+
+  color: #fff;
 }
 </style>