cankao-h5/src/pages/realtimeInfo/pc/rank.vue

<template>
  <view class="pc_all">
    <PageTop></PageTop>

    <view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
      <view class="top_title">
        <text class="pageTitle" v-if="pageType != 4">资讯头条榜</text>
        <text class="pageTitle" v-if="pageType == 4">编辑精选</text>
        <image src="@/assets/zixun/top20_icon.png" class="title_icon" v-if="pageType != 4"></image>
        <u-input v-if="pageType == 4" placeholder="请输入搜索内容" v-model="form.keyword" prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          style="margin-left: 40rpx;margin-top: 5rpx;border-radius: 20rpx;">

          <template #suffix>
            <u-button @tap="getNewsList" text="搜索" size="mini"></u-button>
          </template>
        </u-input>
      </view>

      <view class="line"></view>

      <view class="r_list">
        <view class="list_item" v-for="(item, index) in newsList" :key="index">
          <view class="r_list_item_num" v-if="pageType != 4">
            <view class="list_item_num num1" v-if="index < 3 && index == 0">{{ index + 1 }}</view>
            <view class="list_item_num num2" v-else-if="index < 3 && index == 1">{{ index + 1 }}</view>
            <view class="list_item_num num3" v-else-if="index < 3 && index == 2">{{ index + 1 }}</view>
            <view class="list_item_num nol_num" v-else>{{ index + 1 }}</view>
          </view>

          <view class="list_item_content">
            <text class="item_title" @click="goDetail(item)" v-html="item.title"></text>
            <text class="item_summary" v-if="pageType != 4">{{ item.summary }}</text>
            <text class="item_summary" v-if="pageType == 4" v-html="item.summary"></text>

            <view class="item_bottom">
              <view>
                <text class="time">{{ item.source }}</text>
                <text class="time" style="margin-left: 30rpx" v-if="pageType != 4">{{
                  dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss")
                }}</text>
                <text class="time" style="margin-left: 30rpx" v-if="pageType == 4">{{
                  item.time
                }}</text>
              </view>

              <text class="score" v-if="pageType != 4">{{ item.news_score }}</text>
            </view>
          </view>
        </view>
      </view>

      <div style="width: 100%;display: flex;justify-content: center;"
        v-if="pageType == 4 && newsList && newsList.length > 0">
        <el-pagination v-model:current-page="currentPage" :page-size="form.size" layout="prev, pager, next"
          :total="form.total" @current-change="currentChange" @size-change="sizeChange" />
      </div>

    </view>
    <LoginPopup :show="LoginShow" mode="center" @handlePopupClose="handlePopupClose"
      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
import { getTopNewsDay } from "@/api/newsInfo";
import dayjs from "dayjs/esm/index";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";
import { editTopNews } from "@/api/index";
import { sendToken } from "@/api/index";
import { useRoute, useRouter } from "vue-router";

const pageSizes = ref([10, 20, 30, 40]);
const form = reactive({
  keyword: "",
  page: 1,
  size: 10,
  total: 10
});
const currentPage = ref(form.page);

const route = useRoute();
const router = useRouter();

const pageType = ref(route.query.type);
const newsList = ref([]);


async function getNewsList() {
  if (pageType.value == 4) {
    // 编辑精选
    let { code, data } = await editTopNews({
      ...form
    });
    if (code == 200) {
      newsList.value = data.list;
      form.total = data.total;
      data.list.forEach((item) => {
        item.summary = item.summary.replace(form.keyword, "<span style='color: #007aff'>" + form.keyword + '</span>');
        item.title = item.title.replace(form.keyword, "<span style='color:  #007aff'>" + form.keyword + '</span>');
      });
    }
  } else {
    // 概念标签贴标
    newsList.value = await getTopNewsDay({});
  }
}

function goDetail(item) {
  let id = null
  if (pageType.value != 4) {
    id = item.news_id
  } else {
    id = item.id
  }
  uni.navigateTo({
    url: "/pages/realtimeInfo/pc/indexPC?id=" + id + "&type=" + pageType.value,
  });
}

function currentChange(page) {
  form.page = page;
  getNewsList();
}

onMounted(async (e) => {

  console.log("🚀 ~ route.query:", route.query)
  if (route.query?.token && !Session.get("token")) {
    uni.showLoading({
      title: '加载中',
      mask: true
    })
    sendToken({
      token: route.query.token,
    }).then((res) => {
      uni.hideLoading()
      if (res.code == 200) {
        Session.set("token", res.data.token);
        Session.set("userPhone", res.data.phone);

        window.location.reload();
      }
    })
  } else {
    if (!Session.get("token")) {
      LoginShow.value = true;
    }
  }

  getNewsList();


});

const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};

// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
  isLoginStatus.value = true;
  window.location.reload();
  // uni.navigateTo({
  //   url: "/pages/realtimeInfo/rankDetail?type=" + type,
  // });
};

// 登录失败之后的回调
const handlePopupErrorCallback = () => {
  console.log("登录失败");
};
</script>

<style scoped lang="scss">
@import url("./index.css");

.top_title {
  display: flex;
  align-items: center;

  .pageTitle {
    font-family: AlibabaPuHuiTiM;
    font-size: 26px;
    color: #1a1a1a;
    font-weight: bold;
  }

  .title_icon {
    width: 180rpx;
    height: 50rpx;
    margin-left: 20rpx;
  }
}

.line {
  width: 100%;
  height: 1px;
  background-color: #f0f0f0;
  margin-top: 50rpx;
}

.r_list {
  display: flex;
  flex-direction: column;
}

.list_item {
  display: flex;
  min-height: 200rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #f6f6f6;
  margin-top: 30rpx;

  .r_list_item_num {
    width: 100rpx;

    display: flex;
    text-align: center;
  }

  .list_item_num {
    margin-top: 10rpx;
    width: 20px;
    height: 20px;

    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;

    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    padding-bottom: 5rpx;
  }

  .num1 {
    background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
    border-radius: 3px;
  }

  .num2 {
    background: linear-gradient(169deg, #a9c3e3 0%, #92b2e0 100%);
    border-radius: 3px;
  }

  .num3 {
    background: linear-gradient(169deg, #f2996e 0%, #f77741 100%);
    border-radius: 3px;
  }

  .nol_num {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #93a2b3;
    line-height: 28px;
    text-align: left;
    font-style: normal;
  }

  .list_item_content {
    display: flex;
    flex-direction: column;

    flex: 1;
  }

  .item_title:hover {
    color: #057cff;
  }

  .item_title {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
    cursor: pointer;
  }

  .item_summary {
    font-family: PingFangSC, PingFang SC;
    font-weight: normal;
    font-size: 16px;
    color: #333333;
    margin-top: 20rpx;


    /* 必须：限制内容不溢出容器 */
    overflow: hidden;
    /* 必须：超出部分显示省略号 */
    text-overflow: ellipsis;
    /* 必须：将元素设置为webkit弹性盒模型（用于控制行数） */
    display: -webkit-box;
    /* 关键：限制显示的行数（这里设为2行） */
    -webkit-line-clamp: 2;
    /* 必须：设置弹性盒的排列方向为垂直（让文本换行） */
    -webkit-box-orient: vertical;

    /* 可选：调整行高和容器高度，确保刚好容纳2行文本 */
    line-height: 1.5;
    /* 行高 */
    max-height: 3em;
    /* 2行总高度 = 行高 × 2（1.5×2=3） */
  }
}

.item_bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
  margin-bottom: 10rpx;

  .time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #919191;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }

  .score {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #ffa800;
    line-height: 25px;
    text-align: right;
    font-style: normal;
  }
}
</style>