szy_material/pages/picture/detail - 副本.vue

<!-- html -->
<template>
	<view style="overflow: hidden;">
		<u-checkbox-group @change="checkboxGroupChange" max=9>
			<view class="container">
				<view class="left">
					<view class="posive" v-for="(item,index) in leftList" :key="index">
						<image :src="item.url" alt="" mode="widthFix" @click="previewImg(item)" />
					<!-- 	<view v-if="upload" class="collected">
							<u-checkbox v-model="item.checked" :name="item.src" shape="circle" active-color="#3D6EF6" size="16" icon-size="8" />
						</view> -->
					</view>
				</view>
				<view class="right">
					<view class="posive" v-for="(item,index) in rightList" :key="index">
						<image :src="item.url" alt="" mode="widthFix" @click="previewImg(item)" />
						<!-- <view v-if="upload" class="collected">
							<u-checkbox v-model="item.checked" :name="item.src" shape="circle" active-color="#3D6EF6" size="16" icon-size="8" />
						</view> -->
					</view>
				</view>
				<!-- <view v-show="!upload" class="fixed" @click="upload = true, clearUp()">
					下载
				</view> -->
				<view v-show="upload" class="fixed2 flexS">
					<view class="left">
						已选择<text>{{  checkUrl.length}}</text>张
					</view>
					<view class="flex">
						<view class="upload" @click="downloadImgs">
							立即下载
						</view>
						<view class="quxiao" @click="upload = false">
							取消
						</view>
					</view>
				</view>
			</view>
			<u-loadmore
				v-if="nomore"
				dashed
			    status="nomore"  
			    nomore-text="没有更多啦~" 
			/>
		</u-checkbox-group>
		<u-overlay :show="show" @click="show = false" :opacity="1">
			<swiper :autoplay="false"  :duration="350" :current="current" class="swiper">
				<swiper-item v-for="(item,index) in list">
					<img :src="item.url" alt="" />
					<view v-if="item.master" class="btn" @tap.stop="showMaster(item, index)">
						查看原图
					</view>
				</swiper-item>
			</swiper>
		</u-overlay>
	</view>
</template>
<script>
	import { GetImgDetail } from '../../api/index.js';
	export default {
			data() {
				return {
					upload: false,
					show: false,
					list: [],
					checkUrl: [],
					nomore: false,
					current: 0,
					leftList: [],// 初始化左右盒子
					rightList: [],
					preList: [],
					leftH: 0,// 初始化左右盒子高度
					rightH: 0,
					params: {
						id: '',
					    page_index: 1,
					    page_size: 15,
						type: 1
					},
					totalPage: 0
				}
			},
			onLoad(option) {
				if (option.title) {
					uni.setNavigationBarTitle({
						title: option.title
					});
				}
				this.params.id = option.id
				this.getList()
			},
			onReachBottom() {
			   this.more()
			},
			methods: {
				// 点击放大图片
				previewImg(item) {
					let i = this.list.findIndex(v => v.id == item.id)
					this.current = i
					this.show  = true
					// this.stop()
				},
				showMaster(item, i) {
					this.list[i].url = item.img_url
					this.list[i].master = false
				},
				//禁止页面滑动
				stop(){
				    var mo=function(e){e.preventDefault();};
				    document.body.style.overflow='hidden';
				    document.addEventListener("touchmove",mo,false);
				},
				/***取消滑动限制***/
				move(){
				    var mo=function(e){e.preventDefault();};
				    document.body.style.overflow='';//出现滚动条
				    document.removeEventListener("touchmove",mo,false);
				},
				//获取列表
				getList(isMore) {
					uni.showLoading()
				    GetImgDetail(this.params).then(res => {
						uni.hideLoading()
				        if (res.code === 200) {
				            const { list, total } = res.data
				            if (list.length === 0) {
								uni.showToast({ title: '暂无内容', icon: 'none' })
								return false
							}
				            this.totalPage = Math.ceil(Number(total) / 15)
							list.forEach(e=> {
								e.master = true
							})
							this.doList(list)
				            this.list = isMore ? this.list.concat(list) : list
				        } else {
				            uni.showToast({ title: res.message || '获取列表失败', icon: 'none' })
				        }
				    })
				},
				//加载获取更多
				more() {
				    if (this.params.page_index >= this.totalPage) {
						this.nomore = true
				        return false
				    }
				    this.params.page_index++
				    this.getList(true)
				},
				// 瀑布流
				doList(list) {
					const that = this
					list.forEach(res => {
						// 获取图片宽高
						uni.getImageInfo({
							src: res.url,
							success: (image) => {
								// 计算图片渲染高度
								let showH = (50 * image.height) / image.width
								// 判断左右盒子高度
								if(that.leftH <= that.rightH) {
									that.leftList.push(res)
									that.leftH += showH
								} else {
									that.rightList.push(res)
									that.rightH += showH
								}
							}
						})
					})
				},
				// 下载图片
				downloadImgs() {
					this.clicked = false
					if (this.checkUrl.length === 0) {
						this.clicked = true
						uni.showToast({
						   title: '请选择需要保存的图片',
						   icon: 'none'
						})
						return
					}
					if (this.checkUrl.length > 9) {
						this.clicked = true
						uni.showToast({
						   title: '每次最多只能保存9张图片',
						   icon: 'none'
						})
						return
					}
				    var _this = this
					// 调用保存图片promise队列
					_this.queue(_this.checkUrl).then(res => {
						uni.hideLoading()
						// uni.showToast({
						// 	title: '下载完成'
						// })
						_this.imgList.forEach((item, i) => {
							item.checked = false
						})
						_this.checkUrl = []
						_this.clicked = true
					}).catch(err => {
						_this.checkUrl = []
						_this.clicked = true
						uni.hideLoading()
					})
				},
				// 队列
				queue(urls) {
					let promise = Promise.resolve()
					urls.forEach((url, index) => {
					    promise = promise.then(() => {
							return this.download(url,index)
					    })
					})
					return promise
				},
				// 下载
				download(url, index) {
					let length = this.checkUrl.length
					return new Promise((resolve, reject) => {
					    uni.downloadFile({
							url: url,
							success: function(res) {
								var temp = res.tempFilePath
								var link = document.createElement('a')
								link.href = temp
								link.download = '图片' + index
								document.body.appendChild(link)
								link.click()
								uni.showLoading({
									title: '下载中(' + (index + 1) + '/' + length + ')'
								})
								resolve(res)
							},
							fail: function(err) {
							    reject(err)
							}
						})
					})
				},
				// 清除已选项
				clearUp() {
					this.leftList.forEach((item, i) => {
						item.checked = false
					})
					this.rightList.forEach((item, i) => {
						item.checked = false
					})
				},
				// 选中任一checkbox时，由checkbox-group触发
				checkboxGroupChange(e) {
					 this.checkUrl = e
				},
			}
		}
</script>
<style lang="scss" scoped>
	* { touch-action: pan-y; }
	page {
		background-color: #fff;
		padding-top: 20rpx;
	}
	.swiper {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		img {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			max-height: 100%;
			max-width: 100%;
			width: 100%;
		}
		.btn {
			position: absolute;
			bottom: 60rpx;
			left: 285rpx;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 1rpx #FFFFFF solid;
			color: #FFFFFF;
			text-align: center;
		}
	}
	.container {
			padding: 0 24rpx;
			font-size: 14rpx;
			line-height: 24rpx;
			display: flex;
			justify-content: space-between;
		.right, .left{
			display: inline-block;
			width: 340rpx;
			vertical-align: top;
		}
		.left image, .right image{
			border-radius: 16rpx;
			width: 100%;
			margin-bottom: 24rpx;
		}
		.posive {
			position: relative;
		}
		.collected {
			border: 2rpx solid #3D6EF6;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 50%;
			bottom: 40rpx;
			right: 16rpx;
			z-index: 10;
		}
		.fixed {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 80rpx;
			background: #3D6EF6;
			position: fixed;
			right: 24rpx;
			bottom: 40rpx;
			color: #fff;
			z-index: 100;
		}
		.fixed2 {
			position: fixed;
			right: 0;
			bottom: 0;
			width: 684rpx;
			height: 96rpx;
			background: #000000;
			border-radius: 0px 0px 0px 0px;
			// opacity: 0.5;
			background-color: rgba(000,000,000,0.5);
			padding: 0 32rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			z-index: 100;
			.left {
				font-size: 32rpx;
				font-weight: bold;
				text {
					color: #3D6EF6;
					margin: 0 10rpx;
				}
			}
			.upload {
				width: 176rpx;
				height: 64rpx;
				background: #3D6EF6;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				text-align: center;
				line-height: 64rpx;
			}
			.quxiao {
				width: 120rpx;
				height: 64rpx;
				margin-left: 24rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				border: 2rpx solid #F5F5F5;
				text-align: center;
				line-height: 64rpx;
			}
		}
	}	
</style>