90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { fetchClaimDetail } from '@/services/claim'
|
|
|
|
import ClaimTencentView from './ClaimTencentView.vue'
|
|
import KuaishouCloudClaimView from './KuaishouCloudClaimView.vue'
|
|
|
|
const route = useRoute()
|
|
const token = computed(() => String(route.params.token || '').trim())
|
|
const loading = ref(true)
|
|
const errorMessage = ref('')
|
|
const flowType = ref('tencent_claim')
|
|
|
|
async function bootstrap() {
|
|
loading.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
const response = await fetchClaimDetail(token.value)
|
|
flowType.value = String(response.data.flowType || response.data.task.executorKey || 'tencent_claim').trim()
|
|
} catch (error) {
|
|
errorMessage.value = error instanceof Error ? error.message : '读取领取信息失败'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const isKuaishouCloudFlow = computed(
|
|
() => flowType.value === 'kuaishou_cloud' || flowType.value === 'kuaishou_ct_assisted',
|
|
)
|
|
|
|
onMounted(() => {
|
|
void bootstrap()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main v-if="loading" class="claim-shell loading-shell">
|
|
<section class="shell-card">
|
|
<strong>页面加载中</strong>
|
|
<p>正在识别领取流程类型。</p>
|
|
</section>
|
|
</main>
|
|
|
|
<main v-else-if="errorMessage" class="claim-shell error-shell">
|
|
<section class="shell-card">
|
|
<strong>无法打开领取页</strong>
|
|
<p>{{ errorMessage }}</p>
|
|
</section>
|
|
</main>
|
|
|
|
<KuaishouCloudClaimView v-else-if="isKuaishouCloudFlow" :token="token" />
|
|
<ClaimTencentView v-else />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.claim-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(74, 222, 128, 0.12), transparent 28%),
|
|
linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
|
|
}
|
|
|
|
.shell-card {
|
|
width: min(520px, 100%);
|
|
padding: 28px;
|
|
border-radius: 28px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
|
|
text-align: center;
|
|
}
|
|
|
|
.shell-card strong {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.shell-card p {
|
|
margin: 0;
|
|
color: #475569;
|
|
}
|
|
</style>
|