添加四个按钮控制牌位
This commit is contained in:
WindowBird
parent
d4f3df8d38
commit
83cf936b9c
|
|
@ -1,13 +1,337 @@
|
|||
<template>
|
||||
<view class="">
|
||||
<view class="page">
|
||||
<base-background />
|
||||
<!-- 使用自定义导航栏组件 -->
|
||||
<custom-navbar ref="customNavbar" title="牌位管理" />
|
||||
<view class="header">
|
||||
<!-- 状态展示 -->
|
||||
<status-display v-if="loading" loading-text="加载中..." type="loading" />
|
||||
|
||||
</view>
|
||||
<!-- 状态栏 -->
|
||||
<StatusBar
|
||||
v-if="selectedUnitId"
|
||||
ref="statusBar"
|
||||
:unit-id="selectedUnitId"
|
||||
@view-details="handleViewDetails"
|
||||
/>
|
||||
|
||||
<!-- 楼层选择器 -->
|
||||
<view class="floor-selector-container">
|
||||
<FloorSelector
|
||||
ref="floorSelector"
|
||||
:default-area-id="defaultAreaId"
|
||||
:default-floor-id="defaultFloorId"
|
||||
:default-unit-id="defaultUnitId"
|
||||
@selection-change="handleSelectionChange"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="btn-grid">
|
||||
<view class="grid-btn" @click="handleForceOpen">强制开启</view>
|
||||
<view class="grid-btn" @click="handleForceClose">强制关闭</view>
|
||||
<view class="grid-btn" @click="handleResetDuration">时长归零</view>
|
||||
<view class="grid-btn" @click="handleIncreaseDuration">增加时长</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import { CommonEnum } from "@/enum/common.js";
|
||||
import SearchBox from "../../components/search-box/search-box.vue";
|
||||
import StatusDisplay from "../../components/status-display/status-display.vue";
|
||||
import EnshrinedList from "./compositons/enshrinedListIndex.vue";
|
||||
import FloorSelector from "./compositons/floorSelector.vue";
|
||||
import StatusBar from "./compositons/statusBar.vue";
|
||||
// import BottomButton from "../../components/bottom-button/bottom-button.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// BottomButton,
|
||||
SearchBox,
|
||||
StatusDisplay,
|
||||
EnshrinedList,
|
||||
FloorSelector,
|
||||
StatusBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
searchName: "",
|
||||
loading: false,
|
||||
memorialId: "16", // 默认往生殿ID，可以从路由参数获取
|
||||
// 楼层选择器默认值
|
||||
defaultFloorId: "",
|
||||
defaultAreaId: "",
|
||||
defaultUnitId: "",
|
||||
// 当前选中的楼层信息
|
||||
currentSelection: {
|
||||
floor: null,
|
||||
area: null,
|
||||
unit: null,
|
||||
},
|
||||
// 当前选中的单元ID，用于状态栏查询
|
||||
selectedUnitId: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
// 从路由参数获取往生殿ID
|
||||
if (options.id) {
|
||||
this.memorialId = options.id;
|
||||
}
|
||||
this.initPage();
|
||||
},
|
||||
onShow() {
|
||||
// 返回该页面时，刷新状态栏数据，避免与供奉页操作不一致
|
||||
if (
|
||||
this.selectedUnitId &&
|
||||
this.$refs.statusBar &&
|
||||
typeof this.$refs.statusBar.loadUnitData === "function"
|
||||
) {
|
||||
this.$refs.statusBar.loadUnitData(this.selectedUnitId);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 底部按钮：强制开启
|
||||
async handleForceOpen() {
|
||||
try {
|
||||
const res = await this.$request.put(
|
||||
`/bst/memorial/open/${this.selectedUnitId}`,
|
||||
);
|
||||
if (res && (res.code === 200 || res.status === 200)) {
|
||||
uni.showToast({ title: res.msg || "操作成功", icon: "success" });
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: (res && res.msg) || "操作失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请求失败", icon: "none" });
|
||||
console.error("handleForceOpen error", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 底部按钮：强制关闭
|
||||
async handleForceClose() {
|
||||
try {
|
||||
const res = await this.$request.put(
|
||||
`/bst/memorial/close/${this.selectedUnitId}`,
|
||||
);
|
||||
if (res && (res.code === 200 || res.status === 200)) {
|
||||
uni.showToast({ title: res.msg || "操作成功", icon: "success" });
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: (res && res.msg) || "操作失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请求失败", icon: "none" });
|
||||
console.error("handleForceClose error", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 底部按钮：时长归零
|
||||
async handleResetDuration() {
|
||||
try {
|
||||
const res = await this.$request.put(
|
||||
`/bst/memorial/duration/reset/${this.selectedUnitId}`,
|
||||
);
|
||||
if (res && (res.code === 200 || res.status === 200)) {
|
||||
uni.showToast({ title: res.msg || "操作成功", icon: "success" });
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: (res && res.msg) || "操作失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请求失败", icon: "none" });
|
||||
console.error("handleResetDuration error", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 底部按钮：增加时长
|
||||
async handleIncreaseDuration() {
|
||||
try {
|
||||
// 默认增加 1（单位由后端定义）
|
||||
const res = await this.$request.put(
|
||||
`/bst/memorial/duration/increase/${this.selectedUnitId}`,
|
||||
{ value: 1 },
|
||||
);
|
||||
if (res && (res.code === 200 || res.status === 200)) {
|
||||
uni.showToast({ title: res.msg || "操作成功", icon: "success" });
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: (res && res.msg) || "操作失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "请求失败", icon: "none" });
|
||||
console.error("handleIncreaseDuration error", error);
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化页面
|
||||
async initPage() {
|
||||
this.loading = true;
|
||||
try {
|
||||
// 页面初始化逻辑
|
||||
console.log("往生殿页面初始化，ID:", this.memorialId);
|
||||
} catch (error) {
|
||||
console.error("页面初始化失败:", error);
|
||||
uni.showToast({
|
||||
title: "页面加载失败",
|
||||
icon: "none",
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 处理搜索
|
||||
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",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 处理列表项点击
|
||||
handleItemClick(item) {
|
||||
console.log("点击供奉记录:", item);
|
||||
// 可以跳转到详情页或执行其他操作
|
||||
uni.showToast({
|
||||
title: `查看 ${item.worshiperName} 的供奉记录`,
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
|
||||
// 处理楼层选择变化
|
||||
handleSelectionChange(selection) {
|
||||
console.log("楼层选择变化:", selection);
|
||||
this.currentSelection = selection;
|
||||
|
||||
// 当选中单元时，更新selectedUnitId触发状态栏查询
|
||||
if (selection.unit) {
|
||||
console.log(
|
||||
"选中单元:",
|
||||
selection.unit.label,
|
||||
"ID:",
|
||||
selection.unit.id,
|
||||
);
|
||||
this.selectedUnitId = selection.unit.id;
|
||||
} else {
|
||||
// 如果没有选中单元，清空状态栏
|
||||
this.selectedUnitId = "";
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到往生大殿页面的通用方法
|
||||
navigateToMemorialHall(unitId) {
|
||||
console.log("跳转到往生大殿页面，ID:", unitId);
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/memorial/memorialHall?id=${unitId}`,
|
||||
success: () => {
|
||||
console.log("跳转成功");
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error("跳转失败:", error);
|
||||
uni.showToast({
|
||||
title: "页面跳转失败",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 处理查看详情
|
||||
handleViewDetails(unitData) {
|
||||
console.log("查看单元详情:", unitData);
|
||||
this.navigateToMemorialHall(unitData.id);
|
||||
},
|
||||
|
||||
// 提交供奉 - 跳转到往生大殿页面
|
||||
submitPrayer() {
|
||||
console.log("提交供奉，跳转到往生大殿页面，ID:", this.selectedUnitId);
|
||||
this.navigateToMemorialHall(this.selectedUnitId);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.floor-selector-container {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 状态栏容器样式
|
||||
:deep(.status-bar) {
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fffbf5;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.btn-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #a24242;
|
||||
color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user