zhengbasai/pages/rongyu/components/BangDan.vue

<template>
	<div>
		<div class="list">
			<div class="title">榜单排名</div>
			<div class="tab_list">
				<div :class="['item',curTab=='week' ?'actived':'' ]" @click="changeTab('week')">
					周排行榜
				</div>
				<div :class="['item',curTab=='month' ?'actived':'' ]" @click="changeTab('month')">
					月排行榜
				</div>
				<div :class="['item',curTab=='quarter' ?'actived':'' ]" @click="changeTab('quarter')">
					季度排行榜
				</div>
				<div :class="['item',curTab=='year' ?'actived':'' ]" @click="changeTab('year')">
					年排行榜
				</div>
			</div>
			<div class="bangdan" v-if="bangList">

				<image v-if="bangList" :src="bangList.path" mode="widthFix" class="bd_image"
					@click="handlePreview(bangList.path)"></image>

			</div>
			<div class="empty_image" v-else>
				<u-empty text="暂无记录"></u-empty>
			</div>
		</div>
	</div>
</template>
<script>
	export default {

		data() {
			return {
				curTab: 'week',
				bangList: [],
				list: {}
			}
		},
		created() {
			this.getBangList()
		},
		methods: {
			getBangList() {
				this.$u.get('/dwbs/zhengshu/resources', {
					type: 1
				}).then(res => {
					this.list = res.data
					this.bangList = this.list[this.curTab]
				})
			},
			changeTab(e) {
				this.curTab = e
				this.bangList = this.list[e]
			},
			//预览图片
			handlePreview(url) {
				uni.previewImage({
					urls: [url]
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 16px;

		.title {
			height: 24px;
			border-left: 5px solid #F5222D;
			padding-left: 11px;
			line-height: 24px;
			font-size: 19px;

			color: #F5222D;
		}

	}

	.bangdan {
		padding-top: 10px;

		.bd_image {
			width: 100%;
		}
	}

	.tab_list {
		margin-top: 13px;
		display: flex;


		.item,
		.actived {
			flex: 1;
			margin-right: 6px;
			border-radius: 5px;
			opacity: 1;
			box-sizing: border-box;
			height: 27px;
			line-height: 27px;
			border: 1px solid #999999;
			text-align: center;
			font-size: 14px;
			color: #999999;
		}

		.item:last-child {
			margin-right: 0;

		}

		.actived {
			background: linear-gradient(90deg, #FB7B58 0%, #F5222D 97%);
			color: #FFFFFF;
			border: none;
		}
	}
</style>