besiweb/pages/headlines/index copy.vue

<!-- <template>
	<text>头条</text>
</template>

<script>
</script>

<style>
</style> -->
<template>
	<view class="wrap">
		<view class="pre-box" v-if="!showUploadList">
			<view class="pre-item" v-for="(item, index) in lists" :key="index" :style="{
				width: $u.addUnit(width),
				height: $u.addUnit(height)
			}">
				<!-- 删除图片按钮 -->
				<view  class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
							background: delBgColor
						}">
					<u-icon class="u-icon" name="close" size="20" :color="delColor"></u-icon>
				</view>
				<!-- 图片上传进度条 -->
				<u-line-progress
					v-if="showProgress && item.progress > 0 && !item.error"
					:show-percent="false"
					height="16"
					class="u-progress"
					:percent="item.progress"
				></u-line-progress>
				<!-- 点击重试按钮 -->
				<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
				<image 
				@tap.stop="doPreviewImage(item.url || item.path, index)"
				class="pre-item-image"
				 v-if="!item.isImage" 
				 :src="item.url || item.path" 
				 :mode="imageMode"
				></image>
			</view>
		</view>
		<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action"
			:max-count="type=='video'?1:9" :file-list="fileList">
			<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				<!-- <u-icon name="photo" size="60" color="#c0c4cc"></u-icon> -->
				<u-icon name="plus" class="u-add-btn" size="70"></u-icon>
			</view>
		</u-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com', // 演示地址
				showUploadList: false,
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: [],
				delBgColor: '#fa3534',
				delColor: '#ffffff' ,
				fileList:  [],
				type: 'image',
				// 内部预览图片区域和选择图片按钮的区域宽度
				width: 175,
				// 内部预览图片区域和选择图片按钮的区域高度
				height: 175,
				imageMode: 'aspectFill',
				// 是否在点击预览图后展示全屏图片预览
				previewFullImage: true,
				//  是否显示进度条
				showProgress: true,
			}
		},
		// 只有onReady生命周期才能调用refs操作组件
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
			this.lists = this.$refs.uUpload.lists;
		},
		watch: {
			fileList: {
				immediate: true,
				handler(val) {
					val.map(value => {
						// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
						// 时，会触发watch，导致重新把原来的图片再次添加到this.lists
						// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
						let tmp = this.lists.some(val => {
							return val.url == value.url;
						})
						// 如果内部没有这个图片(tmp为false)，则添加到内部
						!tmp && this.lists.push({ url: value.url, error: false, progress: 100 });
					});
				}
			}
		},
		methods:{
			// 删除一个图片
			deleteItem(index) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: async (res) => {
						if (res.confirm) {
								// 如果不存在before-remove钩子，
								this.handlerDeleteItem(index);	
						}
					}
				});
			},
			// 执行移除图片的动作，上方代码只是判断是否可以移除
			handlerDeleteItem(index) {
				// 如果文件正在上传中，终止上传任务，进度在0 < progress < 100则意味着正在上传
				if (this.lists[index].process < 100 && this.lists[index].process > 0) {
					typeof this.lists[index].uploadTask != 'undefined' && this.lists[index].uploadTask.abort();
				}
				this.lists.splice(index, 1);
				this.$forceUpdate();
				// this.$emit('on-remove', index, this.lists, this.index);
				this.showToast('移除成功');
			},
			// 预览图片
			doPreviewImage(url, index) {
				if (!this.previewFullImage) return;
				const images = this.lists.map(item => item.url || item.path);
				uni.previewImage({
					urls: images,
					current: url,
					success: () => {
						// this.$emit('on-preview', url, this.lists, this.index);
					},
					fail: () => {
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			},
			// 对失败的图片重新上传
			retry(index) {
				this.lists[index].progress = 0;
				this.lists[index].error = false;
				this.lists[index].response = null;
				uni.showLoading({
					title: '重新上传'
				});
				this.uploadFile(index);
			},
		}
	}
</script>

<style lang="scss">
	@import '../../uview-ui/libs/css/style.components.scss';
	// @import '../../libs/css/style.components.scss';
	.wrap {
		// padding: 24rpx;
	}

	.slot-btn {
		width: 175rpx;
		height: 175rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		// justify-content: space-b;
		flex-wrap: wrap;
	}

	.pre-item {
		// flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 200rpx;
		overflow: hidden;
		position: relative;
		// margin-bottom: 20rpx;
	}
	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		@include vue-flex;
		align-items: center;
		justify-content: center;
	}
	.pre-item-image {
		width: 170rpx;
		height: 170rpx;
		padding: 10rpx;
	}
	.u-error-btn {
		color: #ffffff;
		background-color: $u-type-error;
		font-size: 20rpx;
		padding: 4px 0;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		line-height: 1;
	}
</style>