482 lines
11 KiB
Vue
482 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="navbar-container">
|
||
<custom-navbar title="在线祈福" />
|
||
</view>
|
||
<view class="background-container">
|
||
<image
|
||
:src="CommonEnum.BUDDHA_BACKGROUND"
|
||
class="background-image"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<view class="header">
|
||
<!-- 香炉图标 -->
|
||
<view class="censer-container">
|
||
<image :src="CommonEnum.CENSER" class="censer-icon" 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
|
||
v-model="formData.name"
|
||
class="input-field"
|
||
placeholder="请输入姓名"
|
||
/>
|
||
</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="{ 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="{ checked: formData.forOthers === 2 }"
|
||
class="radio-button"
|
||
>
|
||
<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
|
||
v-model="formData.wish"
|
||
:show-confirm-bar="false"
|
||
class="textarea-field"
|
||
maxlength="50"
|
||
placeholder="请填写心愿内容"
|
||
/>
|
||
<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 {
|
||
position: relative;
|
||
width: 100%;
|
||
height: calc(100vh + 500rpx);
|
||
}
|
||
|
||
.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%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
.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>
|