restaurant_system_ui_uni/yudao-ui-admin-uniapp/pages/restaurant/order.vue

<template>
	<view>
        <!-- <view > -->
            <!-- <swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500"> -->
			<!-- <swiper-item v-for="(item,index) in 4" :key="index"> -->
				<image src="./top.png" mode="aspectFit" style="height: 20vh; width: 100%;margin-top: 2vh;"></image>
			<!-- </swiper-item> -->
		<!-- </swiper> -->
        <!-- </view> -->
		<view class="aside-main" >
			<scroll-view scroll-y class="scroll-Y1" style="max-height: 71vh;" scroll-with-animation>
				<view :class="num==index?'active':'active2'" v-for="(item,index) in asideList" :key="index"
					@click="asid(index)">{{item.title}}
				</view>
			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view scroll-y class="scroll-Y2"  style="max-height: 71vh;background-color: whitesmoke;" :scroll-into-view="rightview"
				scroll-with-animation @scroll="scrollright" @scrolltoupper="scrolltop" @scrolltolower="scrollbuttom">
			
				<!-- 功能区节点 -->
				<view v-for="(item,index) in asideList" :key="index" class="min" :id="'rightIndex'+index" :style="{marginTop:index!=0?'10px':0}">
					<span class="title">{{item.title}}</span>
					<view v-for="(i,j) in item.list" :key="j" class="minmi" >
						<image class="imgPic" :src="i.url" mode=""></image>
						<view class="rightContainer">
							<view class="foodName">
								{{i.name}}
							</view>
							<view class="foodPrice">
								<view class="priceflex">
									<text class="zero">￥</text>
									{{i.price}}
								</view>
								<view class="shopCar iconfont-themeColor-write" v-show="i.num == 0" @tap="addcart(i)">
                                    <text class="lg text-white cuIcon-add"  ></text>
								</view>
                                <view class=""  v-if="i.num > 0" >
									<!-- <text class="lg text-white cuIcon-minus" @tap="addcart(i)" ></text> -->
									 <uni-number-box :min="0" :max="100" :step="1" v-model="i.num" @tap="chengeCart(i)"  />
									 <!-- {{ i.num }} -->
                                     
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
        <view class="cu-bar bg-white tabbar border shop"  style="padding-bottom: 0;max-height: 5vh;">

				<view class="bg-orange submit"  @click="toggle()">
                    <view class="cuIcon-cartfill" style="font-size: 30px;">
						<!-- <view class="cu-tag badge">{{nowCart.length}}</view> -->
					</view>
                    <view style="margin-left: 20px;">
                        <view class="">合计: ￥{{nowCartPrice}}</view>
                        <view class="">菜品: {{nowCartList.length}}道</view>
                    </view>
                  
                </view>
				<view class="bg-red submit">立即下单</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom" >
			<view style="height: 40vh;">
				<view class="cu-bar bg-white ">
					<view class="action">
						<text class="cuIcon-titles text-orange"></text> 购物车
					</view>
				</view>
				<view style="height: 30vh;overflow-y: auto;">		
					<view v-for="(i,j) in nowCartList" :key="j" class="minmi" style="width: 100vw;"  >
							<image class="imgPic" :src="i.url" mode=""></image>
							<view class="rightContainer">
								<view class="foodName">
									{{i.name}}
								</view>
								<view class="foodPrice">
									<view class="priceflex">
										<text class="zero">￥</text>
										{{i.price}}
									</view>
									<view class="shopCar iconfont-themeColor-write" v-show="i.num == 0" @tap="addcart(i)">
										<text class="lg text-white cuIcon-add"  ></text>
									</view>
									<view class=""  v-if="i.num > 0" >
										<!-- <text class="lg text-white cuIcon-minus" @tap="addcart(i)" ></text> -->
										<!-- <uni-number-box :min="0" :max="100" :step="1" v-model="i.num" @tap="chengeCart(i)"  /> -->
										<text>{{ i.num }}</text>
										
									</view>
								</view>
							</view>
					</view>
				</view>
				<button class="bg-red submit">立即下单</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import goodsApi from '@/sheep/api/restaurant/goods'
	import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue';
	import { onShow } from '@dcloudio/uni-app';

	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	
	const popup = ref(null);
    const nowCartList = ref([])
    const nowCartPrice = ref(0)
	const mainH = ref('350')
	const num = ref(0)
	const leftview = ref('')
	const rightview = ref('')
	const nodes = ref([])
	const shopchecked = ref('自取')
	const checkedmode = (e) => {
		shopchecked.value = e
	}
	const asideList = ref([])
    const getAideList = ref([])
	const toggle = () =>{
		popup.value.open()
}
    // 分类数据
        const categorizeItems = (items) => {
            asideList.value = {};
        items.forEach(item => {
            if (!asideList.value[item.goodsTypeid]) {
                asideList.value[item.goodsTypeid] ={
                    title: item.goodsTypeName,
                    list: []     
                };
            }
            asideList.value[item.goodsTypeid].list.push(
                {   url:item.goodsIcon,
                    name: item.goodsName,
                    price: item.goodsPrice,
                    // id: item.goodsId
                    num : 0
                });
        });
        console.log('asideList', asideList.value,'items',items);
        };
	onShow(async () => {
		// [{
		// 	title: "双人套餐",
		// 	list: new Array(10).fill({
		// 		url: "https://q9.itc.cn/q_70/images01/20240419/ab185a39af90465cbe8cda9e81ec7e71.jpeg",
		// 		name: '双人套餐',
		// 		price: 32
		// 	})
		// }, ]
		getAideList.value =(await goodsApi.getAll()).data;
        categorizeItems(getAideList.value)
	});
	onMounted(() => {
		uni.getSystemInfo({
			success: (res) => {
				mainH.value = res.windowHeight - uni.upx2px(88) + 'px'
			}
		})
		coordinate()
      
	})
    const addcart = (item)=>{
        console.log('item',item)
        item.num=1
		nowCartList.value.push(item)
		// nowCartPrice.value = nowCartPrice.value+item.price
		countprice()
		console.log('nowCartList',nowCartList.value);
	}
	const countprice = ()=>{
		let totalprice = 0
		nowCartList.value.forEach(element => {
			totalprice = totalprice +element.price*element.num
		});
		nowCartPrice.value = totalprice
		// console.log('nowCartList',nowCartList.value);
	}
	const chengeCart = (item)=>{
		if(item.num == 0){
			nowCartList.value = nowCartList.value.filter(element=>element.num!==0)
		}
		
		console.log('item',item)
		countprice()
		console.log('nowCartList',nowCartList.value);
		// item.num=1
	}
	const asid = (index) => {
		num.value = index
		rightview.value = 'rightIndex' + index
	}

	const scrolltop = () => {
		num.value = 0
	}

	const scrollbuttom = () => {
		num.value = nodes.value.length - 1
	}

	const scrollright = (e) => {
		console.log( nodes.value);
		for (let i = 0; i < nodes.value.length - 1; i++) { // 从0开始循环，并且减去1以避免越界
			if (e.detail.scrollTop + nodes.value[0] >= nodes.value[i] && e.detail.scrollTop + nodes.value[0] < nodes
				.value[i + 1]) {
				num.value = i;
				break; // 找到对应的索引后，退出循环
			}
		}
		// 处理边界情况
		if (e.detail.scrollTop + nodes.value[0] <= nodes.value[0]) {
			num.value = 0;
		} else if (e.detail.scrollTop + nodes.value[0] >= nodes.value[nodes.value.length - 1]) {
			num.value = nodes.value.length - 1;
		}

		console.log(num.value);
	}


	const coordinate = () => {
		const instance 	= getCurrentInstance(); // 获取组件实例
		const query = uni.createSelectorQuery().in(instance)
		console.log('query',query);
		query.selectAll(".min").boundingClientRect((data) => {
			console.log('data',data);
			for (let i = 0; i < data.length; i++) {
				nodes.value.push(data[i].top)
			}
		}).exec()
	}
</script>

<style lang="scss">
    .title{
    width: 99%;
    text-align: left;
    padding-left: 10px;
    border-left: 5px solid red;
    font-size: 18px;
    margin-left: 20px;
    margin-top: 10px;
    font-weight: 800;
    }
	.active {
		font-size: 30upx;
		color: #F9BE3E;
	}

	.active2 {
		font-size: 30upx;
	}

	.min {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		// margin: 20px 0;
		background-color: white;
        padding-bottom: 20px;
	}

	.minmi {
		display: flex;
		width: 592upx;
		margin-left: 25upx;
		padding-top: 51upx;

		.imgPic {
			width: 208upx;
			height: 167upx;
			border-radius: 10upx;
			margin-left: 20upx;
		}

		.rightContainer {
			display: flex;
			flex-direction: column;
			height: 167upx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: flex-start;
			padding-left: 18upx;
			padding-right: 18upx;
			padding-top: 18upx;
			// padding-bottom: 18upx;
			flex: 1;

			.foodName {
				font-weight: 700;
				font-size: 25upx;
			}

			.foodPrice {
				display: flex;
				justify-content: space-between;
				width: 375upx;
				color: #F9BE3E;

				.priceflex {
					display: flex;
					align-items: center;

					.zero {
						font-size: 15upx;
					}
				}

				.shopCar {
					background-color: #F9BE3E;
					border-radius: 45upx;
					width: 112upx;
					height: 45upx;
					font-size: 25upx;
					text-align: center;
					line-height: 46upx;
				}
			}
		}
	}

	.aside-main {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.scroll-Y1 {
		flex: 1;
		box-sizing: border-box;
	}

	.scroll-Y1 view {
		text-align: center;
		padding-top: 33upx;
		// padding-bottom: 33upx;
	}

	.scroll-Y2 {
		flex: 3;
		box-sizing: border-box;
		// padding-bottom: 170upx;
	}

	.scroll-Y2 view {
		text-align: center;
		/* margin:20upx; */
	}

	.icon {
		width: 50upx;
		height: 50upx;
		margin-top: 10upx;
	}

	.icon1 {
		width: 30upx;
		height: 30upx;
		position: absolute;
		top: 15upx;
		left: 10upx;
	}

	.btn {
		width: 140upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0;
		padding: 0;
		font-size: 30upx;
	}

	.serch {
		height: 60upx;
		flex: 2;
		margin-left: 20upx;
		margin-right: 20upx;
		box-sizing: border-box;
		border: solid 1upx #ccc;
		border-radius: 10upx;
		position: relative;
	}

	.serch input {
		height: 60upx;

		margin-left: 60upx;
	}
</style>