WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决小屏幕导致的则遮挡bug,method fixed->absolute

Browse Source
This commit is contained in:
WindowBird 2025-08-27 16:23:14 +08:00
parent 6d6ee3c2b5
commit 5bac70ac96
1 changed files with 375 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
pages/pray/pray.vue
View File

@ -4,12 +4,16 @@
<custom-navbar title="在线祈福" /> <custom-navbar title="在线祈福" />
</view> </view>
<view class="background-container"> <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>
<view class="header"> <view class="header">
<!-- 香炉图标 --> <!-- 香炉图标 -->
<view class="censer-container"> <view class="censer-container">
<image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" /> <image :src="CommonEnum.CENSER" class="censer-icon" mode="aspectFit" />
</view> </view>
<!-- 祈福信息表单 --> <!-- 祈福信息表单 -->
@ -22,7 +26,11 @@
<!-- 祈福人姓名 --> <!-- 祈福人姓名 -->
<view class="form-item"> <view class="form-item">
<text class="label">祈福人姓名</text> <text class="label">祈福人姓名</text>
<input class="input-field" placeholder="请输入姓名" v-model="formData.name" /> <input
v-model="formData.name"
class="input-field"
placeholder="请输入姓名"
/>
</view> </view>
<!-- 祈福类型 --> <!-- 祈福类型 -->
@ -40,14 +48,24 @@
<view class="radio-group"> <view class="radio-group">
<view class="radio-item" @click="formData.forOthers = 1"> <view class="radio-item" @click="formData.forOthers = 1">
<text class="radio-text">是</text> <text class="radio-text">是</text>
<view class="radio-button" :class="{ checked: formData.forOthers === 1 }"> <view
<text v-if="formData.forOthers === 1" class="checkmark">✓</text> :class="{ checked: formData.forOthers === 1 }"
class="radio-button"
>
<text v-if="formData.forOthers === 1" class="checkmark"
>✓
</text>
</view> </view>
</view> </view>
<view class="radio-item" @click="formData.forOthers = 2"> <view class="radio-item" @click="formData.forOthers = 2">
<text class="radio-text">否</text> <text class="radio-text">否</text>
<view class="radio-button" :class="{ checked: formData.forOthers === 2 }"> <view
<text v-if="formData.forOthers === 2" class="checkmark">✓</text> :class="{ checked: formData.forOthers === 2 }"
class="radio-button"
>
<text v-if="formData.forOthers === 2" class="checkmark"
>✓
</text>
</view> </view>
</view> </view>
</view> </view>
@ -58,11 +76,11 @@
<text class="label">心愿内容</text> <text class="label">心愿内容</text>
<view class="textarea-container"> <view class="textarea-container">
<textarea <textarea
class="textarea-field"
placeholder="请填写心愿内容"
v-model="formData.wish" v-model="formData.wish"
maxlength="50"
:show-confirm-bar="false" :show-confirm-bar="false"
class="textarea-field"
maxlength="50"
placeholder="请填写心愿内容"
/> />
<text class="char-counter">{{ formData.wish.length }}/50</text> <text class="char-counter">{{ formData.wish.length }}/50</text>
</view> </view>
@ -76,12 +94,12 @@
</template> </template>
<script> <script>
import CommonEnum from '../../enum/common' import CommonEnum from "../../enum/common";
import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue' import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import BottomButton from '../../components/bottom-button/bottom-button.vue' import BottomButton from "../../components/bottom-button/bottom-button.vue";
import { submitPrayer } from '@/api/pray/pray' import { submitPrayer } from "@/api/pray/pray";
export default { export default {
components: { components: {
CustomNavbar, CustomNavbar,
BottomButton, BottomButton,
@ -91,41 +109,41 @@
CommonEnum, CommonEnum,
loading: false, loading: false,
formData: { formData: {
name: '', name: "",
prayerType: '1', // 默认祈福类型 prayerType: "1", // 默认祈福类型
forOthers: 2, // 默认不为他人祈福 forOthers: 2, // 默认不为他人祈福
wish: '', wish: "",
}, },
prayerTypes: [ prayerTypes: [
{ label: '学业', value: 1 }, { label: "学业", value: 1 },
{ label: '健康', value: 2 }, { label: "健康", value: 2 },
{ label: '姻缘', value: 3 }, { label: "姻缘", value: 3 },
{ label: '财运', value: 4 }, { label: "财运", value: 4 },
{ label: '消灾', value: 5 }, { label: "消灾", value: 5 },
], ],
selectedPrayerType: '学业', selectedPrayerType: "学业",
selectedPrayerTypeValue: 1, selectedPrayerTypeValue: 1,
showPicker: false, showPicker: false,
} };
}, },
onLoad() { onLoad() {
// 页面加载时获取数据 // 页面加载时获取数据
this.loadPageData() this.loadPageData();
}, },
methods: { methods: {
// 加载页面数据 // 加载页面数据
async loadPageData() { async loadPageData() {
this.loading = true this.loading = true;
try { try {
// TODO: 调用页面数据API // TODO: 调用页面数据API
// const response = await getPageData() // const response = await getPageData()
// 模拟加载 // 模拟加载
setTimeout(() => { setTimeout(() => {
this.loading = false this.loading = false;
}, 1000) }, 1000);
} catch (error) { } catch (error) {
console.error('获取页面数据失败:', error) console.error("获取页面数据失败:", error);
this.loading = false this.loading = false;
} }
}, },
@ -133,51 +151,51 @@
submitPrayer() { submitPrayer() {
// 表单验证 // 表单验证
if (!this.validateForm()) { if (!this.validateForm()) {
return return;
} }
// 显示确认信息 // 显示确认信息
this.showConfirmation() this.showConfirmation();
}, },
// 表单验证 // 表单验证
validateForm() { validateForm() {
if (!this.formData.name?.trim()) { if (!this.formData.name?.trim()) {
uni.showToast({ title: '请输入祈福人姓名', icon: 'none' }) uni.showToast({ title: "请输入祈福人姓名", icon: "none" });
return false return false;
} }
if (!this.selectedPrayerTypeValue) { if (!this.selectedPrayerTypeValue) {
uni.showToast({ title: '请选择祈福类型', icon: 'none' }) uni.showToast({ title: "请选择祈福类型", icon: "none" });
return false return false;
} }
if (!this.formData.wish?.trim()) { if (!this.formData.wish?.trim()) {
uni.showToast({ title: '请填写心愿内容', icon: 'none' }) uni.showToast({ title: "请填写心愿内容", icon: "none" });
return false return false;
} }
return true return true;
}, },
// 显示确认信息 // 显示确认信息
showConfirmation() { showConfirmation() {
uni.showModal({ uni.showModal({
title: '确认祈福信息', title: "确认祈福信息",
content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers === 1 ? '是' : '否'}\n心愿内容：${this.formData.wish}`, content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers === 1 ? "是" : "否"}\n心愿内容：${this.formData.wish}`,
confirmText: '确认敬香', confirmText: "确认敬香",
cancelText: '修改信息', cancelText: "修改信息",
success: res => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.performPrayer() this.performPrayer();
} }
}, },
}) });
}, },
// 执行祈福 // 执行祈福
async performPrayer() { async performPrayer() {
uni.showLoading({ title: '正在敬香...' }) uni.showLoading({ title: "正在敬香..." });
try { try {
const response = await submitPrayer({ const response = await submitPrayer({
@ -185,83 +203,82 @@
type: this.selectedPrayerTypeValue, type: this.selectedPrayerTypeValue,
isOthers: this.formData.forOthers, isOthers: this.formData.forOthers,
content: this.formData.wish.trim(), content: this.formData.wish.trim(),
}) });
uni.hideLoading() uni.hideLoading();
if (response.code === 200) { if (response.code === 200) {
uni.showToast({ title: '祈福成功！', icon: 'success' }) uni.showToast({ title: "祈福成功！", icon: "success" });
this.resetForm() this.resetForm();
// 跳转到祈福成功页面 // 跳转到祈福成功页面
setTimeout(() => { setTimeout(() => {
uni.navigateTo({ uni.navigateTo({
url: '/pages/pray/praySuccess', url: "/pages/pray/praySuccess",
}) });
}, 1500) }, 1500);
} else { } else {
uni.showToast({ title: response.msg || '祈福失败，请重试', icon: 'none' }) uni.showToast({
title: response.msg || "祈福失败，请重试",
icon: "none",
});
} }
} catch (error) { } catch (error) {
console.error('祈福请求失败:', error) console.error("祈福请求失败:", error);
uni.hideLoading() uni.hideLoading();
uni.showToast({ title: '网络错误，请重试', icon: 'none' }) uni.showToast({ title: "网络错误，请重试", icon: "none" });
} }
}, },
// 重置表单 // 重置表单
resetForm() { resetForm() {
this.formData = { this.formData = {
name: '', name: "",
prayerType: '1', prayerType: "1",
forOthers: 2, forOthers: 2,
wish: '', wish: "",
} };
this.selectedPrayerType = '学业' this.selectedPrayerType = "学业";
this.selectedPrayerTypeValue = 1 this.selectedPrayerTypeValue = 1;
}, },
// 显示祈福类型选择器 // 显示祈福类型选择器
showPrayerTypePicker() { showPrayerTypePicker() {
uni.showActionSheet({ uni.showActionSheet({
itemList: this.prayerTypes.map(item => item.label), itemList: this.prayerTypes.map((item) => item.label),
success: res => { success: (res) => {
if ( if (
res.tapIndex !== undefined && res.tapIndex !== undefined &&
res.tapIndex >= 0 && res.tapIndex >= 0 &&
res.tapIndex < this.prayerTypes.length res.tapIndex < this.prayerTypes.length
) { ) {
const selectedType = this.prayerTypes[res.tapIndex] const selectedType = this.prayerTypes[res.tapIndex];
// 更新选中的祈福类型 // 更新选中的祈福类型
this.selectedPrayerType = selectedType.label this.selectedPrayerType = selectedType.label;
this.selectedPrayerTypeValue = selectedType.value this.selectedPrayerTypeValue = selectedType.value;
// 同步更新表单数据 // 同步更新表单数据
this.formData.prayerType = selectedType.value this.formData.prayerType = selectedType.value;
} }
}, },
fail: res => { fail: (res) => {
console.log('用户取消选择或选择失败:', res) console.log("用户取消选择或选择失败:", res);
}, },
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { .page {
background: #fffbf5;
}
.page {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 100vh; height: calc(100vh + 500rpx);
} }
.navbar-container { .navbar-container {
background-color: #faf8f3; background-color: #faf8f3;
position: fixed; position: fixed;
top: 0; top: 0;
@ -269,10 +286,10 @@
width: 100%; width: 100%;
z-index: 10; z-index: 10;
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
} }
.background-container { .background-container {
position: fixed; position: absolute;
top: -600rpx; top: -600rpx;
left: 0; left: 0;
width: 100%; width: 100%;
@ -285,22 +302,20 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.header { .header {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
padding: 0 15rpx; padding: 120rpx 15rpx 160rpx;
padding-top: 120rpx;
padding-bottom: 160rpx;
z-index: 1; z-index: 1;
} }
.censer-container { .censer-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -314,10 +329,10 @@
height: 648rpx; height: 648rpx;
opacity: 0.8; opacity: 0.8;
} }
} }
.prayer-form-background { .prayer-form-background {
position: fixed; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 100%; width: 100%;
@ -337,9 +352,9 @@
border: 2rpx solid #c0a4ae; border: 2rpx solid #c0a4ae;
border-radius: 20rpx; border-radius: 20rpx;
} }
} }
.form-title { .form-title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -351,9 +366,9 @@
font-size: 32rpx; font-size: 32rpx;
line-height: normal; line-height: normal;
} }
} }
.form-item { .form-item {
margin: 15rpx 0 15rpx 0; margin: 15rpx 0 15rpx 0;
display: flex; display: flex;
border-bottom: #c7a26d 1px solid; border-bottom: #c7a26d 1px solid;
@ -369,13 +384,13 @@
.input-field { .input-field {
padding-left: 40rpx; padding-left: 40rpx;
} }
} }
.form-item:last-child { .form-item:last-child {
border-bottom: none; border-bottom: none;
} }
.select-field { .select-field {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -391,9 +406,9 @@
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
} }
} }
.radio-group { .radio-group {
display: flex; display: flex;
align-items: center; align-items: center;
//border: #C7A26D 1px solid; //border: #C7A26D 1px solid;
@ -438,9 +453,9 @@
padding-right: 12rpx; padding-right: 12rpx;
} }
} }
} }
.textarea-container { .textarea-container {
position: relative; position: relative;
.textarea-field { .textarea-field {
@ -462,5 +477,5 @@
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
} }
} }
</style> </style>