cashier_admin_app/pageProduct/add-Product/components/choose-goods.vue

<template>
	<view class="mask u-fixed position-all u-flex u-col-bottom" v-if="show" @tap="close">
		<view class="bg-fff w-full" @tap.stop="nullFunction">
			<view class="u-p-30">
				<view class="font-bold u-text-center">选择商品</view>
				<view class="u-m-t-32 u-flex">
					<view class="u-flex-1 u-p-r-16">
						<view class="u-m-b-12">商品名称</view>
						<uni-easyinput v-model="goods.query.name" placeholder="请输入商品名称" />
					</view>
					<view class="u-flex-1 u-p-l-16">
						<view class="u-m-b-12">商品分类</view>
						<uni-data-picker :clear-icon="false" :map="{text:'name',value:'id'}" placeholder="请选择分类"
							popup-title="请选择分类" :localdata="category" v-model="goods.query.categoryId">
						</uni-data-picker>
					</view>
				</view>

				<view class="u-m-t-32 u-flex u-row-right">
					<view class="u-flex-1 u-p-r-16">
						<my-button type="cancel" plain @tap="resetQuery">重置</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button @tap="getGoods">查询</my-button>
					</view>
				</view>
			</view>

			<scroll-view :scroll-x="false" scroll-y="true" :style="computedStyle()">
				<view class="u-p-l-30 u-p-r-30">
					<view class="u-flex u-row-between no-wrap">
						<view>
							<my-radio @change="radioAllChange" v-model="goods.allChecked" shape="square"
								:size="20"></my-radio>
						</view>
						<view>商品信息</view>
						<view>规格</view>
						<!-- <view>是否售尽</view> -->
						<!-- <view>是否分销</view> -->
						<view>售价</view>
						<view>销量/库存</view>
						<view>分类名称</view>
					</view>
					<view class="u-m-t-12 u-flex u-row-between" v-for="(item,index) in goods.list" :key="index">
						<my-radio @change="radioChange" v-model="item.checked" shape="square" :size="20"></my-radio>
						<view class="u-flex u-flex-col u-row-center u-col-center">
							<image lazy-load class="coverImg" :src="item.coverImg" mode=""></image>
							<view class="u-m-t-10">{{item.name}}</view>
						</view>
						<view>
							{{item.typeEnum}}
						</view>
						<view>
							￥{{ item.lowPrice }}
						</view>
						<view>
							{{ item.realSalesNumber }}/{{ item.stockNumber }}
						</view>
						<view>
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="u-p-30">
				<my-pagination :totalElements="goods.totalElements" :size="goods.query.size"
					@change="pageChange"></my-pagination>
				<view class="u-m-t-20 u-flex">
					<view class="u-flex-1 u-p-r-16">
						<my-button type="cancel" plain @tap="close">取消</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button @tap="confrim">确定</my-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import myButton from '@/components/my-components/my-button';
	import myRadio from '@/components/my-components/my-radio';
	import myPagination from '@/components/my-components/my-pagination'
	import {
		$tbProductV2
	} from '@/http/yskApi/goods.js';
	import {
		reactive,
		onMounted,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		height: {
			type: [Number, String],
			default: '40vh'
		},
		category: {
			type: Array,
			default: () => {
				return []
			}
		}
	})

	function nullFunction() {

	}

	const show = ref(props.modelValue)

	function open(arr) {
		show.value = true
		if (arr) {
			for (let i in goods.list) {
				console.log(arr.includes(goods.list[i].id));
				goods.list[i].checked = arr.includes(goods.list[i].id)
			}
		}

	}

	function close() {
		show.value = false
	}



	function resetQuery() {
		Object.assign(goods.query, $quey)
	}

	function computedStyle() {
		return `height:${typeof props.height==='string'?props.height:props.height+'rpx'};`
	}

	const emits = defineEmits(['update:modelValue', 'confirm'])

	const $quey = {
		categoryId: "",
		createdAt: [],
		id: "",
		name: "",
		sort: "createdAt,desc",
		type: "",
		page: 0,
		size: 10,
	}
	const query = reactive({
		...$quey
	})
	const goods = reactive({
		list: [],
		allChecked: false,
		totalElements: 0,
		query: {
			...$quey
		}
	})

	function getGoods() {
		$tbProductV2(goods.query).then(res => {
			goods.list = res.content.map(v => {
				return {
					...v,
					checked: false
				}
			})
			goods.allChecked = false
			goods.totalElements = res.totalElements
		})
	}
	getGoods()

	function pageChange(page) {
		goods.query.page = page - 1
		getGoods()
	}

	function radioChange(newval) {
		goods.allChecked = goods.list.filter(v => v.checked).length != 0
	}

	function radioAllChange(newval) {
		goods.list.forEach(i => {
			i.checked = newval
		})
	}

	function confrim() {
		const arr = goods.list.filter(v => v.checked)
		emits('confirm', arr)
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.mask {
		background: rgba(51, 51, 51, 0.5);
		z-index: 900;
	}

	.coverImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}
</style>