gypsy-crm-frontend-vu/pages/analytics/components/List.vue

<template>
  <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="Config.Host80 + item.coverImage" mode="aspectFill" />
        <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 />
    </view>
    <view class="table-loading-mask">
      <uni-loading v-if="loading" />
    </view>

    <!-- 加载更多状态 -->
    <view v-if="loadingMore" class="load-more">
      <text v-t11="'common.loading'" />
    </view>
    <view v-else-if="finished && list.length > 0" class="load-more">
      <text v-t11="'common.noMore'" />
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import Config from '@/config/index'
const { locale } = useI18n()

const props = defineProps({
  fetchData: { type: Function, required: true },
  queryParams: { type: Object, default: () => ({}) },   // 修正：应为对象
  pageSize: { type: Number, default: 10 },
  type: { type: Number, default: 0 },
  immediate: { type: Boolean, default: true },
})

const list = ref([])
const page = ref(1)
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', ' ')
}

const load = async () => {
  list.value = []
  if (loading.value) return
  loading.value = true
  finished.value = false
  page.value = 1

  try {
    const res = await props.fetchData({
      lang: locale.value == 'vn' ? 'vi' : locale.value,
      page: { current: page.value, row: props.queryParams?.pageSize || props.pageSize },
      ...props.queryParams
    })
    if (res.code === 200) {
      list.value = res.data || []
      total.value = res.page?.rowTotal || 0
      finished.value = list.value.length >= total.value
    } else {
      throw new Error(res.msg || '请求失败')
    }
  } catch (err) {
    console.error('加载失败', err)
    uni.showToast({ title: err.message || '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const loadMore = async () => {
  if (loadingMore.value || finished.value) return
  loadingMore.value = true
  try {
    const nextPage = page.value + 1
    const params = {
      lang: locale.value,
      page: { current: nextPage, row: props.queryParams?.pageSize || props.pageSize },
      ...props.queryParams
    }
    const res = await props.fetchData(params)
    if (res.code === 200) {
      const newList = res.data || []
      if (newList.length > 0) {
        list.value.push(...newList)
        page.value = nextPage
      }
      // 更新 finished 状态
      const totalRows = res.page?.rowTotal || total.value
      finished.value = list.value.length >= totalRows
    } else {
      throw new Error(res.msg || '请求失败')
    }
  } catch (err) {
    uni.showToast({ title: err.message || '加载更多失败', icon: 'none' })
  } finally {
    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) => {
  load()
}, { immediate: true })
defineExpose({ load, loadMore })
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.news-list-container {
  .list {
    display: grid;
    grid-row-gap: px2rpx(16);
    grid-column-gap: px2rpx(24);
    grid-template-columns: repeat(auto-fill, minmax(px2rpx(389), 1fr));
  }

  .news-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    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-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);
      background: #fff;
    }

    .cover {
      aspect-ratio: 359 / 242;
      width: px2rpx(359);
      height: auto;
      border: 1px solid rgba(14, 15, 12, 0.12);
      border-radius: px2rpx(8);
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title {
      font-size: px2rpx(16);
      font-weight: bold;
      color: #333;
      line-height: 1.4;
      margin-bottom: px2rpx(6);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .subtitle {
      font-size: px2rpx(14);
      color: #666;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-bottom: px2rpx(6);
    }

    .meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: px2rpx(12);
      color: #999;
    }
  }


}







.load-more {
  text-align: center;
  padding: px2rpx(10);
  font-size: px2rpx(14);
  color: #999;
}

.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: px2rpx(10);
}
</style>