mobile-admin/components/yGoods/index.vue

<template>
	<view>
		<view v-if="props.modelValue && props.modelValue.length" @click="open(true)" class="flex gap-2 overflow-x-auto">
			<view class=" flex rounded-[14px] relative" :key="img">
				已选择 {{ props.modelValue.length || 0 }} 件商品
			</view>
		</view>

		<view v-else @click="open(true)" class="flex gap-2 overflow-x-auto">
			<view style="" class="  flex rounded-[14px] relative  flex-col items-center justify-center">
				<view class="font-bold text-[12px]">请选择商品</view>
			</view>
		</view>

		<wd-popup :z-index="998" v-model="show" closable position="left" custom-style="width: 86vw;" @close="close(false)">
			<view class="pop yUpload h-dvh overflow-hidden">
				<view class="bg-white overflow-hidden h-full" style="background-clip: content-box;">

					<view class="bg-gray-100 p-4 flex">
						<view>
							<wd-button @tap="ok">确认选择</wd-button>
						</view>
					</view>

					<view v-if="LArr.length" class="shadow-lg ">
						<view class="text px-2 mt-3 font-bold">已选择 ( {{ LArr.length || 0 }}) 件商品</view>
						<view class="bg-gray images flex gap-2 overflow-x-auto p-4 pt-2 ">
							<view @click="onClickCheck(item)" class=" border-gray-100 border-solid flex rounded-[14px] relative"
								v-for="item of LArr" :key="img">

								<div class="flex flex-col">
									<view>
										<wd-img mode="aspectFill" radius="10" :width="100" :height="100" :src="item.pic_url" />
									</view>
									<view class="list-item-name" style="width: 100px;">{{ item.name }}</view>
								</div>

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

							</view>
						</view>
					</view>
					<view v-else class="shadow-lg ">
						<view class="text p-3 font-bold">请选择商品</view>
					</view>

					<view class="overflow-hidden rounded-t-3xl">
						<yList ref="yListRef" :apiObj="goods.list" :params="{ ...params, classify_id: 0 }">
							<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" :key="item.id">
										<view class="list-item-img" @click="onClickCheck(item)"
											:style="{ backgroundImage: 'url(' + item.pic_url + ')' }"></view>

										<view class="list-item-name">{{ item.name }}</view>

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

									</view>
								</view>

							</template>
						</yList>
					</view>
				</view>
			</view>

		</wd-popup>

	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import goods from '@/api/store/goods.js'
import yList from "/components/yList/index.vue"
const yListRef = ref(null)

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

const params = ref({
	keywords: "",
	status: "",
})

const LArr = ref([])

const idArr = computed(() => {
	return LArr.value.map(item => item.id)
})

const show = ref(false)
const open = (O) => {
	show.value = O

	if (O && yListRef.value?.upData) {
		yListRef.value.upData()
	}

	if (props.modelValue) {
		console.clear(props.modelValue);
		console.log(props.modelValue);

		if (Array.isArray(props.modelValue)) {
			LArr.value = JSON.parse(JSON.stringify(props.modelValue))
		} else {
			LArr.value = [props.modelValue]
		}
	}

}
open(false)

const close = () => {
	// LArr.value = []
}

const ok = () => {
	if (props.size == 1) {
		emit("update:modelValue", LArr.value.pop())
	} else {
		emit("update:modelValue", LArr.value)
	}

	show.value = false
}

const onClickCheck = (row) => {
	const index = LArr.value.findIndex(item => item.id === row.id)

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


</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;
	overflow: hidden;
	inset: 0px;
}
</style>