weapp-online/pages/photo_album/photo_album.vue

<template>
	<view>
		<view
			v-for="item in albumList"
			:key="item.id"
			@click="lookMore(item)"
		>
			<view v-if="!item.is_old" class="album_list">
				<view class="title">{{ item.imgclass_name }}</view>
				<view class="flex">
					<view class="intr">创建于{{ item.created_at.substring(0, 10) }} 共{{ item.count }}{{ item.img_type == 0 ? '张照片' : '个视频' }}</view>
					<view class="more">
						<text>更多</text>
						<text class="iconfont iconyoujiantou"></text>
					</view>
				</view>
				<view v-if="item.is_old || (!item.is_old && item.img_type === 1)" class="imgs">
					<template v-if="item.images && item.images.length > 0">
						<view v-for="(temp, ti) in item.images" :key="temp.id" class="imgs_box">
							<view
								v-if="ti < 8"
								class="bg"
								:style="{backgroundImage: `url(${temp.thumbnail})`}"
							/>
						</view>
						<!-- <image v-if="ti < 8" :src="temp.thumbnail"></image> -->
					</template>
					<template v-else>
						<image
							v-if="userInfo.type == 1 || userInfo.sign_up"
							src="../../static/imgs/noPhoto.png"
							mode="widthFix"
							class="no_img"
						></image>
						<image
							v-if="userInfo.type == 0 && !userInfo.sign_up"
							src="../../static/imgs/noRoot.png"
							mode="widthFix"
							class="no_img"
						></image>
					</template>
				</view>
				<template v-else>
					<swiper
						v-if="item.folder.length > 0"
						:display-multiple-items="2"
						next-margin="40rpx"
						class="swiper_container"
					>
						<swiper-item
							v-for="(temp, index) in item.folder"
							:key="temp.id"
							class="swiper_img"
							@click.stop="toClassifyImgs(temp)"
						>
							<view class="swiper_img_box">
								<!-- <image :src="temp.cover.thumbnail" mode="widthFix" class="img"></image> -->
								<view
									class="img"
									:style="{backgroundImage: `url(${temp.cover.thumbnail})`}"
								/>
								<view class="swiper_mask">{{ temp.image_name }}</view>
							</view>
						</swiper-item>
						<swiper-item v-if="item.folder.length === 1" />
					</swiper>
					<template v-else>
						<image src="../../static/imgs/noPhoto.png" class="no_img" v-if="userInfo.type == 1 || userInfo.sign_up"></image>
						<image src="../../static/imgs/noRoot.png" class="no_img" v-if="userInfo.type == 0 && !userInfo.sign_up"></image>
					</template>
				</template>
			</view>
			<view v-else class="old_album_list">
				<view class="old_title">{{ item.imgclass_name }}</view>
					<view class="old_intr">创建于{{ item.created_at.substring(0, 10) }} 共{{ item.count }}{{ item.img_type == 0 ? '张照片' : '个视频' }}</view>
					<view class="old_imgs">
						<view v-for="(temp, index) in item.images" :key="temp.id"><image :src="temp.thumbnail"></image></view>
						<image src="../../static/imgs/noPhoto.png" v-if="(userInfo.type == 1 || userInfo.sign_up) && item.images.length == 0"></image>
						<image src="../../static/imgs/noRoot.png" v-if="item.images.length == 0 && userInfo.type == 0 && !userInfo.sign_up"></image>
					</view>
					<view class="old_more">
						<text>查看更多</text>
						<text class="iconfont iconyoujiantou"></text>
					</view>
			</view>
		</view>
		<view class="no" v-if="albumList.length == 0">--暂无相册--</view>
	</view>
</template>

<script>
import { getAlbum } from '../../api/album.js';
export default {
	data() {
		return {
			albumList: [], //相册列表
			params: {
				page_size: 5, //一页显示几条
				page_index: 1  //当前是第几页
			},
			userInfo: {}, //用户信息
			pages: '' //总页数
		};
	},
	onLoad() {
		this.getAlbum();
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = uni.getStorageSync('userInfo');
		}
	},
	onPullDownRefresh() {
		uni.showNavigationBarLoading();
		this.getAlbum();
	},
	onReachBottom: function() {
		this.more();
	},
	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'
			});
		},
		/*获取相册列表
		 * @params page_size  显示页数
		 * @params page_index 当前页数
		 */
		getAlbum(page) {
			this.params.page_index = 1;
			let { page_size, page_index } = this.params;
			getAlbum({ page_size, page_index })
				.then(res => {
					if (res.code == 200) {
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading();
						this.albumList = res.data.list;
						this.pages = Math.ceil(res.data.total / this.params.page_size);
					} else {
						uni.showModal({
							content: res.message || '请求失败',
							showCancel: false
						});
					}
				})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
		},
		//上拉加载获取更多相册
		more() {
			this.params.page_index++;
			if (this.params.page_index > this.pages) {
				uni.showToast({
					title: '没有更多啦~',
					icon: 'none'
				});
				return false;
			}
			let { page_size, page_index } = this.params;
			getAlbum({ page_size, page_index }).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.albumList = this.albumList.concat(res.data.list);
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		/*点击查看详情
		 * @params imgclass_name 相册名称
		 * @params activity_id   活动id
		 * @params id  相册id
		 */
		lookMore(item) {
			if(!item.is_old) {
				if(!item.folder || item.folder.length === 0) {
					uni.showModal({
						content: '暂无图片分类',
						showCancel: false
					});
					return false
				}
				uni.navigateTo({
					url: '../photo_classify/photo_classify?id='+item.id
				})
			} else {
				if(!item.images || item.images.length == 0) {
					uni.showModal({
						content: item.img_type ? '暂无视频' : '暂无照片',
						showCancel: false
					});
					return false;
				}
				if(item.img_type) {
					uni.navigateTo({
						url: '../video_detail/video_detail?title=' + item.imgclass_name + '&activity_id=' + item.activity_id + '&id=' + item.id + '&status=' + 0
					});
				} else {
					uni.navigateTo({
						url: '../photos/photos?title=' + item.imgclass_name + '&activity_id=' + item.activity_id + '&id=' + item.id
					});
				}
			}
		}
	}
};
</script>

<style lang="scss">
.no {
	width: 100%;
	text-align: center;
	font-size: 24rpx;
	color: #666666;
	margin-top: 40rpx;
}
.album_list {
	width: 92%;
	margin: 0 auto 30rpx;
	background: #FFFFFF;
	padding: 30rpx;
	border-radius: 24rpx;
	&:nth-of-type(1) {
		margin-top: 30rpx;
	}
	.title {
		font-size: 32rpx;
		color: #333;
		line-height: 44rpx;
		margin-bottom: 10rpx;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.swiper_container {
		width: calc(100% + 30rpx);
		min-height: 240rpx;
		margin-top: 30rpx;
	}
	.swiper_img {
		display: flex;
		align-items: flex-start;
		overflow: hidden;
		.swiper_img_box {
			width: calc(100% - 18rpx);
			height: 100%;
			position: relative;
			border-radius: 16rpx;
			overflow: hidden;
		}
		.img {
			display: block;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		&:nth-last-of-type(1) {
			.img {
				// width: 100%;
			}
			.swiper_mask {
				// right: 0;
			}
		}
		.swiper_mask {
			position: absolute;
			height: 60rpx;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,6));
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 60rpx;
			overflow: hidden;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
	.imgs {
		display: flex;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
		overflow: hidden;
		margin-top: 20rpx;
		.imgs_box {
			width: 100%;
			width: calc((100% - 60rpx) / 4);
			overflow: hidden;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			height: 155rpx;
			&:nth-of-type(4n) {
				margin-right: 0;
			}
			image, .bg {
				display: block;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
		}
	}

	.intr {
		// margin: 30rpx 0;
		color: #999999;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.intr,
	.more {
		color: #666;
		font-size: 26rpx;
	}

	.more {
		font-size: 28rpx;
		vertical-align: 3rpx;
		margin-left: 5rpx;
	}
	.no_img {
		display: block;
		height: 155rpx;
		width: 155rpx;
	}
}

.old_album_list {
	width: 92%;
	margin: 0 auto 30rpx;

	.old_title {
		font-size: 36rpx;
		color: #333;
		padding-top: 36rpx;
	}
	.old_imgs {
		display: flex;
		align-items: center;
		width: 100%;
		max-height: 433rpx;
		flex-wrap: wrap;
		overflow: hidden;
		image {
			width: 25%;
			margin-right: 4rpx;
			height: 160rpx;
			width: 160rpx;
			// object-fit: contain;
		}
	}

	.old_intr {
		margin: 30rpx 0;
	}

	.old_intr,
	.old_more {
		color: #666;
		font-size: 26rpx;
	}

	.old_more {
		margin-top: 20rpx;
		text-align: right;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
		}
		.iconfont {
			font-size: 25rpx;
			vertical-align: 3rpx;
			margin-left: 5rpx;
		}
	}
}
</style>