<template>
|
<section class="inner-tab-container">
|
<assets-head :title="$t('news')" :back-func="() => router.push('/')" />
|
<!-- <p class="title">{{ t('news') }}</p> -->
|
<div class="news-container">
|
<van-steps direction="vertical" :active="0">
|
<van-step v-for="(item, index) in list" :key="item.url || index">
|
<img v-if="item.urlToImage" :src="item.urlToImage" alt="" class="news-item-img" />
|
<p class="time">{{ item.publishedAt || item.createdAt }}</p>
|
<h3 class="news-item-title">{{ item.title || '' }}</h3>
|
<p class="context" v-html="item.description || item.content || ''"></p>
|
</van-step>
|
<!-- <van-step>
|
<p class="time">2023-06-15 11:30</p>
|
<p class="context">南非汇市：兰特兑美元走高，美国通胀报告发布后美元跌至约两周地点</p>
|
</van-step>
|
<van-step>
|
<p class="time">2023-06-14 14:20</p>
|
<p class="context">降息预期遭重挫败！CPI环比增速抬头 美联储抗通胀之路注定崎岖</p>
|
</van-step> -->
|
</van-steps>
|
<div class="flex mt-2" v-if="list.length > 0">
|
<van-button type="default" plain class="more-btn" @click="onLoadMore">{{ t('更多数据') }}</van-button>
|
</div>
|
</div>
|
</section>
|
</template>
|
|
<script setup>
|
import assetsHead from '@/components/Transform/assets-head/index.vue'
|
import { ref, onMounted } from 'vue';
|
import { _getUsHeadNews } from '@/service/user.api'
|
import { useI18n } from 'vue-i18n'
|
import { useRouter } from 'vue-router'
|
|
const { t } = useI18n()
|
const list = ref([])
|
const maxTime = ref('')
|
const router = useRouter()
|
|
onMounted(async () => {
|
getNewsList()
|
})
|
|
const onLoadMore = () => {
|
const last = list.value[list.value.length - 1]
|
maxTime.value = (last && (last.publishedAt || last.createdAt)) || ''
|
getNewsList()
|
}
|
|
const getNewsList = () => {
|
const params = maxTime.value ? { maxTime: maxTime.value } : {}
|
_getUsHeadNews(params).then(data => {
|
const arr = Array.isArray(data) ? data : (data && data.articles) ? data.articles : []
|
list.value = maxTime.value ? [...list.value, ...arr] : arr
|
})
|
}
|
|
|
</script>
|
<style lang="scss" scoped>
|
:deep(.van-steps) {
|
background: $mainBgColor;
|
|
.van-step__title {
|
color: $text_color !important;
|
|
.news-item-img {
|
width: 100%;
|
max-height: 18rem;
|
border-radius: 0.5rem;
|
object-fit: cover;
|
margin-bottom: 0.8rem;
|
}
|
|
.time {
|
color: #747A8F;
|
margin: 5px 0;
|
}
|
|
.news-item-title {
|
font-size: 1.6rem;
|
font-weight: 600;
|
color: $text_color;
|
margin: 0.8rem 0 0.5rem;
|
line-height: 1.4;
|
}
|
}
|
|
.van-step__line {
|
background-color: $step-border;
|
}
|
|
.van-icon-checked::before {
|
content: '';
|
background-color: #3478F6;
|
width: 6px;
|
height: 6px;
|
box-shadow: 0 0 0px 4px $step-bg;
|
border-radius: 50%;
|
}
|
|
.van-step__circle {
|
background-color: #3478F6;
|
width: 6px;
|
height: 6px;
|
box-shadow: 0 0 0px 4px $step-bg;
|
}
|
|
.van-step--vertical:not(:last-child):after {
|
border-bottom-width: 1px;
|
border-color: $border_color;
|
}
|
}
|
|
.inner-tab-container {
|
margin-top: 8px;
|
padding: 0 12px 60px;
|
|
.title {
|
font-size: 16px;
|
font-weight: 700;
|
margin-bottom: 8px;
|
}
|
|
.news-container {}
|
|
.more-btn {
|
margin: 0 auto;
|
background-color: transparent;
|
color: #3478F6;
|
}
|
}
|
</style>
|
