136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
|
||
import AdminFulfillmentBindingsView from '@/views/admin/AdminFulfillmentBindingsView.vue'
|
||
import AdminKuaishouCloudFulfillmentView from '@/views/admin/AdminKuaishouCloudFulfillmentView.vue'
|
||
|
||
type FulfillmentTabKey = 'legacy' | 'kuaishou-cloud'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const TAB_OPTIONS: Array<{ key: FulfillmentTabKey; label: string; desc: string }> = [
|
||
{
|
||
key: 'legacy',
|
||
label: '旧履约规则',
|
||
desc: '这里维护原有统一履约绑定，支持腾讯领取、人工发货，以及旧任务匹配逻辑。',
|
||
},
|
||
{
|
||
key: 'kuaishou-cloud',
|
||
label: '快手 Cloud 新履约',
|
||
desc: '这里维护快手下单后走 cloudtentacles 绑定、发货、退号的新流程，不会覆盖旧规则。',
|
||
},
|
||
]
|
||
|
||
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">
|
||
<header class="hub-hero">
|
||
<div>
|
||
<h1>履约配置中心</h1>
|
||
<p>旧规则和快手 Cloud 新流程都放在这里维护，不再拆成两个侧边栏入口。</p>
|
||
</div>
|
||
<div class="hero-tags">
|
||
<span>一个入口</span>
|
||
<span>两套配置并存</span>
|
||
<span>互不覆盖</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hub-card">
|
||
<div class="tab-copy">
|
||
<h3>{{ TAB_OPTIONS.find((item) => item.key === activeTab)?.label }}</h3>
|
||
<p>{{ TAB_OPTIONS.find((item) => item.key === activeTab)?.desc }}</p>
|
||
</div>
|
||
|
||
<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>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.hub-panel {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.hub-hero,
|
||
.hub-card {
|
||
padding: 20px;
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(86, 108, 138, 0.12);
|
||
background: rgba(255, 255, 255, 0.94);
|
||
}
|
||
|
||
.hub-hero {
|
||
display: grid;
|
||
gap: 14px;
|
||
background:
|
||
radial-gradient(circle at top right, rgba(26, 127, 255, 0.1), transparent 26%),
|
||
linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,247,255,.96));
|
||
}
|
||
|
||
.hub-hero h1,
|
||
.tab-copy h3 {
|
||
margin: 0;
|
||
color: #17324d;
|
||
}
|
||
|
||
.hub-hero p,
|
||
.tab-copy p {
|
||
margin: 8px 0 0;
|
||
color: #64748b;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.hero-tags span {
|
||
padding: 8px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(23, 92, 211, 0.08);
|
||
color: #175cd3;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hub-card {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.tab-copy {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
|
||
:deep(.hub-tabs .el-tabs__content) {
|
||
padding-top: 12px;
|
||
}
|
||
</style>
|