buddhism/pages/memorial/compositons/statusBar.vue

<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" v-if="showDetailLink">
        <text>查看详情></text>
      </view>
    </view>
  </view>
</template>

<script>
import { getMemorialDetail } from '@/api/memorial/index.js'

export default {
  name: 'StatusBar',
  props: {
    // 单元ID
    unitId: {
      type: String,
      default: ''
    },
    // 是否显示查看详情链接
    showDetailLink: {
      type: Boolean,
      default: true
    }
  },
  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;

}

.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>