zh_order_food_xcx/pages/order/index.vue

<template>
	<view class="flex-common-css iPhone-bottom flex-common-css box-border-box">
		<Nav :leftShow='false' title="订单" leftIconColor="#333" titleColor="#333"></Nav>
		
		<view class="nav-box box-border-box bgc-f display-flex">
			<view class="nav-item" :class="type == item.id?'fs-36 fw-600':'fs-34 fw-400'" 
			v-for="(item,i) in navList" :key="i" @click="selectType(item.id)">
				{{item.name}}
				<view v-if="type == item.id" class="nav-item-x"></view>
			</view>
		</view>
		
		
		<view v-if="list.length == 0" class="scroll-view-css">
			<EnBlank :customSrc='true'>
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</view>
		
		<scroll-view v-else :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			
		</scroll-view>
	</view>
</template>

<script>
	import tools from '@/service/tools';
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	
	export default {
		components: {EnBlank},
		data() {
			return {
				type:1,
				navList:[
					{name:'外卖',id:1},
					{name:'代取',id:2},
					{name:'团购',id:3},
					{name:'票务',id:4},
					{name:'干洗',id:5},
				],
				page:1,
				list:[],
				total:0,
			};
		},
		onShow() {
			this.resetList();
		},

		methods: {
			getList(){
				if(this.type === 1){
					
				}else if(this.type === 2){
					
				}else if(this.type === 3){
					
				}else if(this.type === 4){
					
				}else if(this.type === 5){
					
				}
			},
			
			resetList(){
				this.page = 1;
				this.list = [];
				this.getList();
			},
			selectType(type){
				if(type != this.type){
					this.type = type;
					this.resetList();
				}
			},
			
			scrolltolower() {
				console.log('触底');
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.nav-box{
		padding: 26rpx 44rpx;
		overflow-x: scroll;
		.nav-item{
			margin-right: 76rpx;
			white-space: nowrap;
			position: relative;
			.nav-item-x{
				position: absolute;
				width: 48rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #41ABF5;
				left: 12rpx;
				bottom: -10rpx;
			}
		}
	}
</style>