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-background">
        <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 = 1">
                <text class="radio-text">是</text>
                <view class="radio-button" :class="{ checked: formData.forOthers === 1 }">
                  <text v-if="formData.forOthers === 1" class="checkmark">✓</text>
                </view>
              </view>
              <view class="radio-item" @click="formData.forOthers = 2">
                <text class="radio-text">否</text>
                <view class="radio-button" :class="{ checked: formData.forOthers === 2 }">
                  <text v-if="formData.forOthers === 2" class="checkmark">✓</text>
                </view>
              </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>
      <!-- 敬香按钮 -->
      <bottom-button title="敬香" type="primary" @click="submitPrayer" />
    </view>
  </view>
</template>

<script>
  import CommonEnum from '../../enum/common'
  import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue'
  import BottomButton from '../../components/bottom-button/bottom-button.vue'
  import { submitPrayer } from '@/api/pray/pray'

  export default {
    components: {
      CustomNavbar,
      BottomButton,
    },
    data() {
      return {
        CommonEnum,
        loading: false,
        formData: {
          name: '',
          prayerType: '1', // 默认祈福类型
          forOthers: 2, // 默认不为他人祈福
          wish: '',
        },
        prayerTypes: [
          { label: '学业', value: 1 },
          { label: '健康', value: 2 },
          { label: '姻缘', value: 3 },
          { label: '财运', value: 4 },
          { label: '消灾', value: 5 },
        ],
        selectedPrayerType: '学业',
        selectedPrayerTypeValue: 1,
        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.validateForm()) {
          return
        }

        // 显示确认信息
        this.showConfirmation()
      },

      // 表单验证
      validateForm() {
        if (!this.formData.name?.trim()) {
          uni.showToast({ title: '请输入祈福人姓名', icon: 'none' })
          return false
        }

        if (!this.selectedPrayerTypeValue) {
          uni.showToast({ title: '请选择祈福类型', icon: 'none' })
          return false
        }

        if (!this.formData.wish?.trim()) {
          uni.showToast({ title: '请填写心愿内容', icon: 'none' })
          return false
        }

        return true
      },

      // 显示确认信息
      showConfirmation() {
        uni.showModal({
          title: '确认祈福信息',
          content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers === 1 ? '是' : '否'}\n心愿内容：${this.formData.wish}`,
          confirmText: '确认敬香',
          cancelText: '修改信息',
          success: res => {
            if (res.confirm) {
              this.performPrayer()
            }
          },
        })
      },

      // 执行祈福
      async performPrayer() {
        uni.showLoading({ title: '正在敬香...' })

        try {
          const response = await submitPrayer({
            name: this.formData.name.trim(),
            type: this.selectedPrayerTypeValue,
            isOthers: this.formData.forOthers,
            content: this.formData.wish.trim(),
          })

          uni.hideLoading()

          if (response.code === 200) {
            uni.showToast({ title: '祈福成功！', icon: 'success' })
            this.resetForm()

            // 跳转到祈福成功页面
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/pray/praySuccess',
              })
            }, 1500)
          } else {
            uni.showToast({ title: response.msg || '祈福失败，请重试', icon: 'none' })
          }
        } catch (error) {
          console.error('祈福请求失败:', error)
          uni.hideLoading()
          uni.showToast({ title: '网络错误，请重试', icon: 'none' })
        }
      },

      // 重置表单
      resetForm() {
        this.formData = {
          name: '',
          prayerType: '1',
          forOthers: 2,
          wish: '',
        }
        this.selectedPrayerType = '学业'
        this.selectedPrayerTypeValue = 1
      },

      // 显示祈福类型选择器
      showPrayerTypePicker() {
        uni.showActionSheet({
          itemList: this.prayerTypes.map(item => item.label),
          success: res => {
            if (
              res.tapIndex !== undefined &&
              res.tapIndex >= 0 &&
              res.tapIndex < this.prayerTypes.length
            ) {
              const selectedType = this.prayerTypes[res.tapIndex]

              // 更新选中的祈福类型
              this.selectedPrayerType = selectedType.label
              this.selectedPrayerTypeValue = selectedType.value

              // 同步更新表单数据
              this.formData.prayerType = selectedType.value
            }
          },
          fail: res => {
            console.log('用户取消选择或选择失败:', res)
          },
        })
      },
    },
  }
</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;
    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;
    z-index: 3;

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

  .prayer-form-background {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: #fdfcf5;
    display: flex;
    padding: 0 50rpx 300rpx 50rpx;
    margin-top: 625rpx;
    z-index: 2;

    .prayer-form {
      margin-top: 30rpx;
      padding: 30rpx 60rpx 0 60rpx;
      width: 650rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 2rpx solid #c0a4ae;
      border-radius: 20rpx;
    }
  }

  .form-title {
    display: flex;
    align-items: center;

    .title-text {
      width: 126rpx;
      height: 44rpx;
      font-weight: 400;
      color: #695347;
      font-size: 32rpx;
      line-height: normal;
    }
  }

  .form-item {
    margin: 15rpx 0 15rpx 0;
    display: flex;
    border-bottom: #c7a26d 1px solid;
    padding: 25rpx 0 25rpx 0;

    .label {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
      white-space: nowrap;
    }

    .input-field {
      padding-left: 40rpx;
    }
  }

  .form-item:last-child {
    border-bottom: none;
  }

  .select-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx 0 66rpx;
    width: 100%;

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

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

  .radio-group {
    display: flex;
    align-items: center;
    //border: #C7A26D 1px solid;
    margin-left: 40rpx;

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

      &: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;

        &.checked {
          border-color: #8b2e2e;
          background-color: #8b2e2e;
        }
      }

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

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

  .textarea-container {
    position: relative;

    .textarea-field {
      width: 400rpx;
      height: 140rpx;
      //border: 1rpx solid #e10c0c;
      border-radius: 12rpx;
      padding: 0 20rpx 0 66rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
      resize: none;
    }

    .char-counter {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 22rpx;
      color: #999;
    }
  }
</style>