cankao-h5/src/pages/detail/indexNewsInfo.vue

<template>
  <view class="container">
    <!-- 导航栏 start -->
    <view class="custom-bav-bar">
      <view class="left">
        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon"
          @click="handleBack" />
      </view>
      <view class="center">
        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/detail_logo.png" class="logo_icon" />
      </view>
    </view>

    <!-- 文章正文 start -->
    <Article :data="data" />
    <!-- 分割 -->
    <view class="line"></view>
    <!-- 推荐栏目 -->
    <!-- <Column
      :data="columnList"
      :columnName="columnName"
      @doDetail="jumpDetail"
      @doAll="jumpAll"
    /> -->

    <!-- 底部栏 评论 / 收藏 -->
    <!-- <Comment
      :data="data"
      @handleClickLike="handleClickLike"
      @handleClickStar="handleClickStar"
    /> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onReachBottom } from "@dcloudio/uni-app";
import {
  fetchArticleDetail,
  fetchArticleLike,
  fetchArticleFavorate,
} from "@/api/detail";
import { getNewsList } from "@/api";
import Article from "@/components/article/indexNewsInfo.vue";
import Column from "@/components/column/index.vue";
import Comment from "@/components/comment/index.vue";
import { useShareStore } from "@/stores/shareStore";
import { Session } from "@/utils/storage";
const stores = useShareStore();
const curPages = getCurrentPages();

const data = ref<any>({});
const newType = ref<any>("");
const columnList = ref<any>([]);
const columnName = ref("");

onReachBottom(() => {
  console.log("🚀 ~ onReachBottom ~ onReachBottom:");
});

onLoad(async (option: any) => {
  uni.pageScrollTo({
    scrollTop: 0,
  });
  newType.value = option.type || 14;
  const res = await fetchArticleDetail({
    id: option.id,
  });

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

    res.data.content = res.data.content.replace(/\n{3,}/g, '\n');

    columnName.value = res.data.columnName1;
    newList(res.data.columnId1);
    wxShare();
  }
});

const newList = async (columnId: number) => {
  const res = await getNewsList({
    type: 99,
    columnId,
    page: 1,
    size: 5,
  });

  if (res.code === 200) {
    // console.log(res.data)
    columnList.value = res.data;
  }
};

// 点赞
const handleClickLike = async () => {
  // console.log("=== 点赞 ===")
  const res = await fetchArticleLike({
    id: data.value.id,
    likeFlag: data.value.isLike,
  });
  if (res.code === 200) {
    data.value.isLike = data.value.isLike ? 0 : 1;
    data.value.likeNums = data.value.isLike
      ? data.value.likeNums + 1
      : data.value.likeNums - 1;
  }
};

// 收藏
const handleClickStar = async () => {
  const res = await fetchArticleFavorate({
    id: data.value.id,
    favFlag: data.value.isFav,
  });
  if (res.code === 200) {
    data.value.isFav = data.value.isFav ? 0 : 1;
    data.value.favNums = data.value.isFav
      ? data.value.favNums + 1
      : data.value.favNums - 1;
  }
};

const wxShare = () => {
  let link = stores.redirectUrl;
  let path = curPages[curPages.length - 1].route;
  let query = encodeURIComponent(
    JSON.stringify({
      id: data.value.id,
      type: newType.value,
    })
  );
  link += `?path=${path}&query=${query}`;
  // console.log("🚀 ~ WXconfig ~ link:", link);
  const shareData = {
    title: data.value.title,
    desc: "天下事 秒知道",
    link: link,
    imgUrl: "https://cankao.cs.com.cn/static/share-default.jpg",
  };
  console.log("output >>>>> initWxConfig", shareData);

  stores.initWxConfig(shareData);
};

// 导航栏路由返回
const handleBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};

// 点击全部跳转
const jumpAll = () => {
  const __menuStateConfig = Session.get("menuStateConfig");

  if (__menuStateConfig) {
    for (const key in __menuStateConfig) {
      const __item = __menuStateConfig[key];

      __item.active = __item.id == 1;
      __item.column = __item.active ? data.value.columnId2 : 0;
      __item.subColumn = __item.active ? data.value.columnId1 : 0;
    }

    Session.set("menuStateConfig", __menuStateConfig);

    uni.redirectTo({
      url: `/pages/home/index`,
    });
  } else {
    uni.redirectTo({
      url: `/pages/home/index?tabIndex=1&columnIndex=${data.value.columnId2}&subColumnIndex=${data.value.columnId1}`,
    });
  }
};

// 跳转详情
const jumpDetail = (item: any) => {
  // console.log(item)
  uni.navigateTo({
    url: `/pages/detail/index?id=${item.id}`,
  });
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;

  .line {
    height: 16rpx;
    background-color: #f5f5f5;
  }
}

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

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

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

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

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    // font-size: 28rpx;
    font-size: var(--h2-font-size);
    color: #333;
  }
}

.container {
  // background-color: #f5f5f5;
  padding-bottom: 112rpx;
  box-sizing: border-box;
}
</style>