hz-zhhq-app/pages/monitor/monitor.vue

<template>
	<view class="container" style="padding: 20upx;">
		<view style="margin: 0px 0upx 20upx;color: #666666;font-size: 28upx;text-indent: 2em;">
			国网华中分部扶贫基地位于黄冈市罗田县大河岸镇古楼冲村，该基地具备蔬菜种植、禽畜养殖能力，长期为华中分部职工提供绿色蔬菜、禽蛋等食材供应。
		</view>
		<view class="box box-wrap box-between" >
			<view v-for="(item, index) in msgList" :key="index" style="width: 48%;float: left;margin-bottom: 20upx;" >
				<view style="border-radius: 10upx;overflow: hidden;">
					<view class="box box-center box-align-center" v-if="playId!=item.id" :style="'background-image:url('+item.picture+');'" style="width: 100%;height: 200upx;border-radius: 10upx;background-size: 100% 100%;background-repeat:no-repeat;">
						<image @click="changePlay(item.id)" style="width: 100upx;height: 76upx;" src="../../static/imgs/bofang.png"></image>
					</view>
					<!-- <image @click="changePlay(item.id)" v-if="playId!=item.id" src="../../static/food/33.jpg" style="height: 200upx;border-radius: 10upx;width: 100%;"></image>
					<image v-if="playId!=item.id" style="width: 100upx;height: 60upx;position: relative;" src="../../static/imgs/bofang.png"></image>
					 -->
					<video v-else style="width: 100%;height: 200upx;border-radius: 10upx;" :id="item.id" :src="item.flow_path"
						 autoplay="true"
						 controls="true"
						 show-fullscreen-btn="true"
						 enable-progress-gesture="false"
						 show-center-play-btn="true"
						 @error="videoErrorCallback"   >
					</video>
					
				 </view>
				 <view @tap="detail(item.flow_path)" style="font-size: 32upx;padding: 20upx 0upx;">{{item.name}}</view>
			</view>
		</view>
		<view class="main">
			<!-- <view class="tab-box">
				<view  class="tab-item" style="width: 100%;" >罗田</view>
			</view> -->
			<!-- <view  v-if="msgList.length > 0">
				<view class="list-view">
					<view v-for="(item, index) in msgList" :key="index"
						class="list-cell list-item"
						@tap="detail(item.flow_path)"
					>
						<view class="cell-title-box" >
							<view class="cell-title" >{{ item.name }}</view>
						</view>
						<view class="sub-title">
							<text class="tag" >{{item.position}}</text>
						</view>
					</view>
				</view>
			</view>
			<content-none v-else :padTop="35"></content-none> -->
		</view>
	</view>
</template>

<script>
	import {getMonitorList} from '@/common/api.js';
	import {callbackRequest,formatDate,getStorage} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				formatDate: formatDate,
				loading:false,
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				msgList:[],
				infoType:"0",
				user: getStorage('userInfo'),
				playId:'',
				videoContext:''
			};
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad() {
			this.getMonitorList();
		},
		// onReady: function(res) {
		// 	this.videoContext = uni.createVideoContext('myVideo')
		// },
		methods:{
			changePlay(id){
				if(this.playId){
					uni.createVideoContext(this.playId).stop();
				}
				uni.createVideoContext(id+"").play();
				this.playId = id+"";
			},
			videoErrorCallback: function(e) {
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: false
				// })
			},
			getMonitorList(){
				let data = {
					method: getMonitorList,
					data: {
						userId: this.user.id
					}
				};
				callbackRequest(data).then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						this.msgList = res.returnData ;
						// if (this.page == 1) {
						// 	this.msgList = res.returnData ;
						// } else {
						// 	if (res.returnData.length > 0) {
						// 		this.msgList = this.msgList.concat(res.returnData);
						// 		this.loadingType = 0;
						// 	} else {
						// 		this.loadingType = 2;
						// 	}
						// }
					} else {
						alertTip(res.returnMsg);
					}
				});
			},
			detail(e) {
				uni.navigateTo({
					url: '/pages/monitor/monitor-view?flow_path='+e
				});
				return;
			},
		}
		// ,
		// onReachBottom() {
		// 	if(this.loadingType !== 0){
		// 		return false;
		// 	}
		// 	this.loadingType = 1;
		// 	this.page = this.page + 1;
		// 	this.getHealthMsgList();
			
		// }
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.box {
		display: flex;
		display: -webkit-flex;
	}
	
	.box-row-reverse {
		flex-direction: row;
	}
	
	/*上下排列*/
	.box-column {
		flex-direction: column;
	}
	
	/*上下排列*/
	.box-left {
		justify-content: flex-start;
	}
	
	/*居右*/
	.box-right {
		justify-content: flex-end;
	}
	
	/*居左*/
	.box-center {
		justify-content: center;
	}
	
	/*居中*/
	.box-between {
		justify-content: space-between;
	}
	
	/*两端对齐*/
	.box-align-center {
		align-items: center;
	}
	
	.box-wrap {
		flex-wrap: wrap;
	}
</style>