96 lines
1.8 KiB
Vue
96 lines
1.8 KiB
Vue
<script>
|
|
import IconPrev from '@/static/launches/icon_prev.png';
|
|
import IconNext from '@/static/launches/icon_next.png';
|
|
import IconNextDisabled from '@/static/launches/icon_next_disabled.png';
|
|
|
|
// 从 sessionStorage 获取缓存数据的辅助函数
|
|
function getCachedYear() {
|
|
try {
|
|
const cachedData = sessionStorage.getItem('launches_search_cache');
|
|
if (cachedData) {
|
|
const parsedData = JSON.parse(cachedData);
|
|
return parsedData.currentYear || new Date().getFullYear();
|
|
}
|
|
} catch (e) {
|
|
console.error('获取缓存的年份失败', e);
|
|
}
|
|
return new Date().getFullYear();
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: getCachedYear
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {
|
|
year() {
|
|
return this.value;
|
|
},
|
|
prevIcon() {
|
|
return IconPrev;
|
|
},
|
|
nextIcon() {
|
|
return this.year === new Date().getFullYear() ? IconNextDisabled : IconNext;
|
|
},
|
|
isNextDisabled() {
|
|
return this.year === new Date().getFullYear();
|
|
}
|
|
},
|
|
methods: {
|
|
prevYear() {
|
|
this.$emit('input', this.year - 1);
|
|
},
|
|
nextYear() {
|
|
if (!this.isNextDisabled) {
|
|
this.$emit('input', this.year + 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-center box">
|
|
<div class="btn" @click="prevYear">
|
|
<img :src="prevIcon" alt="Previous Year" />
|
|
</div>
|
|
<div class="text">{{ year }}</div>
|
|
<div class="btn" @click="nextYear">
|
|
<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
gap: 6px;
|
|
color: #3A4A65;
|
|
font-size: 24px;
|
|
font-family: 'Poppins-SemiBold';
|
|
.btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
cursor: pointer;
|
|
//background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.text {
|
|
width: 60px;text-align: center; font-family: 'Poppins-Regular';
|
|
}
|
|
}
|
|
</style>
|