cbz/page_mine/pages/order/oceanShipping.vue

<template>
	<view class="content">
		<view class="tabs hflex acenter jbetween">
			<block v-for="(item,index) in tabs" :key="index">
				<view class="tabs_item" :class="active == item.id? 'active': ''" @click="changeTabs(item.id)">{{item.text}}</view>
			</block>
		</view>
		<view class="box">
			<my-order :list="pageList" order_type="4"></my-order>
		</view>
	</view>
	
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				tabs: [
					{
						id: 1,
						text: '未报价'
					},
					{
						id: 2,
						text: '已报价'
					},
					{
						id: 3,
						text: '已匹配'
					}
				],
				active: 1,
				pageList: [
					{
						id: 1,
						order_no: 'cbz1234567',
						type: '0',
						goods: [
							{
								id: 1,
								name: '非离子表面活性剂',
								num: 3,
								norm: 15
							},
							{
								id: 2,
								name: '非离子表面活性剂',
								num: 3,
								norm: 15
							}
						],
						offer: '1999.89'
					},
					{
						id: 2,
						order_no: 'cbz1234567',
						type: '1',
						goods: [
							{
								id: 1,
								name: '非离子表面活性剂',
								num: 3,
								norm: 15
							},
							{
								id: 2,
								name: '非离子表面活性剂',
								num: 3,
								norm: 15
							}
						],
						offer: '1999.89'
					}
				]
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 切换tabs
			changeTabs(id) {
				that.active = id
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f4f4f4;
		.tabs {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx 40rpx;
			.tabs_item {
				font-size: 32rpx;
				color: #242424;
			}
			.active {
				color: #222;
				position: relative;
			}
			.active::after {
				content: "";
				position: absolute;
				width: 48rpx;
				height: 8rpx;
				background-color: #506dff;
				border-radius: 4rpx;
				bottom: -14rpx;
				left: 24rpx;
			}
			
		}
		.box {
			padding: 0 30rpx;
		}
	}
</style>