|
|
@@ -2,23 +2,20 @@
|
|
|
<view class="news-list-container">
|
|
|
<!-- 列表 -->
|
|
|
<view v-if="list.length > 0" class="list">
|
|
|
-
|
|
|
<view v-for="item in list" :key="item.id" class="news-item" @click="handleItemClick(item)">
|
|
|
- <image v-if="item.coverImage" class="cover" :src="imgUrl + item.coverImage" mode="aspectFill" />
|
|
|
+ <view v-if="item.coverImage" class="img-wrap">
|
|
|
+ <image class="cover-img" :src="imgUrl + item.coverImage" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
<view class="info">
|
|
|
<view class="title">{{ item.title }}</view>
|
|
|
<view class="subtitle">{{ item.subTitle }}</view>
|
|
|
<view class="meta">
|
|
|
<text class="date">{{ formatDate(item.deliveryTime) }}</text>
|
|
|
- <!-- <text v-if="item.tags && item.tags.length" class="tag">
|
|
|
- {{ getTagName(item.tags[0].tag) }}
|
|
|
- </text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
-
|
|
|
<!-- 空状态 -->
|
|
|
<view v-else-if="!loading && finished" class="empty">
|
|
|
<cwg-empty-state />
|
|
|
@@ -45,7 +42,7 @@ const { locale } = useI18n()
|
|
|
|
|
|
const props = defineProps({
|
|
|
fetchData: { type: Function, required: true },
|
|
|
- queryParams: { type: Object, default: () => ({}) }, // 修正:应为对象
|
|
|
+ queryParams: { type: Object, default: () => ({}) },
|
|
|
pageSize: { type: Number, default: 10 },
|
|
|
type: { type: Number, default: 0 },
|
|
|
immediate: { type: Boolean, default: true },
|
|
|
@@ -58,6 +55,7 @@ const loading = ref(false)
|
|
|
const loadingMore = ref(false)
|
|
|
const finished = ref(false)
|
|
|
const total = ref(0)
|
|
|
+
|
|
|
const formatDate = (dateStr) => {
|
|
|
if (!dateStr) return ''
|
|
|
return dateStr.slice(0, 10).replace('T', ' ')
|
|
|
@@ -108,7 +106,6 @@ const loadMore = async () => {
|
|
|
list.value.push(...newList)
|
|
|
page.value = nextPage
|
|
|
}
|
|
|
- // 更新 finished 状态
|
|
|
const totalRows = res.page?.rowTotal || total.value
|
|
|
finished.value = list.value.length >= totalRows
|
|
|
} else {
|
|
|
@@ -120,60 +117,87 @@ const loadMore = async () => {
|
|
|
loadingMore.value = false
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
const handleItemClick = (item) => {
|
|
|
uni.navigateTo({ url: `/pages/analytics/detail?type=${props.type}&id=${item.id}` })
|
|
|
}
|
|
|
+
|
|
|
const lang = computed(() => uni.getLocale())
|
|
|
-watch(lang, (val) => {
|
|
|
+watch(lang, () => {
|
|
|
load()
|
|
|
}, { immediate: true })
|
|
|
+
|
|
|
defineExpose({ load, loadMore })
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
@import "@/uni.scss";
|
|
|
|
|
|
.news-list-container {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
.list {
|
|
|
display: grid;
|
|
|
grid-row-gap: px2rpx(16);
|
|
|
grid-column-gap: px2rpx(24);
|
|
|
grid-template-columns: repeat(auto-fill, minmax(px2rpx(389), 1fr));
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.news-item {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
padding: px2rpx(20);
|
|
|
gap: px2rpx(10);
|
|
|
margin-bottom: px2rpx(10);
|
|
|
background: #fafafa;
|
|
|
border-radius: px2rpx(8);
|
|
|
overflow: hidden;
|
|
|
- box-shadow: 0 2rpx px2rpx(4) rgba(0, 0, 0, 0.05);
|
|
|
+ box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
|
|
|
box-sizing: border-box;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- // 添加过渡效果
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
- // 鼠标悬浮时的动效
|
|
|
&:hover {
|
|
|
transform: translateY(-4rpx);
|
|
|
- box-shadow: 0 8rpx px2rpx(16) rgba(0, 0, 0, 0.1);
|
|
|
+ box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
- .cover {
|
|
|
- aspect-ratio: 359 / 242;
|
|
|
- width: px2rpx(359);
|
|
|
- height: auto;
|
|
|
- border: 1px solid rgba(14, 15, 12, 0.12);
|
|
|
+ /* 添加悬停效果(仅H5) */
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .news-item:hover {
|
|
|
+ .img-wrap .cover-img {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ /* 外层固定图片容器,防止溢出 */
|
|
|
+ .img-wrap {
|
|
|
+ width: px2rpx(300);
|
|
|
+ height: px2rpx(242);
|
|
|
border-radius: px2rpx(8);
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.6s ease;
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
flex: 1;
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
@@ -210,16 +234,8 @@ defineExpose({ load, loadMore })
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
.load-more {
|
|
|
text-align: center;
|
|
|
padding: px2rpx(10);
|
|
|
@@ -231,6 +247,6 @@ defineExpose({ load, loadMore })
|
|
|
text-align: center;
|
|
|
padding: 100rpx 0;
|
|
|
color: #999;
|
|
|
- font-size: px2rpx(10);
|
|
|
+ font-size: px2rpx(14);
|
|
|
}
|
|
|
</style>
|