luban-mall/pages/tabbar/news/detail.vue

<template>
	<view>
		<status-nav :ifReturn="true" navBarTitle="新闻详情" :marginBottom="0"></status-nav>
		<!-- 新闻视频 -->
		<view class="news-video-img" v-if="articleDetail.video">
			<image :src="articleDetail.cover" mode="widthFix"></image>
			<view class="news-video-btn" @tap.stop="playEv(articleDetail.video)">
				<image src="/static/public/icon-suspend.png" mode="widthFix" v-if="videoPlay"></image>
				<image src="/static/public/icon-play.png" mode="widthFix" v-else></image>
			</view>
		</view>
		<!-- 视频弹窗 -->
		<view class="news-video-content" v-if="videoPlay" :style="{width:newWidth+'px'}"></view>
		<video id="my-video" controls :src="articleDetail.video" v-if="videoPlay" @fullscreenchange="screenChange" :style="{width:newWidth+'px'}"></video>
		<!-- 新闻概述 -->
		<view class="shop-summary news-summary">
			<view class="shop-title">{{articleDetail.title}}</view>
			<view class="shop-txt news-txt flex">
				<view class="left">
					<view class="news-author">作者：{{articleDetail.author}}</view>
					<view class="news-time">发布时间：{{time}}</view>
				</view>
				<view class="right flex">
					<view class="collection-btn flex" :class="articleDetail.is_collected == 1?'active':''" @tap="collectionEv(articleDetail.id)">
						<image src="/static/public/icon-collection.png" mode="widthFix"></image>
						<text>收藏</text>
					</view>
					<view class="share-btn flex">
						<image src="/static/public/icon-share.png" mode="widthFix"></image>
						<text>分享</text>
						<button plain="true" data-name="shareBtn" open-type="share"></button>
					</view>
				</view>
			</view>
		</view>
		<!-- 新闻详情 -->
		<view class="shop-detail news-detail">
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import {getCartNum} from '@/jsFile/public-api.js';
	import { mapState } from 'vuex'//引入mapState
	export default {
		components:{
			statusNav
		},
		data() {
			return {
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				videoPlay: false, //是否全屏
				videoUrl:'', //视频url
				articleDetail:{}, //文章详情
				id:'',//文章id
				action:'collect', //收藏类型
				time:'', //发布时间
				content:'',//文章内容
			}
		},
		computed:{
			
		},
		onLoad(op) {
			this.id = op.id;
			this.getDetail(this.id);
		},
		onShareAppMessage() {
			
		},
		onShow() {
			// getNewsDetail()
		},
		// 分享到微信
		onShareAppMessage() {
			
		},
		// 分享到朋友圈
		onShareTimeline(){
			
		},
		methods: {
			// 全屏播放
			playEv(url){
				this.videoContext = uni.createVideoContext("my-video", this);    // this这个是实例对象 必传
				this.videoUrl = url;
				this.videoContext.play();
				this.videoContext.requestFullScreen({ direction: 90 });
				this.videoPlay = true;  // 显示播放盒子
			},
			// 退出全屏
			screenChange(e) {
			  if (e.detail.fullScreen) {
			    //退出全屏
			    this.videoPlay = false;   // 隐藏播放盒子
			  }
			},
			
			//收藏
			collectionEv(){
				console.log(this.shopDetail.collection,'是否分享')
				if(this.shopDetail.collection !== 0){
					this.shopDetail.collection = 1
				}else{
					this.shopDetail.collection = 0
				}
				
			},
			// 查询文章详情
			getDetail(id){
				uni.showLoading();
				this.$requst.post('/api/archives/detail',{id:id}).then(res=>{
					if(res.code==0) {
						console.log(res,'文章详情')
						this.articleDetail = res.data;
						this.time = this.dateFormat(res.data.published_at)
						this.content = this.$toolAll.tools.escape2Html(res.data.content)
					}
					uni.hideLoading();
				})
			},
			// 时间格式转换
			dateFormat (dateData) {
			    var date = new Date(dateData)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    const time = y + '.' + m + '.' + d
			    return time
			},
			//收藏
			collectionEv(id){
				let params = {
					archive_id:id,
					action:this.action
				}
				if(this.articleDetail.is_collected == 1){
					this.$requst.post('/api/archives/un-record',params).then(res=>{
						if(res.code==0) {
							// this.$toolAll.tools.showToast('取消收藏成功');
							this.getDetail(this.id);
						}
					})
				}else{
					this.$requst.post('/api/archives/record',params).then(res=>{
						if(res.code==0) {
							// this.$toolAll.tools.showToast('收藏成功');
							this.getDetail(this.id);
						}
					})
				}
				
			},
		}
	}
</script>

<style>
	
</style>