ykt-team-wxapp/pages/article/article-list.vue

<template>
  <view class="bg-gray-100 min-h-screen">
    <!-- Filter Tabs -->
    <scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full" :show-scrollbar="false">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors"
        :class="[
          activeTab === tab.value 
            ? 'bg-orange-100 text-orange-500 border-orange-500' 
            : 'bg-white text-gray-600 border-gray-200'
        ]"
        @click="selectTab(tab.value)"
      >
        {{ tab.name }}
      </view>
    </scroll-view>

    <!-- Article List -->
    <view v-if="loading && articles.length === 0" class="loading-container">
      <uni-icons type="spinner-cycle" size="30" color="#999" />
      <text class="loading-text">加载中...</text>
    </view>

    <view v-else-if="!loading && articles.length === 0" class="empty-container">
      <empty-data text="暂无文章" />
    </view>

    <view v-else class="p-15">
      <view 
        v-for="item in articles" 
        :key="item._id" 
        class="bg-white rounded-lg p-15 mb-15 shadow-sm"
        @click="goToDetail(item)"
      >
        <!-- Header -->
        <view class="flex items-start justify-between mb-10">
          <view class="flex items-start flex-1 mr-10 relative">
             <!-- Tag -->
            <view class="text-xs text-green-600 border border-green-600 px-5 rounded mr-5 flex-shrink-0 mt-1 tag-box">
              宣教文章
            </view>
            <!-- Title -->
            <view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
              {{ item.title }}
            </view>
          </view>
          
          <!-- Status -->
          <view class="flex items-center flex-shrink-0 ml-2">
             <text 
              class="text-sm mr-2"
              :class="item.status === 'UNREAD' ? 'text-red-500' : 'text-gray-400'"
             >
               {{ item.status === 'UNREAD' ? '未阅读' : '已阅读' }}
             </text>
             <uni-icons type="right" size="14" :color="item.status === 'UNREAD' ? '#ef4444' : '#9ca3af'"></uni-icons>
          </view>
        </view>

        <!-- Content -->
        <view class="text-sm text-gray-600 mb-5 flex items-start">
          <text class="text-gray-400 mr-2 field-label">人员:</text>
          <text>{{ item.person || '-' }}</text>
        </view>

        <view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-start">
          <text class="text-gray-400 mr-2 field-label">团队:</text>
          <text>{{ item.team || '-' }}</text>
        </view>
        
        <!-- Footer -->
        <view class="text-sm text-gray-400">
          发送时间: {{ item.time || '-' }}
        </view>
      </view>

      <view v-if="loading && articles.length > 0" class="loading-more">
        <uni-icons type="spinner-cycle" size="20" color="#999" />
        <text>加载中...</text>
      </view>

      <view v-if="!loading && articles.length >= total" class="no-more">
        没有更多了
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import api from "@/utils/api.js";
import useAccountStore from "@/store/account.js";
import EmptyData from "@/components/empty-data.vue";

const env = __VITE_ENV__;
const corpId = env.MP_CORP_ID;
const { account, openid } = storeToRefs(useAccountStore());

const tabs = ref([{ name: "全部", value: "" }]);
const activeTab = ref("");

const articles = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = 20;
const loading = ref(false);
const inited = ref(false);

const selectTab = async (customerId) => {
  if (activeTab.value === customerId) return;
  activeTab.value = customerId;
  await loadArticleList(true);
};

const loadCustomers = async () => {
  const miniAppId = openid.value || uni.getStorageSync("openid");
  if (!miniAppId) return;
  try {
    const res = await api("getMiniAppCustomers", { miniAppId, corpId });
    if (res && res.success) {
      const list = Array.isArray(res.data) ? res.data : [];
      tabs.value = [
        { name: "全部", value: "" },
        ...list.map((c) => ({ name: c.name || "未命名", value: c._id })),
      ];
    } else {
      uni.showToast({ title: res?.message || "获取档案失败", icon: "none" });
    }
  } catch (err) {
    console.error("loadCustomers failed:", err);
    uni.showToast({ title: "获取档案失败", icon: "none" });
  }
};

const mapRowToView = (row) => {
  const sendTime = row?.sendTime ? dayjs(row.sendTime).format("YYYY-MM-DD HH:mm") : "";
  return {
    _id: row?._id,
    articleId: row?.articleId,
    title: row?.articleInfo?.title || "宣教文章",
    status: row?.status || "UNREAD",
    person: row?.customer?.name || "",
    team: row?.team?.name || "-",
    time: sendTime,
  };
};

const loadArticleList = async (reset = false) => {
  if (loading.value) return;
  const unionid = account.value?.unionid;
  const miniAppId = openid.value || uni.getStorageSync("openid");
  if (!unionid && !miniAppId) {
    uni.showToast({ title: "未获取到用户信息，请重新登录", icon: "none" });
    return;
  }

  if (reset) {
    page.value = 1;
    articles.value = [];
    total.value = 0;
  }

  loading.value = true;
  try {
    const params = {
      corpId,
      unionid,
      miniAppId,
      page: page.value,
      pageSize,
    };
    if (activeTab.value) params.customerId = activeTab.value;

    const res = await api("getMiniAppReceivedArticleList", params);
    if (res && res.success) {
      const list = Array.isArray(res.list) ? res.list : [];
      total.value = Number(res.total) || 0;
      const mapped = list.map(mapRowToView);
      if (page.value === 1) articles.value = mapped;
      else articles.value = [...articles.value, ...mapped];
    } else {
      uni.showToast({ title: res?.message || "获取文章失败", icon: "none" });
    }
  } catch (err) {
    console.error("loadArticleList failed:", err);
    uni.showToast({ title: "加载失败，请重试", icon: "none" });
  } finally {
    loading.value = false;
  }
};

function goToDetail(item) {
  if (!item?.articleId) return;
  uni.navigateTo({ url: `/pages/article/article-detail?id=${item.articleId}` });
}

onShow(async () => {
  if (!inited.value) {
    await loadCustomers();
    await loadArticleList(true);
    inited.value = true;
    return;
  }
  await loadArticleList(true);
});

onReachBottom(() => {
  if (loading.value) return;
  if (articles.value.length >= total.value) return;
  page.value += 1;
  loadArticleList(false);
});
</script>

<style scoped>
/* Utility helpers similar to Windi/Tailwind */
.min-h-screen { min-height: 100vh; }
.bg-gray-100 { background-color: #f7f8fa; }
.bg-white { background-color: #ffffff; }

.p-15 { padding: 30rpx; }
.px-15 { padding-left: 30rpx; padding-right: 30rpx; }
.py-10 { padding-top: 20rpx; padding-bottom: 20rpx; }
.py-5 { padding-top: 10rpx; padding-bottom: 10rpx; }
.px-5 { padding-left: 10rpx; padding-right: 10rpx; }

.mr-10 { margin-right: 20rpx; }
.mr-5 { margin-right: 10rpx; }
.ml-2 { margin-left: 10rpx; }
.mr-2 { margin-right: 10rpx; }
.mb-15 { margin-bottom: 30rpx; }
.mb-10 { margin-bottom: 20rpx; }
.mb-5 { margin-bottom: 10rpx; }
.mt-1 { margin-top: 6rpx; } 
.pb-10 { padding-bottom: 20rpx; }

.flex { display: flex; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.relative { position: relative; }

.border { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.rounded-full { border-radius: 9999px; }
.rounded { border-radius: 8rpx; }
.rounded-lg { border-radius: 12rpx; }

.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

.text-xs { font-size: 22rpx; }
.text-sm { font-size: 28rpx; }
.text-base { font-size: 32rpx; }
.font-bold { font-weight: 600; }
.leading-normal { line-height: 1.4; }

/* Colors - Adjusting to match image roughly */
.text-orange-500 { color: #f29e38; }
.bg-orange-100 { background-color: #fff8eb; }
.border-orange-500 { border-color: #f29e38; }

.text-gray-600 { color: #333333; }
.text-gray-500 { color: #999999; }
.text-gray-400 { color: #999999; }
.text-gray-800 { color: #1a1a1a; }
.border-gray-200 { border-color: #e5e5e5; }
.border-gray-100 { border-color: #f5f5f5; }

.text-green-600 { color: #4b8d5f; }
.border-green-600 { border-color: #4b8d5f; }
.text-red-500 { color: #e04a4a; }

.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: 10; }
.w-full { width: 100%; }
.whitespace-nowrap { white-space: nowrap; }
.inline-block { display: inline-block; }

.tag-box {
  border-radius: 4rpx;
  line-height: 1.2;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-all;
}

.field-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.loading-more,
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
  gap: 10rpx;
}
</style>