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

<template>
  <view class="container">
    <view
      :style="{
        height: getNavHeight() + 'px',
        position: 'sticky',
        top: 0,
        background: '#fff',
        zIndex: '9999',
      }"
    >
    </view>

    <!-- 导航栏 start -->
    <view
      class="custom-bav-bar"
      :style="{
        position: 'sticky',
        top: getNavHeight() + 'px',
        background: '#fff',
        zIndex: '9999',
      }"
    >
      <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
      v-if="isLogin"
      :data="data"
      @handleClickLike="handleClickLike"
      @handleClickStar="handleClickStar"
    />

    <view class="login_unlock" v-if="!isLogin">
      <view class="r_image">
        <image
          src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/lock_banner%402x.png"
        ></image>

        <view class="image_text">
          <text class="image_text_title">登录解锁</text>
          <text class="image_text_sub_title"
            >海外独家资讯内容，登录后可查阅全文</text
          >
        </view>
      </view>
      <view class="login_unlock_btn" @click="goLogin">立即登录</view>
    </view>
  </view>
</template>

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

const stores = useShareStore();
const curPages = getCurrentPages();
const isLogin = ref<boolean>(uni.getStorageSync("token") ? true : false);

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,
    // id: 763,
  });

  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}`,
  });
};

function goLogin() {
  uni.navigateTo({
    url: "/pages/login/indexMini",
  });
}

onShareAppMessage(async (res) => {
  console.log("🚀 ~ res:", res);
  console.log("🚀 ~  data.value:", data.value);

  let { code } = await doShare({
    id: data.value.id,
  });
  return {
    title: data.value.title, //标题
    path: "/page/detail/indexNewsInfo?id=" + data.value.id, //可以指定动态路径
    imageUrl:
      "https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_pic_1%402x.png", //分享图
  };
});
</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;
}

.comment-count {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .count {
    display: flex;
    align-items: center;
    margin-left: 24rpx;

    .num {
      margin-left: 12rpx;
      // font-size: 24rpx;
      font-size: var(--h4-font-size);
      color: #333;
    }
  }

  .icon {
    width: 48rpx;
    height: 48rpx;
  }
}

.login_unlock {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;

  .r_image {
    position: relative;
    color: white;

    .image_text {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      z-index: 99;
      display: flex;
      flex-direction: column;
      text-align: start;
      justify-content: center;
      margin-left: 100rpx;
      height: 65%;
    }

    .image_text_title {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 42rpx;
      text-shadow: 0px 2px 8px rgba(43, 51, 75, 0.35);
      text-align: left;
      font-style: normal;
    }

    .image_text_sub_title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #b5bed5;
      line-height: 33rpx;
      text-shadow: 0px 2px 8px rgba(43, 51, 75, 0.35);
      text-align: left;
      font-style: normal;
    }

    image {
      width: 78vw;
      height: 128rpx;
      margin-bottom: 60rpx;
    }
  }

  .login_unlock_btn {
    width: 80%;
    height: 88rpx;
    background: #d13e3c;
    border-radius: 44rpx;

    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 45rpx;
    text-align: center;
    font-style: normal;

    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}
</style>