cankao-h5/src/components/vip.vue

<template>
  <view class="vipContainer">
    <!-- 头部 -->
    <view class="vipHeader">
      <!-- 搜索 start -->
      <view class="search">
        <image src="@/static/log_caixun.png" class="logo" mode="aspectFit"></image>
        <u-input v-model="keyWord" prefixIcon="search" prefixIconStyle="color: rgba(255,255,255, 0.8)" style="flex: 1" placeholder="搜索资讯" class="search_input" color="#fff" :placeholderStyle="{ color: 'rgba(255,255,255,0.6)' }" :border="false" @confirm="goSearch" />
      </view>

      <view class="tabsContainer">
        <view v-for="(item, index) in colList" :class="['tabItem', { active: columnIndex === index }]" :key="item.id" @click="handleClickColumn(item.id)">
          <text class="tabName">{{ item.name }}</text>
          <!-- <u-icon v-if="index == 3" name="list" size="16" bold color="#fff"></u-icon> -->
        </view>
      </view>
    </view>

    <!-- 中证投顾子菜单 -->
    <view class="sub-tabs-box" v-if="subColumnList.length != 0">
      <u-tabs
        lineColor="rgba(0,0,0,0)"
        :current="subColumnIndex"
        @click="handleSubColumnChange"
        :list="subColumnList"
        :inactiveStyle="{
          color: '#595959',
          fontSize: '24rpx',
          lineHeight: '44rpx',
          border: '2rpx solid #DBDBDB',
          borderRadius: '36rpx',
          padding: '1px 12px',
        }"
        :activeStyle="{
          color: '#E7303F',
          fontSize: '24rpx',
          lineHeight: '44rpx',
          border: '2rpx solid rgba(0,0,0,0)',
          borderRadius: '36rpx',
          padding: '1px 12px',
          background: 'rgba(255,208,212,0.4)',
        }"
      >
      </u-tabs>
    </view>

    <!-- 列表区域 -->
    <Domestic :hotNewsList="hotNewsList" :newsList="newsList" :columnName="getColumnName" :columnId="columnState.subColumn" :bannerList="bannerList" @onChange="handleChange" />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import { getNewsColumn, getNewsList } from "@/api";
import Domestic from "./domestic.vue";
import { useShareStore } from "@/stores/shareStore";
import { scrollToTop } from "@/utils/util";

const emit = defineEmits(["onChange"]);
const props = defineProps({
  // 栏目列表
  colList: {
    type: Array,
    default: () => [],
  },
  // 当前选中栏目
  columnState: {
    type: Object,
    default: () => {},
  },
});
const curPages = getCurrentPages(); // 当前页面栈
const stores = useShareStore(); // 微信分享store
const keyWord = ref(); // 搜索关键字
const bannerList = ref([]); // banner
const subColumnList = ref([]); // 二级栏目
const hotNewsList = ref([]); // 焦点新闻
const newsList = ref([]); // 全部列表
const pageSize = ref({
  page: 1,
  size: 10,
});
const isBottom = ref(false);

// 栏目索引
const columnIndex = computed(() => {
  const index = props.colList.findIndex((item: any) => item.id == props.columnState.column);
  return index === -1 ? 0 : index;
});
// 子栏目索引
const subColumnIndex = computed(() => {
  const index = subColumnList.value.findIndex((item: any) => item.id == props.columnState.subColumn);
  return index === -1 ? 0 : index;
});

// 获取当前选中的栏目名称
const getColumnName = computed(() => {
  const column = props.colList[columnIndex.value];
  return column ? column.name : "";
});

function goSearch() {
  uni.navigateTo({
    url: "/pages/sreachReq/index?keyWord=" + keyWord.value,
  });
}

// 栏目切换事件
const handleClickColumn = async (id: number) => {
  scrollToTop();
  emit("onChange", id, "column");
  // newsList.value = [];
  // hotNewsList.value = [];
  pageSize.value.page = 1;

  console.log("output >>>>> pageSize.value", pageSize.value.page);

  await getColumn(id);
  await getHotNewsList();
  await getBanner();
  await getList();
  wxShare();
};

// 获取新闻列表
const getList = async () => {
  let column = props.columnState.subColumn != 0 ? props.columnState.subColumn : subColumnList.value[0]?.id;
  // const tag =
  //   props.columnState.subColumn != 0
  //     ? props.columnState.subColumn
  //     : subColumnList.value[0]?.id;
  const parsm = {
    columnId: column || null,
    tagId: null,
    ...pageSize.value,
  };
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  const res = await getNewsList(parsm);
  uni.hideLoading();

  if (res.code === 200) {
    // newsList.value = res.data;

    if (pageSize.value.page == 1) {
      newsList.value = [];
    }

    if (res.data.length !== 0) {
      isBottom.value = false;
      res.data.forEach((item) => {
        item.needpay = false; // 特殊需求：vip栏目下的所有文章，都不需要订阅，可以直接观看  12月15号
        newsList.value.push(item);
      });
    } else {
      isBottom.value = true;
    }
  }
};

onReachBottom(() => {
  if (isBottom.value) return;
  pageSize.value.page++;
  getList();
});

onPullDownRefresh(async () => {
  console.log("🚀 ~ onPullDownRefresh ~ onPullDownRefresh:");
  pageSize.value.page = 1;
  await getList();
  uni.stopPullDownRefresh();
});

// 获取焦点新闻
const getHotNewsList = async () => {
  let column = props.columnState.subColumn != 0 ? props.columnState.subColumn : subColumnList.value[0]?.id;

  // const tag =
  //   props.columnState.subColumn != 0
  //     ? props.columnState.subColumn
  //     : subColumnList.value[0]?.id;
  const parsm = {
    type: 1,
    columnId: column || null,
    tagId: null,
    page: 1,
    size: 9999,
  };

  const res = await getNewsList(parsm);
  if (res.code === 200) {
    hotNewsList.value = res.data;
  }
};

// 获取banner
const getBanner = async () => {
  let column = props.columnState.subColumn != 0 ? props.columnState.subColumn : subColumnList.value[0]?.id;
  const parsm = {
    type: 0,
    columnId: column || null,
    tagId: null,
    page: 1,
    size: 9999,
  };
  const res = await getNewsList(parsm);
  if (res.code === 200) {
    bannerList.value = res.data;
  }
};

// 获取栏目
const getColumn = async (parentId: number) => {
  const colRes = await getNewsColumn({
    isVip: 1,
    parentId,
  });
  // tabValue.value =
  if (colRes.code === 200) {
    subColumnList.value = colRes.data;
  }
};

// 子栏目切换事件
const handleSubColumnChange = (item: any) => {
  emit("onChange", item.id, "subColumn");
  pageSize.value.page = 1;
  getHotNewsList();
  getBanner();
  getList();
  wxShare();
};

const handleChange = () => {
  getHotNewsList();
  getBanner();
  getList();
};

// 微信分享
const wxShare = () => {
  let link = stores.redirectUrl; // 转发重定向基础地址
  let path = curPages[curPages.length - 1].route; // hash路由
  // 格式字符串参数
  let query = encodeURIComponent(
    JSON.stringify({
      tabIndex: 1,
      columnIndex: props.columnState.column,
    })
  );
  link += `?path=${path}&query=${query}`;
  const shareData = {
    title: `中证参考-${props.colList[columnIndex.value]?.name}`,
    desc: "",
    link: link,
    imgUrl: "https://cankao.cs.com.cn/static/share-default.jpg",
  };
  console.log("output >>>>> shareData", shareData);

  stores.initWxConfig(shareData);
};

// 显示页面时
onShow(async () => {
  await getColumn(props.columnState.column);
  await getHotNewsList();
  await getBanner();
  await getList();
  await wxShare();
});
</script>

<style lang="scss" scoped>
.vipContainer {
  // min-height: 100vh;
  background-color: #f5f5f5;

  .vipHeader {
    height: 168rpx;
    background-image: url(@/assets/images/headerBg.png);
    background-size: cover;
    box-sizing: border-box;
    padding: 24rpx 32rpx 6rpx 40rpx;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    position: fixed;
    top: 0;
    z-index: 20;
    width: 100%;
    .search {
      width: 100vw;
      display: flex;
      height: 72rpx;
      gap: 20rpx;
      align-items: center;
      .logo {
        width: 104rpx;
        height: 68rpx;
      }
      .search_icon {
        width: 80rpx;
        height: 60rpx;
        margin-top: 3rpx;
      }

      .search_input {
        background: rgba(255, 255, 255, 0.15);
        height: 70%;
        border-radius: 20rpx;
        padding: 0 20rpx;
        color: #fff;
      }
    }

    .tabsContainer {
      width: 100vw;
      height: 48rpx;
      // border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #fff;
      .tabItem {
        box-sizing: border-box;
        padding-bottom: 9rpx;
        display: flex;
        align-items: center;
        &.active {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% - 22rpx);
            display: block;
            width: 44rpx;
            height: 6rpx;
            background: url("@/assets/images/icon_dot.png") no-repeat center;
            background-size: 100% 100%;
          }
        }
      }
    }
  }

  .menuContainer {
    background-color: #fff;
    box-sizing: border-box;
    padding: 42rpx 0;

    .gridImg {
      width: 96rpx;
      height: 96rpx;
      border-radius: 16rpx;
      background-color: #fff0d5;
      margin-bottom: 15rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 68rpx;
        height: 68rpx;
      }
    }
    .gridText {
      font-size: 12px;
      color: #333;
    }
  }

  .recommendedContainer {
    background-color: #fff;
    box-sizing: border-box;
    padding: 30rpx 42rpx 0 42rpx;

    .recommendedTitle {
      // background-color: red;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      .recommendedIcon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 12rpx;
      }
    }

    .recommendedList {
      box-sizing: border-box;

      .recommendedList-item {
        padding: 30rpx 0;
      }
    }
  }

  .tabsListContainer {
    padding: 12rpx 30rpx;
    background-color: #fff;
  }
}

// 新闻
.articleListModule {
  box-sizing: border-box;
  // padding: 20rpx 30rpx 0 30rpx;
  background-color: #fff;
  margin-top: 24rpx;
  .articleListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx 30rpx 0 30rpx;
    // padding-bottom: 21rpx;
    .headerLeft {
      display: flex;
      align-items: center;
      .articleListTitle {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
      .articleListTabs {
        margin-left: 12rpx;
        .articleListTabsItem {
          ::v-deep {
            .u-tabs__wrapper__nav__item {
              padding: 0 15rpx;
            }
            .u-tabs__wrapper__nav__item__text {
              font-size: 24rpx;
            }
          }
          // font-size: 60rpx !important;
          // background-color: red;
        }
      }
    }
    .select {
      ::v-deep {
        .u-checkbox {
          .u-checkbox__icon-wrap {
            width: 24rpx !important;
            height: 24rpx !important;
          }
          uni-text {
            span {
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}

.u-grid-item {
  &:nth-child(1) {
    .gridImg {
      background-color: #d5f7ff;
    }
  }
  &:nth-child(2) {
    .gridImg {
      background-color: #fff0c2;
    }
  }
  &:nth-child(3) {
    .gridImg {
      background-color: #e2eeff;

      .img {
        width: 62rpx;
        height: 88rpx;
      }
    }
  }
  &:nth-child(4) {
    .gridImg {
      background-color: #d5f7ff;
    }
  }
  &:nth-child(5) {
    .gridImg {
      background-color: #fff0c2;
    }
  }
}

.sub-tabs-box {
  position: fixed;
  top: 168rpx;
  left: 0;
  width: 100%;
  height: 88rpx;
  // overflow: hidden;
  z-index: 19;
  background-color: #ffffff;
  border-bottom: 2rpx solid #f5f5f5;
  box-sizing: border-box;

  ::v-deep {
    .u-tabs__wrapper__nav__item {
      padding: 0 12rpx;
    }
  }
}
</style>