未来规划界面，弹窗捐款

api/institutionalStructure/institutionalStructure.js

@@ -1,5 +1,6 @@
 // 建制相关API
 import { get } from "@/utils/request";
+import request from "../../utils/request";
 
 /**
  * 获取建制数据列表
@@ -19,3 +20,25 @@ export function getInstitutionalList(params = {}) {
   };
   return get("/app/formed/listFormed", { ...defaultParams, ...params });
 }
+
+/**
+ * 提交建制捐款
+ * @param {Object} data 从选区创建新的临时文件数据
+ * @param {string} data.name 祈福人姓名
+ * @param {string} data.type 祈福类型值 (1-学业, 2-健康, 3-姻缘, 4-财运, 5-消灾)
+ * @param {string} data.isOthers 是否为他人祈福 (1-是, 2-否)
+ * @param {string} data.content 心愿内容
+ * @returns {Promise} API响应
+ */
+export function postInstitutionalStructure(data) {
+  return request({
+    url: "/app/orders/formed",
+    method: "POST",
+    data: {
+      payAmount: String(data.payAmount || ""),
+      channelId: 1,
+      templeId: String(data.templeId || ""),
+      formedId: String(data.formedId || ""),
+    },
+  });
+}

pages/future/future.vue

@@ -88,6 +88,53 @@
     <button v-if="projectDetails.state === '2'" @click="handleDonate">
       捐一笔
     </button>
+    <u-popup v-model="show" border-radius="30" height="614rpx" mode="bottom">
+      <view class="donation">
+        <view class="title-row">
+          <view class="title">为寺庙建设捐出</view>
+          <u-icon class="close-icon" name="close"></u-icon>
+        </view>
+
+        <view class="donation-tip">
+          <view class="amount">100元</view>
+          <view class="equivalent">，相当于1次健康祈福</view>
+        </view>
+
+        <u-line color="#D8D8D8" />
+
+        <view class="select">
+          <view
+            v-for="(item, index) in donationList"
+            :key="index"
+            :class="{ active: selectedIndex === index }"
+            class="donation-option"
+            @click="selectOption(index)"
+          >
+            {{ item }}次健康祈福
+          </view>
+        </view>
+
+        <view class="customMoney">
+          <input
+            v-model="customAmount"
+            class="custom-input"
+            placeholder="自定义金额"
+            type="number"
+            @input="handleCustomInput"
+          />
+          <u-icon
+            class="reload-icon"
+            name="reload"
+            @click="randomAmount"
+          ></u-icon>
+          <text class="random-text" @click="randomAmount">随缘</text>
+        </view>
+
+        <button class="confirm-btn" @click="toDonation">
+          确认支付￥{{ payAmount }}
+        </button>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -98,6 +145,7 @@ import {
   getProjectSchedule,
 } from "../../api/institutionalStructure/institutionalStructureDetail";
 import { createPagination } from "../../composables/winB_Pagination";
+import { postInstitutionalStructure } from "../../api/institutionalStructure/institutionalStructure";
 
 export default {
   mixins: [
@@ -107,12 +155,17 @@ export default {
       pageSize: 2,
     }),
   ],
-  components: {},
   data() {
     return {
+      show: false,
       CommonEnum,
       buddhaIcon: "https://api.ccttiot.com/image-1756353071821.png",
       loading: false,
+      donationList: [1, 5, 10],
+      selectedIndex: 0,
+      customAmount: "",
+      payAmount: "",
+
       projectDetails: {
         // createBy: null,
         // createTime: "2025-07-08 17:50:26",
@@ -256,33 +309,42 @@ export default {
 
       if (this.projectDetails.state !== "1") {
         // 执行捐赠逻辑
-        uni.showModal({
+        this.show = true;
-          title: "提示", // 标题（可选）
-          content: "确定要执行此操作吗？", // 内容
-          confirmText: "确定", // 确认按钮文字（默认"确定"）
-          cancelText: "取消", // 取消按钮文字（默认"取消"）
-          confirmColor: "#007AFF", // 确认按钮颜色
-          cancelColor: "#555555", // 取消按钮颜色
-          showCancel: true, // 是否显示取消按钮（默认true）
-          success: (res) => {
-            if (res.confirm) {
-              console.log("用户点击确定");
-              // 执行确认操作
-            } else if (res.cancel) {
-              console.log("用户点击取消");
-              // 执行取消操作
-            }
-          },
-          fail: (err) => {
-            console.error("弹窗调用失败:", err);
-            uni.showToast({
-              title: "操作失败，请重试",
-              icon: "none",
-            });
-          },
-        });
       }
     },
+    selectOption(index) {
+      this.selectedIndex = index;
+      this.payAmount = this.donationList[index] * 100;
+      this.customAmount = "";
+    },
+    handleCustomInput() {
+      if (this.customAmount) {
+        this.payAmount = parseInt(this.customAmount);
+        this.selectedIndex = -1;
+      } else {
+        this.payAmount = "";
+      }
+    },
+    randomAmount() {
+      // 生成随机金额（50-1000）
+      const randomAmount = Math.floor(Math.random() * (1000 - 50 + 1)) + 50;
+      this.customAmount = randomAmount.toString();
+      this.payAmount = randomAmount;
+      this.selectedIndex = -1;
+    },
+
+    async toDonation() {
+      let res = await postInstitutionalStructure({
+        payAmount: this.payAmount,
+        formedId: this.formedId,
+      });
+      this.openPaymentUrl(res.data.payParams.payUrl);
+    },
+
+    // 封装打开支付链接的方法
+    openPaymentUrl(payUrl) {
+      window.location.href = payUrl;
+    },
   },
   computed: {
     // 计算筹款进度百分比
@@ -634,4 +696,146 @@ button {
     line-height: 1.6;
   }
 }
+
+//捐款
+
+.donation {
+  background: #ffffff;
+  padding: 32rpx;
+}
+
+.title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+
+  .title {
+    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;
+  }
+
+  .close-icon {
+    font-size: 36rpx;
+    color: #999;
+  }
+}
+
+.donation-tip {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 30rpx;
+
+  .amount {
+    height: 54rpx;
+    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+    font-weight: 400;
+    font-size: 40rpx;
+    color: #a24242;
+    line-height: 54rpx;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+
+  .equivalent {
+    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;
+  }
+}
+
+.select {
+  display: flex;
+  gap: 20rpx;
+  margin: 40rpx 0;
+
+  .donation-option {
+    padding: 24rpx;
+
+    border: 2rpx solid #eeeeee;
+
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    transition: all 0.3s ease;
+
+    background: #fff1dd;
+    border-radius: 6rpx 6rpx 6rpx 6rpx;
+
+    &.active {
+      color: #a24242;
+      font-weight: bold;
+      background: #ffcdcd;
+      border-radius: 6rpx 6rpx 6rpx 6rpx;
+      border: 1rpx solid #a24242;
+    }
+  }
+}
+
+.customMoney {
+  display: flex;
+  align-items: center;
+  margin: 40rpx 0;
+  padding: 20rpx;
+  background: #f8f8f8;
+  border-radius: 12rpx;
+
+  .custom-input {
+    flex: 1;
+    font-size: 28rpx;
+    color: #333;
+    background: transparent;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: #999;
+    }
+  }
+
+  .reload-icon {
+    margin: 0 20rpx;
+    font-size: 32rpx;
+    color: #666;
+  }
+
+  .random-text {
+    font-size: 28rpx;
+    color: #3d3d3d;
+    font-weight: 500;
+  }
+}
+
+.confirm-btn {
+  width: 686rpx;
+  height: 90rpx;
+  background: #a24242;
+  border-radius: 45rpx 45rpx 45rpx 45rpx;
+
+  border: none;
+
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: bold;
+  box-shadow: 0 4rpx 16rpx rgba(255, 68, 68, 0.3);
+
+  &:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 2rpx 8rpx rgba(255, 68, 68, 0.3);
+  }
+}
 </style>