You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
484 lines
11 KiB
484 lines
11 KiB
<template>
|
|
<view class="details">
|
|
|
|
<view class="topContent">
|
|
<!-- 这里是状态栏 -->
|
|
<view class="status_bar"></view>
|
|
<u-navbar height="50" :autoBack="true" :bgColor="tagList.length>0?'transparent':'#ffffff'">
|
|
<view
|
|
class="u-nav-slot"
|
|
slot="left"
|
|
|
|
|
|
>
|
|
<u-icon
|
|
name="arrow-left"
|
|
size="19"
|
|
:color="tagList.length>0?'#ffffff':'#000000'"
|
|
></u-icon>
|
|
<view class="title" :style="{background: 'transparent',color:tagList.length>0?'#ffffff':'#000000'}">
|
|
详情
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="" v-if="tagList.length>0">
|
|
<image :src="baseUrl+titleInfo.listimage" class="listImage" mode="aspectFill"></image>
|
|
<view class="listImage" style="background: rgba(0, 0, 0, 0.5);">
|
|
|
|
</view>
|
|
<view class="schoolItem">
|
|
<image :src="logo" class="logo" mode="aspectFill"></image>
|
|
<view class="textContentInfo">
|
|
<view class="itemTitle">{{titleInfo.title}}</view>
|
|
<view class="itemSubTitle" v-html="titleInfo.sectitle"></view>
|
|
</view>
|
|
<view class="tagListContent">
|
|
<view class="tagItem" v-for="(item,index) in tagList" :key="index" @click="getArticleText(item,index)">
|
|
<image :src="item.icon" class="tagImage" mode="aspectFill"></image>
|
|
<text :class="index==activeIndex?'activeText':''">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="detailContent">
|
|
<view class="detailTitle">
|
|
{{activeText}}
|
|
</view>
|
|
<view class="tools">
|
|
<view class="time">
|
|
<!-- {{titleInfo.updatetime}} -->
|
|
</view>
|
|
<view class="toolItem">
|
|
<view class="" @click="addCollect">
|
|
<image src="/static/m1.png" mode="widthFix" v-if="!isCollect"></image>
|
|
<image src="/static/collected.png" mode="widthFix" v-else></image>
|
|
<text>收藏</text>
|
|
</view>
|
|
<view class="" @click="addShare">
|
|
<image src="/static/m3.png" mode="widthFix"></image>
|
|
<text>分享</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-parse :content="titleInfo.content"></u-parse>
|
|
</view>
|
|
</view>
|
|
<view class="detailContent" style="margin-top:120upx" v-if="tagList.length==0">
|
|
<view class="detailTitle">
|
|
{{titleInfo.title}}
|
|
</view>
|
|
<view class="tools">
|
|
<view class="time">
|
|
{{titleInfo.updatetime}}
|
|
</view>
|
|
<view class="toolItem">
|
|
<view class="" @click="addCollect">
|
|
<image src="/static/m1.png" mode="widthFix" v-if="!isCollect"></image>
|
|
<image src="/static/collected.png" mode="widthFix" v-else></image>
|
|
<text>收藏</text>
|
|
</view>
|
|
<view class="" @click="addShare">
|
|
<image src="/static/m3.png" mode="widthFix"></image>
|
|
<text>分享</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-parse :content="titleInfo.content"></u-parse>
|
|
</view>
|
|
</view>
|
|
<!-- -->
|
|
|
|
<view class="bottomContent" v-if="showBottom">
|
|
<view class="left">
|
|
<image src="../../static/lxwx.png" mode="widthFix"></image>
|
|
<text>APP下载</text>
|
|
</view>
|
|
<view class="btn" @click="downloadAppHandle">
|
|
下载
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast"></u-toast>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {downloadApp,articleDetails,addCollect,addShare,getNavList} from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showBottom:false,
|
|
titleInfo:{},
|
|
id:null,
|
|
isCollect:false,
|
|
menu_id:null,
|
|
tagList:[],
|
|
logo:null,
|
|
activeIndex:0,
|
|
activeText:''
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id;
|
|
this.menu_id = option.menu_id;
|
|
this.logo = option.logo
|
|
this.$store.commit('shareHandle',this.$mp.page.route+'?id='+this.$mp.page.options.id)
|
|
|
|
this.getNavList()
|
|
// H5:
|
|
// #ifndef APP-PLUS
|
|
this.showBottom = true
|
|
// #endif
|
|
},
|
|
methods:{
|
|
//获取菜单导航
|
|
getNavList(){
|
|
getNavList({menu_id:this.menu_id}).then(res=>{
|
|
console.log(res);
|
|
this.tagList = res;
|
|
if(this.tagList.length>0){
|
|
this.activeText = this.tagList[0].name
|
|
this.articleDetails(this.tagList[0].id)
|
|
}else{
|
|
this.articleDetails()
|
|
}
|
|
|
|
})
|
|
},
|
|
backHandle(){
|
|
console.log("999")
|
|
uni.navigateBack({delta: 1})
|
|
},
|
|
downloadAppHandle(){
|
|
downloadApp().then(res=>{
|
|
let u = navigator.userAgent
|
|
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android
|
|
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS
|
|
if(isAndroid){
|
|
window.location.href = res.android
|
|
}
|
|
if(isIOS){
|
|
window.location.href = res.ios
|
|
}
|
|
console.log(res)
|
|
})
|
|
},
|
|
addCollect(){
|
|
|
|
let params={
|
|
wx_article_id:this.titleInfo.id,
|
|
wx_category_id:this.titleInfo.wx_category_id
|
|
}
|
|
uni.$u.http.post('http://lxwx.njrenzhou.cn/api/wx_article_collect/add',
|
|
params,
|
|
{
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'token':uni.getStorageSync('userInfo').token
|
|
},
|
|
}).then((res) => {
|
|
this.$refs.uToast.show({
|
|
message:"收藏成功"
|
|
})
|
|
this.isCollect = true
|
|
}).catch((res) =>{
|
|
|
|
})
|
|
|
|
},
|
|
addShare(){
|
|
if(!uni.getStorageSync('userInfo')){
|
|
uni.showToast({
|
|
title:'请登录后操作',
|
|
icon:'none'
|
|
});
|
|
uni.navigateTo({
|
|
url:"/pages/login/login"
|
|
})
|
|
return;
|
|
}
|
|
|
|
let routes = this.$mp.page.route;
|
|
console.log(routes)
|
|
let that = this;
|
|
// ifdef APP
|
|
uni.share({
|
|
provider:'weixin',//分享服务提供商（即weixin|qq|sinaweibo）
|
|
type:0,//图文
|
|
scene:'WXSceneSession',//provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
|
|
title:this.titleInfo.title,//分享内容的标题
|
|
summary:this.titleInfo.title,//分享内容的摘要
|
|
href:`http://lxwx.h5.njrenzhou.cn/#/${routes}?id=${this.titleInfo.wx_category_id}&menu_id=${this.menu_id}&logo=${this.logo}`,//跳转链接，type 为 0 时必选
|
|
imageUrl:`http://lxwx.njrenzhou.cn${this.titleInfo.listimage}`,//图片地址，type 为 0、2、5 时必选
|
|
success(res) {
|
|
//成功返回的参数
|
|
let params={
|
|
wx_article_id:that.titleInfo.id,
|
|
wx_category_id:that.titleInfo.wx_category_id
|
|
}
|
|
uni.$u.http.post('http://lxwx.njrenzhou.cn/api/wx_article_share/add',
|
|
params,
|
|
{
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'token':uni.getStorageSync('userInfo').token
|
|
},
|
|
}).then((res) => {
|
|
that.$store.commit('shareHandle',this.$mp.page.route+'?id='+this.$mp.page.options.id)
|
|
that.$refs.uToast.show({
|
|
message:"分享成功"
|
|
})
|
|
}).catch((res) =>{
|
|
|
|
})
|
|
},
|
|
fail(err) {
|
|
//失败返回的参数
|
|
console.log(err);
|
|
}
|
|
})
|
|
// endif
|
|
// let params={
|
|
// wx_article_id:this.titleInfo.id,
|
|
// wx_category_id:this.titleInfo.wx_category_id
|
|
// }
|
|
// addShare(params,{ custom: { auth: true }}).then(res=>{
|
|
// console.log(res,"iiiii")
|
|
// })
|
|
},
|
|
articleDetails(navId){
|
|
// let params={ids:this.id}
|
|
// uni.$u.http.post('http://lxwx.njrenzhou.cn/api/wx_article_collect/add',
|
|
// params,
|
|
// {
|
|
// header: {
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
// 'token':uni.getStorageSync('userInfo').token
|
|
// },
|
|
// }).then((res) => {
|
|
// this.$refs.uToast.show({
|
|
// message:"收藏成功"
|
|
// })
|
|
// this.isCollect = true
|
|
// }).catch((res) =>{
|
|
|
|
// })
|
|
// {custom: { auth: true }}
|
|
let params;
|
|
if(navId){
|
|
params={ids:this.id,nav_id:navId}
|
|
}else{
|
|
params = {ids:this.id}
|
|
}
|
|
articleDetails(params).then(res=>{
|
|
this.titleInfo = res;
|
|
if(res.is_collect==0){
|
|
this.isCollect = false
|
|
}else{
|
|
this.isCollect = true;
|
|
}
|
|
this.titleInfo.updatetime = this.getFormatDate(this.titleInfo.updatetime)
|
|
})
|
|
},
|
|
getFormatDate(time) {
|
|
let d = new Date(time*1000);
|
|
let Y = d.getFullYear();
|
|
let M = d.getMonth() + 1; // 月份获取是0-11，所以+1
|
|
let D = d.getDate();
|
|
let h = d.getHours();
|
|
let m = d.getMinutes();
|
|
let s = d.getSeconds();
|
|
return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
|
|
},
|
|
getArticleText(val,index){
|
|
console.log(val,index)
|
|
this.activeIndex = index;
|
|
this.activeText = val.name
|
|
this.articleDetails(val.id)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.details{
|
|
min-height:calc(100vh);
|
|
// background-color: #ffffff;
|
|
}
|
|
.topContent{
|
|
padding-bottom: 140upx;
|
|
position: relative;
|
|
.listImage{
|
|
width:100%;
|
|
// height:100%;
|
|
height:calc(60vh);
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
z-index:9
|
|
// opacity: 0.6;
|
|
}
|
|
.schoolItem{
|
|
position:relative;
|
|
z-index:10;
|
|
padding:0 24upx;
|
|
.logo{
|
|
border-radius: 50%;
|
|
width:160upx;
|
|
height:160upx;
|
|
margin-top:110upx;
|
|
}
|
|
.textContentInfo{
|
|
margin-top:10upx;
|
|
.itemTitle{
|
|
font-size: 30upx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
.itemSubTitle{
|
|
font-size: 24upx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
margin-top: 14upx;
|
|
}
|
|
}
|
|
.tagListContent{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
.tagItem{
|
|
// width:25%;
|
|
display: flex;
|
|
flex: 0 0 24%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: calc(4% / 3);
|
|
margin-bottom: calc(4% / 3);
|
|
margin-top:20upx;
|
|
&>image{
|
|
width:80upx;
|
|
height:80upx;
|
|
border-radius:50%;
|
|
}
|
|
&>text{
|
|
color:#ffffff;
|
|
font-size:24upx;
|
|
margin-top:10upx;
|
|
}
|
|
.activeText{
|
|
color:#0076F6 !important;
|
|
}
|
|
}
|
|
.tagItem:nth-child(4n){
|
|
margin-right: 0;
|
|
}
|
|
/* 使最后一个元素的边距填满剩余空间 */
|
|
.tagItem:last-child{
|
|
margin-right: auto;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
.u-nav-slot{
|
|
display: flex;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 36upx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.detailContent{
|
|
|
|
|
|
padding:38upx 25upx;
|
|
position: relative;
|
|
z-index:60;
|
|
background: #fff;
|
|
margin: 0 24upx;
|
|
margin-top:30upx;
|
|
// margin-bottom:140upx;
|
|
border-radius: 20upx;
|
|
.detailTitle{
|
|
font-size: 36upx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 54upx;
|
|
}
|
|
.tools{
|
|
display: flex;
|
|
align-items: center;
|
|
margin:27upx 0;
|
|
.time{
|
|
font-size: 24upx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
flex:1;
|
|
}
|
|
.toolItem{
|
|
flex:1;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
&>view{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
image{
|
|
width:35upx;
|
|
height:auto;
|
|
}
|
|
text{
|
|
font-size: 24upx;
|
|
color: #333333;
|
|
margin-left:13upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.bottomContent{
|
|
height: 100upx;
|
|
background: #FFFFFF;
|
|
border: 1px solid #EAEAEA;
|
|
box-shadow: 0px 4px 13px 0px rgba(17,21,38,0.14);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24upx;
|
|
position:fixed;
|
|
bottom:0;
|
|
z-index:100;
|
|
width:calc(100% - 48upx);
|
|
image{
|
|
width: 80upx;
|
|
height: 80upx;
|
|
background: #0076F6;
|
|
border-radius: 20upx;
|
|
}
|
|
text{
|
|
font-size: 30upx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin-left:20upx;
|
|
}
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.btn{
|
|
padding:19upx 57upx;
|
|
border-radius: 30upx;
|
|
background: #0076F6;
|
|
// opacity: 0.4;
|
|
text-align: center;
|
|
|
|
font-size: 24upx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style>
|
|
|