From 5bac70ac969feac2326ea0ad9cc3c8e2a06816ae Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 27 Aug 2025 16:23:14 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B0=8F=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=9A=84=E5=88=99=E9=81=AE=E6=8C=A1bug,metho?=
 =?UTF-8?q?d=20fixed->absolute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/pray/pray.vue | 735 ++++++++++++++++++++++----------------------
 1 file changed, 375 insertions(+), 360 deletions(-)

diff --git a/pages/pray/pray.vue b/pages/pray/pray.vue
index 4c743ea..0475b5e 100644
--- a/pages/pray/pray.vue
+++ b/pages/pray/pray.vue
@@ -4,12 +4,16 @@
       <custom-navbar title="在线祈福" />
     </view>
     <view class="background-container">
-      <image class="background-image" :src="CommonEnum.BUDDHA_BACKGROUND" mode="aspectFit" />
+      <image
+        :src="CommonEnum.BUDDHA_BACKGROUND"
+        class="background-image"
+        mode="aspectFit"
+      />
     </view>
     <view class="header">
       <!-- 香炉图标 -->
       <view class="censer-container">
-        <image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" />
+        <image :src="CommonEnum.CENSER" class="censer-icon" mode="aspectFit" />
       </view>
 
       <!-- 祈福信息表单 -->
@@ -22,7 +26,11 @@
           <!-- 祈福人姓名 -->
           <view class="form-item">
             <text class="label">祈福人姓名</text>
-            <input class="input-field" placeholder="请输入姓名" v-model="formData.name" />
+            <input
+              v-model="formData.name"
+              class="input-field"
+              placeholder="请输入姓名"
+            />
           </view>
 
           <!-- 祈福类型 -->
@@ -40,14 +48,24 @@
             <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
+                  :class="{ checked: formData.forOthers === 1 }"
+                  class="radio-button"
+                >
+                  <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
+                  :class="{ checked: formData.forOthers === 2 }"
+                  class="radio-button"
+                >
+                  <text v-if="formData.forOthers === 2" class="checkmark"
+                    >✓
+                  </text>
                 </view>
               </view>
             </view>
@@ -58,11 +76,11 @@
             <text class="label">心愿内容</text>
             <view class="textarea-container">
               <textarea
-                class="textarea-field"
-                placeholder="请填写心愿内容"
                 v-model="formData.wish"
-                maxlength="50"
                 :show-confirm-bar="false"
+                class="textarea-field"
+                maxlength="50"
+                placeholder="请填写心愿内容"
               />
               <text class="char-counter">{{ formData.wish.length }}/50</text>
             </view>
@@ -76,391 +94,388 @@
 </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'
+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,
+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;
       }
     },
-    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()
-      },
 
+    // 提交祈福
+    submitPrayer() {
       // 表单验证
-      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
-      },
+      if (!this.validateForm()) {
+        return;
+      }
 
       // 显示确认信息
-      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)
-          },
-        })
-      },
+      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%;
+  height: calc(100vh + 500rpx);
+}
 
-  .page {
-    position: relative;
+.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: absolute;
+  top: -600rpx;
+  left: 0;
+  width: 100%;
+  height: calc(100vh + 432rpx);
+  z-index: -1;
+  overflow: hidden;
+
+  .background-image {
     width: 100%;
-    min-height: 100vh;
+    height: 100%;
+    object-fit: cover;
   }
+}
 
-  .navbar-container {
-    background-color: #faf8f3;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 10;
-    padding-top: env(safe-area-inset-top);
+.header {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 120rpx 15rpx 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;
   }
+}
 
-  .background-container {
-    position: fixed;
-    top: -600rpx;
-    left: 0;
-    width: 100%;
-    height: calc(100vh + 432rpx);
-    z-index: -1;
-    overflow: hidden;
+.prayer-form-background {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  background-color: #fdfcf5;
+  display: flex;
+  padding: 0 50rpx 300rpx 50rpx;
+  margin-top: 625rpx;
+  z-index: 2;
 
-    .background-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .header {
-    position: relative;
-    width: 100%;
-    min-height: 100vh;
+  .prayer-form {
+    margin-top: 30rpx;
+    padding: 30rpx 60rpx 0 60rpx;
+    width: 650rpx;
     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;
+    border: 2rpx solid #c0a4ae;
+    border-radius: 20rpx;
+  }
+}
 
-    .censer-icon {
-      width: 648rpx;
-      height: 648rpx;
-      opacity: 0.8;
-    }
+.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;
   }
 
-  .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;
+  .input-field {
+    padding-left: 40rpx;
+  }
+}
 
-    .prayer-form {
-      margin-top: 30rpx;
-      padding: 30rpx 60rpx 0 60rpx;
-      width: 650rpx;
+.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;
-      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;
+      margin-right: 12rpx;
+      box-sizing: border-box;
+      transition: all 0.3s ease;
 
-      &: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;
+      &.checked {
+        border-color: #8b2e2e;
+        background-color: #8b2e2e;
       }
     }
-  }
 
-  .textarea-container {
-    position: relative;
+    .checkmark {
+      font-size: 20rpx;
+      color: #ffffff;
+      font-weight: bold;
+    }
 
-    .textarea-field {
-      width: 400rpx;
-      height: 140rpx;
-      //border: 1rpx solid #e10c0c;
-      border-radius: 12rpx;
-      padding: 0 20rpx 0 66rpx;
+    .radio-text {
       font-size: 28rpx;
       color: #333;
-      box-sizing: border-box;
-      resize: none;
-    }
-
-    .char-counter {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      font-size: 22rpx;
-      color: #999;
+      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>