job-pc/src/views/about/index.vue

<template>
	<a-row type="flex" justify="center" class="content-padding-inline">
		<a-col span="18">
			<div
				style="width: 100%;background-color: #fff;height: calc(100vh - 100px); overflow: auto; margin-top: 30px; padding: 10px;border-radius: 8px;cursor: pointer;">
				<a-tabs type="card" v-model:activeKey="activeKey" @change="tabChange">
					<a-tab-pane :key="1" tab="关于我们">
						<a-typography style="padding: 20px;">
							<a-typography-title :level="3">关于我们</a-typography-title>
							<a-typography-paragraph v-if="detail">
								<div v-html="detail.value"></div>
							</a-typography-paragraph>
						</a-typography>
					</a-tab-pane>
					<a-tab-pane :key="2" tab="联系方式">
						<a-typography style="padding: 20px;">
							<a-typography-title :level="3">联系方式</a-typography-title>
							<a-typography-paragraph v-if="detail">
								<div v-html="detail.value"></div>
							</a-typography-paragraph>
						</a-typography>
					</a-tab-pane>
					<a-tab-pane :key="3" tab="地图位置">
						<a-typography style="padding: 20px;">
							<a-typography-title :level="3">地图位置</a-typography-title>
							<a-typography-paragraph>
								<map-marker></map-marker>
							</a-typography-paragraph>
						</a-typography>
					</a-tab-pane>
					<a-tab-pane :key="4" tab="收费标准">
						<a-typography style="padding: 20px;">
							<a-typography-title :level="3">收费标准</a-typography-title>
							<a-typography-paragraph v-if="detail">
								<div v-html="detail.value"></div>
							</a-typography-paragraph>
						</a-typography>
					</a-tab-pane>
					<a-tab-pane :key="5" tab="汇款方式">
						<a-typography style="padding: 20px;">
							<a-typography-title :level="3">汇款方式</a-typography-title>
							<a-typography-paragraph v-if="detail">
								<div v-html="detail.value"></div>
							</a-typography-paragraph>
						</a-typography>
					</a-tab-pane>
				</a-tabs>
			</div>
		</a-col>
	</a-row>

</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineEmits, defineProps, watch } from 'vue';
	import MapMarker from '@/components/map/marker.vue'
	import { GetSysconfigDetail } from '@/apis/models';
	let detail = ref<any>('')
	let activeKey = ref<Number>(1)

	const tabChange = (val) => {
		detail.value = null
		switch (val) {
			case 1:
				GetSysconfigDetail({ name: 'about_us' }).then(res => {
					detail.value = res.data
				})
				break;
			case 2:
				GetSysconfigDetail({ name: 'about_us_contact' }).then(res => {
					detail.value = res.data
				})
				break;
			case 5:
				GetSysconfigDetail({ name: 'remittance_method' }).then(res => {
					detail.value = res.data
				})
				break;
		}
	}

	onMounted(() => {
		if (sessionStorage.getItem('footer_key')) {
			activeKey.value = Number(sessionStorage.getItem('footer_key')) 
			tabChange(activeKey.value)
		} else {
			activeKey.value = 1
			tabChange(1)
		}

	})
</script>

<style>
</style>