buddhism/pages/pray/praySuccess.vue

<template>
  <view class="page">
    <custom-navbar title="祈福成功" />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!-- 孔明灯图标 -->
      <view class="lantern-container">
        <image
          :src="CommonEnum.KongmingLantern"
          class="lantern-image"
          mode="aspectFit"
        />
      </view>

      <!-- 确认信息 -->
      <view class="confirmation-message">
        <text class="message-title">已为您登记祈福!</text>
        <text class="message-title">将纳入寺院法会回向</text>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <!--        <view class="donate-button" @click="showDonateModal">-->
        <!--          <text class="button-text">捐赠香火钱</text>-->
        <!--        </view>-->
        <view class="return-button" @click="handleReturnHome">
          <text class="button-text">返回首页</text>
        </view>
      </view>
    </view>

    <!-- 捐赠弹窗 -->
    <donate-modal
      :visible="showDonate"
      @close="closeDonateModal"
      @confirm="handleConfirmDonate"
    />
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import DonateModal from "../../components/donate-modal/donate-modal.vue";
import { ordersPray } from "../../api/order/order";

export default {
  components: {
    CustomNavbar,
    DonateModal,
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      showDonate: true,
      PostData: {},
    };
  },
  onLoad(options) {
    this.PostData.prayId = options.prayId;
    // 页面加载时获取数据
    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;
      }
    },

    // 处理捐赠香火钱
    handleDonate() {
      uni.showToast({
        title: "捐赠功能开发中",
        icon: "none",
      });
    },

    // 返回首页
    handleReturnHome() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },

    // 显示捐赠弹窗
    showDonateModal() {
      this.showDonate = true;
    },

    // 关闭捐赠弹窗
    closeDonateModal() {
      this.showDonate = false;
    },

    // 确认捐赠
    handleConfirmDonate(data) {
      const amount = data.isRandom ? "随缘" : data.amount;
      uni.showModal({
        title: "提示",
        content: `您确定要捐赠 ${amount} 元吗？`,
        success: async (res) => {
          if (res.confirm) {
            this.PostData.payAmount = amount;

            this.backCallPay();

            uni.showToast({
              title: "捐赠成功！",
              icon: "success",
            });
            this.closeDonateModal();
          }
        },
      });
    },

    async backCallPay() {
      const res = await ordersPray(this.PostData);
      console.log("@@@@@@@@@", res);
      console.log("@@@@@@@@@", res.data);
      console.log("@@@@@@@@@", res.data.payParams);
      console.log("@@@@@@@@@", res.data.payParams.payUrl);
      const encodedUrl = encodeURIComponent(
        encodeURIComponent(res.data.payParams.payUrl),
      );

      uni.navigateTo({
        url: "/page_user/webView/webView?https=" + encodedUrl,
      });
    },
  },
};
</script>

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

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 15rpx;
  padding-top: 120rpx;
  padding-bottom: 200rpx;
}

.lantern-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 60rpx;

  .lantern-image {
    width: 400rpx;
    height: 400rpx;
    border-radius: 20rpx;
    padding: 20rpx;
  }
}

.confirmation-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;

  .message-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #695347;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .message-subtitle {
    font-size: 28rpx;
    color: #695347;
    text-align: center;
    line-height: 1.5;
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 30rpx;

  .donate-button {
    width: 600rpx;
    height: 100rpx;
    background-color: #8b2e2e;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
    transition: all 0.3s ease;

    &:active {
      background-color: #7a2a2a;
      transform: scale(0.98);
    }

    .button-text {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .return-button {
    width: 600rpx;
    height: 100rpx;
    background-color: #f5f0e7;
    border: 2rpx solid #8b2e2e;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(139, 46, 46, 0.1);
    transition: all 0.3s ease;

    &:active {
      background-color: #f0ebe0;
      transform: scale(0.98);
    }

    .button-text {
      color: #8b2e2e;
      font-size: 36rpx;
      font-weight: bold;
    }
  }
}
</style>