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" :isDomestic="isDomestic" />
    <!-- 分割 -->
    <view class="line"></view>
    <!-- 推荐栏目 -->
    <!-- <Column
      :data="columnList"
      :columnName="columnName"
      @doDetail="jumpDetail"
      @doAll="jumpAll"
    /> -->

    <!-- 底部栏 评论 / 收藏 -->
    <Comment
      v-if="isLogin && !isDomestic && userType == 1"
      :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, onShareTimeline, onShow } from "@dcloudio/uni-app";
import { onReachBottom } from "@dcloudio/uni-app";
import { fetchArticleDetail, fetchArticleLike, fetchArticleFavorate } from "@/api/detail";
import { getNewsList, doShare, getDomesticDetail } 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:");
});

// 1：经理用户、2：普通用户
const userType = ref(2);
const isDomestic = ref<boolean>(false);
onLoad(async (option: any) => {
  uni.pageScrollTo({
    scrollTop: 0,
  });
  if (option?.type == "guonei") {
    isDomestic.value = true;
    let res = await getDomesticDetail({ id: option.id });
    if (res.code === 200) {
      data.value = res.data;

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

      columnName.value = data.columnName1;
    }
  } else {
    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();
    }
  }
  if (option?.phone) {
    uni.setStorageSync("token", option.phone);
    // 去除链接中的phone字段
    let url = window.location.href;
    url = url.replace(/phone=[^&]+&?/i, "");
    // 刷新本页面
    window.location.href = url;
    window.location.reload();
  }

  // 1：经理用户、2：普通用户
  if (option?.userType) {
    userType.value = option.userType;
  }

  if (option?.userType == 2) {
    // 打开页面时链接中带有time字段，表示上次分享的时间
    let shareTime = option?.time || 0;
    // 现在的时间对比上次的分享时间，如果超过24小时，则刷新推荐栏目
    if (uni.getStorageSync("token") && Date.now() - shareTime > 24 * 60 * 60 * 1000) {
      uni.removeStorageSync("token");
      // 1766373354519
      window.location.reload();
    }
  }

  console.log("准备发送消息到小程序");
  if (typeof wx !== "undefined" && wx.miniProgram) {
    wx.miniProgram.postMessage({
      data: {
        type: "share_info",
        userType: option?.userType || null,
        phone: option?.phone || null,
        id: option?.id || null,
      },
    });
    console.log("消息已发送");
  } else {
    console.log("非微信小程序环境，无法发送消息");
  }
});

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,
    phone: uni.getStorageSync("token"),
  });
  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",
  });
}

import { useTimerStore } from "@/stores/timerStore";

// function initWxConfig() {
//   getWeChatSdkData({ url: window.location.href }).then((res: any) => {
//     const data: IWxConfig = res.data;
//     console.log("🚀 ~ getWeChatSdkData ~ data:", data);
//     wx.config({
//       debug: false,
//       appId: data.appId,
//       timestamp: data.timestamp,
//       nonceStr: data.nonceStr,
//       signature: data.signature,
//       jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareTimeline", "onMenuShareAppMessage"],
//     });

//     this.wxReady(this.shareData);

//     wx.error((err) => {
//       console.log("🚀 ~ err:", err);
//     });
//   });
// }

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