From 68a6431c487d44de230cf5755947753cd32360fb Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Mon, 4 Aug 2025 17:59:54 +0800
Subject: [PATCH] =?UTF-8?q?pray=E9=A1=B5=E9=9D=A2=E5=88=B6=E4=BD=9C1.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/pray/pray.vue | 319 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 315 insertions(+), 4 deletions(-)

diff --git a/pages/pray/pray.vue b/pages/pray/pray.vue
index b3ebeef..d6cde2a 100644
--- a/pages/pray/pray.vue
+++ b/pages/pray/pray.vue
@@ -11,8 +11,66 @@
       <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>
@@ -29,7 +87,16 @@ export default {
   data() {
     return {
       CommonEnum,
-      loading: false
+      loading: false,
+      formData: {
+        name: '',
+        prayerType: '个人祈福', // 默认祈福类型
+        forOthers: false, // 默认不为他人祈福
+        wish: ''
+      },
+      prayerTypes: ['个人祈福', '为他人祈福', '家庭祈福', '事业祈福', '学业祈福', '健康祈福', '财运祈福', '姻缘祈福', '其他祈福'],
+      selectedPrayerType: '个人祈福',
+      showPicker: false
     }
   },
   onLoad() {
@@ -51,6 +118,93 @@ export default {
         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('用户取消选择');
+        }
+      });
     }
   }
 }
@@ -102,7 +256,7 @@ page {
   flex-direction: column;
   padding: 0 15rpx;
   padding-top: 120rpx; /* 为固定导航栏留出空间 */
-  padding-bottom: 40rpx;
+  padding-bottom: 160rpx; /* 为固定敬香按钮留出空间 */
   z-index: 1;
 }
 
@@ -120,4 +274,161 @@ page {
   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>
\ No newline at end of file