buddhism/pages/pray/praySuccess.vue

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

export default {
  components: {
    CustomNavbar,
    DonateModal
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      showDonate: true
    }
  },
  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
      }
    },
    
    // 处理捐赠香火钱
    handleDonate() {
      uni.showToast({
        title: '捐赠功能开发中',
        icon: 'none'
      })
    },
    
    // 返回首页
    handleReturnHome() {
      uni.reLaunch({
        url: '/pages/nearbystores/index'
      })
    },

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

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

    // 确认捐赠
    handleConfirmDonate(data) {
      const amount = data.isRandom ? '随缘' : data.amount;
      uni.showModal({
        title: '提示',
        content: `您确定要捐赠 ${amount} 元吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '捐赠成功！',
              icon: 'success'
            });
            this.closeDonateModal();
          }
        }
      });
    }
  }
}
</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>