feat(industry): 添加热门行业页面和自定义配置功能

- 新增热门行业列表页面，支持标签切换查看不同行业新闻
- 实现行业自定义配置组件，支持添加、删除、搜索行业标签

.env.development

@@ -2,10 +2,10 @@
 ENV = development
 
 # 本地环境接口地址
-VITE_API_URL = http://123.60.153.169:8040/apih5
+# VITE_API_URL = http://123.60.153.169:8040/apih5
 # VITE_API_URL = http://4155gf93ll13.vicp.fun/apih5
 # VITE_API_URL = http://123.60.79.143:8041/apih5
 # VITE_API_URL =http://192.168.0.135:8040/apih5
-# VITE_API_URL = https://cankao.cs.com.cn/apih5
+VITE_API_URL = https://cankao.cs.com.cn/apih5
 
 VITE_API_DATAV_URL = https://cankao.cs.com.cn/zzck_datav

src/api/index.ts

@@ -97,3 +97,7 @@ export const getForeignList = (data: any) => {
   return Request.get("/news/exclusiveList", data);
 };
 
+// 编辑精选
+export const getRecommendList = (data: any) => {
+  return Request.get("/news/curatedList", data);
+};

src/pages/concept/index.vue

@@ -43,109 +43,39 @@
       </view>
 
       <view class="news-list">
-        <view class="news-item">
+        <view :class="['news-item',{mask: !userStore.isLogin}]" v-for="item in data" :key="item.id" @click="goDetail(item)">
           <view class="title">
             <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
+              {{ item.title }}
             </view>
           </view>
-          <view class="content">
+          <view :class="['content', {mask: isMask}]">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
+            {{ item.summary }}
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
           </view>
-          <view class="source">
+          <view :class="['source', {mask: isMask}]">
-            <view>中国证券报</view>
+            <view>{{ item.tag }}</view>
-            <view>2025-06-23 10:00</view>
+            <view>{{ item.time }}</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
           </view>
         </view>
       </view>
     </view>
+
+    <!-- 登录弹窗 start -->
+    <LoginDialog
+      :show="LoginShow"
+      @onSuccess="handleLoginSuccess"
+      @onCancel="handleLoginCancel"
+      @onError="handleLoginError"
+    />
+    <!-- 登录弹窗 end -->
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { useUserStore } from "@/stores/user";
+import { computed, onMounted, ref } from "vue";
+import LoginDialog from "@/components/loginPopup/index.vue";
+import { getListByTagIndustry } from "@/api/detail";
 import CustomView from "./components/CustomView.vue";
 
 const list4 = ref([
@@ -161,6 +91,65 @@ const handleBack = () => {
     delta: 1,
   });
 };
+
+const userStore = useUserStore();
+// 未登录|试用，显示蒙层
+const isMask = computed(() => {
+  return !userStore.isUserType;
+});
+
+const LoginShow = ref(false);
+// 显示弹框
+const handleShowLogin = () => {
+  LoginShow.value = true;
+};
+
+// 关闭弹框
+const handleLoginCancel = () => {
+  LoginShow.value = false;
+};
+// 登录成功之后的回调
+const handleLoginSuccess = () => {
+  LoginShow.value = false;
+};
+// 登录失败之后的回调
+const handleLoginError = () => {
+  console.log("登录失败");
+};
+// 跳转详情
+function goDetail(item: any) {
+  if (!userStore.isLogin) {
+    handleShowLogin();
+    return;
+  }
+
+  // 试用账号
+  if (!userStore.isUserType) {
+    return;
+  }
+
+  uni.navigateTo({
+    url: `/pages/detail/indexNewsInfo?id=${item.id}`,
+  });
+}
+
+const data = ref([]);
+const getList = async () => {
+  const name = "电子-半导体";
+  const result = await getListByTagIndustry({ name });
+  if (result.code === 200) {
+    data.value = result.data;
+  } else {
+    data.value = [];
+  }
+};
+
+onMounted(async () => {
+  if (!userStore.isLogin) {
+    handleShowLogin();
+  }
+  getList();
+});
 </script>
 
 <style scoped lang="scss">
@@ -228,7 +217,7 @@ const handleBack = () => {
   .banner {
     width: 690rpx;
     height: 113rpx;
-    margin:0 30rpx 30rpx;
+    margin: 0 30rpx 30rpx;
     padding: 15rpx 30rpx;
     border-radius: 10rpx;
     background-image: url("@/assets/images/page/page_5_1@2x.png");
@@ -261,6 +250,10 @@ const handleBack = () => {
     overflow: hidden;
     box-sizing: border-box;
 
+    .mask {
+      filter: blur(5px);
+    }
+
     .news-item {
       width: 100%;
       margin-bottom: 30rpx;

src/pages/industry/components/CustomView.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-container">
+  <view class="custom-container" @click.stop>
     <!-- 导航栏 start -->
     <view class="custom-bav-bar">
       <view class="left">
@@ -22,97 +22,198 @@
           borderRadius: '36rpx',
           background: '#F3F5F8',
         }"
+        clearable
+        @confirm="handleSearchTag"
       />
     </view>
     <!-- 搜搜 end -->
 
-    <view class="page-main">
+    <view class="custom-main">
       <view class="my-industry">
         <view class="my-industry-top">
           <view class="label">我的行业</view>
           <view class="label-count">
             <text>已选</text>
-            <text class="color">4</text>
+            <text class="color">{{ myTagList.length }}</text>
             <text>/10</text>
           </view>
         </view>
-        <view class="my-industry-list">
+        <view class="my-industry-list" v-if="myTagList.length > 0">
-          <view class="industry-item">
+          <view class="industry-item" v-for="item in myTagList">
-            <view class="industry-name">非银金融-证券</view>
+            <view class="industry-name">{{ item.name }}</view>
-            <view class="industry-btn"></view>
+            <view class="industry-btn" @click="handleDeleteTag(item)"></view>
-          </view>
-          <view class="industry-item">
-            <view class="industry-name">电子-半导体</view>
-            <view class="industry-btn"></view>
-          </view>
-          <view class="industry-item">
-            <view class="industry-name">计算机-软件开发</view>
-            <view class="industry-btn"></view>
-          </view>
-          <view class="industry-item">
-            <view class="industry-name">汽车-乘用车</view>
-            <view class="industry-btn"></view>
-          </view>
-          <view class="industry-item">
-            <view class="industry-name">非银金融-证券</view>
-            <view class="industry-btn"></view>
-          </view>
-          <view class="industry-item">
-            <view class="industry-name">非银金融-证券</view>
-            <view class="industry-btn"></view>
           </view>
         </view>
-        <view class="my-industry-empty"> 暂无自选，请从下方添加 </view>
+        <view class="my-industry-empty" v-else> 暂无自选，请从下方添加 </view>
       </view>
       <view class="recommend-industry">
         <view class="recommend-industry-top">
           <view class="label">推荐行业</view>
-          <view class="right">
+          <view class="right" @click="selectRandomTags">
             <view class="icon"></view>
             <view class="text">换一换</view>
           </view>
         </view>
-        <view class="recommend-industry-list">
+        <view class="recommend-industry-list" v-if="industryList.length > 0">
-          <view class="industry-item active">
+          <view
-            <view class="industry-name">非银金融-证券</view>
+            v-for="(item, index) in industryList"
-          </view>
+            :key="index"
-          <view class="industry-item">
+            :class="['industry-item', { active: isSelected(item.content) }]"
-            <view class="industry-name">非银金融-证券</view>
+            @click="handleAddTag(item.content)"
-          </view>
+          >
-          <view class="industry-item">
+            <view class="industry-name">{{ item.content }}</view>
-            <view class="industry-name">非银金融-证券</view>
-          </view>
-          <view class="industry-item">
-            <view class="industry-name">非银金融-证券</view>
           </view>
         </view>
+        <view v-else class="no-data"> <u-empty /></view>
       </view>
     </view>
 
-    <view class="page-footer">
+    <view class="custom-footer">
-      <view class="btn-clear">清空</view>
+      <view class="btn-clear" @click="handleClear">清空</view>
-      <view class="btn-done">完成配置</view>
+      <view class="btn-done" @click="handleComplete">完成配置</view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { getTopIndustryPeriod } from "@/api/newsInfo";
+import dayjs from "dayjs";
+import { onMounted, ref, watch } from "vue";
+
+const props = defineProps({
+  tagList: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits(["onChange", "onBack"]);
 
 const input = ref("");
 
 // 导航栏路由返回
 const handleBack = () => {
+  if (props.tagList.length === 0) {
     uni.navigateBack({
       delta: 1,
     });
+  } else {
+    emit("onBack");
+  }
 };
+
+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();
+}
+
+// 从所有标签中随机选择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) {
+  const index = myTagList.value.findIndex((item) => item.name === tag);
+  return index === -1 ? false : true;
+}
+// 添加标签
+function handleAddTag(tag) {
+  if (isSelected(tag)) return;
+  if (myTagList.value.length >= 10) {
+    uni.showToast({
+      title: "最多添加10个标签",
+      icon: "none",
+    });
+    return;
+  }
+
+  myTagList.value.push({
+    name: tag,
+  });
+}
+
+// 删除标签
+function handleDeleteTag(tag) {
+  const index = myTagList.value.findIndex((item) => item.name === tag);
+  myTagList.value.splice(index, 1);
+}
+
+// 搜索标签
+function handleSearchTag() {
+  if (!input.value) {
+    return;
+  }
+  industryList.value = industryListAll.value.filter((item) => {
+    if (!item || !item.content) return false;
+
+    return item.content.includes(input.value);
+  });
+}
+
+// 完成配置
+function handleComplete() {
+  if (myTagList.value.length < 1) {
+    uni.showToast({
+      title: "请先选择标签",
+      icon: "none",
+    });
+    return;
+  }
+
+  emit("onChange", myTagList.value);
+}
+// 清除
+function handleClear() {
+  myTagList.value = [];
+}
+
+watch(
+  () => props.tagList,
+  (newVal) => {
+    if (newVal) {
+      myTagList.value = [...newVal];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+onMounted(() => {
+  getTopIndustry_dFn();
+});
 </script>
 
 <style scoped lang="scss">
-.page-container {
+.custom-container {
+  position: fixed;
+  inset: 0;
   width: 100%;
-  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  background: #fff;
+  z-index: 9;
+  padding-bottom: 80rpx;
+  box-sizing: border-box;
 }
 
 .custom-bav-bar {
@@ -160,10 +261,12 @@ const handleBack = () => {
   z-index: 2;
 }
 
-.page-main {
+.custom-main {
   width: 100%;
-  padding: 33rpx 30rpx 0;
+  height: calc(100% - 250rpx);
+  padding: 33rpx 30rpx;
   box-sizing: border-box;
+  overflow: auto;
 
   .my-industry {
     margin-bottom: 80rpx;
@@ -296,10 +399,15 @@ const handleBack = () => {
         }
       }
     }
+
+    .no-data {
+      display: flex;
+      justify-content: center;
+    }
   }
 }
 
-.page-footer {
+.custom-footer {
   position: fixed;
   bottom: 0;
   left: 0;

src/pages/industry/components/List.vue

@@ -0,0 +1,320 @@
+<template>
+  <view class="page-container">
+    <!-- 导航栏 start -->
+    <view class="custom-bav-bar">
+      <view class="left">
+        <u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
+      </view>
+      <view class="center"> 热门行业 </view>
+      <view class="right" v-if="userStore.isLogin" @click="handleShowCustom">管理</view>
+    </view>
+    <!-- 导航栏 end -->
+
+    <!-- tabs start -->
+    <view class="page-nav-tabs">
+      <u-tabs
+        :list="tagList"
+        lineWidth="28rpx"
+        lineColor="#222222"
+        :current="current"
+        :activeStyle="{
+          color: '#222',
+          fontWeight: '500',
+          fontFamily: 'PingFangSC, PingFang SC',
+        }"
+        :inactiveStyle="{
+          color: '#666',
+          fontWeight: '400',
+          fontFamily: 'PingFangSC, PingFang SC',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 70rpx;"
+        @change="handleChangeTag"
+      >
+      </u-tabs>
+    </view>
+    <!-- tabs end -->
+
+    <view class="page-main">
+      <view class="banner">
+        <view class="text-1">非银金融-证券</view>
+        <view class="text-2">热门行业近一个月排名第5</view>
+      </view>
+
+      <view class="news-list">
+        <u-loading-icon v-if="loading"></u-loading-icon>
+        <template v-else-if="data?.length > 0">
+          <view
+            :class="['news-item', { mask: !userStore.isLogin }]"
+            v-for="item in data"
+            :key="item.id"
+            @click="goDetail(item)"
+          >
+            <view class="title">
+              <view class="name">
+                {{ item.title }}
+              </view>
+            </view>
+            <view :class="['content', { mask: isMask }]">
+              {{ item.summary }}
+            </view>
+            <view :class="['source', { mask: isMask }]">
+              <view>{{ item.tag }}</view>
+              <view>{{ item.time }}</view>
+            </view>
+          </view>
+        </template>
+        <u-empty v-else />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "@/stores/user";
+import { computed, onMounted, ref, watch } from "vue";
+import { getListByTagIndustry } from "@/api/detail";
+
+const props = defineProps({
+  tagList: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits(["onShow", "onShowCustom"]);
+
+const loading = ref(false);
+const activeTag = ref("");
+const current = computed(() => {
+  return props.tagList.findIndex((item) => item.name === activeTag.value);
+});
+
+const handleChangeTag = (item: any) => {
+  activeTag.value = item.name;
+  getList(item.name);
+};
+
+// 导航栏路由返回
+const handleBack = () => {
+  uni.navigateBack({
+    delta: 1,
+  });
+};
+
+const userStore = useUserStore();
+// 未登录|试用，显示蒙层
+const isMask = computed(() => {
+  return !userStore.isUserType;
+});
+
+// 跳转详情
+function goDetail(item: any) {
+  if (!userStore.isLogin) {
+    emit("onShow");
+    return;
+  }
+
+  // 试用账号
+  if (!userStore.isUserType) {
+    return;
+  }
+
+  uni.navigateTo({
+    url: `/pages/detail/indexNewsInfo?id=${item.id}`,
+  });
+}
+
+// 数据列表
+const data = ref([]);
+// 新闻列表
+const getList = async (name: string) => {
+  loading.value = true;
+  const result = await getListByTagIndustry({ name });
+  loading.value = false;
+  if (result.code === 200) {
+    data.value = result.data;
+  } else {
+    data.value = [];
+  }
+};
+
+watch(
+  () => props.tagList,
+  (newVal) => {
+    if (newVal?.length > 0) {
+      activeTag.value = newVal[0]?.name || "";
+      getList(activeTag.value);
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+const handleShowCustom = () => {
+  emit("onShowCustom");
+};
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+}
+
+.custom-bav-bar {
+  width: 100%;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .back_icon {
+    width: 36rpx;
+    height: 36rpx;
+  }
+
+  .logo_icon {
+    width: 168rpx;
+    height: 36rpx;
+    margin-right: 6rpx;
+  }
+
+  .left {
+    position: absolute;
+    top: 24rpx;
+    left: 32rpx;
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "PingFangSC, PingFang SC";
+    font-weight: 500;
+    font-size: 34rpx;
+    color: #222222;
+    line-height: 36rpx;
+  }
+
+  .right {
+    position: absolute;
+    top: 22rpx;
+    right: 30rpx;
+    font-family: "PingFangSC, PingFang SC";
+    font-weight: 400;
+    font-size: 30rpx;
+    color: #333333;
+    line-height: 42rpx;
+  }
+}
+
+.page-nav-tabs {
+  padding-top: 20rpx;
+}
+
+.page-main {
+  padding-top: 30rpx;
+  background-color: #f3f5f8;
+
+  .banner {
+    width: 690rpx;
+    height: 113rpx;
+    margin: 0 30rpx 30rpx;
+    padding: 15rpx 30rpx;
+    border-radius: 10rpx;
+    background-image: url("@/assets/images/page/page_5@2x.png");
+    background-repeat: no-repeat;
+    background-size: 690rpx 113rpx;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
+    box-sizing: border-box;
+
+    .text-1 {
+      font-family: "PingFangSC, PingFang SC";
+      font-weight: 500;
+      font-size: 30rpx;
+      color: #3f80fa;
+      line-height: 42rpx;
+    }
+    .text-2 {
+      font-family: "PingFangSC, PingFang SC";
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #999999;
+      line-height: 33rpx;
+    }
+  }
+
+  .news-list {
+    width: 100%;
+    padding: 30rpx 30rpx 0;
+    background: #fff;
+    border-radius: 24rpx 24rpx 0px 0px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .mask {
+      filter: blur(5px);
+    }
+
+    .news-item {
+      width: 100%;
+      margin-bottom: 30rpx;
+      padding-bottom: 30rpx;
+      border-bottom: 2rpx solid #f3f3f5;
+      box-sizing: border-box;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16rpx;
+
+        .name {
+          flex: 1;
+          width: 564rpx;
+          font-family: "PingFangSC, PingFang SC";
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #222222;
+          line-height: 40rpx;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          word-break: break-all;
+        }
+      }
+
+      .content {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 16rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #333333;
+        line-height: 33rpx;
+      }
+
+      .source {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: "PingFangSC, PingFang SC";
+        font-weight: 400;
+        font-size: 22rpx;
+        color: #999999;
+        line-height: 30rpx;
+      }
+    }
+  }
+}
+</style>

src/pages/industry/index.vue

@@ -1,323 +1,110 @@
 <template>
-  <view class="page-container">
+  <view class="container">
     <!-- 自定义配置 start -->
-    <!-- <CustomView /> -->
+    <CustomView
+      v-if="isShowCustom && userStore.isLogin"
+      :tagList="tagList"
+      @onChange="handleChangeTag"
+      @onBack="handleHideCustom"
+    />
     <!-- 自定义配置 end -->
 
-    <!-- 导航栏 start -->
+    <List
-    <view class="custom-bav-bar">
+      v-show="!isShowCustom"
-      <view class="left">
+      :tagList="tagList"
-        <u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
+      @onShow="handleShowLogin"
-      </view>
+      @onShowCustom="handleShowCustom"
-      <view class="center"> 热门行业 </view>
+    />
-      <view class="right">管理</view>
-    </view>
-    <!-- 导航栏 end -->
 
-    <!-- tabs start -->
+    <!-- 登录弹窗 start -->
-    <view class="page-nav-tabs">
+    <LoginDialog
-      <u-tabs
+      :show="LoginShow"
-        :list="list4"
+      @onSuccess="handleLoginSuccess"
-        lineWidth="28rpx"
+      @onCancel="handleLoginCancel"
-        lineColor="#222222"
+      @onError="handleLoginError"
-        :activeStyle="{
+    />
-          color: '#222',
+    <!-- 登录弹窗 end -->
-          fontWeight: '500',
-          fontFamily: 'PingFangSC, PingFang SC',
-        }"
-        :inactiveStyle="{
-          color: '#666',
-          fontWeight: '400',
-          fontFamily: 'PingFangSC, PingFang SC',
-        }"
-        itemStyle="padding-left: 15px; padding-right: 15px; height: 70rpx;"
-      >
-      </u-tabs>
-    </view>
-    <!-- tabs end -->
-
-    <view class="page-main">
-      <view class="banner">
-        <view class="text-1">非银金融-证券</view>
-        <view class="text-2">热门行业近一个月排名第5</view>
-      </view>
-
-      <view class="news-list">
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-        <view class="news-item">
-          <view class="title">
-            <view class="name">
-              行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报
-            </view>
-          </view>
-          <view class="content">
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-            英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
-          </view>
-          <view class="source">
-            <view>中国证券报</view>
-            <view>2025-06-23 10:00</view>
-          </view>
-        </view>
-      </view>
-    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { useUserStore } from "@/stores/user";
+import { computed, onMounted, ref } from "vue";
+import LoginDialog from "@/components/loginPopup/index.vue";
+import { getListByTagIndustry } from "@/api/detail";
 import CustomView from "./components/CustomView.vue";
+import List from "./components/List.vue";
 
-const list4 = ref([
+const isShowCustom = ref(false);
-  { name: "非银金融-证券", id: 1 },
+
-  { name: "电子-半导体", id: 2 },
+const handleChangeTag = (item: any) => {
-  { name: "汽车-乘用车", id: 3 },
+  console.log("output >>>>> item", item);
-  { name: "汽车-乘用车", id: 4 },
+  handleHideCustom();
-  { name: "汽车-乘用车", id: 5 },
+};
-]);
+
-// 导航栏路由返回
+const handleShowCustom = () => {
-const handleBack = () => {
+  isShowCustom.value = true;
-  uni.navigateBack({
+};
-    delta: 1,
+const handleHideCustom = () => {
+  isShowCustom.value = false;
+};
+
+const tagList = ref([]);
+
+const getTagList = async () => {
+  new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 1000);
+  }).then(() => {
+    tagList.value = [
+      // { name: "电子-半导体" },
+      // { name: "计算机-软件开发" },
+      // { name: "汽车-乘用车" },
+      // { name: "汽车-汽车零部件" },
+    ];
+
+    if(tagList.value.length === 0) {
+      handleShowCustom()
+
+    }
   });
 };
+
+const userStore = useUserStore();
+const LoginShow = ref(false);
+// 显示弹框
+const handleShowLogin = () => {
+  LoginShow.value = true;
+};
+
+// 关闭弹框
+const handleLoginCancel = () => {
+  LoginShow.value = false;
+};
+// 登录成功之后的回调
+const handleLoginSuccess = () => {
+  LoginShow.value = false;
+  getTagList();
+};
+// 登录失败之后的回调
+const handleLoginError = () => {
+  console.log("登录失败");
+};
+
+onMounted(async () => {
+  if (!userStore.isLogin) {
+    handleShowLogin();
+    return;
+  }
+  getTagList();
+});
 </script>
 
 <style scoped lang="scss">
-.page-container {
+.container {
+  position: relative;
   width: 100%;
   background-color: #fff;
 }
-
-.custom-bav-bar {
-  width: 100%;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  .back_icon {
-    width: 36rpx;
-    height: 36rpx;
-  }
-
-  .logo_icon {
-    width: 168rpx;
-    height: 36rpx;
-    margin-right: 6rpx;
-  }
-
-  .left {
-    position: absolute;
-    top: 24rpx;
-    left: 32rpx;
-  }
-
-  .center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: "PingFangSC, PingFang SC";
-    font-weight: 500;
-    font-size: 34rpx;
-    color: #222222;
-    line-height: 36rpx;
-  }
-
-  .right {
-    position: absolute;
-    top: 22rpx;
-    right: 30rpx;
-    font-family: "PingFangSC, PingFang SC";
-    font-weight: 400;
-    font-size: 30rpx;
-    color: #333333;
-    line-height: 42rpx;
-  }
-}
-
-.page-nav-tabs {
-  padding-top: 20rpx;
-}
-
-.page-main {
-  padding-top: 30rpx;
-  background-color: #f3f5f8;
-
-  .banner {
-    width: 690rpx;
-    height: 113rpx;
-    margin:0 30rpx 30rpx;
-    padding: 15rpx 30rpx;
-    border-radius: 10rpx;
-    background-image: url("@/assets/images/page/page_5@2x.png");
-    background-repeat: no-repeat;
-    background-size: 690rpx 113rpx;
-    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-    box-sizing: border-box;
-
-    .text-1 {
-      font-family: "PingFangSC, PingFang SC";
-      font-weight: 500;
-      font-size: 30rpx;
-      color: #3f80fa;
-      line-height: 42rpx;
-    }
-    .text-2 {
-      font-family: "PingFangSC, PingFang SC";
-      font-weight: 400;
-      font-size: 24rpx;
-      color: #999999;
-      line-height: 33rpx;
-    }
-  }
-
-  .news-list {
-    width: 100%;
-    padding: 30rpx 30rpx 0;
-    background: #fff;
-    border-radius: 24rpx 24rpx 0px 0px;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    .news-item {
-      width: 100%;
-      margin-bottom: 30rpx;
-      padding-bottom: 30rpx;
-      border-bottom: 2rpx solid #f3f3f5;
-      box-sizing: border-box;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 16rpx;
-
-        .name {
-          flex: 1;
-          width: 564rpx;
-          font-family: "PingFangSC, PingFang SC";
-          font-weight: 500;
-          font-size: 28rpx;
-          color: #222222;
-          line-height: 40rpx;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          word-break: break-all;
-        }
-      }
-
-      .content {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        margin-bottom: 16rpx;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-all;
-        font-family: "PingFangSC, PingFang SC";
-        font-weight: 400;
-        font-size: 24rpx;
-        color: #333333;
-        line-height: 33rpx;
-      }
-
-      .source {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-family: "PingFangSC, PingFang SC";
-        font-weight: 400;
-        font-size: 22rpx;
-        color: #999999;
-        line-height: 30rpx;
-      }
-    }
-  }
-}
 </style>

src/pages/recommend/index.vue

@@ -44,7 +44,7 @@
                 <view class="news-top">
                   <view class="time">09:30:00</view>
                   <view class="source">
-                    <view class="star" :style="{width: `${ 4* 20}rpx`}"></view>
+                    <view class="star" :style="{ width: `${4 * 20}rpx` }"></view>
                     <view class="t-1">来自</view>
                     <view class="t-2">中国证券报</view>
                   </view>
@@ -113,7 +113,7 @@
                 <view class="news-top">
                   <view class="time">09:30:00</view>
                   <view class="source">
-                    <view class="star" :style="{width: `${ 4* 20}rpx`}"></view>
+                    <view class="star" :style="{ width: `${4 * 20}rpx` }"></view>
                     <view class="t-1">来自</view>
                     <view class="t-2">中国证券报</view>
                   </view>
@@ -176,21 +176,89 @@
       </view>
       <!-- 时间轴 end -->
     </view>
+
+    <!-- 登录弹窗 start -->
+    <LoginDialog
+      :show="LoginShow"
+      @onSuccess="handleLoginSuccess"
+      @onCancel="handleLoginCancel"
+      @onError="handleLoginError"
+    />
+    <!-- 登录弹窗 end -->
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { getRecommendList } from "@/api";
-
+import { useUserStore } from "@/stores/user";
+import { computed, onMounted, ref } from "vue";
+import LoginDialog from "@/components/loginPopup/index.vue";
 const input = ref("");
-const a = ref(true);
-
 // 导航栏路由返回
 const handleBack = () => {
   uni.navigateBack({
     delta: 1,
   });
 };
+
+const userStore = useUserStore();
+// 未登录|试用，显示蒙层
+const isMask = computed(() => {
+  return !userStore.isLogin || !userStore.isUserType;
+});
+
+const LoginShow = ref(false);
+// 显示弹框
+const handleShowLogin = () => {
+  LoginShow.value = true;
+};
+
+// 关闭弹框
+const handleLoginCancel = () => {
+  LoginShow.value = false;
+};
+// 登录成功之后的回调
+const handleLoginSuccess = () => {
+  LoginShow.value = false;
+};
+// 登录失败之后的回调
+const handleLoginError = () => {
+  console.log("登录失败");
+};
+// 跳转详情
+function goDetail(item: any) {
+  if (!userStore.isLogin) {
+    handleShowLogin();
+    return;
+  }
+
+  // 试用账号
+  if (!userStore.isUserType) {
+    return;
+  }
+
+  uni.navigateTo({
+    url: `/pages/detail/indexNewsInfo?id=${item.id}`,
+  });
+}
+
+const data = ref([]);
+const getList = async () => {
+  const result = await getRecommendList({});
+  if (result.code === 200) {
+    const { list, total } = result.data;
+    data.value = list;
+  } else {
+    data.value = [];
+  }
+};
+
+onMounted(async () => {
+  if (!userStore.isLogin) {
+    handleShowLogin();
+  }
+  getList();
+});
 </script>
 
 <style scoped lang="scss">