往生殿状态栏1.0

components/custom-navbar/README.md

@@ -110,7 +110,7 @@ export default {
       @scroll-change="onScrollChange"
     />
     <!-- 页面内容 -->
-  </view>
+    </view>
 </template>
 
 <script>
@@ -168,4 +168,4 @@ export default {
   }
 }
 </script>
-``` 
+```

pages/memorial/compositons/floorSelector.vue

@@ -333,11 +333,11 @@ export default {
 .vertical-divider {
   width: 1rpx;
   background: repeating-linear-gradient(
-    to bottom,
-    #C7A26D 0,
-    #C7A26D 4rpx,
-    transparent 4rpx,
-    transparent 8rpx
+          to bottom,
+          #A24242 0,
+          #A24242 8rpx,
+          transparent 8rpx,
+          transparent 16rpx
   );
   margin: 0 48rpx 0 0;
 }

pages/memorial/compositons/statusBar.vue

@@ -0,0 +1,209 @@
+<template>
+  <view class="status-bar">
+    <view class="status-content">
+      <view class="status-info">
+        <view class="status-item">
+          <text class="status-label">牌位状态:</text>
+          <text class="status-value" :class="statusClass">{{ statusText }}</text>
+        </view>
+        <view class="status-item">
+          <text class="status-label">剩余时长:</text>
+          <text class="status-value">{{ remainingTime }}</text>
+        </view>
+      </view>
+      <view class="detail-link" @click="viewDetails">
+        <text>查看详情></text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getMemorialDetail } from '@/api/memorial/index.js'
+
+export default {
+  name: 'StatusBar',
+  props: {
+    // 单元ID
+    unitId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      unitData: null,
+      loading: false
+    }
+  },
+  computed: {
+    // 状态文本
+    statusText() {
+      if (!this.unitData) return '--'
+      const stateMap = {
+        '1': '已点亮',
+        '2': '待续供'
+      }
+      return stateMap[this.unitData.state] || '--'
+    },
+    // 状态样式类
+    statusClass() {
+      if (!this.unitData) return ''
+      return this.unitData.state === '1' ? 'status-active' : 'status-pending'
+    },
+    // 剩余时长
+    remainingTime() {
+      if (!this.unitData || !this.unitData.extinguishTime) return '--'
+      
+      const now = new Date()
+      const extinguishTime = new Date(this.unitData.extinguishTime)
+      const diffTime = extinguishTime - now
+      
+      if (diffTime <= 0) return '--'
+      
+      const days = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+      const hours = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+      
+      if (days > 0) {
+        return `${days}天${hours}小时`
+      } else {
+        return `${hours}小时`
+      }
+    }
+  },
+  watch: {
+    // 监听单元ID变化，自动查询数据
+    unitId: {
+      handler(newId) {
+        if (newId) {
+          this.loadUnitData(newId)
+        } else {
+          this.unitData = null
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 加载单元数据
+    async loadUnitData(id) {
+      this.loading = true
+      try {
+        const response = await getMemorialDetail(id)
+        console.log('单元详情数据:', response)
+
+        if (response && response.code === 200) {
+          this.unitData = response.data
+        } else {
+          console.error('获取单元详情失败:', response)
+          uni.showToast({
+            title: '获取单元详情失败',
+            icon: 'none'
+          })
+        }
+      } catch (error) {
+        console.error('加载单元详情失败:', error)
+        uni.showToast({
+          title: '网络异常，请稍后重试',
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 查看详情
+    viewDetails() {
+      if (!this.unitData) return
+      
+      this.$emit('view-details', this.unitData)
+    },
+
+    // 获取当前数据
+    getCurrentData() {
+      return this.unitData
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.status-bar {
+  padding-left:48rpx;
+  width: 750rpx;
+  height: 84rpx;
+  background-color: #FFF1DD;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  //border: #020101 1rpx solid;
+  margin-bottom: 14rpx;
+  margin-top: 12rpx;
+}
+
+.status-content {
+  display: flex;
+  align-items: center;
+  //border: #1ed5bf 1rpx solid;
+  width: 658rpx;
+
+}
+
+.status-info {
+  flex: 1;
+  display: flex;
+  //border: #01ff0f 1rpx solid;
+  gap:20rpx;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  //border: red 1rpx solid;
+
+
+
+}
+
+.status-label {
+  margin-right: 20rpx;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #AD9B91;
+  line-height: 32rpx;
+  text-align: right;
+}
+
+.status-value {
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #AD9B91;
+  line-height: 32rpx;
+  text-align: right;
+
+  &.status-active {
+    color: #A24242; // 红色 - 已点亮
+  }
+
+  &.status-pending {
+    color: #4C382E; // 黑色 - 待续供
+  }
+}
+
+.detail-link {
+  cursor: pointer;
+  padding: 0 16rpx;
+  border-radius: 8rpx;
+  transition: all 0.3s ease;
+  //border: red 1rpx solid;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #AD9B91;
+  line-height: 32rpx;
+  text-align: left;
+
+  &:hover {
+    background-color: #FFF1DD;
+  }
+}
+</style> 

pages/memorial/memorial.vue

@@ -2,8 +2,9 @@
   <view class="page">
     <base-background />
     <!-- 使用自定义导航栏组件 -->
-    <custom-navbar title="往生殿"
-                   ref="customNavbar"/>
+    <custom-navbar
+        ref="customNavbar"
+        title="往生殿"/>
     <view class="header">
       <!-- 状态展示 -->
       <status-display
@@ -29,6 +30,13 @@
         @item-click="handleItemClick"
         ref="enshrinedList"
       />
+      <!-- 状态栏 -->
+      <StatusBar 
+        v-if="selectedUnitId"
+        :unit-id="selectedUnitId" 
+        @view-details="handleViewDetails"
+      />
+      
       <!-- 楼层选择器 -->
       <view class="floor-selector-container">
         <FloorSelector
@@ -54,6 +62,7 @@ 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 FloorSelector from "./compositons/floorSelector.vue"
+import StatusBar from "./compositons/statusBar.vue"
 import BottomButton from "../../components/bottom-button/bottom-button.vue";
 
 export default {
@@ -62,7 +71,8 @@ export default {
     SearchBox,
     StatusDisplay,
     EnshrinedList,
-    FloorSelector
+    FloorSelector,
+    StatusBar
   },
   data() {
     return {
@@ -79,7 +89,9 @@ export default {
         floor: null,
         area: null,
         unit: null
-      }
+      },
+      // 当前选中的单元ID，用于状态栏查询
+      selectedUnitId: ''
     }
   },
   onLoad(options) {
@@ -129,14 +141,22 @@ export default {
       console.log('楼层选择变化:', selection)
       this.currentSelection = selection
       
-      // 可以根据选中的楼层信息进行相关操作
-      // 例如：根据选中的单元ID查询对应的供奉记录
+      // 当选中单元时，更新selectedUnitId触发状态栏查询
       if (selection.unit) {
         console.log('选中单元:', selection.unit.label, 'ID:', selection.unit.id)
-        // 这里可以触发查询该单元的供奉记录
-        // this.queryEnshrinedByUnit(selection.unit.id)
+        this.selectedUnitId = selection.unit.id
+      } else {
+        // 如果没有选中单元，清空状态栏
+        this.selectedUnitId = ''
       }
     },
+
+    // 处理查看详情
+    handleViewDetails(unitData) {
+      console.log('查看单元详情:', unitData)
+      
+
+    },
     
   }
 }
@@ -150,7 +170,7 @@ export default {
 
 .header {
   width: 100%;
-  min-height: 200vh;
+  min-height: 100vh;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -159,8 +179,14 @@ export default {
 }
 
 .floor-selector-container {
-  margin: 30rpx 0;
+  margin-bottom: 30rpx;
   display: flex;
   justify-content: center;
 }
+
+// 状态栏容器样式
+:deep(.status-bar) {
+  width: 100%;
+  max-width: 750rpx;
+}
 </style>