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 {
		$tbProduct
	} 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: '',
		name: '',
		page: 0,
		size: 10,
	}
	const query = reactive({
		...$quey
	})
	const goods=reactive({
		list:[],
		allChecked:false,
		totalElements:0,
		query:{
			...$quey
		}
	})
	function getGoods() {
		$tbProduct(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>