uniProject/pages/game/components/foodSelect.vue

<template>
	<!-- 食物图标按钮 -->
	<view @click="handleOpen" class="food-btn-box"></view>
	<uni-popup ref="popupRef" type="bottom">
		<view class="game-popup-box">
			<view class="game-popup-head">
				<view class="game-popup-title"></view>
				<view class="jf-btn-box">
					<!-- 积分 -->
					<view class="ezy-jf-box game-popup-jf">
						<icon class="jf-icon"></icon>
						<text class="jf-text" >{{credit}}</text>
					</view>
					<!-- 关闭按钮 -->
					<icon class="popup-close-btn" @click="handleClose"></icon>
				</view>
			</view>
			<view class="food-list-box">
				<view v-for="item in foodSpeciesList" :key="item.id" @click="handleSelectFood(item)" class="food-item-box">
					<image :src="item.imgUrl" class="food-image"/>
					<view class="food-item-jf">
						<icon class="jf-icon"></icon>
						<text class="jf-text" >{{item.id}}</text>
					</view>
				</view>
			</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]
		},
		credit: {
			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>