yicangzongtai_app_240321/pages/task/components/submitImg.vue

<template>
	<view class="task-form-item form-item-media">
		<view class="form-lable">
			<text><text class="form-must" v-if="rule && rule.required">* </text>照片:</text>
			<text class="form-media-num">({{photos_list.length}}/{{num}})</text>
		</view>
		<view class="form-img-video">
			<view @click.stop="selectImg()" class="updata-btn img-video-item"
				v-if="(!photos_list || photos_list.length < num) && !checkPage">
				<text class="iconfont_yige">&#xe6aa;</text>
				<text>请上传照片</text>
			</view>
			<template v-if="photos_list && photos_list.length > 0">
				<view class="img-video-box img-video-item" v-for="(item , index) in photos_list"
					@click.stop="onBigImg(index)">
					<view class="del-img-video iconfont_yige" @click.stop="delphotos(index)" v-if="!checkPage">&#xe867;
					</view>
					<image class="img-video" :src="item" mode="aspectFit"></image>
				</view>
			</template>
		</view>
		<uni-popup ref="submitImgyRef" maskBg="rgba(0, 0, 0,.4)">
			<view class="submitImg-look">
				<swiper class="swiper" :current="lookIndex">
					<swiper-item v-for="(item,index) in photos_list">
						<view class="swiper-item">
							<image :src="item" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		uploadImage
	} from "@/utils/tool.js"
	export default {
		name: 'submitImg',
		model: {
			prop: ['photos'],
			event: ['onChange']
		},
		props: {
			checkPage: {
				type: Boolean,
				default: false
			},
			num: {
				type: Number,
				default: 3
			},
			rule: {
				type: Object,
				default: null
			},
			photos: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				photos_list: [],
				lookIndex: 0,
			}
		},
		methods: {
			// 删除
			delphotos(index) {
				this.photos_list.splice(index, 1);
			},
			selectImg() {
				const num = this.num - this.photos_list.length;
				if (num <= 0) return;
				uploadImage(num).then(res => {
					this.photos_list = this.photos_list.concat(res || []);
				})
			},
			onBigImg(index) {
				this.lookIndex = index;
				this.$refs.submitImgyRef.open();
			}
		},
		watch: {
			photos: {
				handler(newC, oldC) {
					this.photos_list = newC || []
				},
				deep: true,
				immediate:true
			},
			photos_list: {
				handler(newC, oldC) {
					this.$emit('onChange', newC)
				},
				deep: true
			},
		},
		created() {
			// this.$nextTick(() => {
			// 	this.$refs.submitImgyRef.open()
			// })
		}
	}
</script>

<style lang="scss" scoped>
	@import '~./submint.scss';

	.submitImg-look {
		// width: 100vw;
		// height: 100vh;
		// background-color: #000;

		.swiper {
			width: 100vw;

			.swiper-item {
				width: 100%;
				width: 100%;

				// background-color: red;
				image {
					width: 100%;
					max-height: 100vh;
				}
			}
		}
	}
</style>