471 lines
11 KiB
Vue
471 lines
11 KiB
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) {
|
||
console.log("🚀 ~ Date.now():", Date.now());
|
||
// 打开页面时链接中带有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();
|
||
}
|
||
}
|
||
});
|
||
|
||
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>
|