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",
});
}

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

@ -1,5 +1,5 @@
<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-content" @click.stop>
<!-- 关闭按钮 -->
@ -15,13 +15,13 @@
<view class="duration-grid">
<view
v-for="option in durationOptions"
:key="option.value"
:key="option.id"
:class="{ selected: selectedDuration === option.id }"
class="duration-option"
:class="{ selected: selectedDuration === option.value }"
@click="selectDuration(option.value)"
@click="selectDuration(option.id)"
>
<text class="duration-text">{{ option.label }}</text>
<text class="duration-price">¥{{ option.price }}</text>
<text class="duration-text">{{ option.name }}</text>
<text class="duration-price">¥{{ option.amount }}</text>
</view>
</view>
</view>
@ -30,10 +30,10 @@
<view class="offerer-section">
<view class="section-label">供奉人</view>
<input
class="offerer-input"
placeholder="请填写供奉人姓名"
v-model="offererName"
class="offerer-input"
maxlength="20"
placeholder="请填写供奉人姓名"
/>
</view>
<view class="input-tip">将在供奉名单上展现供奉人的姓名，此为必填</view>
@ -52,47 +52,48 @@
</template>
<script>
import { object } from "../../../uni_modules/uv-ui-tools/libs/function/test";
export default {
name: 'OfferingModal',
name: "OfferingModal",
props: {
visible: {
type: Boolean,
default: false,
},
durationOptions: {
type: object(),
default: {},
},
},
data() {
return {
selectedDuration: '3', // 默认选择3天
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' },
],
}
selectedDuration: null, // 默认选择3天
offererName: "",
};
},
computed: {
totalPrice() {
const selectedOption = this.durationOptions.find(
option => option.value === this.selectedDuration
)
if (!selectedOption) return '99.9'
// 未选择或options为空时返回0
if (!this.selectedDuration || !this.durationOptions.length) return 0;
// 根据设计图，显示的价格可能需要调整
// 这里可以根据实际需求调整价格计算逻辑
return selectedOption.price
const selectedOption = this.durationOptions.find(
(option) => option.id === this.selectedDuration,
);
// 当未找到选项时返回空值
return selectedOption?.amount ?? null;
},
},
methods: {
// 关闭弹窗
handleClose() {
this.$emit('close')
this.$emit("close");
},
// 选择供奉时长
selectDuration(value) {
this.selectedDuration = value
this.selectedDuration = value;
},
// 确认供奉
@ -100,27 +101,27 @@
// 验证供奉人姓名
if (!this.offererName.trim()) {
uni.showToast({
title: '请填写供奉人姓名',
icon: 'none',
})
return
title: "请填写供奉人姓名",
icon: "none",
});
return;
}
// 获取选中的时长选项
const selectedOption = this.durationOptions.find(
option => option.value === this.selectedDuration
)
(option) => option.value === this.selectedDuration,
);
// 触发确认事件
this.$emit('confirm', {
this.$emit("confirm", {
duration: this.selectedDuration,
durationLabel: selectedOption.label,
price: selectedOption.price,
offererName: this.offererName.trim(),
})
});
},
},
}
};
</script>
<style lang="scss" scoped>

302
pages/memorial/memorialHall.vue
View File

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