一、在微信小程序和H5、app的头部设置区分
<template>
<view class="detail_container">
<!-- 头部标题 -->
<!-- #ifdef MP-WEIXIN -->
<view class="detail-head" id="header">
<view class="head-main" :style="'padding-top:'+statusBarHeight+'px;height:'+navigationBarHeight+'px'">
<u-icon @click="goBack" name="arrow-left" color="#fff" size="22"></u-icon>
<text class="title">文章详情</text>
</view>
</view>
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
<view class="detail-head" id="header">
<view class="head-main h60">
<u-icon @click="goBack" name="arrow-left" color="#fff" size="22"></u-icon>
<text class="title">文章详情</text>
</view>
</view>
<!-- #endif -->
<scroll-view scroll-y="true" :scroll-top="scrollTop" class="detail-wrap" @scroll="onScroll" :scroll-into-view="status" scroll-with-animation="true" :style="'height:calc(100vh - '+navigationBarHeight+'px' +' - '+ statusBarHeight+'px'+')'">
<view class="detail-contain">
<view class="title_box">
<view class="title" v-html="detailData.title"></view>
<image v-if="!detailData.userLike" class="starImage" @click="collectStar(detailData)" src="@/static/common/images/noStar.png"></image>
<image v-else class="starImage" src="@/static/common/images/stared.png" @click="delStar(detailData.id)"></image>
</view>
<view class="tag_box">
<view>
<view v-for="(item, index) in detailData.hitWordsList" class="tag_item">
{{item}}
</view>
</view>
<view class="tag-right">
<view class="actionButton" @click="outLink(detailData.url)">查看原文</view>
<view class="actionButton" style="margin: 0 0 0 12rpx;" @click="copyText(detailData.url)">复制链接</view>
<image class="eyeImage" src="@/static/common/images/viewed.png"></image>
<text class="date">{{detailData.pv}}</text>
</view>
</view>
<view class="info_box">
<image class="avatarImage" :src="transImage(detailData.type)"></image>
<view class="authorAndDate">
<view class="author">{{detailData.hostName}}</view>
<view class="publicDate">{{detailData.time}} {{detailData.author}}</view>
</view>
</view>
<!-- 锚点设置-->
<view class="tab-anchor">
<view data-id="NAC1" :class="['tabItem', tabIndex === 0 ? 'ItemActive' : '']" @click="getTab(0,$event)">正文信息</view>
<view data-id="NAC2" :class="['tabItem', tabIndex === 1 ? 'ItemActive' : '']" v-if="imageText" @click="getTab(1,$event)">图文识别信息</view>
<view data-id="NAC3" :class="['tabItem', tabIndex === 2 ? 'ItemActive' : '']" v-if="images.length>0" @click="getTab(2,$event)">图片</view>
</view>
<view class="formH3" id="NAC1">
<view class="formH3Point"></view>
<view>正文信息</view>
</view>
<view class="article_box" v-html="text"></view>
<template v-if="imageText">
<view class="formH3" id="NAC2">
<view class="formH3Point"></view>
<view>图文识别信息</view>
</view>
<view class="article_box" v-html="imageText"></view>
</template>
<template v-if="images.length>0">
<view class="formH3" id="NAC3">
<view class="formH3Point"></view>
<view>图片</view>
</view>
<view class="imgs_box" v-for="item in images">
<image class="imgs" :src="item" mode=""></image>
</view>
</template>
</view>
<view class="back-top" @click="scrollToTop" :style="{ display: scrollTop > 100 ? 'block' : 'none' }">
<u-icon class="back-upward" name="arrow-upward" style="display: flex;align-items: center;justify-content: center;margin:0;"></u-icon>
</view>
</scroll-view>
</view>
</template>
<script>
import { transImage } from '@/common/utils.js';
import { favoriteDelete,favoriteAdd } from '@/common/collect.js'
import {
infoOne} from '@/common/api.js'
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
export default {
data() {
return {
transImage,
scrollTop:0,
statusBarHeight:0,
navigationBarHeight: 0,
queryParmas:{
time:'',
id:'',
planId:'',
keyWords:''
},
imageText: '',
text:'',
images: [],
tabIndex: 0,
status: 'NAC1',
detailData: {
}
}
},
async onLoad(options) {
this.queryParmas.time = options.time
this.queryParmas.id = options.id
this.queryParmas.planId = options.planId
this.queryParmas.keyWords = options.keyWords
},
mounted(){
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
const custom = wx.getMenuButtonBoundingClientRect()
// console.log(custom)
// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
// console.log("导航栏高度："+this.navigationBarHeight)
// 总体高度 = 状态栏高度 + 导航栏高度
this.navHeight = this.navigationBarHeight + this.statusBarHeight
// #endif
},
created(){
this.queryDetail()
},
methods: {
scrollToTop() {
// 解决view层不同步的问题
this.$nextTick(function() {
this.scrollTop = 0
});
},
goBack(){
uni.navigateBack({
delta: 1
});
},
onScroll(e) {
this.scrollTop = e.detail.scrollTop;
console.log(this.scrollTop,'1')
if(this.scrollTop == 0){
this.tabIndex = 0
setTimeout(()=>{
this.status = ''
},500)
}
},
// 查看原文
outLink(url) {
uni.navigateTo({
url: '/pages/webview/webview?url=' + url
// page.json定义的路径 传url到webview界面去接收-实现跳转
})
},
// 加入收藏
collectStar(item){
let itemParams = JSON.parse(JSON.stringify(item))
itemParams.esId = itemParams.infoId
itemParams.picUrlList = itemParams.picUrl
delete itemParams.picUrl
favoriteAdd(itemParams).then((res)=>{
uni.showToast({
title:'操作成功',
icon: 'none'
})
setTimeout(()=>{
this.queryDetail()
},500)
})
},
// 取消收藏
delStar(id){
uni.showModal({
content: '确定要取消收藏吗？',
success: (res) => {
if (res.confirm) {
favoriteDelete(id).then((res)=>{
uni.showToast({
title:'操作成功',
icon: 'none'
})
this.queryDetail()
})
}
}
})
},
// 获取详情
async queryDetail(){
uni.showLoading({
title: '加载中'
});
try{
let res = await infoOne(this.queryParmas)
this.detailData = res.detail
this.detailData.hitWordsList = this.detailData.hitWords?this.detailData.hitWords.split(' '):''
this.splitStringByMarker(this.detailData.text)
this.images = this.detailData.picUrl || []
}finally{
uni.hideLoading();
}
},
getTab(val,e){
this.tabIndex= val
let idx = e.currentTarget.dataset.id
this.$set(this,'status', idx)
},
// 获取图文
splitStringByMarker(str) {
// 使用正则表达式查找特定的模式（<<<图文内容>>>）
const regex = /<<<图文内容>>>/;
// 检查字符串中是否包含该模式
if (regex.test(str)) {
// 如果包含，使用split方法切割字符串，并返回切割后的数组
// 注意：split方法默认会移除匹配到的部分，因此如果你需要保留该部分，可能需要用其他方式处理
// 这里假设我们不需要保留匹配到的部分，只是简单地切割
this.text = str.split(regex)[0]
this.imageText = str.split(regex)[1]
} else {
// 如果不包含，可以返回一个特定的值或消息表示没有找到
this.text = str
this.imageText = ''
}
},
// 复制任务链接
copyText(link) {
uniCopy({
content: link,
success: (res) => {
uni.showToast({
title: res,
icon: 'none'
})
},
error: (e) => {
uni.showToast({
title: e,
icon: 'none',
duration: 3000,
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
.detail_container {
background-color: #2e56b8;
// height:100vh;
.detail-contain{
padding: 20rpx;
padding-top: 30rpx;
}
.detail-wrap{
background: #fff;
border-radius: 24rpx 24rpx 0rpx 0rpx;
}
.detail-head{
position: relative;
width: 100%;
// height: 350rpx;
background-color: #2e56b8;
// padding:0 55rpx;
.detail-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.h60{
height: 120rpx;
}
.head-main{
z-index: 100;
padding-top: var(--status-bar-height);
text-align: center;
padding-left: 30rpx;
display: flex;
align-items: center;
color: #fff;
.title{
position: absolute;
transform: translate(-50%,0);
left: 50%;
font-size: 36rpx;
font-weight: bold;
}
}
}
.title_box {
.title {
display: inline-block;
vertical-align: top;
width: calc(100% - 46rpx);
font-family: PingFangSC, PingFang SC;
font-size: 36rpx;
color: #333333;
line-height: 48rpx;
}
.starImage {
width: 32rpx;
height: 32rpx;
display: inline-block;
vertical-align: middle;
margin-left: 14rpx;
}
}
.tag_box {
margin-top: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
.tag-right{
display: flex;
align-items: center;
}
.tag_item {
display: inline-block;
vertical-align: middle;
border-radius: 4rpx;
border: 2rpx solid #2371e8;
height: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #2371e8;
line-height: 32rpx;
padding: 0 10rpx;
margin-right: 10rpx;
}
.actionButton {
display: inline-block;
vertical-align: text-bottom;
background: #ececec;
border-radius: 4rpx;
padding: 6rpx 10rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #666666;
}
.eyeImage {
width: 36rpx;
height: 22rpx;
display: inline-block;
vertical-align: middle;
margin-right: 6rpx;
margin-left: 20rpx;
}
.date {
display: inline-block;
vertical-align: middle;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #999999;
height: 32rpx;
line-height: 32rpx;
}
}
.info_box {
margin-top: 18rpx;
.avatarImage {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.authorAndDate {
display: inline-block;
vertical-align: text-bottom;
margin: 0 32rpx 0 10rpx;
.author {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
height: 32rpx;
line-height: 32rpx;
}
.publicDate {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #999999;
height: 32rpx;
line-height: 32rpx;
}
}
}
.article_box {
margin-top: 12rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #333333;
line-height: 40rpx;
text-indent: 2em;
overflow-y: scroll;
::v-deep img {
width: 100%;
}
}
}
.back-top{
position: fixed;
bottom: 120rpx;
right: 20rpx;
z-index: 200;
padding: 24rpx;
border-radius: 50%;
background: #E1E1E1;
}
.tab-anchor{
padding-top: 20rpx;
padding-left: 20rpx;
margin-top: 10rpx;
margin-bottom: 30rpx;
border-top: 1px solid #ececec;
display: flex;
justify-content:flex-start;
.tabItem{
font-size: 32rpx;
font-weight: bold;
margin-right: 50rpx;
padding-bottom: 10rpx;
}
.ItemActive{
color: #2371e8;
border-bottom: 8rpx solid #2371e8;
}
}
.formH3 {
display: flex;
align-items: center;
margin-bottom: 20rpx;
// padding-bottom: 14rpx;
padding-top: 20rpx;
// border-bottom: 1px solid #EEE;
font-size: 32rpx;
font-weight: bold;
color: #333;
view {
display: inline-block;
vertical-align: middle;
}
.word-title{
margin-right: 6rpx;
}
.formH3Point {
width: 12rpx;
height: 12rpx;
margin-right: 5rpx;
background: #247CFF;
border-radius: 50%;
}
}
.imgs_box{
width: 100%;
height: 100%;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
