477 lines
9.5 KiB
Vue
477 lines
9.5 KiB
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 { onLoad, 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 { 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 corpId = ref('');
|
|
|
|
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: corpId.value });
|
|
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: corpId.value,
|
|
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}&corpId=${corpId.value}` });
|
|
}
|
|
onLoad(opts => {
|
|
corpId.value = opts.corpId;
|
|
})
|
|
|
|
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>
|