729 lines
18 KiB
Vue
729 lines
18 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<!-- 使用自定义导航栏组件 -->
|
||
<custom-navbar ref="customNavbar" title="往生大殿" />
|
||
<view class="header">
|
||
<!-- 搜索框 -->
|
||
<search-box
|
||
v-model="searchName"
|
||
:search-icon="CommonEnum.SEARCH"
|
||
:width="'682rpx'"
|
||
btn-text="搜索"
|
||
placeholder="请输入姓名"
|
||
@search="handleSearch"
|
||
/>
|
||
|
||
<view class="container">
|
||
<!-- 顶部信息 -->
|
||
<view class="memorial-header">
|
||
<view class="location"
|
||
>{{ memorialDetail ? memorialDetail.code : "加载中..." }}
|
||
</view>
|
||
<view
|
||
:class="['collection-btn', { collected: isCollected }]"
|
||
@click="handleCollect"
|
||
>
|
||
{{ isCollected ? "已收藏" : "收藏牌位" }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 刻铭标题 -->
|
||
<view class="title">刻铭</view>
|
||
|
||
<!-- 滚动内容区域 -->
|
||
<scroll-view
|
||
:scroll-top="scrollTop"
|
||
class="scroll-content"
|
||
scroll-y="true"
|
||
@scroll="onScroll"
|
||
>
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<view class="loading-text">加载中...</view>
|
||
</view>
|
||
|
||
<!-- 动态渲染往生者信息 -->
|
||
<view
|
||
v-for="(deceased, index) in deceasedList"
|
||
v-else-if="deceasedList.length > 0"
|
||
:key="deceased.id"
|
||
class="memorial-text"
|
||
>
|
||
<view class="name">
|
||
<view class="honorific">{{ deceased.honorific }}</view>
|
||
<view class="fullName">{{ deceased.fullName }}</view>
|
||
</view>
|
||
<view class="date">
|
||
<view class="bornDate">
|
||
<view>生</view>
|
||
<view>{{ deceased.bornYear }}</view>
|
||
<view class="time">年</view>
|
||
<view>{{ deceased.bornMonths }}</view>
|
||
<view class="time">月</view>
|
||
<view>{{ deceased.bornDay }}</view>
|
||
<view class="time">日</view>
|
||
</view>
|
||
<view class="diedDate">
|
||
<view>卒</view>
|
||
<view>{{ deceased.diedYear || "吉" }}</view>
|
||
<view class="time">年</view>
|
||
<view>{{ deceased.diedMonths || "吉利" }}</view>
|
||
<view class="time">月</view>
|
||
<view>{{ deceased.diedDay || "吉" }}</view>
|
||
<view class="time">日</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空数据提示 -->
|
||
<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 || "暂无联系方式"
|
||
}}）
|
||
</view>
|
||
<view v-else> 暂无联系方式</view>
|
||
<view v-if="memorialDetail && memorialDetail.address">
|
||
地址：{{ memorialDetail.address }}
|
||
</view>
|
||
<view v-else> 暂无地址</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 状态栏 -->
|
||
<StatusBar
|
||
v-if="selectedUnitId"
|
||
ref="statusBar"
|
||
:showDetailLink="false"
|
||
:unit-id="selectedUnitId"
|
||
@view-details="handleViewDetails"
|
||
/>
|
||
<view class="placeholder"></view>
|
||
<!-- 供奉列表 -->
|
||
<enshrined-list
|
||
v-if="!loading"
|
||
ref="enshrinedList"
|
||
:memorial-id="selectedUnitId"
|
||
:search-keyword="searchName"
|
||
@item-click="handleItemClick"
|
||
/>
|
||
</view>
|
||
<view class="bottom">
|
||
<bottom-button title="立即点灯" type="primary" @click="submitPrayer" />
|
||
</view>
|
||
|
||
<!-- 供奉弹窗 -->
|
||
<OfferingModal
|
||
:durationOptions="PackageList"
|
||
:visible="showOfferingModal"
|
||
@close="closeOfferingModal"
|
||
@confirm="handleOfferingConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
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 { getIdBySN, getPackageList } from "../../api/memorial/memorial";
|
||
import { ordersEnshrined } from "../../api/order/order";
|
||
import { checkLogin } from "../../composables/goToLogin";
|
||
|
||
export default {
|
||
components: {
|
||
BaseBackground,
|
||
CustomNavbar,
|
||
BottomButton,
|
||
SearchBox,
|
||
StatusDisplay,
|
||
EnshrinedList,
|
||
StatusBar,
|
||
OfferingModal,
|
||
},
|
||
data() {
|
||
return {
|
||
CommonEnum,
|
||
searchName: "",
|
||
loading: false,
|
||
// 当前选中的单元ID，用于状态栏查询
|
||
selectedUnitId: "",
|
||
// 往生者列表数据
|
||
deceasedList: [],
|
||
// 分页参数
|
||
pageParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
// 往生殿详情数据
|
||
memorialDetail: null,
|
||
// 滚动相关
|
||
scrollTop: 0,
|
||
// 供奉弹窗显示状态
|
||
showOfferingModal: false,
|
||
// 收藏状态
|
||
isCollected: false,
|
||
//套餐列表
|
||
PackageList: {},
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
console.log("memorialHall页面接收到的参数:", options);
|
||
if (options.id) {
|
||
this.selectedUnitId = options.id;
|
||
console.log("区域ID:", this.selectedUnitId);
|
||
}
|
||
if (options.q) {
|
||
// 步骤1：从options.q获取完整URL
|
||
const encodedQ = options.q; // "https%3A%2F%2Fwx.ccttiot.com%2Fsm%2Fd%3Fs%3D100100"
|
||
const decodedQ = decodeURIComponent(encodedQ);
|
||
// 解码后: "https://wx.ccttiot.com/sm/d?s=100100"
|
||
console.log("decodedQ", decodedQ);
|
||
// 步骤2：解析嵌套的s参数
|
||
const match = decodedQ.match(/[?&]s=([^&]*)/);
|
||
console.log("match", match); // 输出: "100100"
|
||
const sValue = match ? match[1] : null;
|
||
|
||
console.log("sValue", sValue); // 输出: "100100"
|
||
// 等待获取ID完成后再初始化页面
|
||
await this.getId(sValue);
|
||
}
|
||
this.initPage();
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.refreshData();
|
||
},
|
||
methods: {
|
||
// 初始化页面
|
||
async initPage() {
|
||
this.loading = true;
|
||
try {
|
||
// 页面初始化逻辑
|
||
console.log("往生大殿页面初始化，ID:", this.selectedUnitId);
|
||
// 获取往生殿详情
|
||
await this.getMemorialDetail();
|
||
// 获取往生者列表
|
||
await this.getDeceasedList();
|
||
|
||
// 检查收藏状态
|
||
await this.checkCollectionStatus();
|
||
//获取订单套餐
|
||
await this.fetchPackageList();
|
||
} catch (error) {
|
||
console.error("页面初始化失败:", error);
|
||
uni.showToast({
|
||
title: "页面加载失败",
|
||
icon: "none",
|
||
});
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
async getId(sn) {
|
||
const response = await getIdBySN(sn);
|
||
this.selectedUnitId = response.data.id;
|
||
|
||
console.log("SN->id", this.selectedUnitId);
|
||
},
|
||
//获取订单套餐
|
||
async fetchPackageList() {
|
||
const response = await getPackageList();
|
||
|
||
this.PackageList = response.data;
|
||
|
||
console.log("this.PackageList", this.PackageList);
|
||
|
||
console.log("获取的套餐数据:", this.PackageList);
|
||
},
|
||
|
||
// 获取往生殿详情
|
||
async getMemorialDetail() {
|
||
try {
|
||
const response = await getMemorialDetail(this.selectedUnitId);
|
||
console.log("往生殿详情响应:", response);
|
||
|
||
if (response.code === 200) {
|
||
this.memorialDetail = response.data;
|
||
console.log("往生殿详情数据:", this.memorialDetail);
|
||
} else {
|
||
console.error("获取往生殿详情失败:", response.msg);
|
||
uni.showToast({
|
||
title: response.msg || "获取往生殿信息失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取往生殿详情异常:", error);
|
||
uni.showToast({
|
||
title: "获取往生殿信息失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 获取往生者列表
|
||
async getDeceasedList() {
|
||
try {
|
||
const params = {
|
||
memorialId: this.selectedUnitId,
|
||
pageNum: this.pageParams.pageNum,
|
||
pageSize: this.pageParams.pageSize,
|
||
};
|
||
|
||
// 如果有搜索关键词，添加到参数中
|
||
// if (this.searchName) {
|
||
// params.keyword = this.searchName
|
||
// }
|
||
|
||
const response = await getDeceasedList(params); //api
|
||
|
||
if (response.code === 200) {
|
||
this.deceasedList = response.rows || [];
|
||
console.log("往生者列表数据:", this.deceasedList);
|
||
} else {
|
||
console.error("获取往生者列表失败:", response.msg);
|
||
uni.showToast({
|
||
title: response.msg || "获取数据失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取往生者列表异常:", error);
|
||
uni.showToast({
|
||
title: "网络请求失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 检查收藏状态
|
||
async checkCollectionStatus() {
|
||
if (!this.selectedUnitId) {
|
||
console.warn("未获取到牌位ID，无法检查收藏状态");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await checkIsCollected(this.selectedUnitId);
|
||
console.log("收藏状态检查响应:", response);
|
||
|
||
if (response.code === 200) {
|
||
this.isCollected = response.data === true;
|
||
console.log("当前收藏状态:", this.isCollected);
|
||
} else {
|
||
console.error("检查收藏状态失败:", response.msg);
|
||
// 检查失败时默认为未收藏状态
|
||
this.isCollected = false;
|
||
}
|
||
} catch (error) {
|
||
console.error("检查收藏状态异常:", error);
|
||
// 异常时默认为未收藏状态
|
||
this.isCollected = false;
|
||
}
|
||
},
|
||
|
||
// 处理收藏/取消收藏
|
||
async handleCollect() {
|
||
if (!checkLogin()) {
|
||
return;
|
||
}
|
||
|
||
if (!this.selectedUnitId) {
|
||
uni.showToast({
|
||
title: "无法获取牌位信息",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const loadingText = this.isCollected ? "取消收藏中..." : "收藏中...";
|
||
uni.showLoading({
|
||
title: loadingText,
|
||
});
|
||
|
||
const data = {
|
||
messageId: this.selectedUnitId.toString(),
|
||
};
|
||
|
||
const response = await collectMemorial(data);
|
||
|
||
if (response.code === 200) {
|
||
// 切换收藏状态
|
||
this.isCollected = !this.isCollected;
|
||
const successText = this.isCollected ? "收藏成功" : "取消收藏成功";
|
||
uni.showToast({
|
||
title: successText,
|
||
icon: "success",
|
||
});
|
||
} else {
|
||
throw new Error(response.msg || "操作失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("收藏操作失败:", error);
|
||
uni.showToast({
|
||
title: error.message || "操作失败",
|
||
icon: "none",
|
||
});
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
|
||
// 处理搜索
|
||
async handleSearch(value) {
|
||
console.log("搜索内容:", value);
|
||
this.searchName = value;
|
||
|
||
// 跳转到往生者搜索页面并传递搜索关键词
|
||
uni.navigateTo({
|
||
url: `/pages/memorial/deceasedSearch?keyword=${encodeURIComponent(value)}`,
|
||
success: () => {
|
||
console.log("跳转到搜索页面成功");
|
||
},
|
||
fail: (error) => {
|
||
console.error("跳转失败:", error);
|
||
uni.showToast({
|
||
title: "页面跳转失败",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
|
||
// 处理查看详情
|
||
handleViewDetails(unitData) {
|
||
console.log("查看单元详情:", unitData);
|
||
},
|
||
|
||
// 提交供奉
|
||
submitPrayer() {
|
||
if (!checkLogin()) {
|
||
return;
|
||
}
|
||
|
||
console.log("显示供奉弹窗");
|
||
this.showOfferingModal = true;
|
||
},
|
||
|
||
// 关闭供奉弹窗
|
||
closeOfferingModal() {
|
||
this.showOfferingModal = false;
|
||
},
|
||
|
||
// 确认供奉
|
||
async handleOfferingConfirm(offeringData) {
|
||
offeringData = { ...offeringData, memorialId: this.selectedUnitId };
|
||
console.log("确认供奉:", offeringData);
|
||
|
||
// 这里可以调用供奉API
|
||
uni.showLoading({
|
||
title: "正在提交供奉...",
|
||
});
|
||
|
||
let res = await ordersEnshrined(offeringData);
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: "供奉成功！",
|
||
icon: "success",
|
||
});
|
||
// 供奉成功后刷新状态栏数据
|
||
if (
|
||
this.$refs.statusBar &&
|
||
typeof this.$refs.statusBar.loadUnitData === "function"
|
||
) {
|
||
await this.$refs.statusBar.loadUnitData(this.selectedUnitId);
|
||
}
|
||
if (
|
||
this.$refs.enshrinedList &&
|
||
typeof this.$refs.enshrinedList.refresh === "function"
|
||
) {
|
||
await this.$refs.enshrinedList.refresh();
|
||
}
|
||
}
|
||
|
||
// 关闭弹窗
|
||
this.closeOfferingModal();
|
||
|
||
// 可以在这里刷新数据或跳转到其他页面
|
||
},
|
||
|
||
// 刷新数据
|
||
async refreshData() {
|
||
try {
|
||
// 重置页码
|
||
this.pageParams.pageNum = 1;
|
||
// 重新获取数据
|
||
await this.getMemorialDetail();
|
||
await this.getDeceasedList();
|
||
// 重新检查收藏状态
|
||
await this.checkCollectionStatus();
|
||
// 停止下拉刷新
|
||
uni.stopPullDownRefresh();
|
||
uni.showToast({
|
||
title: "刷新成功",
|
||
icon: "success",
|
||
duration: 1500,
|
||
});
|
||
} catch (error) {
|
||
console.error("刷新数据失败:", error);
|
||
uni.stopPullDownRefresh();
|
||
uni.showToast({
|
||
title: "刷新失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
|
||
// 滚动事件处理
|
||
onScroll(e) {
|
||
console.log("滚动位置:", e.detail.scrollTop);
|
||
this.scrollTop = e.detail.scrollTop;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding-bottom: 180rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
//border: 1px red solid;
|
||
height: 862rpx;
|
||
padding: 34rpx 32rpx 0 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.memorial-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
//border: 1px red solid;
|
||
padding-left: 2rpx;
|
||
height: 54rpx;
|
||
margin-bottom: 26rpx;
|
||
|
||
.location {
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #522510;
|
||
line-height: 54rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.collection-btn {
|
||
color: white;
|
||
padding: 5px 10px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
align-items: center;
|
||
width: 180rpx;
|
||
height: 56rpx;
|
||
background: #a24242;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&:active {
|
||
background: #8b3a3a;
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
&:hover {
|
||
background: #b85a5a;
|
||
}
|
||
|
||
// 已收藏状态样式
|
||
&.collected {
|
||
background: #4caf50;
|
||
|
||
&:hover {
|
||
background: #45a049;
|
||
}
|
||
|
||
&:active {
|
||
background: #3d8b40;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 22rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #522510;
|
||
line-height: 54rpx;
|
||
text-align: left;
|
||
//border: 1px red solid;
|
||
}
|
||
|
||
.scroll-content {
|
||
flex: 1;
|
||
height: 0; // 让flex: 1生效
|
||
overflow: hidden;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100rpx; /* Adjust height as needed */
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #522510;
|
||
}
|
||
|
||
.empty-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.memorial-text {
|
||
display: flex;
|
||
margin-bottom: 38rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4c382e;
|
||
line-height: 32rpx;
|
||
letter-spacing: 1px;
|
||
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;
|
||
color: #4c382e;
|
||
line-height: 32rpx;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.fullName {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #4c382e;
|
||
line-height: 32rpx;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.date {
|
||
color: #522510;
|
||
|
||
.bornDate {
|
||
gap: 16rpx;
|
||
display: flex;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
}
|
||
|
||
.diedDate {
|
||
gap: 16rpx;
|
||
display: flex;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
line-height: 38rpx;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.contact-info {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #4c382e;
|
||
line-height: 38rpx;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
padding-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
// 状态栏容器样式
|
||
:deep(.status-bar) {
|
||
width: 100%;
|
||
max-width: 750rpx;
|
||
}
|
||
|
||
.bottom {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: #fffbf5;
|
||
height: 180rpx;
|
||
}
|
||
|
||
.placeholder {
|
||
height: 20rpx;
|
||
}
|
||
</style>
|