buddhism/pages/future/future.vue

<template>
  <view class="page">
    <custom-navbar title="未来规划" />
    <tile-grid />
    <view class="bg">
      <view class="container">
        <text class="proName">{{ projectDetails.proName }}</text>
        <image :src="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>
        <view class="donorContainer">
          <text>项目筹款情况</text>
          <view class="donorData">
            <view class="CircleProgress">
              <CircleProgress :percentage="30" />
            </view>

            <view class="data-info">
              <view class="data-row">
                <view class="label">公众筹款目标(元):</view>
                <view class="value">{{ projectDetails.totalAmount }}</view>
              </view>
              <view class="data-row">
                <view class="label">当前筹款金额(元):</view>
                <view class="value">{{ projectDetails.amountSum }}</view>
              </view>
              <view class="data-row">
                <view class="label">当前捐款人次:</view>
                <view class="value">{{ projectDetails.donorCount }}</view>
              </view>
            </view>
          </view>
          <view class="record"
            >查看捐款记录
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view class="new-develop-container">
            <text>最新进展</text>
            <view
              v-for="(index, item) in listData"
              :key="item"
              class="constructionSituation"
            >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import CircleProgress from "../../components/CircleProgress/CircleProgress.vue";

export default {
  components: { CircleProgress },
  data() {
    return {
      CommonEnum,
      buddhaIcon: "https://api.ccttiot.com/image-1756353071821.png",
      loading: false,
      projectDetails: {
        createBy: null,
        createTime: "2025-07-08 17:50:26",
        updateBy: null,
        updateTime: null,
        remark: null,
        scope: null,
        deleted: null,
        areaPermissions: null,
        id: "1",
        templeId: "11",
        proName: "某某大殿少林寺",
        proProfile: "我们计划在202X-203X年完成这些重要建设，邀您共同见证",
        formedYear: null,
        imgUrl: "https://api.ccttiot.com/IMG01-1751968117197.jpg",
        proIntroduce:
          "<p>项目介绍项目介绍项目介绍项目介绍项目介绍项目介</p><p>绍项目介绍项目介绍项目介绍项目介绍项目介绍</p><p>项目介绍项目介绍项目介绍项目介绍项目介绍项目介</p><p>绍项目介绍项目介绍项目</p><p>项目介绍项目介绍项目介绍项目介绍项目介绍项目介</p><p>绍项目介绍项目介绍项目介绍项目介绍项目介绍</p>",
        totalAmount: 10000101.0,
        state: "1",
        createId: null,
        templeName: "少林寺",
        donorCount: 0,
        amountSum: null,
      },
      listData: [
        {
          id: "18",
          templeId: "12",
          title: "施工情况02",
          content: "<p>施工情况02施工情况02...</p>",
          status: "1",
          templeName: "寒山寺",
          createTime: "2025-07-09 13:50:57",
        },
      ],
    };
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData();
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true;
      try {
        // TODO: 调用页面数据API
        // const response = await getPageData()
        // 模拟加载
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      } catch (error) {
        console.error("获取页面数据失败:", error);
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #f5f0e7;

  .bg {
    //background: #faf8f3;
    background: #fff;
    padding: 32rpx 22rpx 162rpx;

    .container {
      flex-direction: column;
      display: flex;

      .proName {
        width: 100%;
        height: 50rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #522510;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .imgUrl {
        margin-top: 22rpx;
        width: 708rpx;
        height: 370rpx;
      }

      .tip {
        margin-top: 20rpx;
        width: 100%;
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #695347;
        line-height: 32rpx;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }

      /* 计划标题样式 */
      .planTitle {
        margin-top: 12rpx;
        padding-left: 30rpx;
        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;
      }

      /* 项目简介样式 */
      .proProfile {
        margin-top: 16rpx;
        padding-left: 30rpx;
        width: 100%;
        height: 32rpx;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        color: #695347;
        line-height: 32rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      /* 介绍标题样式 */
      .introduce {
        margin-top: 38rpx;
        margin-bottom: 42rpx;
        width: 100%;
        height: 54rpx;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 40rpx;
        color: #695347;
        line-height: 54rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      /* 富文本容器样式 */
      .rich-text {
        width: 100%;
        height: 270rpx;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 28rpx;
        color: #695347;
        line-height: 45rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .donorContainer {
        padding: 30rpx;
        margin-top: 30rpx;
        width: 100%;
        background: #fffbf5;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 2rpx solid #c7a26d;
        padding: 30rpx;

        text {
          width: 190rpx;
          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;
        }

        .donorData {
          margin-top: 30rpx;
          display: flex;

          .CircleProgress {
            flex: 1;
          }

          .data-info {
            flex: 3;

            .data-row {
              display: flex;
              justify-content: space-between;

              .label {
                width: 192rpx;
                height: 32rpx;
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 400;
                font-size: 24rpx;
                color: #808080;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                width: 188rpx;
                height: 50rpx;
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 400;
                font-size: 36rpx;
                color: #3d3d3d;
                line-height: 50rpx;
                text-align: right;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }

        .record {
          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 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx;
  padding-bottom: 40rpx;
}
</style>