zhiyu_uni_duanju/pages/index/billboard/index.vue

<template>
	<view>
		<view v-if="listData.data.length>0">
			<view class="top">
				<image class="top-img" mode="scaleToFill" src="@/static/icon/index/phb_bg.jpg"></image>
				<view class="top-wrapper">
					<text class="top-title">排行榜</text>
					<text class="top-content">最后更新于 {{listData.update_time}}</text>
				</view>
			</view>
			<view class="wrapper">
				<block v-for="(value,key) in listData.data" :key="key">
					<view class="box pb10 mb15" style="width:30%; border-radius:20rpx;" @click="detail(value)">
						<image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
						<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.name}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="empty-box" v-else>
			<image src="/static/img/orders/emty.png" mode=""></image>
			<p class="ft14 line-1-txt">暂无数据</p>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		getMiniprogramRank
	} from '@/common/apis/index.js'
	import cellGroup from '../../../uni_modules/uview-ui/libs/config/props/cellGroup';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				banners: [],
				searchValue: '',
				total: 0,
				selectIndex: 0,
				scrollTop: 0,
				keytext: '',
				listData: [],
				last_id: 0,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有数据了'
				}
			}
		},
		onLoad(e) {
			if (e.selectIndex) {
				this.selectIndex = e.selectIndex * 1
			}
			this.status = 'more';
			this.getList();
			this.banners = uni.getStorageSync("config").banner
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.status = 'more';
			// this.getList();
		},
		methods: {
			detail(value) {
				uni.navigateTo({
					url: '/pages/video/index?video_id=' + value.video_id
				})
			},
			getList() {
				getMiniprogramRank().then(res => {
					console.log(res, 'getMiniprogramRecentvideogetMiniprogramRecentvideogetMiniprogramRecentvideo')
					this.listData = res.data
				})
			},
			getdata() {
				this.last_id = 0
				this.reload = true
				this.getList()
			},
			search(res) {
				this.listData = [];
				this.last_id = 0;
				this.keytext = res.value;
				this.type = '';
				this.getList(0)
			},
			cancel(res) {
				this.keytext = '';
				this.type = '';
				this.getList(0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		padding: 20px;
		justify-content: center;
		text-align: center;
	}

	.wrapper {
		display: flex;
		flex-wrap: wrap;

		.box {
			margin-left: 20upx;
			margin-top: 10upx;
		}
	}

	.top {
		position: relative;

		.top-img {
			width: 100%;
			height: 250rpx;
		}

		.top-wrapper {
			display: flex;
			flex-direction: column;
			position: absolute;
			color: #FDF6EC;
			margin-left: 25rpx;
			bottom: 20px;

			.top-title {
				font-size: 36px;
				font-weight: bolder;
				margin-bottom: 35rpx;
				font-family: Georgia, 'Times New Roman', Times, serif;
			}

			.top-content {
				font-size: 16px;
				font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
			}
		}
	}


	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		object-fit: contain;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.user-not-vip {
		width: 100%;
		height: 80rpx;
		background: #FDF6EC;
		border-radius: 40rpx;
		border: 2rpx solid #EFC381;
		text-align: center;
		line-height: 76rpx;
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
	}


	.tuan-product-l {
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>