hwnc/pagesE/pages/broadcast/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="item">
							<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>
			</view>
			<u-empty v-if="!data_list" text="暂时数据" mode="list" marginTop="100"></u-empty>
			<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: [],
				initIndex: 0,
				top_title: 1,
				settingFile: getApp().globalData.siteinfo,
				type: 1,
				sid: 0
			};
		},
		methods: {
			tabsChange(item) {
				console.log('item', item)
				let that = this;
				that.type = item.index + 1;
				that.sid = item.id;
				that.getList(item.id);
			},
			getList(id) {
				let that = this;
				Api.getList({
					id: id
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.list && res.data.list.length > 0) {
						that.data_list = res.data.list;
					} else {
						that.data_list = null;
					}
					if (that.modelData == [] || that.modelData.length <= 0) {
						that.modelData = res.data.catelist
					}
					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}`
					})
				}
			}
		},
		onLoad() {
			this.getList(0);
		},
		onPullDownRefresh() {
			this.data_list = [];
			this.getList(this.sid);
		},

		components: {
			tabbar
		}
	};
</script>

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

	.u-tabs {
		background: #FFFFFF !important;
	}

	.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: 10rpx 0rpx 10rpx 0rpx;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				justify-content: space-between;

				.inner-item {
					width: calc(750rpx / 2);
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					justify-content: center;

					.item {
						width: 90%;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;
						padding: 10rpx;

						.inner-img {
							width: 100%;
							margin: 0;
							height: 220rpx;
							position: relative;
							justify-content: center;

							.img {
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}

							.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: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

	}
</style>