feiniao-youwei-uniapp/pages/tabBar/mine/subPages/order.vue

<template>
	<view class="sub-base-container">
		<view class="search-box">
			<v-search @searchCallback="searchCallback" @clearCallback="clearCallback"></v-search>
		</view>
		<view class="tabs">
			<view :class="['tab-item',{active:active === index}]" v-for="(item,index) in tabsList" :key="index"
				@click="handleTab(index)">{{item}}</view>
		</view>
		<shop-list :active="active"></shop-list>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import shopList from "../components/shopList.vue"

	const searchCallback = (e) => {
		console.log('搜索', e)
	}
	const clearCallback = () => {
		console.log('clear')
	}

	const active = ref(0)
	const tabsList = ["全部", "待付款", "待发货", "待收货", "待评价", "退款/售后"]
	const handleTab = (index) => {
		active.value = index
	}
	
	// const shopList = [
	// 	{
	// 		status:0,
	// 	}
	// ]
</script>

<style lang="scss" scoped>
	.sub-base-container {
		padding: 0;
		.search-box{
			padding: 16rpx 24rpx 20rpx;
			background: #fff;
		}
		.tabs {
			width: 100%;
			padding: 0 24rpx 16rpx;
			box-sizing: border-box;
			display: flex;
			overflow-x: auto;
			background: #fff;

			.tab-item {
				// flex: 1;
				width: 150px;
				text-align: center;
				color: #000;
				font-size: 28rpx;
				padding: 10rpx 0;
				white-space: nowrap;

				&.active {
					border-radius: 10rpx;
					background: rgba(243, 193, 29, 0.2);
				}
			}
		}
	}
</style>