huayuanxi-c/src/components/ImgUpload/ImgUpload.vue

<template>
	<view class="img-container">
		<view class="wrapper-box" v-if="pic">
			<view class="wrapper" :style="{ width: width + 'vw', height: height + 'vw' }">
				<image class="image" mode="aspectFill" :src="pic" @click="preview(pic)" @load="hideLoading" />
				<text class="close-icon" @click="deletePic()">&#xe88a;</text>
			</view>
		</view>
		<view class="wrapper-box" v-else>
			<view class="add" :style="{ width: width + 'vw', height: height + 'vw' }" @click="addImg">
				<IconText :code="`\ue76f`" :color="addColor" size="32"></IconText>
				<view class="tip" v-if="tip">{{tip}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Emit,
		Watch
	} from 'vue-property-decorator';
	@Component({})
	export default class MulImgUlpload extends Vue {
		@Prop({
			default: ""
		})
		imgs ? : any;
		@Prop({
			default: ""
		})
		tip ? : any;
		@Prop({
			default: 26
		})
		width ? : number;
		@Prop({
			default: 26
		})
		height ? : number;
		@Prop({
			default: '#9c3d92'
		})
		addColor ? : string;
		@Prop({
			default: false
		})
		disabled ? : boolean;
		@Prop({
			default: "点击上传图片"
		})
		label ? : any;
		pic: any = "";
		@Emit('update')
		changeImg(): any {
			return this.pic;
		}
		@Emit('cancelUpdate')
		cancelUpdate(): any {}
		@Watch('imgs', {
			deep: true,
			immediate: true,
		})
		imgsChange(val: any) {
			if (val) {
				this.pic = val;
			} else {
				this.pic = '';
			}
		}
		addImg(): void {
			// if (this.disabled) return;

			// 选择图库图片
			const that = this;
			uni.chooseImage({
				count: 1,
				success: (res: any) => {
					const tempFilePaths: any = res.tempFilePaths;
					uni.showLoading({
						title: '上传中...'
					});
					tempFilePaths.forEach((item: any, index: any) => {
						that.$http
							.upPic({
								filePath: item
							})
							.then((res: any) => {
								uni.hideLoading();
								this.pic = res;
								that.changeImg();
							})
							.catch((err: any) => {
								uni.hideLoading();
								console.log(err);
							});
					});
				},
				fail: () => {
					this.cancelUpdate();
				}
			});
		}
		deletePic(): void {
			// console.log(3333, index);
			if (this.disabled) return;
			this.pic = '';
			this.changeImg();
		}
		preview(url: string): void {
			uni.previewImage({
				current: url, // 当前显示图片的http链接
				urls: [url] // 需要预览的图片http链接列表
			});
		}
		hideLoading(): void {
			uni.hideLoading();
		}
	}
</script>

<style lang="scss" scoped>
	.img-container {
			width: 100%;
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			background: white;
			// padding-top: 10px;
	
			.wrapper-box {
				width: 1/3 * 100%;
				margin-bottom: vw(12);
	
				&:nth-of-type(3n+2) {
					@include flex-x(center);
				}
	
				&:nth-of-type(3n) {
					@include flex-x(flex-end);
				}
				.tip{
					margin-top: vw(10);
				}
			}
	
			.wrapper {
				position: relative;
	
				.image {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}
	
				.close-icon {
					position: absolute;
					width: vw(40);
					height: vw(40);
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					@include icon(40, rgba(0, 0, 0, 0.5));
				}
			}
	
			.add {
				// width: vw(100);
				// height: vw(100);
				@include flex-y(center);
				color: #999;
				background: #F2F2F2;
				border: 1px solid #f5f5f5;
				border-radius: vw(5);
				box-sizing: border-box;
	
				.default-icon {
					@include icon(60, $btn-color);
				}
	
				.tips {
					@include word-vw(12, #cccccc);
				}
			}
		}
	</style>