hwnc/pagesE/pages/broadcast.vue

<template>
	<view :class="[AppTheme]" class="broadcast">

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offsetTop="0" style="z-index: 99;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offsetTop="-44" style="z-index: 99;">
				<!-- #endif -->
				<u-tabs :list="modelData" @click="tabsChange" keyName="label" :activeStyle="{
		        color: primary,
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" lineWidth="40" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :lineColor="primary">
				</u-tabs>
			</u-sticky>

			<view v-for="(item, index) in data_list" class="wrap-item" :key="index">
				<view class="title">{{ item.name }}</view>
				<view class="inner">
					<view v-for="(Gitem, Gindex) in item.list" class="inner-item" :key="Gindex">
						<view class="inner-img" @click="goVideo(Gitem)">
							<image :src="Gitem.imgurl" mode="" class="img"></image>
							<image :src="settingFile.root_img+'/static/app/imgs/much/play.png'" class="item-play"
								mode="">
							</image>
						</view>
						<view class="inner-title">{{ Gitem.title }}</view>
					</view>
				</view>
			</view>
			<admyself  :opshow="true"></admyself>
	</view>
</template>

<script>
	import Api from '@/api/broadcast/index.js';
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				showVideo: false,
				videoSrc: '',
				data_list: '',
				modelData: [{
					label: '农场监控'
				}, {
					label: '农场视频'
				}],
				initIndex: 0,
				top_title: 1,
				settingFile: getApp().globalData.siteinfo,
				type: 1
			};
		},
		methods: {
			tabsChange(item) {
				let that = this;
				that.type = item.index + 1;
				that.getList();
			},
			getList() {
				let that = this;
				Api.getList({
					type: that.type
				}).then(res => {
					that.data_list = res.data;
					console.log(that.data_list);
				});
			},
			goVideo(e) {
				if (e.jumptype == 'webview') {
					let ad_link = encodeURIComponent(JSON.stringify(e.src));
					uni.navigateTo({
						url: '/pagesE/pages/showhfive/showhfive?url=' + ad_link
					})
				} else {
					uni.navigateTo({
						url: `./transmit?id=${e.id}`
					})
				}
			}
		},
		mounted() {
			this.getList();
		},
		onPullDownRefresh() {
			this.data_list = [];
			this.getList(this.type);
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 600);
		},

		components: {
			tabbar
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		// padding-bottom: 140rpx;
	}

	.broadcast {
		width: 100%;
		height: 100%;

		.wrap-item {
			.title {
				width: 100%;
				height: 60rpx;
				background: #ebeef5;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				box-sizing: border-box;
			}

			.inner {
				width: 100%;
				padding: 30rpx 15rpx;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				box-sizing: border-box;

				.inner-item {
					width: calc(100% / 3);

					.inner-img {
						width: 98%;
						margin: 0;
						height: 215rpx;
						position: relative;

						.img {
							width: 100%;
							height: 100%;
						}

						.item-play {
							width: 55rpx;
							height: 55rpx;
							position: absolute;
							top: 50%;
							left: 50%;
							margin-top: -27.5rpx;
							margin-left: -27.5rpx;
						}
					}

					.inner-title {
						width: 100%;
						font-size: 27rpx;
						height: 70rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

	}
</style>