mobile-admin/components/myUpload/index copy.vue

<template>
	<view class="" style="z-index: 999;">


		<wd-popup v-model="show" closable position="left" custom-style="width: 86vw;" @close="handleClose">
			<div class="pop myUpload">
				<div class="bg-white overflow-hidden h-full" style="background-clip: content-box;">

					<view class="bg-gray-100 p-4 flex">
						<view class="mr-4">
							<wd-button @tap="chooseFile">上传文件</wd-button>
						</view>
						<view>
							<wd-button @tap="chooseFile">确认选择</wd-button>
						</view>
					</view>

					<div v-if="LArr.length" class="shadow-lg ">
						<div class="text px-2 mt-3 font-bold">已选择 ({{ LArr.length }} 张)</div>
						<div class="bg-gray images flex gap-2 overflow-x-auto p-4 pt-2 ">
							<view @click="onClickCheck({ url: img })" class=" border-gray-100 border-solid flex rounded-[14px] relative"
								v-for="img of LArr">
								<wd-img mode="aspectFill" radius="10" :width="100" :height="100" :src="img" />

								<view class="absolute bg-white opacity-80 inset-0 flex items-center justify-center border-spacing-1">取消选择
								</view>

							</view>
						</div>
					</div>
					<div v-else class="shadow-lg ">
						<div class="text p-3 font-bold">可选择 ({{ LArr.length }} 张)</div>
					</div>

					<view class="overflow-hidden rounded-t-3xl">
						<myList ref="myListRef" :apiObj="system.resourcesList" :params="{ ...params, classify_id }">
							<template #default="{ list }">

								<view class="grid grid-cols-2 gap-4 p-4 overflow-hidden rounded-t-3xl">
									<view
										class="relative flex flex-col items-center justify-center bg-gray-100 p-4 rounded-md overflow-hidden"
										v-for="item of list" v-show="item.type === 1">
										<div class="list-item-img" @click="onClickCheck(item)" v-if="item.type === 1"
											:style="{ backgroundImage: 'url(' + item.url + ')' }"></div>
										<div class="list-item-img" @dblclick="onClickDir(item)" v-if="item.type === 3"
											:style="{ backgroundImage: 'url(' + folderPng + ')' }"></div>
										<div class="list-item-name">{{ item.name }}</div>

										<view @click="onClickCheck(item)"
											class="absolute bg-white opacity-80 inset-2 flex items-center justify-center border-spacing-1"
											v-if="LArr.includes(item.url)">取消选择</view>

									</view>
								</view>

							</template>
						</myList>
					</view>
				</div>
			</div>

		</wd-popup>






	</view>
</template>

<script setup>
import { ref } from 'vue'
import system from '@/api/modules/system.js'
import myList from "/components/myList/index.vue"
import folderPng from '@/assets/images/folder.png'
import { uploadImage } from '@/utils/request';
const myListRef = ref(null)

const formData = ref({
	parent_id: 0,
	type: "image",
})

const chooseFile = async () => {
	uni.chooseImage({
		count: 1, // 默认9
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], // 从相册选择
		success: async (res) => {
			try {
				if (!res.tempFilePaths || !res.tempFilePaths.length) {
					throw new Error('未选择文件或文件路径无效。');
				}

				const filePath = res.tempFilePaths[0];
				const result = await uploadImage({ filePath, formData: formData.value, name: "image" })
				console.log('成功上传图片：', result);

				myListRef.value.upData()

				// 根据需要处理结果
			} catch (error) {
				console.error('选择文件或上传图片时出错：', error.message);
				// 处理错误
			}
		}
	});
}

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: String,
		default: ""
	},
	size: {
		type: Number,
		default: 1
	},
})

const LArr = ref([])
const onClickCheck = (row) => {
	const index = LArr.value.findIndex(item => item === row.url)


	if (index > -1) {
		LArr.value.splice(index, 1)
	} else {

		if (props.size > LArr.value.length) {
			LArr.value.unshift(row.url)
		} else {
			uni.showToast({
				title: `已选择 ${LArr.value.length} 张`,
				icon: 'none'
			})

			console.log(`已选择 ${LArr.value.length} 张`);
		}


	}
}

const show = ref(true)

// if (Array.isArray(props.modelValue)) {

// } else {

// }



// defineExpose({
// 	upData
// })
</script>

<style lang="scss">
.list-item-img {
	width: 100%;
	height: 80px;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.list-item-name {
	text-align: center;
	padding: 5px 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	width: 100%;
}

.pop {
	// position: fixed;
	background: rgba(0, 0, 0, 0.256);
	background-clip: border-box;
	z-index: 9;
	overflow: hidden;
	inset: 0px;
}
</style>