qingyuan/components/template/postListTwo.vue

<template>
	<view class="postListTwo" @click="goPostDetails">
		<image v-if="itemInfos.img[0]" :src="itemInfos.img[0]" mode="aspectFill" @click.stop="imgPre(itemInfos.shareimg)"></image>
		<!-- <image v-else :src="itemInfos.video_img_link" mode="aspectFill"></image> -->
		<video class="pagevideo" :id="'pagevideo'+indexNumber" v-else object-fit="cover"
			:src="itemInfos.video_link" @click.stop="" :poster="itemInfos.video_img_link"
			@play="stopOther()"></video>
		<view class="cont">
			{{itemInfos.content}}
		</view>
		<view class="status" v-if="itemInfos.status==1 || itemInfos.status==2">
			<text v-if="itemInfos.status==1">审核中</text>
			<text v-if="itemInfos.status==2">未通过</text>
		</view>
		<view class="menu" @click.stop="showMenu()" v-if="isMe">•••</view>
		<view class="pop-wrapper" v-if="isShowMenu" @click.stop="showMenu()">
			<view class="edit" v-if="itemInfos.status==1 || itemInfos.status==2" @click.stop="edit">编辑</view>
			<view class="remove" @click.stop="remove">删除</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';

	// import PopManager from '@/components/template/PopManager';
	// import PhoneMask from '@/components/template/PhoneMask';
	// import getvxphone from '@/components/template/getVXphone.vue'

	export default {
		components: {
			// PopManager,
			// PhoneMask,
			// getvxphone
		},
		props: {
			// 帖子信息
			itemInfo: {
				type: Object,
				default: {}
			},
			indexNumber: {
				type: Number,
				default: 0
			},
			indexShow: {
				type: Number,
				default: -1
			},
			isMe: {
				type: Boolean
			},
			currentPlay: {// 当前播放的视频在列表中的索引
				type: Number | String
			},
			stopVideo: {
				type: Number
			},
		},
		data() {
			return {
				itemInfos: {
					attestation: '',
					avatar: "",
					comment_list: [],
					content: "",
					createtime: "",
					fabulous_avatar: [],
					fabulous_num: null,
					id: "",
					img: [],
					is_fabulous: null,
					keyword: [],
					look: "",
					mid: "",
					nickname: "",
					onetype: "",
					package: "",
					phone: "",
					share: "",
					top: "",
					type: "",
					status: null
				},
				comment_list: [],
				show: false,
				coverShow: false,
				text: '',
				phoneHight: 0,
				fabulous_num: null,
				fabulous_avatar: null,
				isComment: false,
				myMid:0,
				poster:'',
				isShowMenu: false,
				videoContext: null,
				query: '',
			};
		},
		watch: {
			itemInfo: {
				handler(newValue, oldValue) {
					let _this = this;
					for (let key in newValue) {
						_this.itemInfos[key] = newValue[key]
					}
					//_this.init();
				},
				deep: true, //对象内部的属性监听，也叫深度监听
				immediate: true //immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler
			},
			stopVideo: {
				handler(newVal, oldVal){
					if(!!this.itemInfos.video_link){
						// this.videoContext.stop();
						
						if(this.indexNumber!==this.currentPlay){
							// 正在播放其他视频
							this.videoContext.stop();
						}else{
							// 滚动页面
							this.query.select('.pagevideo').boundingClientRect(data=>{
								if(data){
									// console.log(data.top,'视频在屏幕的高度');
									if(data.top<80||data.top==80){
										// console.log('视频暂停');
										this.videoContext.stop();
									}
									let winH = uni.getSystemInfoSync().windowHeight;
									if(data.bottom + 85 == winH || data.bottom + 85 > winH){
										// console.log('视频暂停');
										this.videoContext.stop();
									}
								}
							}).exec();
						}
					}
				}
			}
		},
		mounted() {
			let _this = this;
			_this.poster = uni.getStorageSync('platformInfor').videoimg;
			_this.myMid = uni.getStorageSync('userinfo').mid;
			// console.log(_this.poster, _this.myMid)
			for (let key in _this.itemInfo) {
				_this.itemInfos[key] = _this.itemInfo[key]
			}
			// console.log(_this.itemInfos)
			_this.init();
		},
		onReady(){
			this.videoContext = wx.createVideoContext('pagevideo'+this.indexNumber, this);
			this.query = uni.createSelectorQuery().in(this);
		},
		onShow() {
			let _this = this;
			_this.isComment = false;
		},
		methods: {
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHight = res.windowHeight + 'px';
					}
				});
				_this.itemInfos.comment_list = !!_this.itemInfo.comment_list ? _this.itemInfo.comment_list : "";
				_this.fabulous_avatar = _this.itemInfos.fabulous_avatar;
				_this.fabulous_num = _this.itemInfos.fabulous_num;
				_this.comment_list = !!_this.itemInfo.comment_list ? _this.itemInfo.comment_list : "";

			},
			show1() {
				let _this = this;
				if (_this.indexShow === _this.indexNumber) {
					_this.$emit('operationShow', -1);
					_this.coverShow = false;
				} else {
					_this.$emit('operationShow', _this.indexNumber);
					_this.coverShow = true;
				}
			},
			imgPre(url){
				uni.previewImage({
					urls: [url]
				});
			},
			goPostDetails() {
				let _this = this;
				// App.navigationTo({
				// 	url: 'pages/subPages/postDetails/postDetails?id=' + _this.itemInfos.id
				// });
				App.navigationTo({
					url: 'pagesA/pictureTextDetails/pictureTextDetails?id=' + _this.itemInfos.id
				});
			},
			showMenu(){
				this.isShowMenu = !this.isShowMenu;
			},
			remove(){
				let _this = this;
				let data = {
					id: _this.itemInfos.id
				};
				uni.showModal({
					title: '提示',
					content: '确认删除，数据将无法恢复',
					success(res) {
						if(res.confirm){
							App._post_form('&p=pocket&do=delete', data, res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									duration: 2000
								});
								_this.isShowMenu = !_this.isShowMenu;
								_this.$emit('delet', _this.itemInfos.id);
							});
						}else{
							_this.isShowMenu = !_this.isShowMenu;
						}
					}
				})
			},
			edit(){
				this.isShowMenu = !this.isShowMenu;
				App.navigationTo({
					url: 'pages/subPages/postRelease/postRelease?id=' + this.itemInfos.id
				})
			},
			stopOther(){
				this.$emit('changePlay', this.indexNumber);
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.postListTwo{
		position: relative;
		width: 100%;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		min-height: 265px;
		-webkit-transform: translate3d(0, 0, 0);//在圆角元素上加上这个样式,关于ios圆角失效
		
		// video{
		// 	border-top-left-radius: 8px;
		// 	border-top-right-radius: 8px;
		// 	overflow: hidden;
		// }
	}
	image, video{
		width: 100%;
		height: 200px;
	}
	.cont{
		font-size: 14px;
		font-weight: bold;
		line-height: 24px;
		padding: 5px 10px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.status{
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 12px;
		color: #fff;
		background: rgba(0,0,0,0.3);
		padding: 4px 8px;
		border-radius: 4px;
		z-index: 1;
	}
	.menu{
		position: absolute;
		top: 0px;
		left: 0px;
		font-size: 12px;
		color: #fff;
		background: rgba(0,0,0,0.3);
		padding: 4px 8px;
		border-radius: 4px;
		z-index: 3;
	}
	.pop-wrapper{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.edit{
			color: #333;
			background-color: #fff;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			line-height: 40px;
			text-align: center;
			font-size: 12px;
			margin: 10px;
		}
		.edit:hover{
			background-color: #c6c6c6;
		}
		.remove{
			color: #fff;
			background-color: #ff6f6f;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			line-height: 40px;
			text-align: center;
			font-size: 12px;
			margin: 10px;
		}
		.remove:hover{
			background-color: #c85757;
		}
	}
	
</style>