cankao-h5/src/pages/minihome/index.vue

<template>
  <!-- 顶部 banner 区域 -->
  <view class="all">
    <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image>

    <view
      :style="{
        height: getNavHeight() + 'px',
        backgroundColor: isScroll ? '#fff' : 'transparent',
        position: 'sticky',
        top: 0,
        zIndex: '999999',
      }"
      v-if="tabIndex == 0 || tabIndex == 2"
    ></view>
    <view
      :style="{
        height: getNavHeight() + 'px',
        backgroundColor: '#fff',
        position: 'sticky',
        top: 0,
        zIndex: '999999',
      }"
      v-else
    ></view>

    <view class="content">
      <view
        :style="{
          position: 'sticky',
          top: getNavHeight() + 'px',
          backgroundColor: isScroll ? '#fff' : 'transparent',
          zIndex: '9999',
        }"
        v-if="tabIndex == 0 || tabIndex == 2"
      >
        <!-- <view class="r_sreach">
          <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png">
          </image>

          <view class="sreach" @click="goSreach" v-if="tabIndex == 0">
            <view class="sreach_icon">
              <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
            </view>
            <view class="sreach_text">
              <text>搜索资讯</text>
            </view>
          </view>
        </view> -->

        <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; padding-bottom: 30rpx">
          <Tabs></Tabs>
        </view> -->
      </view>

      <view class="r_tab">
        <view style="display: flex; align-items: center; gap: 15rpx">
          <view class="tab_item" @click="tabIndex = 0">海外资讯</view>
          <view class="tab_item" @click="tabIndex = 1">国内资讯</view>
        </view>
        <view class="r_sreach">
          <view class="sreach" @click="goSreach" v-if="tabIndex == 0">
            <view class="sreach_icon">
              <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
            </view>
            <view class="sreach_text">
              <text>搜索资讯</text>
            </view>
          </view>
        </view>
      </view>

      <view style="margin-top: 30rpx" v-if="tabIndex == 0">
        <RankListMini :newsList="newsList"></RankListMini>
      </view>
      <!-- 列表区域 -->
      <view style="margin-top: 50rpx" v-if="tabIndex == 2">
        <Domestic />
      </view>

      <MineMini v-if="tabIndex == 1" @logout="tabIndex = 0"></MineMini>
    </view>

    <!-- <Tabbar :tabIndex="tabIndex" @tabChange="tabChange"></Tabbar> -->
  </view>
</template>

<script setup>
import { ref, onMounted, defineAsyncComponent, reactive } from "vue";
import Tabbar from "@/components/mini/Tabbar.vue";
import Navbar from "@/components/mini/Navbar.vue";
import RankListMini from "@/components/RankListMini.vue";
// const Mine = defineAsyncComponent(() => import("@/components/mine.vue"));
import MineMini from "@/components/mineMini.vue";
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",
  // "https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/banner1.png",
  // "https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/banner1.png",
]);

const newsList = ref([]);
// 概念标签贴标
async function getNewsList() {
  newsList.value = await getTopNews({});
  uni.stopPullDownRefresh();
}

const tabIndex = ref(0);
function tabChange(index) {
  tabIndex.value = index;

  switch (index) {
    case 0:
      getNewsList();
      break;
    case 1:
      break;
    case 2:
      uni.setStorageSync("homeTabIndex", 2);
      break;
  }
}

function goSreach() {
  if (uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/sreachReq/index",
    });
  } else {
    uni.navigateTo({
      url: "/pages/login/indexMini",
    });
  }
}

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

onShow(() => {
  if (uni.getStorageSync("homeTabIndex") == 1 || uni.getStorageSync("homeTabIndex") == 2) {
    tabChange(uni.getStorageSync("homeTabIndex"));
  } else {
    tabChange(0);
  }

  uni.setStorageSync("homeTabIndex", null);
});

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

<style scoped lang="scss">
.top_bk {
  width: 100%;
  height: 300rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 99999;
  padding-bottom: 300rpx;

  .r_sreach {
    display: flex;
    align-items: center;
  }

  .logo_text {
    width: 88rpx;
    height: 45rpx;
  }

  .sreach {
    display: flex;
    align-items: center;
    padding: 0rpx 30rpx;
    border-radius: 100rpx;
    width: 27vw;
    height: 58rpx;
    margin-left: 20rpx;
    background-color: #f6f6f6;
  }

  .sreach_icon {
    margin-right: 10rpx;
    display: flex;
    align-items: center;

    image {
      width: 35rpx;
      height: 35rpx;
    }
  }

  .sreach_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 33rpx;
    text-align: left;
    font-style: normal;
  }
}

.r_tab {
  display: flex;
  align-items: center;
  height: 80rpx;
  padding: 0 30rpx;
  background-color: white;
  justify-content: space-between;
  padding-top: 20rpx;

  .tab_item {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #000;
    line-height: 33rpx;
    text-align: left;
    font-style: normal;
  }
}
</style>