代客下单增加搜索

pagesCreateOrder/index/components/goods-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="u-relative u-flex item">
-		<image lazy-load class="img" :src="data.coverImg" mode=""></image>
+		<image lazy-load class="img" :src="data.coverImg" mode="" :style="computedImgStyle()"></image>
 		<view class="info u-flex u-row-between u-col-top u-flex-col" @tap="emitEvent('add')">
 			<view>
 				<view>{{data.name}}</view>
@@ -50,6 +50,13 @@
 		watch
 	} from 'vue';
 	const props = defineProps({
+		img:{
+			type:Object,
+			default:{
+				width:'250rpx',
+				height:'272rpx'
+			}
+		},
 		index: {
 			type: Number,
 		},
@@ -67,6 +74,14 @@
 			}
 		}
 	})
+	
+	function computedImgStyle(){
+		return {
+			width:props.img.width,
+			height:props.img.height
+		}
+	}
+	
 	//判断是否是菜品
 	function isGoods(){
 		return props.data.hasOwnProperty('id')
@@ -118,8 +133,8 @@
 	}
 
 	.item {
-		width: 250rpx;
+		// width: 250rpx;
-		height: 272rpx;
+		// height: 272rpx;
 		background: #F9B798;
 		border-radius: 8rpx 8rpx 8rpx 8rpx;
 		overflow: hidden;

pagesCreateOrder/index/index.vue

@@ -92,7 +92,21 @@
 		</template>
 		<template v-else>
 			<view class="u-menu-wrap">
-				11
+				<scroll-view class=" u-flex-1" scroll-y scroll-with-animation>
+					<view class="u-p-l-30 u-p-r-30">
+						<view class="u-font-28 color-666 ">搜索</view>
+						<view class="u-flex u-m-t-20  u-flex-wrap u-row-between">
+							<view class="u-m-b-30" v-for="(goodsItem, goodsIndex) in searchResult" :key="goodsIndex">
+								<goods-item :img="{width:'330rpx',height:'370rpx'}" @chooseGuige="chooseGuige($event,index)"
+									@add="goodsUpdate($event,index,true)" @reduce="goodsUpdate($event,index,false)"
+									:index="goodsIndex" :data="goodsItem"></goods-item>
+						
+							</view>
+						</view>
+					</view>
+				
+				</scroll-view>
+
 			</view>
 		</template>
 
@@ -377,6 +391,8 @@
 			// data.table=res.content[0]
 		}
 	}
+
+	let $originGoods = ref([])
 	async function init() {
 		const shopInfo = await tbShopInfo()
 		$shop.value = shopInfo
@@ -401,9 +417,10 @@
 			}
 			return isShow;
 		});
+		$originGoods.value = goods
 		if (!data.table.tableId) {
 			//无桌台
-			setTabBar(category, goods, [])
+			setTabBar(category, $originGoods.value, [])
 			return
 		}
 		const {
@@ -441,15 +458,29 @@
 
 	let searchValue = ref('')
 	let isSearch = ref(false)
+	let searchResult = ref([])
+
+	function returnSearchGoods() {
+		const newval = searchValue.value
+		let arr = []
+		if (newval == "") {
+			arr = $originGoods.value;
+		} else {
+			arr = $originGoods.value.filter((v) =>
+				v.name.includes(newval.trim())
+			);
+		}
+		return arr
+	}
 
 	function search() {
-		// isSearch.value=true
+		isSearch.value = true
-		console.log(searchValue.value);
+		searchResult.value = returnSearchGoods()
-		console.log(data.tabbar);
+		console.log(searchResult.value);
 	}
 
 	function clearSearch() {
-		// isSearch.value=false
+		isSearch.value = false
 	}
 
 	function chooseUser() {