feat: 新增标签top排名的计算，并调整行业和概念组件

src/pages/concept/components/CustomView.vue

@@ -49,7 +49,7 @@
       <view class="recommend-industry">
         <view class="recommend-industry-top">
           <view class="label">预期风口</view>
-          <view class="right" @click="selectRandomTags">
+          <view class="right" @click="handleChange">
             <view class="icon"></view>
             <view class="text">换一换</view>
           </view>
@@ -78,13 +78,17 @@
 <script setup lang="ts">
 import { getTopConceptPeriod } from "@/api/newsInfo";
 import dayjs from "dayjs";
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   tagList: {
     type: Array,
     default: () => [],
   },
+  allTagList: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits(["onChange", "onBack"]);
 
@@ -102,33 +106,16 @@ const handleBack = () => {
 };
 
 const myTagList = ref([]);
-const industryList = ref([]);
-const industryListAll = ref([]);
-const start_time = dayjs().subtract(1, "month").format("YYYY-MM-DD");
-const end_time = dayjs().format("YYYY-MM-DD");
-const limit_num = 20;
-// 热门行业top10
-async function getTopIndustry_dFn() {
-  industryListAll.value = await getTopConceptPeriod({
-    start_time: start_time,
-    end_time: end_time,
-    limit_num: limit_num,
-  });
-  selectRandomTags();
+const page = ref(0);
+const industryList = computed(() => {
+  const arr = [...props.allTagList]
+  return arr.splice(page.value, 10);
+});
+
+const handleChange = () => {
+  page.value = page.value ? 0 : 10
 }
 
-// 从所有标签中随机选择10个
-function selectRandomTags() {
-  industryList.value = [];
-  const availableTags = [...industryListAll.value];
-  for (let i = 0; i < 10; i++) {
-    if (availableTags.length === 0) break;
-
-    const randomIndex = Math.floor(Math.random() * availableTags.length);
-    industryList.value.push(availableTags[randomIndex]);
-    availableTags.splice(randomIndex, 1);
-  }
-}
 
 // 是否选中
 function isSelected(tag) {
@@ -161,7 +148,7 @@ function handleSearchTag() {
   if (!input.value) {
     return;
   }
-  industryList.value = industryListAll.value.filter((item) => {
+  industryList.value = props.allTagList.filter((item) => {
     if (!item || !item.content) return false;
 
     return item.content.includes(input.value);
@@ -196,10 +183,6 @@ watch(
     immediate: true,
   },
 );
-
-onMounted(() => {
-  getTopIndustry_dFn();
-});
 </script>
 
 <style scoped lang="scss">

src/pages/concept/components/List.vue

@@ -38,7 +38,7 @@
     <view class="page-main">
       <view class="banner">
         <view class="text-1">{{ tagList[current]?.content }}</view>
-        <view class="text-2">风口概念近一个月排名Top5</view>
+        <view class="text-2" v-if="tagList[current]?.index">风口概念近一个月排名{{ tagList[current]?.index }}</view>
       </view>
 
       <view class="news-list">

src/pages/concept/index.vue

@@ -4,6 +4,7 @@
     <CustomView
       v-if="isShowCustom && userStore.isLogin"
       :tagList="tagList"
+      :allTagList="allTagList"
       @onChange="handleChangeTag"
       @onBack="handleHideCustom"
     />
@@ -34,6 +35,22 @@ import LoginDialog from "@/components/loginPopup/index.vue";
 import CustomView from "./components/CustomView.vue";
 import List from "./components/List.vue";
 import { getMyTags, updateMyTags } from "@/api";
+import { getTopConceptPeriod } from "@/api/newsInfo";
+import dayjs from "dayjs";
+
+
+const allTagList = ref([]);
+const start_time = dayjs().subtract(1, "month").format("YYYY-MM-DD");
+const end_time = dayjs().format("YYYY-MM-DD");
+const limit_num = 20;
+// 热门行业top10
+async function getTopIndustry_dFn() {
+  allTagList.value = await getTopConceptPeriod({
+    start_time: start_time,
+    end_time: end_time,
+    limit_num: limit_num,
+  });
+}
 
 const isShowCustom = ref(false);
 
@@ -65,9 +82,13 @@ const getTagList = async () => {
   const result = await getMyTags();
   if (result.code === 200) {
     tagList.value = result.data.map((item: any) => {
+      const name = item.primaryName + "-" + item.secondaryName;
+      const content = item.secondaryName;
+      const index = allTagList.value.findIndex((tag: any) => tag.content === name);
       return {
-        name: item.primaryName + "-" + item.secondaryName,
-        content: item.secondaryName,
+        name,
+        content,
+        index: index + 1,
       };
     });   
   } else {
@@ -105,7 +126,8 @@ onMounted(async () => {
     handleShowLogin();
     return;
   }
-  getTagList();
+  await getTopIndustry_dFn();
+  await getTagList();
 });
 </script>
 

src/pages/industry/components/CustomView.vue

@@ -49,7 +49,7 @@
       <view class="recommend-industry">
         <view class="recommend-industry-top">
           <view class="label">推荐行业</view>
-          <view class="right" @click="selectRandomTags">
+          <view class="right" @click="handleChange">
             <view class="icon"></view>
             <view class="text">换一换</view>
           </view>
@@ -78,13 +78,17 @@
 <script setup lang="ts">
 import { getTopIndustryPeriod } from "@/api/newsInfo";
 import dayjs from "dayjs";
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   tagList: {
     type: Array,
     default: () => [],
   },
+  allTagList: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits(["onChange", "onBack"]);
 
@@ -102,32 +106,14 @@ const handleBack = () => {
 };
 
 const myTagList = ref([]);
-const industryList = ref([]);
-const industryListAll = ref([]);
-const start_time = dayjs().subtract(1, "month").format("YYYY-MM-DD");
-const end_time = dayjs().format("YYYY-MM-DD");
-const limit_num = 20;
-// 热门行业top10
-async function getTopIndustry_dFn() {
-  industryListAll.value = await getTopIndustryPeriod({
-    start_time: start_time,
-    end_time: end_time,
-    limit_num: limit_num,
-  });
-  selectRandomTags();
-}
+const page = ref(0);
+const industryList = computed(() => {
+  const arr = [...props.allTagList]
+  return arr.splice(page.value, 10);
+});
 
-// 从所有标签中随机选择10个
-function selectRandomTags() {
-  industryList.value = [];
-  const availableTags = [...industryListAll.value];
-  for (let i = 0; i < 10; i++) {
-    if (availableTags.length === 0) break;
-
-    const randomIndex = Math.floor(Math.random() * availableTags.length);
-    industryList.value.push(availableTags[randomIndex]);
-    availableTags.splice(randomIndex, 1);
-  }
+const handleChange = () => {
+  page.value = page.value ? 0 : 10
 }
 
 // 是否选中
@@ -161,7 +147,7 @@ function handleSearchTag() {
   if (!input.value) {
     return;
   }
-  industryList.value = industryListAll.value.filter((item) => {
+  industryList.value = props.allTagList.filter((item) => {
     if (!item || !item.content) return false;
 
     return item.content.includes(input.value);
@@ -196,10 +182,6 @@ watch(
     immediate: true,
   },
 );
-
-onMounted(() => {
-  getTopIndustry_dFn();
-});
 </script>
 
 <style scoped lang="scss">

src/pages/industry/components/List.vue

@@ -38,7 +38,7 @@
     <view class="page-main">
       <view class="banner">
         <view class="text-1">{{ tagList[current]?.content }}</view>
-        <view class="text-2">热门行业近一个月排名Top5</view>
+        <view class="text-2" v-if="tagList[current]?.index">热门行业近一个月排名{{ tagList[current]?.index }}</view>
       </view>
 
       <view class="news-list">

src/pages/industry/index.vue

@@ -4,6 +4,7 @@
     <CustomView
       v-if="isShowCustom && userStore.isLogin"
       :tagList="tagList"
+      :allTagList="allTagList"
       @onChange="handleChangeTag"
       @onBack="handleHideCustom"
     />
@@ -34,6 +35,21 @@ import LoginDialog from "@/components/loginPopup/index.vue";
 import CustomView from "./components/CustomView.vue";
 import List from "./components/List.vue";
 import { getMyIndustries, updateMyIndustries } from "@/api";
+import { getTopIndustryPeriod } from "@/api/newsInfo";
+import dayjs from "dayjs";
+
+const allTagList = ref([]);
+const start_time = dayjs().subtract(1, "month").format("YYYY-MM-DD");
+const end_time = dayjs().format("YYYY-MM-DD");
+const limit_num = 20;
+// 热门行业top10
+async function getTopIndustry_dFn() {
+  allTagList.value = await getTopIndustryPeriod({
+    start_time: start_time,
+    end_time: end_time,
+    limit_num: limit_num,
+  });
+}
 
 const isShowCustom = ref(false);
 
@@ -65,9 +81,13 @@ const getTagList = async () => {
   const result = await getMyIndustries({});
   if (result.code === 200) {
     tagList.value = result.data.map((item: any) => {
+      const name = item.primaryName + "-" + item.secondaryName;
+      const content = item.secondaryName;
+      const index = allTagList.value.findIndex((tag: any) => tag.content === name);
       return {
-        name: item.primaryName + "-" + item.secondaryName,
-        content: item.secondaryName,
+        name,
+        content,
+        index: index + 1,
       };
     });    
   } else {
@@ -105,7 +125,8 @@ onMounted(async () => {
     handleShowLogin();
     return;
   }
-  getTagList();
+  await getTopIndustry_dFn();
+  await getTagList();
 });
 </script>