weapp-online/pages/video_detail/video_detail.vue

<template>
	<view class="video_detail">
		<view class="videos" v-for="(item, index) in imgList" :key="item.id">
			<view>
				<view class="cover" @click="videoPlay(index)" v-if="index != curPlay"></view>
				<video :src="item.download_url" :id="'myVideo' + index" v-if="item.download_url" custom-cache="false"></video>
			</view>
			<view class="flexB state">
				<view class="flexC" @click="downloadVideo(item.download_url)">
					<image src="../../static/down_load.png" style="height:40rpx;width:40rpx;"></image>
					<text>下载</text>
				</view>
				<view @click="getCollect(item)" class="flexC">
					<image src="../../static/imgs/collected.png" class="collect" v-if="item.like"></image>
					<image src="../../static/imgs/my_collect.png" class="collect" v-else></image>
					<text>{{ item.like ? '已收藏' : '收藏' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getCollect, albumDetail, myCollect } from '../../api/album.js';
export default {
	data() {
		return {
			imgList: [],  //视频列表
			params: {
				id: '',
				activity_id: '',
				page_index: 1,
				page_size: 5
			},
			pages: '', //总页数
			title: '', //当前页面标题,
			curPlay: null 
		};
	},
	onLoad(options) {
		this.title = options.title;
		this.params.id = options.id;
		this.params.activity_id = options.activity_id;
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.getPhotos();
	},
	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();
			}
		},
		//点击收藏当前视频
		getCollect(item) {
			if (item.like == true) {
				uni.showModal({
					content: '您已收藏过，请勿重复收藏',
					showCancel: false
				});
				return false;
			}
			let { id, activity_id, img_type } = item;
			getCollect({
				id,
				activity_id,
				img_type
			}).then(res => {
				if (res.code == 200) {
					let list = this.imgList;
					list.map(i => {
						if (item.id == i.id) {
							this.$set(i, 'like', true);
						}
					});
					this.imgList = list;
					uni.showToast({
						title: '收藏成功'
					});
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		// 下载视频
		async downloadVideo(url) {
			await uni.showLoading({
				title: '下载中'
			});
			// 1.将远程文件下载到小程序的内存中,tempFilePath
			const result1 = await uni.downloadFile({
				url
			});
			const { tempFilePath } = result1[1];
			console.log(tempFilePath, 'tempFilePath');
			// 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();
				}
			});
		},
		/*获取视频列表
		 * @params id  当前视频id
		 * @params activity_id  当前活动id
		 * @params page_index 第几页
		 * @params page_size  每页显示数量
		 */
		getPhotos() {
			this.params.page_index = 1;
			let { id, activity_id, page_index, page_size } = this.params;
			albumDetail({
				id,
				activity_id,
				page_index,
				page_size
			}).then(res => {
				if (res.code == 200) {
					this.imgList = res.data.list;
					this.pages = Math.ceil(res.data.total / this.params.page_size);
				} 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 { id, activity_id, page_size, page_index } = this.params;
			albumDetail({
				id,
				activity_id,
				page_index,
				page_size
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.imgList = this.imgList.concat(res.data.list);
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.video_detail {
	padding: 20rpx 0;
}
.videos {
	width: 690rpx;
	margin: 0 auto;
	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;
	}
}
</style>