cankao-h5/src/pages/realtimeInfo/components/TopNewsView/index.vue

<template>
  <view class="top-section">
    <view class="top-section-news" @click="navigateTo">
      <view class="top-section-img">
        <image
          class="image"
          mode="aspectFit"
          src="@/assets/images/page/icon_smart@2x.png"
        ></image>
      </view>
      <swiper
        class="swiper-box"
        circular
        :indicator-dots="false"
        :autoplay="true"
        :vertical="true"
        :disable-touch="true"
        :interval="3000"
        :duration="500"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in newsListAll"
          :key="item.news_id"
        >
          <view class="news-item">
            <view class="num">{{ index + 1 }}</view>
            <view class="title">{{ item.title }}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getTopNews } from "@/api/newsInfo";
import dayjs from "dayjs";
import { computed, onMounted, reactive, ref } from "vue";
import { useUserStore } from "@/stores/user";

const emit = defineEmits(["onShow"]);
const userStore = useUserStore();
const userInfos = computed(() => {
  return userStore.getUserInfos();
});
// 获取数据
const loading = ref(false);
const newsListAll = ref([]); // 全部新闻
const limit_num = ref(5);

// 日期格式
const formatDateStart = "YYYY-MM-DD 00:00:00";
const formatDateEnd = "YYYY-MM-DD 23:59:59";
// 选择的日期
const chooseDate = reactive({
  startDate: dayjs().format(formatDateStart),
  endDate: dayjs().format(formatDateEnd),
});
async function getNewsList() {
  const params = {
    start_date: chooseDate.startDate,
    end_date: chooseDate.endDate,
    limit_num: limit_num.value,
  };

  loading.value = true;
  try {
    const result = await getTopNews(params);
    newsListAll.value = result;
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}

// 跳转子页
const navigateTo = () => {
  if (!userStore.isLogin) {
    emit("onShow");
    return;
  }

  const isAuth = userInfos.value?.auth?.findIndex((item) => item.name === 'znzx');
  if (isAuth === -1 || userInfos.value?.auth[isAuth]?.enabled === 0) {
    uni.showToast({
      title: "暂未开通本栏目",
      icon: "none",
    });
    return;
  }

  uni.navigateTo({
    url: "/pages/topNews/index",
  });
};

onMounted(() => {
  getNewsList();
});
</script>

<style scoped lang="scss">
.top-section {
  height: 104rpx;
  margin: 0 20rpx 20rpx;
  background: linear-gradient(90deg, #fce8ea 0%, #ffffff 27.03%, #ffffff 100%);
  box-shadow: inset 0px 1rpx 0px 0px #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;

  .top-section-news {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 12rpx 20rpx;
    box-sizing: border-box;

    .top-section-img {
      width: 83rpx;
      height: 75rpx;
      padding-right: 10rpx;
      border-right: 1px solid #e7e9eb;

      .image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .swiper-box {
    width: 100%;
    height: 100%;

    .swiper-item {
      display: flex;
      align-items: center;
    }

    .news-item {
      display: flex;
      align-items: center;
      padding-left: 22rpx;

      .num {
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        margin-right: 13rpx;
        text-align: center;
        background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
        border-radius: 5px;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
      }
      .title {
        width: 488rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 500;
        font-size: 26rpx;
        color: #111111;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>