yizhizan-h5/package/my/previewResume/index.vue

<template>
	<view class="preview-resume">
		<nav-bar title="简历预览" color="#000" class="nav-bar">
			<view class="import-btn" slot="right">导出</view>
		</nav-bar>
		
		<view class="tabs">
			<view class="tab" :class="{ active: index === activeIndex }" v-for="(tab, index) in tabs" :key="index" @click="handleChangeTab(index)">
				<view class="tab-name">{{ tab.name }}</view>
				<view class="tab-active"></view>
			</view>
		</view>
		
		<scroll-view class="content" :scroll-y="true">
			<previewResume v-if="activeIndex == 0"></previewResume>
			<indexCard v-else-if="activeIndex == 1"></indexCard>
			<chatCard v-else-if="activeIndex == 2"></chatCard>
		</scroll-view>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	import previewResume from '@/components/resume/preview-resume.vue';
	import indexCard from '@/components/resume/index-card.vue';
	import chatCard from '@/components/resume/chat-card.vue';
		
	export default {
		components: {
			navBar,
			previewResume,
			indexCard,
			chatCard
		},
		data() {
			return {
				tabs: [
					{
						name: '在线简历'
					},
					{
						name: '首页卡片'
					},
					{
						name: '沟通卡片'
					}
				],
				activeIndex: 0
			}
		},
		onLoad(options) {
			if (options.type) {
				// type: index首页卡片、chat沟通卡片
				if (options.type === 'index') {
					this.activeIndex = 1
				} else if (options.type === 'chat') {
					this.activeIndex = 2
				}
			}
		},
		methods: {
			handleChangeTab(index) {
				this.activeIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		height: 96rpx;
		background: #fff;
	}
	.import-btn {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}
	.preview-resume {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: rgba(241, 245, 248, 1);
	}
	
	// tabs栏
	.tabs {
		display: flex;
		justify-content: center;
		background-color: #fff;
		height: 80rpx;
		.tab {
			padding: 24rpx 32rpx 12rpx;
			.tab-name {
				color: rgba(51, 51, 51, 1);
				line-height: 32rpx;
			}
			.tab-active {
				width: 50rpx;
				height: 6rpx;
				border-radius: 6rpx;
				margin: 6rpx auto 0;
			}
		}
		.active {
			.tab-name {
				color: rgba(1, 107, 246, 1);
				font-weight: bold;
			}
			.tab-active {
				background: rgba(1, 107, 246, 1);
			}
		}
	}
	
	.content {
		height: 100px;
		flex: 1;
		margin-top: 32rpx;
	}
</style>