uniapp点击图片可以多张预览

照片多张预览 全选 多选 删除 长按删除

<template>
	<view>
		<view class="module-images-box">
			<image @click="naviga" v-if="type == 1" class="images-upload-box"
				src="../../static/images/agrarian/upload_photograph.png" mode=""></image>
			<view class="item-upload-box" v-for="(item,index) in imagesList" @tap="onSel(index, item)">
				<checkbox-group>
					<image @tap.stop="doPreviewImage(item,index)" @longtap="delImg" class="images-upload" :src="item.url"
						mode="">
					</image>
					<checkbox v-if="checkShow" :checked="item.checked" :class="{ checked: item.checked }"
						class="round orange checkItem " style="transform: scale(0.7);"></checkbox>
				</checkbox-group>
			</view>


		</view>
		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"
			:style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />

		<view class="btm-btn" v-if="checkShow">
			<view class="btn-btn-left" @click="onAllSel">全选</view>
			<view @click="show=true">删除</view>
		</view>
		<u-modal @confirm="confirmdelete" :show-cancel-button="true" title="提示" v-model="show" :content="content">
		</u-modal>

	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				imagesList: [{
						url: '../../static/images/product/1144.png'
					},
					{
						url: '../../static/images/carbaolog.png'
					},
					{
						url: '../../static/images/carbaolog.png'
					},
					{
						url: '../../static/images/missing-face.png'
					},
					{
						url: '../../static/images/XuePingXian.png'
					},
				],
				action: '',
				fileList: [],
				type: '',
				windowWidth: '',
				windowHeight: '',
				imagesrc: null,
				canvasSiz: {
					width: 188,
					height: 275
				},
				longitude: '',
				latitude: '',
				allSel: false,
				checkShow: false,
				show: false,
				content: '确定删除所选照片吗?'
			};
		},
		onLoad(option) {
			this.type = option.type
			if (option.type == 1) {
				uni.setNavigationBarTitle({
					title: '验标照片'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '农户清单照片'
				})
			}
			_this = this;
			this.init();
			let that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.longitude = res.longitude;
					that.latitude = res.latitude;
				}
			});
			this.imagesList.map((item, index) => {
				item.checked = false
				return item
			})
			console.log(this.imagesList)
		},
		methods: {
			// 图片预览
			doPreviewImage(previewImg,index) {
				console.log('index',previewImg, index)
				console.log('预览')
				let _this = this;
				let imgsArray = [];
				for (let i = 0; i < _this.imagesList.length; i++) {
					console.log(_this.imagesList[i].url)
					imgsArray.push(_this.imagesList[i].url)
				}
				uni.previewImage({
					current: index - 1,
					urls: imgsArray,
					indicator: 'number',
					loop: true
				});
			},
			// 长按删除
			delImg() {
				console.log('长按删除')
				this.checkShow = !this.checkShow;
			},
			// 单选
			onSel(index, item) {
				console.log('单选', item, index)
				item.checked = !item.checked;
				this.imagesList.every(good => {
					return good.checked
				})
				this.$forceUpdate()
			},
			// 全选
			onAllSel() {
				this.allSel = !this.allSel
				this.imagesList.forEach(good => {
					good.checked = this.allSel
				})
				this.$forceUpdate()
			},
			// 确认删除
			confirmdelete() {
				let filterList = this.imagesList.filter((item) => {
					return item.checked == false;
				});
				this.imagesList = filterList;
				// console.log('filterList',filterList,this.imagesList)
				this.$forceUpdate()
			},
			//跳转拍照
			naviga() {
				uni.navigateTo({
					url: '/pages/agrarian/camer/camer'
				})
			},
			//设置图片
			setImage(e) {
				console.log('设置图片', e);
				//显示在页面
				// this.imagesrc = e.path;
				if (e.dotype == 'idphoto') {
					_this.zjzClipper(e.path);
				} else if (e.dotype == 'watermark') {
					_this.watermark(e.path);
				} else {
					_this.savePhoto(e.path);
				}
			},
			//添加照片水印
			watermark(path) {
				console.log('path', path)
				var longitude = this.longitude;
				var latitude = this.latitude;
				uni.getImageInfo({
					src: path,
					success: function(image) {
						console.log('131', path, image);

						_this.canvasSiz.width = image.width;
						_this.canvasSiz.height = image.height;
						console.log('135')
						//担心尺寸重置后还没生效，故做延迟
						setTimeout(() => {
							let ctx = uni.createCanvasContext('canvas-clipper', _this);
							console.log('139')
							ctx.drawImage(
								path,
								0,
								0,
								image.width,
								image.height
							);

							console.log('148', path)
							//具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示
							ctx.setFillStyle('white');
							ctx.setFontSize(40);
							ctx.fillText('燕赵财险', 20, 100);
							ctx.fillText('经度：' + longitude, 20, 180);
							ctx.fillText('纬度：' + latitude, 20, 220);

							//再来加个时间水印
							var now = new Date();
							var time = now.getFullYear() + '-' + now.getMonth() + '-' + now.getDate() +
								' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getMinutes();
							ctx.setFontSize(30);
							ctx.fillText(time, 20, 140);
							ctx.draw(false, () => {
								console.log('160')
								uni.canvasToTempFilePath({
										destWidth: image.width,
										destHeight: image.height,
										canvasId: 'canvas-clipper',
										fileType: 'jpg',
										success: function(res) {
											console.log('===>res', res)
											_this.savePhoto(res.tempFilePath);
										}
									},
									_this
								);
							});
						}, 500)


					}
				});
			},
			//保存图片到相册，方便核查
			savePhoto(path) {
				console.log('保存到相册', path)
				this.imagesrc = path;
				this.imagesList.push({
					url: path
				})
				console.log('照片数组', this.imagesList)
				//保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success: () => {
						uni.showToast({
							title: '已保存至相册',
							duration: 2000
						});
					}
				});
			},

			//初始化
			init() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.windowWidth = res.windowWidth;
						_this.windowHeight = res.windowHeight;
					}
				});
			}


		}
	}
</script>

<style lang="scss" scoped>
	.module-images-box {
		width: 100%;
		padding: 20upx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		background: #fff;

		.images-upload-box {
			width: 160upx;
			height: 160upx;

		}

		.item-upload-box {
			display: inline-block;
			width: 160upx;
			height: 160upx;
			margin: 4px;
			position: relative;

			.checkItem {
				position: absolute;
				top: 2upx;
				right: 2upx;
			}

			.images-upload {
				width: 160upx;
				height: 160upx;

			}
		}

	}

	.imageBox {
		width: 160upx;
		height: 160upx;

		image {
			width: 160upx;
			height: 160upx;
		}
	}

	.btm-btn {
		width: 100%;
		height: 70upx;
		// background: rgba(0,0,0,0.2);
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: 0 0 10px #cdcdcd;

		view {
			height: 70upx;
			width: 50%;
			line-height: 70upx;
			text-align: center;
			background: #F56C6C;
			color: #fff;
		}

		.btn-btn-left {
			background: #0A7CFF;
			border-right: 1px solid #cdcdcd;
		}
	}

	::v-deep .uni-label-pointer {
		cursor: pointer;
		margin-left: 8px !important;
	}

	::v-deep uni-switch.orange[checked] .wx-switch-input,
	::v-deep uni-checkbox.orange[checked] .wx-checkbox-input,
	::v-deep uni-radio.orange[checked] .wx-radio-input,
	::v-deep uni-checkbox.orange.checked .uni-checkbox-input {
		background-color: #0A7CFF !important;
		border-color: #0A7CFF !important;
		color: #ffffff !important;
	}

	::v-deep uni-radio .wx-radio-input,
	::v-deep uni-checkbox .wx-checkbox-input,
	::v-deep uni-radio .uni-radio-input,
	::v-deep uni-checkbox .uni-checkbox-input {
		margin-right: 3px !important;
		width: 18px !important;
		height: 18px !important;
	}
</style>