后期修改完善，上线版本
This commit is contained in:
@ -5,30 +5,32 @@
|
||||
<div class="preview-box">
|
||||
<img :src="config.coverImage || ''" alt="" />
|
||||
</div>
|
||||
<div class="tool-content flex flex-col justify-between">
|
||||
<div class="tool-content flex flex-1 flex-col justify-between">
|
||||
<div class="content-top flex items-start">
|
||||
<div class="icon">
|
||||
<img src="/" alt="" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="title">{{ config.title || '' }}</div>
|
||||
<div class="sub-title" style="padding-right: 30px">{{ config.summary || '' }}</div>
|
||||
<div class="sub-title pr-30">{{ config.summary || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-bottom flex items-center">
|
||||
<img src="/launches/item/icon_clock.png" alt="" />
|
||||
<div class="time-style">{{ config.publishTime || '' }}</div>
|
||||
<div class="time-style">{{ formatPublishTime(config.publishTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content flex">
|
||||
<div class="flex items-center">
|
||||
<div class="right-content flex items-center">
|
||||
<div class="flex items-center btn">
|
||||
<img :src="hovered ? '/launches/item/icon_thumb_grey.png' : '/launches/item/icon_thumb.png'" alt="" />
|
||||
<div :class="{ 'hover-text': hovered }">{{ config.likeCount || 0 }}</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center btn">
|
||||
<img :src="hovered ? '/launches/item/icon_star_grey.png' : '/launches/item/icon_star.png'" alt="" />
|
||||
<div :class="{ 'hover-text': hovered }">{{ config.rating || 0 }}</div>
|
||||
<div :class="{ 'hover-text': hovered }">
|
||||
{{ (config.rating || 0).toFixed(1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -54,6 +56,21 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatPublishTime(timeString) {
|
||||
if (!timeString) return '';
|
||||
|
||||
const date = new Date(timeString);
|
||||
const months = [
|
||||
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
|
||||
];
|
||||
|
||||
const month = months[date.getMonth()];
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${month} ${day} Released in ${year}`;
|
||||
},
|
||||
handleMouseEnter() {
|
||||
this.hovered = true;
|
||||
},
|
||||
@ -78,7 +95,7 @@ export default {
|
||||
if (id) {
|
||||
await this.$api.article.recordArticleClick(id);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const itemContent = this.$el;
|
||||
@ -94,19 +111,27 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pr-30 {
|
||||
padding-right: 30px;
|
||||
}
|
||||
.item-content {
|
||||
border-radius: 12px;
|
||||
padding: 30px 20px;
|
||||
padding: 25px 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #F5F4FF;
|
||||
|
||||
.order-num {
|
||||
background: #fff;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
gap: 30px;
|
||||
.order-num {
|
||||
@ -118,12 +143,13 @@ export default {
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
font-size: 18px;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
font-family: 'Poppins-Regular';
|
||||
transition: background-color 0.3s ease;
|
||||
color: #506179;
|
||||
}
|
||||
.preview-box {
|
||||
width: 228px;
|
||||
height: 133px;
|
||||
height: 110px;
|
||||
border-radius: 6px;
|
||||
background-color: #FFFFFF;
|
||||
img {
|
||||
@ -145,15 +171,19 @@ export default {
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
color: #3A4A65;
|
||||
}
|
||||
.sub-title {
|
||||
color: #64748B;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
font-family: 'Poppins-Regular';
|
||||
margin-top: 10px;
|
||||
max-width: 420px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.content-bottom {
|
||||
@ -164,7 +194,7 @@ export default {
|
||||
}
|
||||
.time-style {
|
||||
color: #64748B;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
font-family: 'Poppins-Regular';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -172,9 +202,15 @@ export default {
|
||||
.right-content {
|
||||
padding-right: 23px;
|
||||
gap: 33px;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
font-family: 'Poppins-Regular';
|
||||
color: #E2E8F0;
|
||||
height: 24px;
|
||||
max-width: 192px;
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div v-if="mode === 'Daily'" class="daily-picker">
|
||||
<HorizontalDateList>
|
||||
<button
|
||||
style="width: 36px"
|
||||
class="bt-d"
|
||||
v-for="day in dailyDays"
|
||||
:key="day.dateStr"
|
||||
:class="{ 'selected': day.dateStr === selectedDate }"
|
||||
@ -19,7 +19,7 @@
|
||||
<div v-else-if="mode === 'Weekly'" class="weekly-picker">
|
||||
<HorizontalDateList>
|
||||
<button
|
||||
style="margin: 0 30px; width: 105px"
|
||||
class="bt-w"
|
||||
v-for="week in weeklyRanges"
|
||||
:key="week.start"
|
||||
:class="{ 'selected': week.start === selectedDate[0] && week.end === selectedDate[1] }"
|
||||
@ -32,7 +32,7 @@
|
||||
<div v-else class="monthly-picker">
|
||||
<HorizontalDateList>
|
||||
<button
|
||||
style="margin: 0 9px; width: 55px"
|
||||
class="bt-m"
|
||||
v-for="(monthAbbr, index) in monthAbbrs"
|
||||
:key="index"
|
||||
:class="{ 'selected': (index + 1) === selectedMonth }"
|
||||
@ -47,6 +47,17 @@
|
||||
<script>
|
||||
import HorizontalDateList from '@/components/HorizontalDateList.vue';
|
||||
|
||||
// 从 sessionStorage 获取缓存数据的辅助函数
|
||||
function getCachedData() {
|
||||
try {
|
||||
const cachedData = sessionStorage.getItem('launches_search_cache');
|
||||
return cachedData ? JSON.parse(cachedData) : null;
|
||||
} catch (e) {
|
||||
// console.error('获取缓存数据失败', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'OptionDates',
|
||||
components: {
|
||||
@ -72,9 +83,34 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const cachedData = getCachedData();
|
||||
let initialSelectedDate = this.mode === 'Daily' ? '' : ['', ''];
|
||||
let initialSelectedMonth = this.month;
|
||||
|
||||
// 改进：优先从缓存中获取月份
|
||||
if (cachedData && cachedData.currentMonth) {
|
||||
initialSelectedMonth = cachedData.currentMonth;
|
||||
}
|
||||
|
||||
// 如果有缓存数据，优先使用缓存数据
|
||||
if (cachedData && cachedData.lastSelectedValue) {
|
||||
try {
|
||||
const lastSelectedValue = JSON.parse(cachedData.lastSelectedValue);
|
||||
if (lastSelectedValue) {
|
||||
if (this.mode === 'Daily' && typeof lastSelectedValue === 'string') {
|
||||
initialSelectedDate = lastSelectedValue;
|
||||
} else if (this.mode !== 'Daily' && Array.isArray(lastSelectedValue)) {
|
||||
initialSelectedDate = lastSelectedValue;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析缓存的lastSelectedValue失败', e);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
selectedDate: this.mode === 'Daily' ? '' : ['', ''], // 选中的日期/日期范围
|
||||
selectedMonth: this.month // 月模式下选中的月份
|
||||
selectedDate: initialSelectedDate,
|
||||
selectedMonth: initialSelectedMonth,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -102,10 +138,60 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 组件创建时自动选中当前日期或周
|
||||
this.autoSelectCurrentDate();
|
||||
// 先从props获取月份，避免初始为null
|
||||
this.selectedMonth = this.month;
|
||||
|
||||
// 立即尝试获取缓存数据
|
||||
this.updateFromCache();
|
||||
|
||||
// 添加一个小延迟再次尝试，确保父组件的loadSearchCache执行完毕
|
||||
setTimeout(() => {
|
||||
this.updateFromCache();
|
||||
// 强制更新UI，确保选中状态正确显示
|
||||
this.$forceUpdate();
|
||||
}, 100);
|
||||
},
|
||||
methods: {
|
||||
updateFromCache() {
|
||||
const cachedData = getCachedData();
|
||||
|
||||
if (cachedData) {
|
||||
// 优先从缓存获取currentMonth
|
||||
if (cachedData.currentMonth) {
|
||||
this.selectedMonth = cachedData.currentMonth;
|
||||
}
|
||||
|
||||
// 处理lastSelectedValue
|
||||
if (cachedData.lastSelectedValue) {
|
||||
try {
|
||||
const lastSelectedValue = JSON.parse(cachedData.lastSelectedValue);
|
||||
if (lastSelectedValue) {
|
||||
if (this.mode === 'Monthly') {
|
||||
// 月模式下，确保selectedMonth和lastSelectedValue一致
|
||||
let monthToUse = this.selectedMonth;
|
||||
// 如果缓存中有currentMonth，优先使用
|
||||
if (cachedData.currentMonth) {
|
||||
monthToUse = cachedData.currentMonth;
|
||||
this.selectedMonth = monthToUse;
|
||||
}
|
||||
// 生成与selectedMonth对应的日期范围
|
||||
const [start, end] = this.getMonthRange(this.year, monthToUse);
|
||||
// 使用$nextTick确保DOM更新后再发出事件
|
||||
this.$nextTick(() => {
|
||||
this.$emit('select', [start, end]);
|
||||
this.$emit('month-change', monthToUse);
|
||||
});
|
||||
} else if ((this.mode === 'Daily' && typeof lastSelectedValue === 'string') ||
|
||||
(this.mode !== 'Daily' && Array.isArray(lastSelectedValue))) {
|
||||
this.$emit('select', lastSelectedValue);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('使用缓存的lastSelectedValue失败', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 自动选中当前日期或周
|
||||
autoSelectCurrentDate(shouldEmit = true) {
|
||||
const now = new Date();
|
||||
@ -162,8 +248,15 @@ export default {
|
||||
|
||||
// 处理月模式的选择
|
||||
handleMonthSelect(month) {
|
||||
// 确保状态立即更新
|
||||
this.selectedMonth = month;
|
||||
// 强制更新UI
|
||||
this.$forceUpdate();
|
||||
|
||||
const [start, end] = this.getMonthRange(this.year, month);
|
||||
// 先发出month-change事件，确保父组件的currentMonth先更新
|
||||
this.$emit('month-change', month);
|
||||
// 然后发出select事件更新lastSelectedValue，包含正确的时间格式
|
||||
this.$emit('select', [start, end]);
|
||||
},
|
||||
|
||||
@ -184,7 +277,15 @@ export default {
|
||||
getMonthRange(year, month) {
|
||||
const start = new Date(year, month - 1, 1);
|
||||
const end = new Date(year, month, 0);
|
||||
return [this.formatDate(start), this.formatDate(end)];
|
||||
const formatDateWithTime = (date, isStart = true) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const time = isStart ? '00:00:00' : '23:59:59';
|
||||
return `${year}-${month}-${day} ${time}`;
|
||||
};
|
||||
return [formatDateWithTime(start), formatDateWithTime(end, false)];
|
||||
|
||||
},
|
||||
|
||||
// 辅助：获取某年的所有完整周区间（假设周从周日开始，到周六结束）
|
||||
@ -253,23 +354,27 @@ export default {
|
||||
month() {
|
||||
if (this.mode === 'Daily') {
|
||||
this.selectedDate = '';
|
||||
this.autoSelectCurrentDate();
|
||||
}
|
||||
this.autoSelectCurrentDate();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.date-picker-core {
|
||||
padding: 10px;
|
||||
.bt-d {
|
||||
width: 36px; margin: 0 10px;
|
||||
}
|
||||
.bt-w {
|
||||
margin: 0 30px; width: 105px;
|
||||
}
|
||||
.bt-m {
|
||||
margin: 0 20px; width: 55px;
|
||||
}
|
||||
|
||||
.picker-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -9,11 +9,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 从 sessionStorage 获取缓存数据的辅助函数
|
||||
function getCachedMode() {
|
||||
try {
|
||||
const cachedData = sessionStorage.getItem('launches_search_cache');
|
||||
if (cachedData) {
|
||||
const parsedData = JSON.parse(cachedData);
|
||||
return parsedData.currentMode || 'Daily';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取缓存的模式失败', e);
|
||||
}
|
||||
return 'Daily';
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: 'Daily'
|
||||
default: getCachedMode,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -29,22 +43,22 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.switch-box {
|
||||
padding: 22px 40px;
|
||||
padding: 12px 40px;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 10px 30px 0 #0000000d;
|
||||
.diver {
|
||||
width: 1px;
|
||||
height: 36px;
|
||||
margin-left: 70px;
|
||||
margin-right: 70px;
|
||||
height: 29px;
|
||||
margin-left: 33px;
|
||||
margin-right: 33px;
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
border-left-color: #E2E8F0;
|
||||
}
|
||||
.item-text {
|
||||
font-size: 24px;
|
||||
font-family: 'Poppins-Regular', serif;
|
||||
font-family: 'Poppins-Regular';
|
||||
color: #3A4A65;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
@ -53,7 +67,7 @@ export default {
|
||||
.active {
|
||||
color: #7B61FF;
|
||||
font-weight: 900 !important;
|
||||
font-family: 'Poppins-Bold', serif;
|
||||
font-family: 'Poppins-Bold';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="btn" @click="prevYear">
|
||||
<img :src="prevIcon" alt="Previous Year" />
|
||||
</div>
|
||||
<div style="width: 60px;text-align: center; font-family: 'Poppins-Regular', serif">{{ monthName }}</div>
|
||||
<div class="text">{{ monthName }}</div>
|
||||
<div class="btn" @click="nextYear">
|
||||
<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
|
||||
</div>
|
||||
@ -16,6 +16,20 @@ import IconNext from '@/static/launches/icon_next.png';
|
||||
import IconNextDisabled from '@/static/launches/icon_next_disabled.png';
|
||||
import IconPrevDisabled from '@/static/launches/icon_prev_disabled.png';
|
||||
|
||||
// 从 sessionStorage 获取缓存数据的辅助函数
|
||||
function getCachedMonth() {
|
||||
try {
|
||||
const cachedData = sessionStorage.getItem('launches_search_cache');
|
||||
if (cachedData) {
|
||||
const parsedData = JSON.parse(cachedData);
|
||||
return parsedData.currentMonth || (new Date().getMonth() + 1);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取缓存的月份失败', e);
|
||||
}
|
||||
return new Date().getMonth() + 1;
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -24,7 +38,7 @@ export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: () => new Date().getMonth() + 1
|
||||
default: getCachedMonth
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -60,15 +74,13 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
gap: 16px;
|
||||
color: #3A4A65;
|
||||
font-size: 24px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
.btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
|
||||
&:active {
|
||||
@ -80,5 +92,8 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 60px;text-align: center; font-family: 'Poppins-Regular';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,23 @@
|
||||
<script>
|
||||
// 从 sessionStorage 获取缓存数据的辅助函数
|
||||
function getCachedSortType() {
|
||||
try {
|
||||
const cachedData = sessionStorage.getItem('launches_search_cache');
|
||||
if (cachedData) {
|
||||
const parsedData = JSON.parse(cachedData);
|
||||
return parsedData.sortType || 'popular';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取缓存的排序类型失败', e);
|
||||
}
|
||||
return 'popular';
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: 'popular'
|
||||
default: getCachedSortType
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -3,11 +3,25 @@ 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: () => new Date().getFullYear()
|
||||
default: getCachedYear
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -45,7 +59,7 @@ export default {
|
||||
<div class="btn" @click="prevYear">
|
||||
<img :src="prevIcon" alt="Previous Year" />
|
||||
</div>
|
||||
<div style="width: 60px;text-align: center; font-family: 'Poppins-Regular', serif">{{ year }}</div>
|
||||
<div class="text">{{ year }}</div>
|
||||
<div class="btn" @click="nextYear">
|
||||
<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
|
||||
</div>
|
||||
@ -54,15 +68,15 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
gap: 16px;
|
||||
gap: 6px;
|
||||
color: #3A4A65;
|
||||
font-size: 24px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
.btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
background-color: #FFFFFF;
|
||||
//background-color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
|
||||
&:active {
|
||||
@ -74,5 +88,8 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 60px;text-align: center; font-family: 'Poppins-Regular';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user