first

src/views/project/cpns/ProjectAfterSales.vue

@@ -0,0 +1,166 @@
+<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>