feat: 添加文章阅读记录和问卷调查相关API接口,优化文章和问卷列表加载状态

This commit is contained in:
Jafeng 2026-02-04 18:39:57 +08:00
parent 12d7d093e9
commit c452ea29e9
4 changed files with 381 additions and 127 deletions

View File

@ -28,8 +28,11 @@
import { onLoad } from "@dcloudio/uni-app";
import api from "@/utils/api.js";
import { ref } from "vue";
import { storeToRefs } from "pinia";
import useAccountStore from "@/store/account.js";
const env = __VITE_ENV__;
const corpId = env.MP_CORP_ID;
const { account } = storeToRefs(useAccountStore());
const loading = ref(true);
const error = ref("");
const articleData = ref({
@ -40,6 +43,16 @@ const articleData = ref({
let articleId = "";
const markArticleRead = async () => {
const unionid = account.value?.unionid;
if (!unionid || !articleId) return;
try {
await api("addArticleReadRecord", { corpId, articleId, unionid }, false);
} catch (err) {
console.warn("markArticleRead failed:", err?.message || err);
}
};
// 使
const processRichTextContent = (html) => {
if (!html) return "";
@ -107,6 +120,7 @@ const loadArticle = async () => {
onLoad((options) => {
if (options.id) {
articleId = options.id;
markArticleRead();
loadArticle();
} else {
error.value = "文章信息不完整";

View File

@ -11,16 +11,25 @@
? 'bg-orange-100 text-orange-500 border-orange-500'
: 'bg-white text-gray-600 border-gray-200'
]"
@click="activeTab = tab.value"
@click="selectTab(tab.value)"
>
{{ tab.name }}
</view>
</scroll-view>
<!-- Article List -->
<view class="p-15">
<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 filteredArticles"
v-for="item in articles"
:key="item._id"
class="bg-white rounded-lg p-15 mb-15 shadow-sm"
@click="goToDetail(item)"
@ -30,7 +39,7 @@
<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">
{{ item.type }}
宣教文章
</view>
<!-- Title -->
<view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
@ -44,86 +53,168 @@
class="text-sm mr-2"
:class="item.status === 'UNREAD' ? 'text-red-500' : 'text-gray-400'"
>
{{ item.status === 'UNREAD' ? '未阅读' : '查看' }}
{{ item.status === 'UNREAD' ? '未阅读' : '已阅读' }}
</text>
<uni-icons type="right" size="14" :color="item.status === 'UNREAD' ? '#ef4444' : '#9ca3af'"></uni-icons>
</view>
</view>
<!-- Content -->
<!-- Person -->
<view class="text-sm text-gray-600 mb-5 flex items-center">
<text class="text-gray-400 mr-2">人员:</text>
<text>{{ item.person }}</text>
<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>
<!-- Team -->
<view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-center">
<text class="text-gray-400 mr-2">团队:</text>
<text>{{ item.team }}</text>
<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 }}
发送时间: {{ 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, computed } from 'vue';
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";
// Mock Data
const tabs = [
{ name: '全部', value: 'ALL' },
{ name: '李珊珊 女 37岁', value: '1' },
{ name: '罗小小 女 17岁', value: '2' },
];
const env = __VITE_ENV__;
const corpId = env.MP_CORP_ID;
const { account, openid } = storeToRefs(useAccountStore());
const activeTab = ref('ALL');
const tabs = ref([{ name: "全部", value: "" }]);
const activeTab = ref("");
const articles = ref([
{
_id: 1,
type: '宣教文章',
title: '妊糖管理期注意事项!',
status: 'UNREAD',
person: '李珊珊 女 36岁',
team: '妊糖管理服务团队',
time: '2026-01-09 15:23',
ownerId: '1'
},
{
_id: 2,
type: '宣教文章',
title: '妊糖管理期注意事项!妊糖管理期注意事项!妊糖管理期注意事项......',
status: 'READ',
person: '李珊珊 女 36岁',
team: '妊糖管理服务团队',
time: '2026-01-09 15:23',
ownerId: '1'
},
{
_id: 3,
type: '宣教文章',
title: '妊糖管理期注意事项!',
status: 'READ',
person: '罗小小 女 16岁',
team: '妊糖管理服务团队',
time: '2026-01-09 15:23',
ownerId: '2'
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 filteredArticles = computed(() => {
if (activeTab.value === 'ALL') return articles.value;
return articles.value.filter(item => item.ownerId === activeTab.value);
});
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) {
console.log('Navigate to detail', 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>
@ -206,4 +297,35 @@ function goToDetail(item) {
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>

View File

@ -11,16 +11,25 @@
? 'bg-orange-100 text-orange-500 border-orange-500'
: 'bg-white text-gray-600 border-gray-200'
]"
@click="activeTab = tab.value"
@click="selectTab(tab.value)"
>
{{ tab.name }}
</view>
</scroll-view>
<!-- Survey List -->
<view class="p-15">
<view v-if="loading && surveys.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 && surveys.length === 0" class="empty-container">
<empty-data text="暂无问卷" />
</view>
<view v-else class="p-15">
<view
v-for="item in filteredSurveys"
v-for="item in surveys"
:key="item._id"
class="bg-white rounded-lg p-15 mb-15 shadow-sm"
@click="goToDetail(item)"
@ -30,7 +39,7 @@
<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">
{{ item.type }}
问卷调查
</view>
<!-- Title -->
<view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
@ -38,93 +47,166 @@
</view>
</view>
<!-- Status -->
<!-- Status (暂不展示未填写/已填写) -->
<view class="flex items-center flex-shrink-0 ml-2">
<text
class="text-sm mr-2"
:class="item.status === 'UNFILLED' ? 'text-red-500' : 'text-gray-400'"
>
{{ item.status === 'UNFILLED' ? '未填写' : '查看' }}
</text>
<uni-icons type="right" size="14" :color="item.status === 'UNFILLED' ? '#ef4444' : '#9ca3af'"></uni-icons>
<text class="text-sm mr-2 text-gray-400">查看</text>
<uni-icons type="right" size="14" color="#9ca3af"></uni-icons>
</view>
</view>
<!-- Content -->
<!-- Person -->
<view class="text-sm text-gray-600 mb-5 flex items-center">
<text class="text-gray-400 mr-2">人员:</text>
<text>{{ item.person }}</text>
<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>
<!-- Team -->
<view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-center">
<text class="text-gray-400 mr-2">团队:</text>
<text>{{ item.team }}</text>
<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 }}
发送时间: {{ item.time || '-' }}
</view>
</view>
<view v-if="loading && surveys.length > 0" class="loading-more">
<uni-icons type="spinner-cycle" size="20" color="#999" />
<text>加载中...</text>
</view>
<view v-if="!loading && surveys.length >= total" class="no-more">
没有更多了
</view>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
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";
// Mock Data
const tabs = [
{ name: '全部', value: 'ALL' },
{ name: '李珊珊 女 37岁', value: '1' },
{ name: '罗小小 女 17岁', value: '2' },
];
const env = __VITE_ENV__;
const corpId = env.MP_CORP_ID;
const { openid } = storeToRefs(useAccountStore());
const activeTab = ref('ALL');
const tabs = ref([{ name: "全部", value: "" }]);
const activeTab = ref("");
const surveys = ref([
{
_id: 1,
type: '问卷调查',
title: '门诊满意度调查问卷',
status: 'UNFILLED',
person: '李珊珊 女 36岁',
team: '妊糖管理服务团队',
time: '2026-01-09 15:23',
ownerId: '1'
},
{
_id: 2,
type: '问卷调查',
title: 'xxxx术后1周随访调查问卷',
status: 'FILLED',
person: '李珊珊 女 36岁',
team: '妊糖管理服务团队',
time: '2026-01-09 15:23',
ownerId: '1'
},
{
_id: 3,
type: '问卷调查',
title: 'xxxxx术后2周随访调查问卷',
status: 'FILLED',
person: '罗小小 女 16岁',
team: '妊糖管理服务团队',
time: '2026-01-09 15:23',
ownerId: '2'
const surveys = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = 20;
const loading = ref(false);
const inited = ref(false);
const selectTab = async (memberId) => {
if (activeTab.value === memberId) return;
activeTab.value = memberId;
await loadSurveyList(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 filteredSurveys = computed(() => {
if (activeTab.value === 'ALL') return surveys.value;
return surveys.value.filter(item => item.ownerId === activeTab.value);
const mapRowToView = (row) => {
const sendTime = row?.createTime ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm") : "";
return {
_id: row?._id,
surveryId: row?.surveryId,
title: row?.name || "问卷调查",
person: row?.customer?.name || "",
team: row?.team?.name || "-",
time: sendTime,
status: row?.status || "",
};
};
const loadSurveyList = async (reset = false) => {
if (loading.value) return;
const miniAppId = openid.value || uni.getStorageSync("openid");
if (!miniAppId) {
uni.showToast({ title: "未获取到用户信息,请重新登录", icon: "none" });
return;
}
if (reset) {
page.value = 1;
surveys.value = [];
total.value = 0;
}
loading.value = true;
try {
const params = {
corpId,
miniAppId,
page: page.value,
pageSize,
};
if (activeTab.value) params.memberId = activeTab.value;
const res = await api("getMiniAppReceivedSurveryList", 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) surveys.value = mapped;
else surveys.value = [...surveys.value, ...mapped];
} else {
uni.showToast({ title: res?.message || "获取问卷失败", icon: "none" });
}
} catch (err) {
console.error("loadSurveyList failed:", err);
uni.showToast({ title: "加载失败,请重试", icon: "none" });
} finally {
loading.value = false;
}
};
function goToDetail() {
uni.showToast({ title: "详情暂未接入", icon: "none" });
}
onShow(async () => {
if (!inited.value) {
await loadCustomers();
await loadSurveyList(true);
inited.value = true;
return;
}
await loadSurveyList(true);
});
function goToDetail(item) {
console.log('Navigate to detail', item);
// Add actual navigation logic here later
}
onReachBottom(() => {
if (loading.value) return;
if (surveys.value.length >= total.value) return;
page.value += 1;
loadSurveyList(false);
});
</script>
<style scoped>
@ -207,4 +289,35 @@ function goToDetail(item) {
line-clamp: 2;
word-break: break-all;
}
</style>
.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>

View File

@ -31,7 +31,9 @@ const urlsConfig = {
getArticleCateList: 'getArticleCateList',
getArticleList: 'getArticleList',
getArticle: 'getArticle',
addArticleSendRecord: 'addArticleSendRecord'
addArticleSendRecord: 'addArticleSendRecord',
addArticleReadRecord: 'addArticleReadRecord',
getMiniAppReceivedArticleList: 'getMiniAppReceivedArticleList'
},
member: {
addCustomer: 'add',
@ -63,6 +65,9 @@ const urlsConfig = {
createConsultGroup: "createConsultGroup",
cancelConsultApplication: "cancelConsultApplication",
getGroupList: "getGroupList"
},
survery: {
getMiniAppReceivedSurveryList: 'getMiniAppReceivedSurveryList'
}
}
const urls = Object.keys(urlsConfig).reduce((acc, path) => {