school_ecology_h5/components/school-photo-upload-box/school-photo-upload-box.vue

<template>
	<view class="content">
		<!-- 上传到区域 -->
		<view class="box" v-if="type == 2">
			<view class="box_title">
				<text class="text">*</text>
				上传到
			</view>
			<picker :range="listRange" range-key="name" @change="changeMode">
				<view class="box_input">
					<view class="picker" :class="{ pick: form.categoryName }">{{ form.categoryName ? form.categoryName : '请选择相册分组' }}</view>
					<uni-icons type="down" size="24" color="#A6A6A6"></uni-icons>
				</view>
			</picker>
		</view>

		<!-- 上传照片区域 -->
		<view class="upload">
			<view class="img_box" v-if="form.images.length" v-for="(item, index) in form.images">
				<image class="img" :src="item" mode="aspectFill" @click="clickImg(form.images, index)"></image>
				<!-- 删除图标区域 -->
				<view class="delete" v-if="form.images.length" @click="clickClose(index)">
					<uni-icons type="close" size="15" color="#fff"></uni-icons>
				</view>
			</view>

			<view v-if="form.images.length < 3" class="upload_box" @click="handleUpload">
				<uni-icons type="plusempty" size="30" color="#A6A6A6"></uni-icons>
				上传照片
			</view>
		</view>

		<view class="btn" @click="handleSubmit">确认发布</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCategoryImages, getInsertImage, getReleaseImage } from '@/api/index.js'
import { uploadImage } from '@/api/uploadImage.js'

const $props = defineProps(['type', 'currentId'])
const $emit = defineEmits(['change'])

// 筛选框绑定数组
const listRange = ref([])

// 提交数据
const form = ref({
	// 相册分类名称
	categoryName: '',
	// 相册分类ID
	categoryId: '',
	// 照片链接集合
	images: [],
	// 活动id
	id: ''
})

onMounted(() => {
	// console.log($props.type)
	if ($props.type == 1) {
		form.value.id = $props.currentId
	}
	if ($props.type == 2) {
		getTagList()
	}
})

// 获取相册分类集合
const getTagList = async () => {
	const res = await getCategoryImages()
	// console.log(res)
	listRange.value = res.data
}

// 筛选框选择时的回调
const changeMode = (e) => {
	let index = e.detail.value
	form.value.categoryName = listRange.value[index].name
	form.value.categoryId = listRange.value[index].id
	// console.log(form.value)
}

// 上传照片按钮回调
const handleUpload = () => {
	uni.chooseImage({
		count: 3 - form.value.images.length,
		success: async (res) => {
			// console.log(res)

			uni.showLoading({
				title: '上传中...',
				mask: true
			})

			for (let item of res.tempFilePaths) {
				let temp = await uploadImage(item)
				let result = JSON.parse(temp.data)
				// console.log(result)

				if (result.code == 200) {
					form.value.images.push(result.data.fileUrl)
				}
			}
			// console.log(form.value)
			uni.hideLoading()
		}
	})
}

// 确认发布按钮回调
const handleSubmit = () => {
	uni.showModal({
		title: '提示',
		content: '确定发布吗？',
		success: (res) => {
			if (res.confirm) {
				if ($props.type == 1) {
					// 活动
					submit_type1()
				} else {
					// 校友相册
					submit_type2()
				}
			}
		}
	})
}

// 上传活动照片
const submit_type1 = async () => {
	const res = await getReleaseImage(form.value)
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '发布成功',
			icon: 'success',
			mask: true
		})

		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/activity/activity'
			})
		}, 1500)
	}
}

// 上传校友相册
const submit_type2 = async () => {
	const res = await getInsertImage(form.value)
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '发布成功',
			icon: 'success',
			mask: true
		})

		setTimeout(() => {
			$emit('change', 1)
		}, 1500)
	}
}

// 点击每一张图片的回调
const clickImg = (urls, current) => {
	uni.previewImage({
		urls,
		current
	})
}

// 点击删除图标回调
const clickClose = (e) => {
	uni.showModal({
		title: '提示',
		content: '确定删除该照片吗？',
		success: (res) => {
			if (res.confirm) {
				form.value.images.splice(e, 1)
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	margin-top: 20rpx;
	min-height: calc(100vh - 130rpx);

	.box {
		margin-bottom: 15rpx;
		font-size: 28rpx;

		.box_title {
			display: flex;
			margin-bottom: 15rpx;

			.text {
				color: #d43030;
			}
		}

		.box_input {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 22rpx;
			width: 710rpx;
			height: 80rpx;
			border-radius: 6rpx;
			background-color: #f5f5f5;

			.input {
				height: 100%;
				font-size: 28rpx;
			}

			.picker {
				color: #a6a6a6;
			}

			.pick {
				color: #000;
			}
		}
	}

	.upload {
		margin-top: 56rpx;

		.img_box {
			position: relative;
			display: inline-block;
			margin-right: 20rpx;
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;

			.img {
				width: 100%;
				height: 100%;
			}

			.delete {
				z-index: 1;
				position: absolute;
				top: 5rpx;
				left: 102rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.upload_box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			width: 140rpx;
			height: 140rpx;
			color: #a6a6a6;
			font-size: 24rpx;
			border-radius: 8rpx;
			background-color: #f0f6fc;
		}
	}

	.btn {
		position: absolute;
		left: 50%;
		bottom: 150rpx;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 661rpx;
		height: 90rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 8rpx;
		background-color: #007aff;
	}
}
</style>