weapp-online/pages/my_collect/my_collect.vue

<template>
	<view class="collect">
		<view class="tab">
			<view @click="getCollect(0)" :class="params.img_type == 0 ? 'active' : ''">照片</view>
			<view @click="getCollect(1)" :class="params.img_type == 1 ? 'active' : ''">视频</view>
		</view>
		<view class="scroll">
			<scroll-view scroll-y="true" @scrolltolower="more">
				<view class="scroll_con">
					<view v-if="params.img_type == 0" class="photos">
						<view class="photo" v-for="(item, index) in collectList" :key="index" @click="previewImg($event, item)">
							<view class="collect flexC"><image src="../../static/imgs/ph_collected.png"></image></view>
							<image :src="item.thumbnail"></image>
						</view>
					</view>
					<view v-if="params.img_type == 1 && collectList.length > 0">
						<view class="videos" v-for="(item, index) in collectList" :key="item.id">
							<view>
								<view class="cover" @click="videoPlay(index)" v-if="index != curPlay"></view>
								<video :src="item.img_url" :id="'myVideo' + index"></video>
							</view>
							<view class="flexB state" @click="downloadVideo(item.download_url)">
								<view class="flexC">
									<image src="../../static/imgs/down_load.png" style="width: 44rpx;height:42rpx;"></image>
									<text>下载</text>
								</view>
								<view @click="getCollect(item)" class="flexC">
									<image src="../../static/imgs/collected.png" style="height:40rpx;width:40rpx;"></image>
									<text>已收藏</text>
								</view>
							</view>
						</view>
					</view>
					<view class="no_data" v-if="collectList.length == 0"><image src="../../static/imgs/no_collect.png"></image></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { myCollect } from '../../api/album.js';
export default {
	data() {
		return {
			params: {
				page_size: 20,
				page_index: 1,
				img_type: 0 //0  照片 1 视频
			},
			pages: '', //总页数
			collectList: [], //收藏列表
			preList: [], //点击放大的图片
			curPlay: null //当前播放的视频
		};
	},
	onLoad() {
		this.getCollect(0);
	},
	onReachBottom() {
		this.more();
	},
	methods: {
		//点击下一个视频时，上一个视频停止播放
		videoPlay(index) {
			var that = this;
			if (that.curPlay != null) {
				//如果有正在播放的视频
				//停止正在播放的视频
				let videoContextPrev = wx.createVideoContext('myVideo' + that.curPlay);
				if (that.curPlay != index) {
					videoContextPrev.pause();
				}
				//开始播放当前点击的视频
				that.curPlay = index;
				let videoContextCurrent = wx.createVideoContext('myVideo' + index);
				videoContextCurrent.play();
			} else {
				//如果没有正在播放的视频
				that.curPlay = index;
				let videoContext = wx.createVideoContext('myVideo' + index);
				videoContext.play();
			}
		},
		// 下载视频
		async downloadVideo(url) {
			await uni.showLoading({
				title: '下载中'
			});
			// 1.将远程文件下载到小程序的内存中,tempFilePath
			const result1 = await uni.downloadFile({
				url
			});
			const { tempFilePath } = result1[1];
			// 2.将小程序内存中的临时文件下载到本地上
			const result2 = await uni.saveVideoToPhotosAlbum({
				filePath: tempFilePath,
				success: () => {
					uni.showModal({
						content: '下载成功',
						showCancel: false
					});
				},
				fail: err => {
					console.log(err);
					if (err.errMsg === 'saveVideoToPhotosAlbum:fail auth deny' || err.errMsg === 'saveVideoToPhotosAlbum:fail authorize no response') {
						uni.showModal({
							title: '提示',
							content: '您好,请先授权，再保存此视频。',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.openSetting({
										success(settingdata) {
											if (settingdata.authSetting['scope.writePhotosAlbum']) {
												uni.showModal({
													title: '提示',
													content: '授权成功！请重新下载视频',
													showCancel: false
												});
											} else {
												uni.showModal({
													title: '提示',
													content: '获取相册权限失败',
													showCancel: false
												});
											}
										},
										fail: err => {
											console.log(err);
										}
									});
								}
							}
						});
					} else {
						uni.showModal({
							content: '下载失败',
							showCancel: false
						});
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		//点击放大图片
		previewImg(e, item) {
			uni.previewImage({
				current: item.img_url,
				urls: this.preList
			});
		},
		/* 获取收藏列表
		 * @params page_index  当前是第几页
		 * @params page_size   当前显示几个
		 * @params img_type  判断照片还是视频 0 照片 1 视频
		 */
		getCollect(type) {
			this.collectList = '';
			this.params.page_index = 1;
			this.params.img_type = type;
			let { page_index, page_size, img_type } = this.params;
			myCollect({
				page_index,
				page_size,
				img_type
			}).then(res => {
				if (res.code == 200) {
					this.collectList = res.data.list;
					this.pages = Math.ceil(res.data.total / this.params.page_size);
					let list = res.data.list;
					if (this.preList.length < list.length) {
						list.map(i => {
							this.preList.push(i.img_url);
						});
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		//上拉加载更多
		more() {
			this.params.page_index++;
			if (this.params.page_index > this.pages) {
				uni.showToast({
					title: '没有更多啦~',
					icon: 'none'
				});
				return false;
			}
			let { page_size, img_type, page_index } = this.params;
			myCollect({
				page_index,
				page_size,
				img_type
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.collectList = this.collectList.concat(res.data.list);
						let list = res.data.list;
						if (this.preList.length < this.collectList.length) {
							list.map(i => {
								this.preList.push(i.img_url);
							});
						}
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.collect {
	.tab {
		width: 100%;
		height: 7vh;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #f2f2f2;
		border-bottom: 1rpx solid #f2f2f2;
		margin-bottom: 20rpx;
		background: #fff;
		view {
			height: 85rpx;
			line-height: 85rpx;
			font-size: 32rpx;
			letter-spacing: 5rpx;
			font-weight: 500;
			color: #666;

			&::after {
				content: '';
				display: block;
				width: 130rpx;
				height: 4rpx;
				border-radius: 2rpx;
				margin-left: -32rpx;
			}
		}

		.active {
			color: #ea4a41;

			&::after {
				background-color: #ea4a41;
			}
		}
	}
	.scroll {
		height: 93vh;
		scroll-view {
			height: 100%;
		}
		.scroll_con {
			padding-bottom: 20px;
		}
		.photos {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			.photo {
				position: relative;
				width: 33.33%;
				text-align: center;
				image {
					height: 236rpx;
					width: 236rpx;
					border-radius: 24rpx;
				}
				.collect {
					width: 58rpx;
					height: 49rpx;
					position: absolute;
					background-color: rgba(0, 0, 0, .4);
					border-radius: 24rpx 0 24rpx 0;
					bottom: 13rpx;
					right: 9rpx;
					z-index: 9999;
					image {
						height: 30rpx;
						width: 30rpx;
					}
				}
			}
		}
		.videos {
			width: 690rpx;
			margin: 0 auto;
			padding-top: 20rpx;
			position: relative;
			video {
				width: 100%;
				height: 356rpx;
				border-radius: 32rpx;
			}
			.cover {
				width: 100%;
				height: 356rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 100;
			}
			.state {
				width: 75%;
				margin: 16rpx auto 34rpx;
				image {
					margin-right: 15rpx;
				}
				text {
					font-size: 28rpx;
					color: #333;
				}
			}
			.collect {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.no_data {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 170rpx;
				height: 186rpx;
			}
		}
	}
}
</style>