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 @@
-
-
+
+
+
+
+ 祈福信息
+
+
+
+
+ 祈福人姓名
+
+
+
+
+
+ 祈福类型
+
+ {{ selectedPrayerType }}
+ >
+
+
+
+
+
+ 为他人祈福
+
+
+
+ ✓
+
+ 是
+
+
+
+ ✓
+
+ 否
+
+
+
+
+
+
+ 心愿内容
+
+
+ {{ formData.wish.length }}/50
+
+
+
+
+
+ 敬香
+
@@ -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;
+}
\ No newline at end of file