<template>
	<view class="container">
		<u-swiper :list="list" circular radius='0' indicator indicatorMode='dot' height='950rpx'></u-swiper>
	
	<view class="btn btn2" @click="saveFun">保存到相册</view>
	
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
			
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad(option) {},
		methods: {
			// 保存到相册 
			saveFun() {
				uni.showLoading({
					title: '图片下载中',
					mask: true
				})
				const imageList = []
				// 循环数组
				for (let i = 0; i < this.list.length; i++) {
					imageList.push(this.getTempPath(this.list[i],i))
				}
				// const loadTask = []
				// let index = 0;
				// while (index < imageList.length) {
				// 	loadTask.push(
				// 		new Promise((resolve, reject) => {
				// 			// 将数据分割成多个promise数组
				// 			Promise.all(imageList.slice(index, (index += 8)))
				// 				.then(res => {
				// 					resolve(res)
				// 				})
				// 				.catch(err => {
				// 					reject(err)
				// 				})
				// 		})
				// 	)
				// }
			},
			//此方法是单独下载每个图片，使用promise返回后通过 .then()方法继续下一个
			getTempPath(url,i) {
				let that = this;
				return new Promise((resolve, reject) => {
					wx.downloadFile({
						url: url,
						success: function(res) {
							var temp = res.tempFilePath
							wx.saveImageToPhotosAlbum({
								filePath: temp,
								success(res1) {
									if(i == that.list.length - 1){
										that.successFun();
									}
									return resolve(res1)
								},
								fail: function(err) {
									reject(url + JSON.stringify(err))
								}
							})
						},
						fail: function(err) {
							reject(url + JSON.stringify(err))
						}
					})
				})
			},
			// 全部下载完后触发
			successFun(){
				uni.hideLoading();
				this.$u.toast('保存成功，请去完成作业！');
			}


		},
	}
</script>

<style lang='scss' scoped>
	.fixedbox{
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #fff;
	}
	.tips {
		line-height: 34rpx;
		margin: 16rpx 24rpx 38rpx;
	}

	.btn {
		width: 376rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		color: #FFF;
	}

	.btn1 {
		background: #F37043;
	}

	.btn2 {
		background: $uni-color-main;
	}
</style>