|
@@ -27,12 +27,15 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
|
|
|
|
+import { ref, onMounted, watch, onActivated } from "vue";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
import { List } from "vant";
|
|
import { List } from "vant";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
|
+import { useStore } from "vuex";
|
|
|
|
|
+
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
|
|
+const store = useStore();
|
|
|
|
|
|
|
|
// 服务记录列表数据
|
|
// 服务记录列表数据
|
|
|
const knowledgeList = ref([]);
|
|
const knowledgeList = ref([]);
|
|
@@ -43,39 +46,114 @@ const page = ref(1);
|
|
|
const pageSize = ref(10);
|
|
const pageSize = ref(10);
|
|
|
const listLoading = ref(false);
|
|
const listLoading = ref(false);
|
|
|
const listFinished = ref(false);
|
|
const listFinished = ref(false);
|
|
|
|
|
+// 存储全部数据(用于 topicId === 6 时的前端分页)
|
|
|
|
|
+const allDataCache = ref([]);
|
|
|
|
|
+
|
|
|
|
|
+// 重置列表状态
|
|
|
|
|
+const resetListState = () => {
|
|
|
|
|
+ knowledgeList.value = [];
|
|
|
|
|
+ page.value = 1;
|
|
|
|
|
+ listFinished.value = false;
|
|
|
|
|
+ allDataCache.value = [];
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 初始化或重置时加载数据
|
|
|
|
|
+const initList = () => {
|
|
|
|
|
+ resetListState();
|
|
|
|
|
+ // 重置后触发首次加载
|
|
|
|
|
+ getKnowledgeList();
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
// 从路由获取当前知识库类型
|
|
// 从路由获取当前知识库类型
|
|
|
- topicId.value = route.query.topicId || 6;
|
|
|
|
|
|
|
+ topicId.value = Number(route.query.topicId) || 6;
|
|
|
// 不主动请求,交给 vant List 的 @load 触发首次加载
|
|
// 不主动请求,交给 vant List 的 @load 触发首次加载
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+// 监听路由参数变化
|
|
|
|
|
+watch(
|
|
|
|
|
+ () => route.query.topicId,
|
|
|
|
|
+ (newTopicId) => {
|
|
|
|
|
+ const newId = Number(newTopicId) || 6;
|
|
|
|
|
+ if (newId !== topicId.value) {
|
|
|
|
|
+ topicId.value = newId;
|
|
|
|
|
+ initList();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+);
|
|
|
|
|
+
|
|
|
|
|
+// 页面激活时也检查参数变化
|
|
|
|
|
+onActivated(() => {
|
|
|
|
|
+ const newId = Number(route.query.topicId) || 6;
|
|
|
|
|
+ if (newId !== topicId.value) {
|
|
|
|
|
+ topicId.value = newId;
|
|
|
|
|
+ initList();
|
|
|
|
|
+ }
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
const getKnowledgeList = async () => {
|
|
const getKnowledgeList = async () => {
|
|
|
if (listFinished.value) return;
|
|
if (listFinished.value) return;
|
|
|
|
|
|
|
|
listLoading.value = true;
|
|
listLoading.value = true;
|
|
|
- const params = {
|
|
|
|
|
- page: page.value,
|
|
|
|
|
- limit: pageSize.value,
|
|
|
|
|
- topicId: topicId.value,
|
|
|
|
|
- };
|
|
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
- const { data } = await VE_API.home.warningPageList(params);
|
|
|
|
|
- const list = data || [];
|
|
|
|
|
|
|
+ let list = [];
|
|
|
|
|
|
|
|
- if (page.value === 1) {
|
|
|
|
|
- knowledgeList.value = list;
|
|
|
|
|
- } else {
|
|
|
|
|
- knowledgeList.value = [...knowledgeList.value, ...list];
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (topicId.value === 6) {
|
|
|
|
|
+ // 种植知识库:使用新接口
|
|
|
|
|
+ // 如果是第一页,重新请求接口;否则使用缓存数据
|
|
|
|
|
+ if (page.value === 1) {
|
|
|
|
|
+ const { data } = await VE_API.user.listWithAnswer({
|
|
|
|
|
+ farmId: store.state.home.gardenId
|
|
|
|
|
+ });
|
|
|
|
|
+ allDataCache.value = data || [];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ list = allDataCache.value;
|
|
|
|
|
+
|
|
|
|
|
+ // 新接口可能返回全部数据,需要手动分页处理
|
|
|
|
|
+ const startIndex = (page.value - 1) * pageSize.value;
|
|
|
|
|
+ const endIndex = startIndex + pageSize.value;
|
|
|
|
|
+ const paginatedList = list.slice(startIndex, endIndex);
|
|
|
|
|
|
|
|
- // 如果返回数量小于页大小,认为没有更多数据了
|
|
|
|
|
- if (list.length < pageSize.value) {
|
|
|
|
|
- listFinished.value = true;
|
|
|
|
|
|
|
+ if (page.value === 1) {
|
|
|
|
|
+ knowledgeList.value = paginatedList;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ knowledgeList.value = [...knowledgeList.value, ...paginatedList];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 如果已经取完所有数据,标记为完成
|
|
|
|
|
+ if (endIndex >= list.length) {
|
|
|
|
|
+ listFinished.value = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ page.value += 1;
|
|
|
|
|
+ }
|
|
|
} else {
|
|
} else {
|
|
|
- page.value += 1;
|
|
|
|
|
|
|
+ // 实战知识库:使用原接口(支持分页)
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ page: page.value,
|
|
|
|
|
+ limit: pageSize.value,
|
|
|
|
|
+ topicId: topicId.value,
|
|
|
|
|
+ };
|
|
|
|
|
+ const { data } = await VE_API.home.warningPageList(params);
|
|
|
|
|
+ list = data || [];
|
|
|
|
|
+
|
|
|
|
|
+ if (page.value === 1) {
|
|
|
|
|
+ knowledgeList.value = list;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ knowledgeList.value = [...knowledgeList.value, ...list];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 如果返回数量小于页大小,认为没有更多数据了
|
|
|
|
|
+ if (list.length < pageSize.value) {
|
|
|
|
|
+ listFinished.value = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ page.value += 1;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error("获取知识列表失败:", error);
|
|
|
|
|
+ listFinished.value = true;
|
|
|
} finally {
|
|
} finally {
|
|
|
listLoading.value = false;
|
|
listLoading.value = false;
|
|
|
}
|
|
}
|
|
@@ -94,13 +172,15 @@ const handleItemClick = (item) => {
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.service-records-page {
|
|
.service-records-page {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- min-height: 100vh;
|
|
|
|
|
background: #f5f5f5;
|
|
background: #f5f5f5;
|
|
|
|
|
+ height: 100vh;
|
|
|
.record-list {
|
|
.record-list {
|
|
|
padding: 10px 12px;
|
|
padding: 10px 12px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
gap: 10px;
|
|
|
|
|
+ height: calc(100% - 60px);
|
|
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
}
|
|
|
.record-card {
|
|
.record-card {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -138,6 +218,9 @@ const handleItemClick = (item) => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .record-card + .record-card {
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ }
|
|
|
.empty-wrap {
|
|
.empty-wrap {
|
|
|
padding-top: 40px;
|
|
padding-top: 40px;
|
|
|
text-align: center;
|
|
text-align: center;
|