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

立即供奉弹窗获取动态套餐数据

Browse Source
This commit is contained in:
WindowBird 2025-08-27 15:46:27 +08:00
parent 528bd0640f
commit 6d6ee3c2b5
3 changed files with 760 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/memorial/memorial.js
View File

@ -50,3 +50,11 @@ export function checkIsCollected(memorialId) {
}, },
}); });
} }
// 获取套餐列表
export function getPackageList() {
return request({
url: "/app/thali/list",
method: "get",
});
}

155
pages/memorial/compositons/offeringModal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="offering-modal" v-if="visible" @click="handleClose"> <view v-if="visible" class="offering-modal" @click="handleClose">
<view class="modal-overlay" @click="handleClose"></view> <view class="modal-overlay" @click="handleClose"></view>
<view class="modal-content" @click.stop> <view class="modal-content" @click.stop>
<!-- 关闭按钮 --> <!-- 关闭按钮 -->
@ -15,13 +15,13 @@
<view class="duration-grid"> <view class="duration-grid">
<view <view
v-for="option in durationOptions" v-for="option in durationOptions"
:key="option.value" :key="option.id"
:class="{ selected: selectedDuration === option.id }"
class="duration-option" class="duration-option"
:class="{ selected: selectedDuration === option.value }" @click="selectDuration(option.id)"
@click="selectDuration(option.value)"
> >
<text class="duration-text">{{ option.label }}</text> <text class="duration-text">{{ option.name }}</text>
<text class="duration-price">¥{{ option.price }}</text> <text class="duration-price">¥{{ option.amount }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -30,10 +30,10 @@
<view class="offerer-section"> <view class="offerer-section">
<view class="section-label">供奉人</view> <view class="section-label">供奉人</view>
<input <input
class="offerer-input"
placeholder="请填写供奉人姓名"
v-model="offererName" v-model="offererName"
class="offerer-input"
maxlength="20" maxlength="20"
placeholder="请填写供奉人姓名"
/> />
</view> </view>
<view class="input-tip">将在供奉名单上展现供奉人的姓名，此为必填</view> <view class="input-tip">将在供奉名单上展现供奉人的姓名，此为必填</view>
@ -52,47 +52,48 @@
</template> </template>
<script> <script>
export default { import { object } from "../../../uni_modules/uv-ui-tools/libs/function/test";
name: 'OfferingModal',
export default {
name: "OfferingModal",
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
durationOptions: {
type: object(),
default: {},
},
}, },
data() { data() {
return { return {
selectedDuration: '3', // 默认选择3天 selectedDuration: null, // 默认选择3天
offererName: '', offererName: "",
durationOptions: [ };
{ label: '供奉3天', value: '3', price: '99.9' },
{ label: '供奉1周', value: '7', price: '129.9' },
{ label: '供奉1月', value: '30', price: '299.9' },
{ label: '供奉1年', value: '365', price: '499.9' },
],
}
}, },
computed: { computed: {
totalPrice() { totalPrice() {
const selectedOption = this.durationOptions.find( // 未选择或options为空时返回0
option => option.value === this.selectedDuration if (!this.selectedDuration || !this.durationOptions.length) return 0;
)
if (!selectedOption) return '99.9'
// 根据设计图，显示的价格可能需要调整 const selectedOption = this.durationOptions.find(
// 这里可以根据实际需求调整价格计算逻辑 (option) => option.id === this.selectedDuration,
return selectedOption.price );
// 当未找到选项时返回空值
return selectedOption?.amount ?? null;
}, },
}, },
methods: { methods: {
// 关闭弹窗 // 关闭弹窗
handleClose() { handleClose() {
this.$emit('close') this.$emit("close");
}, },
// 选择供奉时长 // 选择供奉时长
selectDuration(value) { selectDuration(value) {
this.selectedDuration = value this.selectedDuration = value;
}, },
// 确认供奉 // 确认供奉
@ -100,31 +101,31 @@
// 验证供奉人姓名 // 验证供奉人姓名
if (!this.offererName.trim()) { if (!this.offererName.trim()) {
uni.showToast({ uni.showToast({
title: '请填写供奉人姓名', title: "请填写供奉人姓名",
icon: 'none', icon: "none",
}) });
return return;
} }
// 获取选中的时长选项 // 获取选中的时长选项
const selectedOption = this.durationOptions.find( const selectedOption = this.durationOptions.find(
option => option.value === this.selectedDuration (option) => option.value === this.selectedDuration,
) );
// 触发确认事件 // 触发确认事件
this.$emit('confirm', { this.$emit("confirm", {
duration: this.selectedDuration, duration: this.selectedDuration,
durationLabel: selectedOption.label, durationLabel: selectedOption.label,
price: selectedOption.price, price: selectedOption.price,
offererName: this.offererName.trim(), offererName: this.offererName.trim(),
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.offering-modal { .offering-modal {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -133,18 +134,18 @@
z-index: 1000; z-index: 1000;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
.modal-overlay { .modal-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.modal-content { .modal-content {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -155,9 +156,9 @@
box-sizing: border-box; box-sizing: border-box;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
} }
.close-btn { .close-btn {
position: absolute; position: absolute;
top: 20rpx; top: 20rpx;
right: 20rpx; right: 20rpx;
@ -167,15 +168,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10; z-index: 10;
} }
.close-icon { .close-icon {
font-size: 40rpx; font-size: 40rpx;
color: #999; color: #999;
font-weight: bold; font-weight: bold;
} }
.modal-title { .modal-title {
color: #695347; color: #695347;
text-align: left; text-align: left;
margin-bottom: 40rpx; margin-bottom: 40rpx;
@ -183,19 +184,19 @@
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
line-height: 44rpx; line-height: 44rpx;
} }
.duration-section { .duration-section {
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.duration-grid { .duration-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20rpx; gap: 20rpx;
} }
.duration-option { .duration-option {
background: #fff1dd; background: #fff1dd;
border-radius: 12rpx; border-radius: 12rpx;
padding: 24rpx 20rpx; padding: 24rpx 20rpx;
@ -213,24 +214,24 @@
color: #fff; color: #fff;
} }
} }
} }
.duration-text { .duration-text {
display: block; display: block;
font-size: 28rpx; font-size: 28rpx;
color: #c7a26d; color: #c7a26d;
margin-bottom: 8rpx; margin-bottom: 8rpx;
font-weight: 500; font-weight: 500;
} }
.duration-price { .duration-price {
display: block; display: block;
font-size: 32rpx; font-size: 32rpx;
color: #c7a26d; color: #c7a26d;
font-weight: 600; font-weight: 600;
} }
.offerer-section { .offerer-section {
display: flex; display: flex;
margin-bottom: 40rpx; margin-bottom: 40rpx;
align-items: center; align-items: center;
@ -238,17 +239,17 @@
height: 112rpx; height: 112rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx; border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #a24242; border: 2rpx solid #a24242;
} }
.section-label { .section-label {
font-size: 32rpx; font-size: 32rpx;
color: #522510; color: #522510;
font-weight: 500; font-weight: 500;
margin: 34rpx 70rpx 34rpx 54rpx; margin: 34rpx 70rpx 34rpx 54rpx;
width: 196rpx; width: 196rpx;
} }
.offerer-input { .offerer-input {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
border-radius: 8rpx; border-radius: 8rpx;
@ -256,18 +257,18 @@
color: #acacac; color: #acacac;
box-sizing: border-box; box-sizing: border-box;
margin: 34rpx 0 34rpx 0; margin: 34rpx 0 34rpx 0;
} }
.input-tip { .input-tip {
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #695347; color: #695347;
line-height: 38rpx; line-height: 38rpx;
text-align: center; text-align: center;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.confirm-section { .confirm-section {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 24rpx 51rpx; padding: 24rpx 51rpx;
@ -276,27 +277,27 @@
background: #a24242; background: #a24242;
border-radius: 45rpx 45rpx 45rpx 45rpx; border-radius: 45rpx 45rpx 45rpx 45rpx;
gap: 20rpx; gap: 20rpx;
} }
.price-info { .price-info {
flex: 1; flex: 1;
text-align: right; text-align: right;
} }
.total-price { .total-price {
font-size: 36rpx; font-size: 36rpx;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
} }
.confirm-btn { .confirm-btn {
flex: 1; flex: 1;
text-align: left; text-align: left;
} }
.btn-text { .btn-text {
font-size: 32rpx; font-size: 32rpx;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
</style> </style>

332
pages/memorial/memorialHall.vue
View File

@ -7,19 +7,24 @@
<!-- 搜索框 --> <!-- 搜索框 -->
<search-box <search-box
v-model="searchName" v-model="searchName"
:width="'682rpx'"
:search-icon="CommonEnum.SEARCH" :search-icon="CommonEnum.SEARCH"
placeholder="请输入姓名或分区进行查找" :width="'682rpx'"
btn-text="搜索" btn-text="搜索"
placeholder="请输入姓名或分区进行查找"
@search="handleSearch" @search="handleSearch"
/> />
<view class="container"> <view class="container">
<!-- 顶部信息 --> <!-- 顶部信息 -->
<view class="memorial-header"> <view class="memorial-header">
<view class="location">{{ memorialDetail ? memorialDetail.name : '加载中...' }}</view> <view class="location"
<view :class="['collection-btn', { collected: isCollected }]" @click="handleCollect"> >{{ memorialDetail ? memorialDetail.name : "加载中..." }}
{{ isCollected ? '已收藏' : '收藏牌位' }} </view>
<view
:class="['collection-btn', { collected: isCollected }]"
@click="handleCollect"
>
{{ isCollected ? "已收藏" : "收藏牌位" }}
</view> </view>
</view> </view>
@ -28,9 +33,9 @@
<!-- 滚动内容区域 --> <!-- 滚动内容区域 -->
<scroll-view <scroll-view
:scroll-top="scrollTop"
class="scroll-content" class="scroll-content"
scroll-y="true" scroll-y="true"
:scroll-top="scrollTop"
@scroll="onScroll" @scroll="onScroll"
> >
<!-- 加载状态 --> <!-- 加载状态 -->
@ -40,8 +45,8 @@
<!-- 动态渲染往生者信息 --> <!-- 动态渲染往生者信息 -->
<view <view
v-else-if="deceasedList.length > 0"
v-for="(deceased, index) in deceasedList" v-for="(deceased, index) in deceasedList"
v-else-if="deceasedList.length > 0"
:key="deceased.id" :key="deceased.id"
class="memorial-text" class="memorial-text"
> >
@ -61,32 +66,35 @@
</view> </view>
<view class="diedDate"> <view class="diedDate">
<view>卒</view> <view>卒</view>
<view>{{ deceased.diedYear || '吉' }}</view> <view>{{ deceased.diedYear || "吉" }}</view>
<view class="time">年</view> <view class="time">年</view>
<view>{{ deceased.diedMonths || '吉利' }}</view> <view>{{ deceased.diedMonths || "吉利" }}</view>
<view class="time">月</view> <view class="time">月</view>
<view>{{ deceased.diedDay || '吉' }}</view> <view>{{ deceased.diedDay || "吉" }}</view>
<view class="time">日</view> <view class="time">日</view>
</view> </view>
</view> </view>
</view> </view>
<!-- 空数据提示 --> <!-- 空数据提示 -->
<view v-else-if="!loading && deceasedList.length === 0" class="empty-container"> <view
v-else-if="!loading && deceasedList.length === 0"
class="empty-container"
>
<view class="empty-text">暂无往生者信息</view> <view class="empty-text">暂无往生者信息</view>
</view> </view>
<!-- 联系人信息 --> <!-- 联系人信息 -->
<view class="contact-info"> <view class="contact-info">
<view v-if="memorialDetail"> <view v-if="memorialDetail">
联系人：{{ memorialDetail.contactName || '暂无' }}（{{ 联系人：{{ memorialDetail.contactName || "暂无" }}（{{
memorialDetail.contactPhone || '暂无' memorialDetail.contactPhone || "暂无"
}}） }}）
</view> </view>
<view v-if="memorialDetail && memorialDetail.address"> <view v-if="memorialDetail && memorialDetail.address">
地址：{{ memorialDetail.address }} 地址：{{ memorialDetail.address }}
</view> </view>
<view v-else> 联系人：暂无联系信息 </view> <view v-else> 联系人：暂无联系信息</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -94,18 +102,18 @@
<!-- 状态栏 --> <!-- 状态栏 -->
<StatusBar <StatusBar
v-if="selectedUnitId" v-if="selectedUnitId"
:showDetailLink="false"
:unit-id="selectedUnitId" :unit-id="selectedUnitId"
@view-details="handleViewDetails" @view-details="handleViewDetails"
:showDetailLink="false"
/> />
<view class="placeholder"></view> <view class="placeholder"></view>
<!-- 供奉列表 --> <!-- 供奉列表 -->
<enshrined-list <enshrined-list
v-if="!loading" v-if="!loading"
ref="enshrinedList"
:memorial-id="selectedUnitId" :memorial-id="selectedUnitId"
:search-keyword="searchName" :search-keyword="searchName"
@item-click="handleItemClick" @item-click="handleItemClick"
ref="enshrinedList"
/> />
</view> </view>
<view class="bottom"> <view class="bottom">
@ -114,6 +122,7 @@
<!-- 供奉弹窗 --> <!-- 供奉弹窗 -->
<OfferingModal <OfferingModal
:durationOptions="PackageList"
:visible="showOfferingModal" :visible="showOfferingModal"
@close="closeOfferingModal" @close="closeOfferingModal"
@confirm="handleOfferingConfirm" @confirm="handleOfferingConfirm"
@ -122,19 +131,21 @@
</template> </template>
<script> <script>
import { CommonEnum } from '@/enum/common.js' import { CommonEnum } from "@/enum/common.js";
import { getDeceasedList, getMemorialDetail } from '@/api/memorial/index.js' import { getDeceasedList, getMemorialDetail } from "@/api/memorial/index.js";
import { getEnshrinedList, collectMemorial, checkIsCollected } from '@/api/memorial/memorial.js' import { checkIsCollected, collectMemorial } from "@/api/memorial/memorial.js";
import BaseBackground from '../../components/base-background/base-background.vue' import BaseBackground from "../../components/base-background/base-background.vue";
import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue' import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import SearchBox from '../../components/search-box/search-box.vue' import SearchBox from "../../components/search-box/search-box.vue";
import StatusDisplay from '../../components/status-display/status-display.vue' import StatusDisplay from "../../components/status-display/status-display.vue";
import EnshrinedList from './compositons/enshrinedList.vue' import EnshrinedList from "./compositons/enshrinedList.vue";
import StatusBar from './compositons/statusBar.vue' import StatusBar from "./compositons/statusBar.vue";
import BottomButton from '../../components/bottom-button/bottom-button.vue' import BottomButton from "../../components/bottom-button/bottom-button.vue";
import OfferingModal from './compositons/offeringModal.vue' import OfferingModal from "./compositons/offeringModal.vue";
export default { import { getPackageList } from "../../api/memorial/memorial";
export default {
components: { components: {
BaseBackground, BaseBackground,
CustomNavbar, CustomNavbar,
@ -148,10 +159,10 @@
data() { data() {
return { return {
CommonEnum, CommonEnum,
searchName: '', searchName: "",
loading: false, loading: false,
// 当前选中的单元ID，用于状态栏查询 // 当前选中的单元ID，用于状态栏查询
selectedUnitId: '', selectedUnitId: "",
// 往生者列表数据 // 往生者列表数据
deceasedList: [], deceasedList: [],
// 分页参数 // 分页参数
@ -167,69 +178,81 @@
showOfferingModal: false, showOfferingModal: false,
// 收藏状态 // 收藏状态
isCollected: false, isCollected: false,
} //套餐列表
PackageList: {},
};
}, },
onLoad(options) { onLoad(options) {
console.log('memorialHall页面接收到的参数:', options) console.log("memorialHall页面接收到的参数:", options);
// 从路由参数获取往生殿ID // 从路由参数获取往生殿ID
if (options.id) { if (options.id) {
this.selectedUnitId = options.id this.selectedUnitId = options.id;
console.log('区域ID:', this.selectedUnitId) console.log("区域ID:", this.selectedUnitId);
} else { } else {
console.warn('未接收到区域ID，使用默认ID:', this.selectedUnitId) console.warn("未接收到区域ID，使用默认ID:", this.selectedUnitId);
} }
this.initPage() this.initPage();
}, },
// 下拉刷新 // 下拉刷新
onPullDownRefresh() { onPullDownRefresh() {
this.refreshData() this.refreshData();
}, },
methods: { methods: {
// 初始化页面 // 初始化页面
async initPage() { async initPage() {
this.loading = true this.loading = true;
try { try {
// 页面初始化逻辑 // 页面初始化逻辑
console.log('往生大殿页面初始化，ID:', this.selectedUnitId) console.log("往生大殿页面初始化，ID:", this.selectedUnitId);
// 获取往生殿详情 // 获取往生殿详情
await this.getMemorialDetail() await this.getMemorialDetail();
// 获取往生者列表 // 获取往生者列表
await this.getDeceasedList() await this.getDeceasedList();
// 检查收藏状态 // 检查收藏状态
await this.checkCollectionStatus() await this.checkCollectionStatus();
//获取订单套餐
await this.fetchPackageList();
} catch (error) { } catch (error) {
console.error('页面初始化失败:', error) console.error("页面初始化失败:", error);
uni.showToast({ uni.showToast({
title: '页面加载失败', title: "页面加载失败",
icon: 'none', icon: "none",
}) });
} finally { } finally {
this.loading = false this.loading = false;
} }
}, },
//获取订单套餐
async fetchPackageList() {
const response = await getPackageList();
this.PackageList = response.data;
console.log("获取的套餐数据:", this.PackageList);
},
// 获取往生殿详情 // 获取往生殿详情
async getMemorialDetail() { async getMemorialDetail() {
try { try {
const response = await getMemorialDetail(this.selectedUnitId) const response = await getMemorialDetail(this.selectedUnitId);
console.log('往生殿详情响应:', response) console.log("往生殿详情响应:", response);
if (response.code === 200) { if (response.code === 200) {
this.memorialDetail = response.data this.memorialDetail = response.data;
console.log('往生殿详情数据:', this.memorialDetail) console.log("往生殿详情数据:", this.memorialDetail);
} else { } else {
console.error('获取往生殿详情失败:', response.msg) console.error("获取往生殿详情失败:", response.msg);
uni.showToast({ uni.showToast({
title: response.msg || '获取往生殿信息失败', title: response.msg || "获取往生殿信息失败",
icon: 'none', icon: "none",
}) });
} }
} catch (error) { } catch (error) {
console.error('获取往生殿详情异常:', error) console.error("获取往生殿详情异常:", error);
uni.showToast({ uni.showToast({
title: '获取往生殿信息失败', title: "获取往生殿信息失败",
icon: 'none', icon: "none",
}) });
} }
}, },
@ -240,57 +263,57 @@
memorialId: this.selectedUnitId, memorialId: this.selectedUnitId,
pageNum: this.pageParams.pageNum, pageNum: this.pageParams.pageNum,
pageSize: this.pageParams.pageSize, pageSize: this.pageParams.pageSize,
} };
// 如果有搜索关键词，添加到参数中 // 如果有搜索关键词，添加到参数中
// if (this.searchName) { // if (this.searchName) {
// params.keyword = this.searchName // params.keyword = this.searchName
// } // }
const response = await getDeceasedList(params) //api const response = await getDeceasedList(params); //api
if (response.code === 200) { if (response.code === 200) {
this.deceasedList = response.rows || [] this.deceasedList = response.rows || [];
console.log('往生者列表数据:', this.deceasedList) console.log("往生者列表数据:", this.deceasedList);
} else { } else {
console.error('获取往生者列表失败:', response.msg) console.error("获取往生者列表失败:", response.msg);
uni.showToast({ uni.showToast({
title: response.msg || '获取数据失败', title: response.msg || "获取数据失败",
icon: 'none', icon: "none",
}) });
} }
} catch (error) { } catch (error) {
console.error('获取往生者列表异常:', error) console.error("获取往生者列表异常:", error);
uni.showToast({ uni.showToast({
title: '网络请求失败', title: "网络请求失败",
icon: 'none', icon: "none",
}) });
} }
}, },
// 检查收藏状态 // 检查收藏状态
async checkCollectionStatus() { async checkCollectionStatus() {
if (!this.selectedUnitId) { if (!this.selectedUnitId) {
console.warn('未获取到牌位ID，无法检查收藏状态') console.warn("未获取到牌位ID，无法检查收藏状态");
return return;
} }
try { try {
const response = await checkIsCollected(this.selectedUnitId) const response = await checkIsCollected(this.selectedUnitId);
console.log('收藏状态检查响应:', response) console.log("收藏状态检查响应:", response);
if (response.code === 200) { if (response.code === 200) {
this.isCollected = response.data === true this.isCollected = response.data === true;
console.log('当前收藏状态:', this.isCollected) console.log("当前收藏状态:", this.isCollected);
} else { } else {
console.error('检查收藏状态失败:', response.msg) console.error("检查收藏状态失败:", response.msg);
// 检查失败时默认为未收藏状态 // 检查失败时默认为未收藏状态
this.isCollected = false this.isCollected = false;
} }
} catch (error) { } catch (error) {
console.error('检查收藏状态异常:', error) console.error("检查收藏状态异常:", error);
// 异常时默认为未收藏状态 // 异常时默认为未收藏状态
this.isCollected = false this.isCollected = false;
} }
}, },
@ -298,150 +321,150 @@
async handleCollect() { async handleCollect() {
if (!this.selectedUnitId) { if (!this.selectedUnitId) {
uni.showToast({ uni.showToast({
title: '无法获取牌位信息', title: "无法获取牌位信息",
icon: 'none', icon: "none",
}) });
return return;
} }
try { try {
const loadingText = this.isCollected ? '取消收藏中...' : '收藏中...' const loadingText = this.isCollected ? "取消收藏中..." : "收藏中...";
uni.showLoading({ uni.showLoading({
title: loadingText, title: loadingText,
}) });
const data = { const data = {
messageId: this.selectedUnitId.toString(), messageId: this.selectedUnitId.toString(),
} };
const response = await collectMemorial(data) const response = await collectMemorial(data);
if (response.code === 200) { if (response.code === 200) {
// 切换收藏状态 // 切换收藏状态
this.isCollected = !this.isCollected this.isCollected = !this.isCollected;
const successText = this.isCollected ? '收藏成功' : '取消收藏成功' const successText = this.isCollected ? "收藏成功" : "取消收藏成功";
uni.showToast({ uni.showToast({
title: successText, title: successText,
icon: 'success', icon: "success",
}) });
} else { } else {
throw new Error(response.msg || '操作失败') throw new Error(response.msg || "操作失败");
} }
} catch (error) { } catch (error) {
console.error('收藏操作失败:', error) console.error("收藏操作失败:", error);
uni.showToast({ uni.showToast({
title: error.message || '操作失败', title: error.message || "操作失败",
icon: 'none', icon: "none",
}) });
} finally { } finally {
uni.hideLoading() uni.hideLoading();
} }
}, },
// 处理搜索 // 处理搜索
async handleSearch(value) { async handleSearch(value) {
console.log('搜索内容:', value) console.log("搜索内容:", value);
this.searchName = value this.searchName = value;
// 跳转到往生者搜索页面并传递搜索关键词 // 跳转到往生者搜索页面并传递搜索关键词
uni.navigateTo({ uni.navigateTo({
url: `/pages/memorial/deceasedSearch?keyword=${encodeURIComponent(value)}`, url: `/pages/memorial/deceasedSearch?keyword=${encodeURIComponent(value)}`,
success: () => { success: () => {
console.log('跳转到搜索页面成功') console.log("跳转到搜索页面成功");
}, },
fail: error => { fail: (error) => {
console.error('跳转失败:', error) console.error("跳转失败:", error);
uni.showToast({ uni.showToast({
title: '页面跳转失败', title: "页面跳转失败",
icon: 'none', icon: "none",
}) });
}, },
}) });
}, },
// 处理查看详情 // 处理查看详情
handleViewDetails(unitData) { handleViewDetails(unitData) {
console.log('查看单元详情:', unitData) console.log("查看单元详情:", unitData);
}, },
// 提交供奉 // 提交供奉
submitPrayer() { submitPrayer() {
console.log('显示供奉弹窗') console.log("显示供奉弹窗");
this.showOfferingModal = true this.showOfferingModal = true;
}, },
// 关闭供奉弹窗 // 关闭供奉弹窗
closeOfferingModal() { closeOfferingModal() {
this.showOfferingModal = false this.showOfferingModal = false;
}, },
// 确认供奉 // 确认供奉
handleOfferingConfirm(offeringData) { handleOfferingConfirm(offeringData) {
console.log('确认供奉:', offeringData) console.log("确认供奉:", offeringData);
// 这里可以调用供奉API // 这里可以调用供奉API
uni.showLoading({ uni.showLoading({
title: '正在提交供奉...', title: "正在提交供奉...",
}) });
// 模拟API调用 // 模拟API调用
setTimeout(() => { setTimeout(() => {
uni.hideLoading() uni.hideLoading();
uni.showToast({ uni.showToast({
title: '供奉成功！', title: "供奉成功！",
icon: 'success', icon: "success",
}) });
// 关闭弹窗 // 关闭弹窗
this.closeOfferingModal() this.closeOfferingModal();
// 可以在这里刷新数据或跳转到其他页面 // 可以在这里刷新数据或跳转到其他页面
}, 2000) }, 2000);
}, },
// 刷新数据 // 刷新数据
async refreshData() { async refreshData() {
try { try {
// 重置页码 // 重置页码
this.pageParams.pageNum = 1 this.pageParams.pageNum = 1;
// 重新获取数据 // 重新获取数据
await this.getMemorialDetail() await this.getMemorialDetail();
await this.getDeceasedList() await this.getDeceasedList();
// 重新检查收藏状态 // 重新检查收藏状态
await this.checkCollectionStatus() await this.checkCollectionStatus();
// 停止下拉刷新 // 停止下拉刷新
uni.stopPullDownRefresh() uni.stopPullDownRefresh();
uni.showToast({ uni.showToast({
title: '刷新成功', title: "刷新成功",
icon: 'success', icon: "success",
duration: 1500, duration: 1500,
}) });
} catch (error) { } catch (error) {
console.error('刷新数据失败:', error) console.error("刷新数据失败:", error);
uni.stopPullDownRefresh() uni.stopPullDownRefresh();
uni.showToast({ uni.showToast({
title: '刷新失败', title: "刷新失败",
icon: 'none', icon: "none",
}) });
} }
}, },
// 滚动事件处理 // 滚动事件处理
onScroll(e) { onScroll(e) {
console.log('滚动位置:', e.detail.scrollTop) console.log("滚动位置:", e.detail.scrollTop);
this.scrollTop = e.detail.scrollTop this.scrollTop = e.detail.scrollTop;
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
} }
.header { .header {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@ -449,15 +472,16 @@
flex-direction: column; flex-direction: column;
padding-bottom: 180rpx; padding-bottom: 180rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.container { .container {
width: 100%; width: 100%;
//border: 1px red solid; //border: 1px red solid;
height: 862rpx; height: 862rpx;
padding: 34rpx 32rpx 0 32rpx; padding: 34rpx 32rpx 0 32rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.memorial-header { .memorial-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -466,6 +490,7 @@
padding-left: 2rpx; padding-left: 2rpx;
height: 54rpx; height: 54rpx;
margin-bottom: 26rpx; margin-bottom: 26rpx;
.location { .location {
font-weight: 500; font-weight: 500;
font-size: 40rpx; font-size: 40rpx;
@ -513,6 +538,7 @@
} }
} }
} }
.title { .title {
margin-bottom: 22rpx; margin-bottom: 22rpx;
font-weight: 500; font-weight: 500;
@ -566,10 +592,12 @@
text-align: left; text-align: left;
font-style: normal; font-style: normal;
text-transform: none; text-transform: none;
.name { .name {
margin-top: 4rpx; margin-top: 4rpx;
display: flex; display: flex;
margin-right: 34rpx; margin-right: 34rpx;
.honorific { .honorific {
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
@ -579,6 +607,7 @@
text-align: left; text-align: left;
margin-right: 16rpx; margin-right: 16rpx;
} }
.fullName { .fullName {
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
@ -588,8 +617,10 @@
text-align: left; text-align: left;
} }
} }
.date { .date {
color: #522510; color: #522510;
.bornDate { .bornDate {
gap: 16rpx; gap: 16rpx;
display: flex; display: flex;
@ -599,6 +630,7 @@
letter-spacing: 1px; letter-spacing: 1px;
text-align: left; text-align: left;
} }
.diedDate { .diedDate {
gap: 16rpx; gap: 16rpx;
display: flex; display: flex;
@ -625,24 +657,24 @@
text-align: left; text-align: left;
padding-bottom: 32rpx; padding-bottom: 32rpx;
} }
} }
// 状态栏容器样式 // 状态栏容器样式
:deep(.status-bar) { :deep(.status-bar) {
width: 100%; width: 100%;
max-width: 750rpx; max-width: 750rpx;
} }
.bottom { .bottom {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: #fffbf5; background: #fffbf5;
height: 180rpx; height: 180rpx;
} }
.placeholder { .placeholder {
height: 20rpx; height: 20rpx;
} }
</style> </style>