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

<template>
  <view class="page-container">
    <!-- 导航栏 start -->
    <view class="custom-bav-bar">
      <view class="left">
        <u-icon name="arrow-left" color="#666" size="36rpx" @click="handleBack" />
      </view>
      <view class="center"> 宏观知微 </view>
    </view>
    <!-- 导航栏 end -->

    <!-- 标题 start -->
    <view class="page-title">
      <view class="hide">挖掘核心投资资产 提供决策先手信息</view>
    </view>
    <!-- 标题 end -->

    <view class="page-main">
      <view class="news-list" v-if="data?.length > 0">
        <template v-for="(item, index) in data" :key="index">
          <view
            :class="['news-item', { mask: !userStore.isLogin }]"
            v-for="news in item.list"
            :key="news.id"
            @click="goDetail(news)"
          >
            <view class="title">
              <view class="icon">宏观</view>
              <view class="name">
                {{ news.title }}
              </view>
            </view>
            <view :class="['content', { mask: isMask }]">
              {{ news.summary }}
            </view>
            <view :class="['source', { mask: isMask }]">
              <view>中国证券报</view>
              <view>{{ `${item.day} ${news.timeStr}` }}</view>
            </view>
          </view>
        </template>
      </view>
      <u-empty v-else />
      <u-loading-icon
        v-if="!isBottom && loading"
        mode="circle"
        text="加载中..."
        textSize="26rpx"
        textColor="#999999"
        color="rgba(23, 119, 255, 1)"
        size="28rpx"
      ></u-loading-icon>
    </view>
    <!-- 登录弹窗 start -->
    <LoginDialog
      :show="LoginShow"
      @onSuccess="handleLoginSuccess"
      @onCancel="handleLoginCancel"
      @onError="handleLoginError"
    />
    <!-- 登录弹窗 end -->
  </view>
</template>

<script setup lang="ts">
import { getMacroList } from "@/api";
import { useUserStore } from "@/stores/user";
import { computed, onMounted, reactive, ref } from "vue";
import LoginDialog from "@/components/loginPopup/index.vue";
import { onReachBottom } from "@dcloudio/uni-app";
// 导航栏路由返回
const handleBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};

const userStore = useUserStore();
// 未登录|试用，显示蒙层
const isMask = computed(() => {
  return !userStore.isUserType;
});

const LoginShow = ref(false);
// 显示弹框
const handleShowLogin = () => {
  LoginShow.value = true;
};

// 关闭弹框
const handleLoginCancel = () => {
  LoginShow.value = false;
};
// 登录成功之后的回调
const handleLoginSuccess = () => {
  LoginShow.value = false;
};
// 登录失败之后的回调
const handleLoginError = () => {
  console.log("登录失败");
};
// 跳转详情
function goDetail(item: any) {
  if (!userStore.isLogin) {
    handleShowLogin();
    return;
  }

  // 试用账号
  if (!userStore.isUserType) {
    return;
  }

  uni.navigateTo({
    url: `/pages/detail/indexNewsInfo?id=${item.id}`,
  });
}

const data = ref([]);
const loading = ref(false);
const keyword = ref("");
const isBottom = ref(false);
const pages = reactive({
  page: 1,
  size: 20,
  total: 0,
});
const getList = async () => {
  loading.value = true;
  const result = await getMacroList({
    keyword: keyword.value,
    page: pages.page,
    size: pages.size,
  });
  loading.value = false;
  if (result.code === 200) {
    const { list, total } = result.data;
    data.value = [...data.value, ...list];
    pages.total = Math.ceil(total / pages.size);
    isBottom.value = pages.page >= pages.total;
  } else {
    data.value = [];
  }
};

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

onMounted(async () => {
  if (!userStore.isLogin) {
    handleShowLogin();
  }
  getList();
});
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  background-color: #fff;
  background-image: url("@/assets/images/page/page_3@2x.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.custom-bav-bar {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .back_icon {
    width: 36rpx;
    height: 36rpx;
  }

  .logo_icon {
    width: 168rpx;
    height: 36rpx;
    margin-right: 6rpx;
  }

  .left {
    position: absolute;
    top: 24rpx;
    left: 32rpx;
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "PingFangSC, PingFang SC";
    font-weight: 500;
    font-size: 34rpx;
    color: #222222;
    line-height: 36rpx;
  }
}

.page-title {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 202rpx;
  margin-bottom: 10rpx;

  .hide {
    display: none;
    opacity: 0;
  }
}

.page-main {
  width: 100%;
  padding: 30rpx 30rpx 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0px 0px;
  overflow: hidden;
  box-sizing: border-box;

  .mask {
    filter: blur(5px);
  }

  .news-item {
    width: 100%;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #f3f3f5;
    box-sizing: border-box;

    &:last-child {
      border-bottom: none;
    }

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      .icon {
        padding: 2rpx 8rpx 7rpx;
        font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
        font-weight: bold;
        font-size: 24rpx;
        color: #fffdf9;
        line-height: 34rpx;
        background: #ff9d2f;
        border-radius: 4rpx;
        margin-right: 10rpx;
      }

      .name {
        flex: 1;
        width: 564rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        line-height: 40rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
      }
    }

    .content {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 16rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      line-height: 33rpx;
    }

    .source {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 400;
      font-size: 22rpx;
      color: #999999;
      line-height: 30rpx;
    }
  }
}
</style>