You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

115 lines
2.5 KiB
Vue

<template>
<div class="login-head">
<div class="head-title">
<image class="head-icon" src="/static/head-icon.png" />
<span>{{ hallName }}</span>
</div>
<div class="head-time">
<text class="dt-text">{{ currentDate }}</text>
<text class="dt-text">{{ currentDay }}</text>
<text class="dt-text">{{ currentTime }}</text>
</div>
</div>
</template>
<script setup>
import {
ref,
onMounted,
onUnmounted
} from 'vue'
import { onShow } from '@dcloudio/uni-app'
const currentTime = ref('')
const currentDate = ref('')
const currentDay = ref('')
const hallName = ref('国家税务总局XX市XX税务局办税服务厅')
const hallNameEvent = 'hall-name-updated'
const loadHallNameFromStorage = () => {
const savedHallName = uni.getStorageSync('swjgMC')
if (savedHallName) {
hallName.value = savedHallName
}
}
const updateDateTime = () => {
const now = new Date()
// 格式化时间 (HH:MM:SS)
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
currentTime.value = `${hours}:${minutes}:${seconds}`
// 格式化日期 (YYYY-MM-DD)
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
currentDate.value = `${year}-${month}-${day}`
// 新增:获取星期
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
currentDay.value = weekDays[now.getDay()]
};
let timer
onMounted(() => {
loadHallNameFromStorage()
uni.$on(hallNameEvent, loadHallNameFromStorage)
updateDateTime() // 立即执行一次
timer = setInterval(updateDateTime, 1000) // 每秒更新
});
onShow(() => {
// 页面重新展示时再次读取,确保重启/回到页面后名称可见
loadHallNameFromStorage()
})
onUnmounted(() => {
if (timer) {
clearInterval(timer)
}
uni.$off(hallNameEvent, loadHallNameFromStorage)
})
</script>
<style lang="scss">
.login-head {
display: flex;
justify-content: space-between;
padding-top: $statusbar-height;
.head-title {
display: flex;
align-items: center;
height: 6vh;
.head-icon {
width: 40px;
height: 40px;
margin-left: 1vw;
}
span {
color: #fff;
font-size: 3vh;
font-weight: 800;
margin-left: 1vw;
}
}
.head-time {
display: flex;
align-items: center;
height: 6vh;
.dt-text {
color: #fff;
font-size: 2vh;
margin-right: 1vw;
}
}
}
</style>