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.
309 lines
7.1 KiB
309 lines
7.1 KiB
1 year ago
|
<template>
|
||
|
|
<view class="details">
|
||
|
|
<view class="status_bar"><!-- 这里是状态栏 --></view>
|
||
|
|
<u-navbar height="50" :autoBack="true">
|
||
|
|
<view
|
||
|
|
class="u-nav-slot"
|
||
|
|
slot="left"
|
||
|
|
>
|
||
|
|
<u-icon
|
||
|
|
name="arrow-left"
|
||
|
|
size="19"
|
||
|
|
></u-icon>
|
||
|
|
<view class="title">
|
||
|
|
详情
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-navbar>
|
||
|
|
<view class="detailContent">
|
||
|
|
<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 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} from '@/common/api.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showBottom:false,
|
||
|
|
titleInfo:{},
|
||
|
|
id:null,
|
||
|
|
isCollect:false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.id = option.id
|
||
|
|
this.$store.commit('shareHandle',this.$mp.page.route+'?id='+this.$mp.page.options.id)
|
||
|
|
this.articleDetails()
|
||
|
|
// H5:
|
||
|
|
// #ifndef APP-PLUS
|
||
|
|
this.showBottom = true
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
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
|
||
|
|
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}`,//跳转链接，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(){
|
||
|
|
// 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 }}
|
||
|
|
articleDetails({ids:this.id,nav_id:0}).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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.details{
|
||
|
|
min-height:calc(100vh);
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
.u-nav-slot{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.title{
|
||
|
|
font-size: 36upx;
|
||
|
|
color: #222222;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.detailContent{
|
||
|
|
margin-top:50px;
|
||
|
|
margin-bottom:120upx;
|
||
|
|
padding:38upx 25upx;
|
||
|
|
.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:9;
|
||
|
|
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>
|