192 lines
5.0 KiB
Vue
192 lines
5.0 KiB
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>
|