167 lines
3.7 KiB
Vue
167 lines
3.7 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import type { AfterSales } from '@/types/business/project'
|
||
|
||
interface Props {
|
||
afterSales?: AfterSales
|
||
projectId: string
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
|
||
const emit = defineEmits<{
|
||
apply: []
|
||
cancel: []
|
||
}>()
|
||
|
||
const isProcessing = computed(() => props.afterSales?.status === '处理中')
|
||
</script>
|
||
|
||
<template>
|
||
<section class="project-after-sales">
|
||
<!-- 处理中状态卡片 -->
|
||
<div
|
||
v-if="isProcessing && afterSales"
|
||
class="project-after-sales__card project-after-sales__card--active"
|
||
>
|
||
<div class="project-after-sales__card-head">
|
||
<span class="project-after-sales__badge">处理中</span>
|
||
<h3 class="project-after-sales__card-title">
|
||
售后工单处理中
|
||
</h3>
|
||
</div>
|
||
<p class="project-after-sales__desc">
|
||
工程师正在处理您的修改需求，请耐心等待
|
||
</p>
|
||
<div class="project-after-sales__meta text-secondary">
|
||
<span v-if="afterSales.type">类型：{{ afterSales.type }}</span>
|
||
<span v-if="afterSales.createTime">提交时间：{{ afterSales.createTime }}</span>
|
||
</div>
|
||
<p v-if="afterSales.description" class="project-after-sales__desc">
|
||
{{ afterSales.description }}
|
||
</p>
|
||
<div class="project-after-sales__actions">
|
||
<button
|
||
class="project-after-sales__btn project-after-sales__btn--default"
|
||
@click="emit('cancel')"
|
||
>
|
||
取消售后
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else class="project-after-sales__card project-after-sales__card--empty">
|
||
<p class="project-after-sales__empty text-secondary">
|
||
暂无售后工单
|
||
</p>
|
||
<div class="project-after-sales__actions">
|
||
<button
|
||
class="project-after-sales__btn project-after-sales__btn--primary"
|
||
@click="emit('apply')"
|
||
>
|
||
申请售后
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.project-after-sales {
|
||
.flex(column, flex-start);
|
||
gap: @spacing-base;
|
||
padding: @spacing-lg @spacing-xl;
|
||
border-radius: @radius-lg;
|
||
background: @white;
|
||
box-shadow: @shadow-base;
|
||
|
||
&__card {
|
||
.flex(column, flex-start);
|
||
gap: @spacing-sm;
|
||
padding: @spacing-base;
|
||
border: 1px solid @border-color;
|
||
border-radius: @radius-base;
|
||
background: @bg-color-light;
|
||
|
||
&--active {
|
||
border-color: fade(@warning-color, 40%);
|
||
background: fade(@warning-color, 6%);
|
||
}
|
||
}
|
||
|
||
&__card-head {
|
||
.flex(row, center);
|
||
gap: @spacing-sm;
|
||
}
|
||
|
||
&__badge {
|
||
padding: 2px @spacing-sm;
|
||
border-radius: @radius-sm;
|
||
background: fade(@warning-color, 12%);
|
||
color: @warning-color;
|
||
font-size: @font-size-sm;
|
||
}
|
||
|
||
&__card-title {
|
||
font-size: @font-size-lg;
|
||
font-weight: 600;
|
||
color: @heading-color;
|
||
}
|
||
|
||
&__desc {
|
||
font-size: @font-size-base;
|
||
color: @text-color;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
&__meta {
|
||
.flex(row, flex-start);
|
||
flex-wrap: wrap;
|
||
gap: @spacing-base;
|
||
font-size: @font-size-sm;
|
||
}
|
||
|
||
&__empty {
|
||
padding: @spacing-lg 0;
|
||
text-align: center;
|
||
font-size: @font-size-base;
|
||
}
|
||
|
||
&__actions {
|
||
.flex(row, flex-end);
|
||
gap: @spacing-sm;
|
||
}
|
||
|
||
&__btn {
|
||
height: 34px;
|
||
padding: 0 @spacing-base;
|
||
border-radius: @radius-base;
|
||
font-size: @font-size-base;
|
||
transition: all 0.2s;
|
||
|
||
&--primary {
|
||
border: none;
|
||
background: @primary-color;
|
||
color: @white;
|
||
|
||
&:hover {
|
||
background: @primary-hover;
|
||
}
|
||
}
|
||
|
||
&--default {
|
||
border: 1px solid @border-color-dark;
|
||
background: @white;
|
||
color: @text-color;
|
||
|
||
&:hover {
|
||
border-color: @primary-color;
|
||
color: @primary-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|