uniProject/pages/game/components/foodSelect.vue

<template>
	<!-- 食物图标按钮 -->
	<view @click="handleOpen">选择</view>
	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
		<view style="height: 300px;display: flex;justify-content: space-between;">
			<view v-for="item in foodSpeciesList" :key="item.id" @click="handleSelectFood(item)">
				<img style="width: 50px;height: auto;" :src="item.imgUrl">
				<text>{{item.credit}}</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {foodSpeciesList} from './constantConfig';
	import {ref} from "vue";
	const emits = defineEmits(['weishi'])
	const props = defineProps({
		shiwuId: {
			type: [String,Number]
		}
	})
	
	const popupRef = ref(null);
	function handleOpen() {
		popupRef.value.open();
	}
	function handleClose() {
		popupRef.value.close();
	}
	function handleSelectFood(shiwu) {
		emits('weishi',shiwu);
	}
	
	defineExpose({
		handleClose
	})
</script>

<style>
</style>