未来规划静态界面

components/CircleProgress/CircleProgress.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="circle-progress">
+    <view class="circle-progress__content">
+      <text class="circle-progress__text">{{ percentage }}%</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "CircleProgress",
+  props: {
+    // 圆环进度百分比值，0-100
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (value) => value >= 0 && value <= 100,
+    },
+    // 进度条颜色
+    color: {
+      type: String,
+      default: "#42b983", // 绿色主题色
+    },
+    // 背景颜色
+    backgroundColor: {
+      type: String,
+      default: "#c8c8c8", // 灰色
+    },
+    // 尺寸
+    size: {
+      type: Number,
+      default: 100,
+    },
+    // 边框宽度
+    borderWidth: {
+      type: Number,
+      default: 5,
+    },
+  },
+  computed: {
+    progressStyle() {
+      const degrees = this.percentage * 3.6; // 将百分比转换为角度
+      const style = {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+        borderWidth: `${this.borderWidth}px`,
+        borderColor: this.backgroundColor,
+      };
+
+      // 根据进度设置不同的样式
+      if (this.percentage <= 50) {
+        style.background = `conic-gradient(
+          ${this.color} 0deg ${degrees}deg,
+          ${this.backgroundColor} ${degrees}deg 360deg
+        )`;
+      } else {
+        style.background = `conic-gradient(
+          ${this.color} 0deg 180deg,
+          ${this.backgroundColor} 180deg 360deg
+        )`;
+      }
+
+      return style;
+    },
+    textStyle() {
+      return {
+        fontSize: `${this.size * 0.2}px`,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.circle-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &__content {
+    position: relative;
+    border-radius: 50%;
+    mask: radial-gradient(transparent 60%, black 61%);
+  }
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    color: #333;
+    z-index: 2;
+  }
+}
+</style>

main.js

@@ -1,68 +1,68 @@
-import Vue from 'vue'
-import App from './App'
-import cookies from 'weapp-cookie'
-import uView from 'uview-ui'
+import Vue from "vue";
+import App from "./App";
+import cookies from "weapp-cookie";
+import uView from "uview-ui";
 
 // http接口API集中管理引入部分
 // import httpApi from '@/common/http.api.js'
-import store from './store/index.js'
-import './uni.scss'
+import store from "./store/index.js";
+import "./uni.scss";
 // 公共样式与字体图标
-import './common/css/common.css'
-import './common/css/iconfont.css'
+import "./common/css/common.css";
+import "./common/css/iconfont.css";
 
-import md5 from 'js-md5'
+import md5 from "js-md5";
 
 // 引入公共组件 tabbar
-
-import tabbar from '@/components/tab-bar/tab-bar.vue'
+import tabbar from "@/components/tab-bar/tab-bar.vue";
+import httpConfig from "@/common/http.config.js";
+// 初始化全局loading管理器
+import { initGlobalLoadingManager } from "@/utils/request.js";
+import PageScrollMixin from "./mixins/page-scroll-mixin.js";
 
 // import customizeAnswer from'@/components/customizeAnswer/customizeAnswer.vue'
 // Vue.use('customizeAnswer',customizeAnswer)
-Vue.use('tab-bar', tabbar)
+Vue.use("tab-bar", tabbar);
 
-Vue.use(uView)
-Vue.use(cookies)
-Vue.config.productionTip = false
+Vue.use(uView);
+uni.$u.config.unit = "rpx";
+Vue.use(cookies);
+Vue.config.productionTip = false;
 
-Vue.prototype.$md5 = md5
+Vue.prototype.$md5 = md5;
 
-App.mpType = 'app'
+App.mpType = "app";
 
 // #ifdef APP-PLUS
-Vue.prototype.$store = store
+Vue.prototype.$store = store;
 // #endif
 
 const app = new Vue({
   store,
-  render: h => h(App),
-}).$mount('#app')
-import httpConfig from '@/common/http.config.js'
-Vue.use(httpConfig, app)
+  render: (h) => h(App),
+}).$mount("#app");
 
-// 初始化全局loading管理器
-import { initGlobalLoadingManager } from '@/utils/request.js'
-initGlobalLoadingManager()
+Vue.use(httpConfig, app);
+
+initGlobalLoadingManager();
 // Vue.use(httpApi, app)
 // #ifdef MP-WEIXIN
 Vue.prototype.wxLogin = async function () {
-  console.log('wxLogin')
+  console.log("wxLogin");
   return await new Promise(function (reslove, reject) {
-    let that = this
+    let that = this;
     uni.login({
       success: function (res) {
-        console.log('main.js==>res', res)
-        reslove(res.code)
+        console.log("main.js==>res", res);
+        reslove(res.code);
       },
-    })
-  })
-}
+    });
+  });
+};
 
 // #endif
 
 // app.$mount()
 
-import PageScrollMixin from './mixins/page-scroll-mixin.js'
-
 // 注册全局 mixin
-Vue.mixin(PageScrollMixin)
+Vue.mixin(PageScrollMixin);

package-lock.json

@@ -17,6 +17,7 @@
         "mp-html": "^2.4.2",
         "mpvue-echarts": "^0.3.2",
         "qrcode": "^1.5.4",
+        "uv-ui": "^1.0.25",
         "uview-ui": "^1.8.8",
         "weapp-cookie": "^1.4.8"
       },
@@ -2140,6 +2141,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uv-ui": {
+      "version": "1.0.25",
+      "resolved": "https://registry.npmjs.org/uv-ui/-/uv-ui-1.0.25.tgz",
+      "integrity": "sha512-vMbdewGc49rdGjIdeZdYlvGa5h9k6qks4gLbDPHZJ6PIcqhgPedFie8cIDDcS/bE2WnLxuK+XJIIHC/vPd4suA==",
+      "license": "MIT"
+    },
     "node_modules/uview-ui": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.8.8.tgz",
@@ -3696,6 +3703,11 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "uv-ui": {
+      "version": "1.0.25",
+      "resolved": "https://registry.npmjs.org/uv-ui/-/uv-ui-1.0.25.tgz",
+      "integrity": "sha512-vMbdewGc49rdGjIdeZdYlvGa5h9k6qks4gLbDPHZJ6PIcqhgPedFie8cIDDcS/bE2WnLxuK+XJIIHC/vPd4suA=="
+    },
     "uview-ui": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.8.8.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dianbiao",
   "version": "1.0.0",
-  "description": "",
+  "description": "## 📖 项目简介",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -30,6 +30,7 @@
     "mp-html": "^2.4.2",
     "mpvue-echarts": "^0.3.2",
     "qrcode": "^1.5.4",
+    "uv-ui": "^1.0.25",
     "uview-ui": "^1.8.8",
     "weapp-cookie": "^1.4.8"
   },

pages/future/future.vue

@@ -2,57 +2,318 @@
   <view class="page">
     <custom-navbar title="未来规划" />
     <tile-grid />
-    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
-      <!-- 状态展示 -->
-      <status-display v-if="loading" type="loading" loading-text="加载中..." />
-      <!-- 页面内容将在这里添加 -->
+    <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 StatusDisplay from '../../components/status-display/status-display.vue'
+import CommonEnum from "../../enum/common";
+import CircleProgress from "../../components/CircleProgress/CircleProgress.vue";
 
-  export default {
-    components: {
-      StatusDisplay,
-    },
+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()
+    this.loadPageData();
   },
   methods: {
     // 加载页面数据
     async loadPageData() {
-        this.loading = true
+      this.loading = true;
       try {
         // TODO: 调用页面数据API
         // const response = await getPageData()
         // 模拟加载
         setTimeout(() => {
-            this.loading = false
-          }, 1000)
+          this.loading = false;
+        }, 1000);
       } catch (error) {
-          console.error('获取页面数据失败:', error)
-          this.loading = false
+        console.error("获取页面数据失败:", error);
+        this.loading = false;
       }
     },
   },
-  }
+};
 </script>
 
 <style lang="scss" scoped>
-  .page {
+.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;
       }
-  .header {
+
+      .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;
@@ -60,5 +321,5 @@
   flex-direction: column;
   padding: 0 15rpx;
   padding-bottom: 40rpx;
-  }
+}
 </style>