cbz/page_mine/pages/collect/collect.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="tabs">
			<view v-if="active == 1">
				<block v-for="(item,index) in pageList" :key="index">
					<news-module :title="item.title" :imgs="item.imgs" :type="item.type" :client="item.client" :comment="item.comment"></news-module>
				</block>
			</view>
			<view v-if="active == 3">
				<block v-for="(item,index) in pageList1" :key="index">
					<pur-order :order_no="item.order_no" :type="item.type" :name="item.name" :contacts="item.contacts" :phone="item.phone" :delivery_date="item.delivery_date"></pur-order>
				</block>
			</view>
		</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: '采购订单'
					},
					{
						id: 4,
						text: '船厂'
					}
				],
				active: 1,
				pageList: [
					{
						id: 1,
						title: '2022年上半年十部好剧，《开端》第7名，《人世间》第4名，值得观看',
						imgs: [
							"/static/images/index/class_img1.png",
							"/static/images/index/class_img1.png",
							"/static/images/index/class_img1.png"
						],
						type: '资讯',
						client: '澎湃新闻客户端',
						commnet: 77
					}
				],
				pageList1: [
					{
						id: 1,
						order_no: 'cbz1234567',
						type: '采购订单',
						name: '福建船舶有限公司',
						contacts: '张宇书',
						phone: '19823021433',
						delivery_date: '2022-11-03',
					}
				]
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 切换tabs
			changeTabs(id) {
				that.active = id
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		.tabs {
			width: 100%;
			margin: 14rpx 0 46rpx;
			.tabs_item {
				width: 25%;
				text-align: center;
				font-size: 32rpx;
				color: #222;
				font-weight: 400;
			}
			.active {
				font-weight: 500;
				position: relative;
			}
			.active::after {
				position: absolute;
				content: "";
				width: 48rpx;
				height: 8rpx;
				background-color: #506Dff;
				border-radius: 4rpx;
				bottom: -14rpx;
				left: 35%;
			}
		}
	}
</style>