feat(国内新闻): 新增国内新闻模块及相关组件

添加国内新闻API接口getDomestic 创建domesticMini.vue组件用于展示国内新闻列表在minihome页面中添加国内新闻tab支持新增indexDomestic.vue组件作为国内新闻列表项
2025-08-30 13:50:28 +08:00 · 2025-08-30 13:50:28 +08:00 · a82d86efc2
parent 77029700ed
commit a82d86efc2
5 changed files with 446 additions and 14 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -72,3 +72,7 @@ export const doShare = (data: any) => {
  return Request.post("/user/share", data);
 };

+// 微信分享
+export const getDomestic = (data: any) => {
+  return Request.get("/news/domestic", data);
+};
--- a/src/components/articleList/indexDomestic.vue
+++ b/src/components/articleList/indexDomestic.vue
@ -0,0 +1,335 @@
+<template>
+  <view class="list" v-if="data.length">
+    <view
+      class="listItem"
+      v-for="item in props.data"
+      :key="item.id"
+      @click="handleClick(item)"
+    >
+      <view class="listItemHeader">
+        <view class="ListItemImg" v-if="item.picture">
+          <image
+            :src="item.picture"
+            class="ListItemImage"
+            mode="widthFix"
+            style="width: 204rpx"
+          />
+          <image
+            class="ListItemBg"
+            :src="item.picture"
+            style="width: 100%; height: 100%"
+          />
+          <view class="tag" v-if="item.newType !== 'search'">{{
+            item.tag
+          }}</view>
+        </view>
+        <view class="listItemHeaderContent">
+          <view v-if="!isLogin">
+            <text :class="['listItemTitle']">{{ item.title.slice(0, 3) }}</text>
+            <text :class="['listItemTitle', isLogin ? '' : 'mohu']">
+              {{ item.title.slice(3, item.title.length) }}
+            </text></view
+          >
+          <view v-else>
+            <view :class="['listItemTitle1']" v-html="item.title"> </view>
+          </view>
+          <view
+            :class="['listItemAbstract', isLogin ? '' : 'mohu']"
+            v-if="item.newType !== 'search'"
+            v-html="item.summary"
+          ></view>
+          <view
+            :class="['listItemAbstract', isLogin ? '' : 'mohu']"
+            v-else
+            v-html="item.MarkInRedContent || item.abstract"
+          ></view>
+        </view>
+      </view>
+
+      <!-- <view class="tabContainer">
+        <view class="tag">{{ item.tag }}</view>
+      </view> -->
+
+      <view :class="['listItemContent', isLogin ? '' : 'mohu']">
+        <view style="display: flex">
+          <view class="tag">中国证券报</view>
+          <view class="listItemTime" style="margin-left: 10rpx">{{
+            item.publishTime
+          }}</view>
+        </view>
+      </view>
+
+      <!-- <view class="listItemFooter" v-if="item.needpay"></view> -->
+    </view>
+  </view>
+
+  <!-- <u-empty mode="news" v-else> </u-empty> -->
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { onShow, onLoad } from "@dcloudio/uni-app";
+
+const emit = defineEmits(["handleListJump", "onClick"]);
+const isLogin = ref(uni.getStorageSync("token"));
+
+const props = defineProps({
+  // 列表内容
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+console.log("props ===>", props.data);
+const handleListJump = (item) => {
+  emit("handleListJump", item);
+};
+
+// 点击新闻传给父组件
+const handleClick = (item: any) => {
+  emit("onClick", item);
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 0 40rpx 30rpx 40rpx;
+  border-radius: 10rpx;
+  font-family: "SourceHanSansCN-Regular";
+
+  .listItem {
+    border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
+    box-sizing: border-box;
+    padding: 30rpx 0;
+
+    .listItemHeader {
+      display: flex;
+      justify-content: space-between;
+
+      .ListItemImg {
+        width: 204rpx;
+        height: 204rpx;
+        border-radius: 9rpx;
+        overflow: hidden;
+        background-color: #c4c4c4;
+        flex-shrink: 0;
+        position: relative;
+        margin-right: 12rpx;
+
+        .ListItemImage {
+          width: 100%;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 9;
+        }
+
+        .ListItemBg {
+          filter: blur(30rpx);
+        }
+
+        .tag {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          box-sizing: border-box;
+          padding: 6rpx 16rpx;
+          border-radius: 4rpx;
+          background-color: #e7303f;
+          // font-size: 20rpx;
+          font-size: var(--h6-font-size);
+          color: #fff;
+          z-index: 9;
+        }
+      }
+
+      .listItemHeaderContent {
+        // width: 100%;
+        box-sizing: border-box;
+        padding-left: 0rpx;
+        display: flex;
+        flex-direction: column;
+
+        .listItemTitle1 {
+          font-size: 32rpx;
+          font-size: var(--h1-font-size);
+          color: #333;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          word-break: break-all;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #192236;
+          line-height: 45rpx;
+          text-align: left;
+          font-style: normal;
+        }
+        .listItemTitle {
+          // font-size: 32rpx;
+          // font-size: var(--h1-font-size);
+          // color: #333;
+          // display: -webkit-box;
+          // -webkit-box-orient: vertical;
+          // -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          word-break: break-all;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #192236;
+          line-height: 45rpx;
+          text-align: left;
+          font-style: normal;
+
+          // text-align: left;
+          &.noAbstract {
+            -webkit-line-clamp: 4;
+          }
+
+          .isVip {
+            display: inline-block;
+            width: 50rpx;
+            height: 29rpx;
+            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_vip.png);
+            background-size: cover;
+          }
+        }
+
+        .listItemTitleContent {
+          // font-size: 32rpx;
+          font-size: var(--h1-font-size);
+          // color: #333;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          // font-weight: bold;
+
+          .isVip {
+            display: inline-block;
+            width: 50rpx;
+            height: 29rpx;
+            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_vip.png);
+            background-size: cover;
+            box-sizing: border-box;
+            margin-right: 12rpx;
+          }
+        }
+
+        .listItemAbstract {
+          box-sizing: border-box;
+          padding-top: 12rpx;
+          // font-size: 26rpx;
+          font-size: var(--h3-font-size);
+          color: rgba(51, 51, 51, 0.6);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #2d3849;
+          line-height: 33rpx;
+          text-align: left;
+          font-style: normal;
+        }
+      }
+    }
+
+    .listItemContent {
+      // font-size: 20rpx;
+      font-size: var(--h6-font-size);
+      color: #b9b9b9;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 21rpx 0 0 0;
+
+      .listItemData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .dataItem {
+          margin-right: 12rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .tabContainer {
+      display: flex;
+      box-sizing: border-box;
+      padding-top: 21rpx;
+
+      .tag {
+        box-sizing: border-box;
+        padding: 6rpx 16rpx;
+        border-radius: 4rpx;
+        background-color: #e7303f;
+        // font-size: 20rpx;
+        font-size: var(--h6-font-size);
+        color: #fff;
+      }
+    }
+
+    .listItemFooter {
+      height: 74rpx;
+      margin-top: 15rpx;
+      background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/vip_sub_2.png);
+      background-size: cover;
+    }
+  }
+}
+
+.listItemTitleContentText {
+  font-family: "SourceHanSansCN-Medium";
+}
+
+.r_option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+
+  .option_icon {
+    width: 24rpx;
+    height: 24rpx;
+  }
+
+  .option_text {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #192236;
+    line-height: 33rpx;
+    text-align: justify;
+    font-style: normal;
+  }
+}
+
+.mohu {
+  filter: blur(7rpx);
+}
+</style>
--- a/src/components/domestic.vue
+++ b/src/components/domestic.vue
@ -21,8 +21,16 @@
      </view>
      <view class="recommendedList" v-if="hotNewsList.length != 0">
        <u-scroll-list :indicator="false">
-          <view class="recommendedList-item" v-for="(item, index) in hotNewsList" :key="item.id">
-            <RecommendedItem :data="{ item }" @handleClick="doDetail" :noPayShow="true" />
+          <view
+            class="recommendedList-item"
+            v-for="(item, index) in hotNewsList"
+            :key="item.id"
+          >
+            <RecommendedItem
+              :data="{ item }"
+              @handleClick="doDetail"
+              :noPayShow="true"
+            />
          </view>
        </u-scroll-list>
      </view>
@ -44,8 +52,11 @@
    <!-- 订阅 支付 -->
    <Pay :show="payShow" @onClick="handleClose" @handleSub="handleClickPay" />
    <!-- 登录弹框 -->
-    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback" />
+    <LoginPopup
+      :show="LoginShow"
+      @handlePopupClose="handlePopupClose"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback"
+    />
  </view>
 </template>

@ -95,7 +106,11 @@ watch(
  () => props.newsList,
  (newValue, oldValue) => {
    const token = Session.get("token");
-    isPay.value = !token ? true : newValue[0]?.needpay ? newValue[0]?.needpay : false;
+    isPay.value = !token
+      ? true
+      : newValue[0]?.needpay
+      ? newValue[0]?.needpay
+      : false;
  }
 );

@ -253,7 +268,8 @@ const handlePopupSuccessCallback = () => {
            display: block;
            width: 44rpx;
            height: 6rpx;
-            background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_dot.png") no-repeat center;
+            background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_dot.png")
+              no-repeat center;
            background-size: 100% 100%;
          }
        }
@ -434,7 +450,11 @@ const handlePopupSuccessCallback = () => {
  // margin-bottom: 24rpx;
  padding: 40rpx 0;
  border-radius: 8rpx;
-  background: linear-gradient(90deg, rgba(255, 250, 240, 1) 0%, rgba(254, 238, 210, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 250, 240, 1) 0%,
+    rgba(254, 238, 210, 1) 100%
+  );

  .need-pay-text {
    font-size: 28rpx;
@ -452,7 +472,11 @@ const handlePopupSuccessCallback = () => {
      font-size: 32rpx;
      color: #fff;
      border-radius: 20rpx;
-      background: linear-gradient(90deg, rgba(252, 92, 105, 1) 0%, rgba(231, 48, 63, 1) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(252, 92, 105, 1) 0%,
+        rgba(231, 48, 63, 1) 100%
+      );
    }
  }
 }
--- a/src/components/domesticMini.vue
+++ b/src/components/domesticMini.vue
@ -0,0 +1,54 @@
+<template>
+  <view class="news-rank-list">
+    <List :data="newsList" @onClick="doDetail" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import dayjs from "dayjs/esm/index";
+import LoginPopup from "@/components/loginPopup/index.vue";
+import { Session } from "@/utils/storage";
+import { getDomestic } from "@/api/index";
+import List from "@/components/articleList/indexDomestic.vue";
+import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
+
+const newsList = ref([]);
+
+const form = reactive({
+  pageNum: 1,
+  pageSize: 10,
+});
+async function getDomesticFn() {
+  uni.showLoading();
+  let { code, data } = await getDomestic({
+    ...form,
+  });
+  uni.hideLoading();
+  uni.stopPullDownRefresh();
+  if (code == 200) {
+    if (form.pageNum == 1) {
+      newsList.value = data.records;
+    } else {
+      newsList.value = [...newsList.value, ...data.records];
+    }
+    console.log("🚀 ~ getDomesticFn ~ newsList.value:", newsList.value);
+  }
+}
+
+onMounted(() => {
+  getDomesticFn();
+});
+
+onPullDownRefresh(() => {
+  form.pageNum = 1;
+  getDomesticFn();
+});
+
+onReachBottom(() => {
+  form.pageNum++;
+  getDomesticFn();
+});
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/pages/minihome/index.vue
+++ b/src/pages/minihome/index.vue
@ -15,7 +15,7 @@
        top: 0,
        zIndex: '999999',
      }"
-      v-if="tabIndex == 0"
+      v-if="tabIndex == 0 || tabIndex == 2"
    ></view>
    <view
      :style="{
@ -36,7 +36,7 @@
          backgroundColor: isScroll ? '#fff' : 'transparent',
          zIndex: '9999',
        }"
-        v-if="tabIndex == 0"
+        v-if="tabIndex == 0 || tabIndex == 2"
      >
        <view class="r_sreach">
          <image
@ -57,11 +57,12 @@
          </view>
        </view>

-        <view style="padding: 0 24rpx; margin-top: 30rpx">
+        <view style="padding: 0 24rpx; margin-top: 30rpx" v-if="tabIndex == 0">
          <u-swiper :list="list1" @change="change" @click="click"></u-swiper>
        </view>

        <view
+          v-if="tabIndex == 0"
          style="
            padding-top: 30rpx;
            background-color: white;
@ -75,6 +76,11 @@
      <view style="margin-top: 30rpx" v-if="tabIndex == 0">
        <RankListMini :newsList="newsList"></RankListMini>
      </view>
+      <!-- 列表区域 -->
+      <view style="margin-top: 30rpx" v-if="tabIndex == 2">
+        <Domestic />
+      </view>
+
      <MineMini v-if="tabIndex == 1" @logout="tabIndex = 0"></MineMini>
    </view>

@ -93,6 +99,7 @@ import Tabs from "@/components/mini/Tabs.vue";
 import { getTopNews } from "@/api/newsInfo";
 import { onPageNotFound, onPageScroll, onShow } from "@dcloudio/uni-app";
 import { getNavHeight } from "@/utils/util";
+import Domestic from "@/components/domesticMini.vue";

 const list1 = reactive([
  "https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/banner1.png",
@ -134,10 +141,18 @@ function goSreach() {

 const isScroll = ref(false);
 onPageScroll((val) => {
-  if (val.scrollTop > 150) {
-    isScroll.value = true;
+  if (tabIndex.value == 0 || tabIndex.value == 1) {
+    if (val.scrollTop > 150) {
+      isScroll.value = true;
+    } else {
+      isScroll.value = false;
+    }
  } else {
-    isScroll.value = false;
+    if (val.scrollTop > 80) {
+      isScroll.value = true;
+    } else {
+      isScroll.value = false;
+    }
  }
 });