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

<template>
  <view class="news-section">
    <swiper
      class="news-section-swiper"
      circular
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      indicator-color="rgba(199, 199, 199, 1)"
      indicator-active-color="#3F80FA"
    >
      <swiper-item v-for="(item, index) in data" :key="index">
        <view class="swiper-item" @click.stop="goDetail(item)">
          <view class="source">
            <view>
              <text class="label">来自</text>
              <text class="name">中国证券报</text>
            </view>
            <view>
              <text>{{ item.timeStr }}</text>
            </view>
          </view>
          <view class="title">{{ item.title }}</view>
          <view class="content">{{ item.summary }}</view>
          <view class="tag">
            <text class="txt">{{ item.companyName }}</text>
            <!-- <text class="txt">#三星生物制药</text> -->
          </view>
          <view class="industry" v-if="item?.stocks && item?.stocks.length > 0">
            <text class="txt" v-for="stock in item?.stocks">{{
              maskStockNameProportional(stock?.name)
            }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import { getForeignList } from "@/api";
import { useUserStore } from "@/stores/user";
import { maskStockNameProportional } from "@/utils/util";
import { onMounted, ref } from "vue";

const emit = defineEmits(["onShow"]);

const userStore = useUserStore();
// 跳转详情
function goDetail(item: any) {
  if (userStore.isLogin) {
    uni.navigateTo({
      url: `/pages/detail/indexNewsInfo?id=${item.id}`,
    });
  } else {
    emit("onShow");
  }
}

const data = ref([]);
const getList = async () => {
  const result = await getForeignList({});
  if (result.code === 200) {
    const { list, total } = result.data;
    for (const item of list) {
      for (const o of item.list) {
        data.value.push(o);
        if (data.value.length >= 3) {
          break;
        }
      }
      if (data.value.length >= 3) {
        break;
      }
    }
  }
};

onMounted(async () => {
  getList();
});
</script>

<style scoped lang="scss">
.news-section {
  width: 710rpx;
  height: 522rpx;
  margin: 0 20rpx 20rpx;
  padding: 87rpx 54rpx 0 24rpx;
  background-image: url("@/assets/images/page/banner-2@2x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;

  .news-section-swiper {
    width: 100%;
    height: 435rpx;

    :deep(.uni-swiper-dot) {
      width: 11rpx;
      height: 6rpx;
      background: #c7c7c7;
      border-radius: 8px;
      margin-right: 8rpx;
      transition: width 0.3s;
    }

    :deep(.uni-swiper-dot-active) {
      width: 40rpx;
    }

    .swiper-item {
      padding: 30rpx;
    }

    .source {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 400;
      font-size: 24rpx;
      line-height: 33rpx;

      .label {
        margin-right: 2rpx;
        color: #999999;
      }
      .name {
        color: #333333;
      }
      .time {
        color: #666664;
      }
    }
    .title {
      margin-bottom: 10rpx;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 500;
      font-size: 30rpx;
      color: #222222;
      line-height: 42rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .content {
      margin-bottom: 14rpx;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 400;
      font-size: 24rpx;
      color: #666664;
      line-height: 33rpx;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
    .tag {
      display: flex;
      margin-bottom: 22rpx;
      .txt {
        margin-right: 16rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 400;
        font-size: 24rpx;
        color: #d6a68c;
        line-height: 33rpx;
      }
    }
    .industry {
      display: flex;
      .txt {
        padding: 8rpx 12rpx;
        background: #ffffff;
        border-radius: 4px;
        margin-right: 16rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 400;
        font-size: 24rpx;
        color: #5c5c5b;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>