Delivery-merchant/pages/Orders.vue

<template>
	<view class="container">
		<view class="top">
			<view class="tabs">
				<view class="tab" :class="{ active: item === active }" v-for="(item, index) in tabs2" :key="index" @click="change(item)">
					{{ item }}
					 <div class="slip" :class="{ active: item === active }"></div>
				</view>
			</view>
			<view class="tabnav">
				<u-tabs :current="tab" active-color="#ffffff" inactive-color="#ffffffcc" :list="tabs" :bg-color="$colors.prim" :is-scroll="false" @change="changeTab"></u-tabs>
			</view>
		</view>

		<view class="list"><order-info :status='status'></order-info></view>
	</view>
</template>

<script>
import OrderInfo from '../components/OrderInfo.vue';
export default {
	data() {
		return {
			tab: 0,
			tabs2: ['外送订单', '用户自取'],
			active: '外送订单',
			tabs: [
				{
					name: '全部订单'
				},
				{
					name: '待接单'
				},
				{
					name: '配送中'
				},
				{
					name: '带退款'
				},
				{
					name: '待发货'
				},
				{
					name: '已完成'
				}
			]
		};
	},
	computed:{
		status(){
			if(this.active == '用户自取') {
				return true
			}else {
				return false
			}
		}
	},
	methods: {
		changeTab(index) {
			this.tab = index;
		},
		change(e) {
			this.active = e;
		}
	},
	components: {
		OrderInfo
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f2f4f5;
}
/deep/ .u-tab-item{
	font-size: 14px !important;
}
.top {
	padding: 10px 0;
	background-color: $u-type-primary;
	position: sticky;
	top: 43px;
	.tabnav{
		padding: 0 18px;
	}
	.tabs {
		padding: 13px 80px 0;
		color: #a7beff;
		display: flex;
		font-size: 18px;
		justify-content: space-between;
		.tab {
			&.active {
				color: #ffffff;
				font-weight: bold;
			}
			.slip {
				width: 30px;
				margin: 0 auto;
				&.active {
					border-bottom: 2px solid #ffffff;
					border-radius: 2px;
					margin-top: 12px;
				}
			}
		}
		margin-bottom: 16px;
	}
}

.list {
	padding: 12px;
}
</style>