weapp-online/pages/photo_classify/photo_classify.vue

<template>
	<view class="photoClassify">
		<view
			v-for="item in classifyList"
			:key="item.id"
			class="classifyItem"
			@click="toClassifyImgs(item)"
		>
			<image :src="item.cover.thumbnail" class="classifyItem-img" mode="widthFix"></image>
			<view>{{ item.image_name }}</view>
			<view>{{ item.total || 0 }}张</view>
		</view>
	</view>
</template>

<script>
	import { getPhotoClassify } from "../../api/album.js"
	export default {
		data() {
			return {
				classifyList: []
			}
		},
		onLoad(e) {
			getPhotoClassify({ id: e.id }).then(res => {
				if(res.code === 200) {
					this.classifyList = res.data.list
				} else {
					uni.showModal({
						content: res.message || '获取相册分类失败',
						showCancel: false
					})
				}
			}).catch(() => {
				uni.showModal({
					content: '获取相册分类失败',
					showCancel: false
				})
			})
		},
		methods: {
			toClassifyImgs(item) {
				if(!item.total || item.total === 0) {
					uni.showModal({
						content: '暂无图片',
						showCancel: false
					})
					return false
				}
				uni.navigateTo({
					url: '../photos/photos?title=' + item.image_name + '&activity_id=' + item.activity_id + '&id=' + item.id + '&type=1'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.photoClassify {
	width: 100%;
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	.classifyItem {
		width: calc((100% - 30rpx) / 2);
		margin-bottom: 30rpx;
		&:nth-of-type(2n) {
			margin-left: 30rpx;
		}
		&-img {
			display: block;
			width: 100%;
			height: 268rpx;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
		}
		&-title {
			color: #333333;
			font-size: 32rpx;
			line-height: 44rpx;
			margin-bottom: 12rpx;
		}
	}
}
</style>