60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
import AdminFulfillmentBindingsView from './AdminFulfillmentBindingsView.vue'
|
|
import AdminKuaishouCloudFulfillmentView from './AdminKuaishouCloudFulfillmentView.vue'
|
|
|
|
type FulfillmentTabKey = 'legacy' | 'kuaishou-cloud'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const activeTab = computed<FulfillmentTabKey>({
|
|
get() {
|
|
const value = String(route.query.tab || '').trim()
|
|
return value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
|
|
},
|
|
set(value) {
|
|
const next = value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
|
|
void router.replace({
|
|
path: '/admin/platform-fulfillment',
|
|
query: next === 'legacy' ? {} : { tab: next },
|
|
})
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="hub-panel">
|
|
<AdminPageHeader
|
|
title="履约配置中心"
|
|
description="维护外部商品到内部 SKU 的映射规则，旧规则和快手 Cloud 新流程都在这里配置。"
|
|
/>
|
|
|
|
<el-tabs v-model="activeTab" class="hub-tabs">
|
|
<el-tab-pane label="旧履约规则" name="legacy">
|
|
<AdminFulfillmentBindingsView />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="快手 Cloud 新履约" name="kuaishou-cloud">
|
|
<AdminKuaishouCloudFulfillmentView />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hub-panel {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
:deep(.hub-tabs .el-tabs__header) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
:deep(.hub-tabs .el-tabs__content) {
|
|
padding-top: var(--space-4);
|
|
}
|
|
</style>
|