buddhism/pages/pray/pray.vue

<template>
  <view class="page">
    <view class="navbar-container">
      <custom-navbar title="在线祈福" />
    </view>
    <view class="background-container">
      <image class="background-image" :src="CommonEnum.BUDDHA_BACKGROUND" mode="aspectFit" />
    </view>
    <view class="header">
      <!-- 香炉图标 -->
      <view class="censer-container">
        <image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" />
      </view>
      
      <!-- 祈福信息表单 -->
      <view class="prayer-form">
        <view class="form-title">
          <text class="title-text">祈福信息</text>
        </view>
        
        <!-- 祈福人姓名 -->
        <view class="form-item">
          <text class="label">祈福人姓名</text>
          <input class="input-field" placeholder="请输入姓名" v-model="formData.name" />
        </view>
        
        <!-- 祈福类型 -->
        <view class="form-item">
          <text class="label">祈福类型</text>
          <view class="select-field" @click="showPrayerTypePicker">
            <text class="select-text">{{ selectedPrayerType }}</text>
            <text class="arrow">></text>
          </view>
        </view>
        
        <!-- 为他人祈福 -->
        <view class="form-item">
          <text class="label">为他人祈福</text>
          <view class="radio-group">
            <view class="radio-item" @click="formData.forOthers = true">
              <view class="radio-button" :class="{ 'checked': formData.forOthers }">
                <text v-if="formData.forOthers" class="checkmark">✓</text>
              </view>
              <text class="radio-text">是</text>
            </view>
            <view class="radio-item" @click="formData.forOthers = false">
              <view class="radio-button" :class="{ 'checked': !formData.forOthers }">
                <text v-if="!formData.forOthers" class="checkmark">✓</text>
              </view>
              <text class="radio-text">否</text>
            </view>
          </view>
        </view>
        
        <!-- 心愿内容 -->
        <view class="form-item">
          <text class="label">心愿内容</text>
          <view class="textarea-container">
            <textarea 
              class="textarea-field" 
              placeholder="请填写心愿内容" 
              v-model="formData.wish"
              maxlength="50"
              :show-confirm-bar="false"
            />
            <text class="char-counter">{{ formData.wish.length }}/50</text>
          </view>
        </view>
      </view>
      <!-- 敬香按钮 -->
      <view class="incense-button" @click="submitPrayer">
        <text class="button-text">敬香</text>
      </view>
    </view>

  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";

export default {
  components: {
    CustomNavbar,
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      formData: {
        name: '',
        prayerType: '个人祈福', // 默认祈福类型
        forOthers: false, // 默认不为他人祈福
        wish: ''
      },
      prayerTypes: ['个人祈福', '为他人祈福', '家庭祈福', '事业祈福', '学业祈福', '健康祈福', '财运祈福', '姻缘祈福', '其他祈福'],
      selectedPrayerType: '个人祈福',
      showPicker: false
    }
  },
  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
      }
    },
    
    // 提交祈福
    submitPrayer() {
      // 表单验证
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入祈福人姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.wish.trim()) {
        uni.showToast({
          title: '请填写心愿内容',
          icon: 'none'
        })
        return
      }
      
      // 显示确认信息
      uni.showModal({
        title: '确认祈福信息',
        content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers ? '是' : '否'}\n心愿内容：${this.formData.wish}`,
        confirmText: '确认敬香',
        cancelText: '修改信息',
        success: (res) => {
          if (res.confirm) {
            this.performPrayer()
          }
        }
      })
    },
    
    // 执行祈福
    async performPrayer() {
      uni.showLoading({
        title: '正在敬香...'
      })
      
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        uni.hideLoading()
        uni.showToast({
          title: '祈福成功！',
          icon: 'success',
          duration: 2000
        })
        
        // 重置表单
        this.resetForm()
        
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '祈福失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 重置表单
    resetForm() {
      this.formData = {
        name: '',
        prayerType: '个人祈福',
        forOthers: false,
        wish: ''
      }
      this.selectedPrayerType = '个人祈福'
    },

    // 显示祈福类型选择器
    showPrayerTypePicker() {
      uni.showActionSheet({
        itemList: this.prayerTypes,
        success: (res) => {
          this.selectedPrayerType = this.prayerTypes[res.index];
          this.formData.prayerType = this.selectedPrayerType;
        },
        fail: (res) => {
          console.error('用户取消选择');
        }
      });
    }
  }
}
</script>

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

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

.navbar-container {
  background-color: #FAF8F3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
}

.background-container {
  position: fixed;
  top: -600rpx; /* 向上移动432rpx (312+120) */
  left: 0;
  width: 100%;
  height: calc(100vh + 432rpx); /* 增加高度以补偿向上移动的距离 */
  z-index: -1;
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx;
  padding-top: 120rpx; /* 为固定导航栏留出空间 */
  padding-bottom: 160rpx; /* 为固定敬香按钮留出空间 */
  z-index: 1;
}

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

.censer-icon {
  width: 648rpx;
  height: 648rpx;
  opacity: 0.8;
}

.prayer-form {
  width: calc(100% - 40rpx);
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  margin: 0 20rpx 60rpx 20rpx;
  border: 2rpx solid #E8E8E8;
}

.form-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40rpx;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.input-field,
.select-field {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #FAFAFA;
}

.select-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20rpx;
}

.select-text {
  font-size: 28rpx;
  color: #333;
}

.arrow {
  font-size: 24rpx;
  color: #999;
}

.radio-group {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 60rpx;
}

.radio-item:last-child {
  margin-right: 0;
}

.radio-button {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #DDD;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.radio-button.checked {
  border-color: #8B2E2E;
  background-color: #8B2E2E;
}

.checkmark {
  font-size: 20rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.radio-text {
  font-size: 28rpx;
  color: #333;
}

.textarea-container {
  position: relative;
}

.textarea-field {
  width: 100%;
  height: 120rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #FAFAFA;
  resize: none;
}

.char-counter {
  position: absolute;
  bottom: 15rpx;
  right: 15rpx;
  font-size: 22rpx;
  color: #999;
}

.incense-button {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  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);
  z-index: 10;
}

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