feat 个人中心

src/views/profile/cpns/FeedbackForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { reactive, watch } from 'vue'
-import { AppButton, FileList, UploadArea } from '@/components'
+import { reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import type { FileInfo } from '@/types/api'
 import type { Feedback } from '@/types/business/profile'
 
@@ -12,7 +12,6 @@ const props = withDefaults(defineProps<Props>(), { resetSignal: 0 })
 
 const emit = defineEmits<{
   submit: [feedback: Feedback]
-  reset: []
   preview: [file: FileInfo]
 }>()
 
@@ -22,6 +21,7 @@ const form = reactive({
 })
 
 const attachments = reactive<FileInfo[]>([])
+const fileInputRef = ref<HTMLInputElement | null>(null)
 
 function clear(): void {
   form.title = ''
@@ -34,13 +34,34 @@ watch(
   () => clear(),
 )
 
-function onUpload(file: File): void {
-  attachments.push({
-    name: file.name,
-    size: file.size,
-    uploadTime: new Date().toISOString().slice(0, 10),
-    url: '',
-  })
+function openFilePicker(): void {
+  fileInputRef.value?.click()
+}
+
+function onFileChange(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const files = input.files
+  if (!files) return
+  for (const file of Array.from(files)) {
+    attachments.push({
+      name: file.name,
+      size: file.size,
+      uploadTime: new Date().toISOString().slice(0, 10),
+      url: '',
+    })
+  }
+  input.value = ''
+}
+
+function extOf(name: string): string {
+  const index = name.lastIndexOf('.')
+  return index >= 0 ? name.slice(index + 1, index + 4).toUpperCase() : 'FILE'
+}
+
+function sizeText(size: number): string {
+  if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)}MB`
+  if (size >= 1024) return `${(size / 1024).toFixed(0)}KB`
+  return `${size}B`
 }
 
 function onDeleteFile(file: FileInfo): void {
@@ -48,17 +69,25 @@ function onDeleteFile(file: FileInfo): void {
   if (index >= 0) attachments.splice(index, 1)
 }
 
+function onPreview(file: FileInfo): void {
+  emit('preview', file)
+}
+
 function onSubmit(): void {
+  if (!form.title.trim()) {
+    ElMessage.warning('请填写反馈标题')
+    return
+  }
+  if (!form.description.trim()) {
+    ElMessage.warning('请填写详细描述')
+    return
+  }
   emit('submit', {
     title: form.title,
     description: form.description,
     attachments: [...attachments],
   })
 }
-
-function onReset(): void {
-  emit('reset')
-}
 </script>
 
 <template>
@@ -69,7 +98,7 @@ function onReset(): void {
         v-model="form.title"
         class="feedback-form__input"
         type="text"
-        placeholder="请简要描述您的反馈标题"
+        placeholder="请输入反馈标题"
         maxlength="50"
       >
     </div>
@@ -79,34 +108,57 @@ function onReset(): void {
       <textarea
         v-model="form.description"
         class="feedback-form__textarea"
-        placeholder="请详细描述您遇到的问题或建议，便于我们更快为您处理"
+        placeholder="请详细描述您的问题..."
         maxlength="500"
-        rows="6"
       />
-      <span class="feedback-form__counter text-secondary">{{ form.description.length }}/500</span>
+      <span class="feedback-form__counter">{{ form.description.length }}/500</span>
     </div>
 
-    <p class="feedback-form__tip">
-      提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
-    </p>
-
-    <div class="feedback-form__field">
-      <label class="feedback-form__label">附件</label>
-      <UploadArea @upload="onUpload" />
-      <FileList
-        :files="attachments"
-        @preview="emit('preview', $event)"
-        @delete="onDeleteFile"
-      />
+    <div class="feedback-form__attach-head">
+      <h3 class="feedback-form__attach-title">
+        附件上传
+      </h3>
+      <span class="feedback-form__attach-hint">支持图片/文档/压缩包，大小不超过1G</span>
+      <button class="feedback-form__upload-btn" @click="openFilePicker">
+        上传
+      </button>
+      <input
+        ref="fileInputRef"
+        class="feedback-form__file-input"
+        type="file"
+        multiple
+        @change="onFileChange"
+      >
     </div>
 
+    <ul class="feedback-form__files">
+      <li v-for="file in attachments" :key="file.name" class="feedback-form__file">
+        <span class="feedback-form__file-icon" :class="`is-${extOf(file.name).toLowerCase()}`">
+          {{ extOf(file.name) }}
+        </span>
+        <div class="feedback-form__file-info">
+          <p class="feedback-form__file-name">
+            {{ file.name }}
+          </p>
+          <p class="feedback-form__file-meta">
+            {{ sizeText(file.size) }} · 上传于 {{ file.uploadTime }}
+          </p>
+        </div>
+        <div class="feedback-form__file-actions">
+          <button class="feedback-form__file-link" @click="onPreview(file)">
+            预览
+          </button>
+          <button class="feedback-form__file-link is-danger" @click="onDeleteFile(file)">
+            删除
+          </button>
+        </div>
+      </li>
+    </ul>
+
     <div class="feedback-form__footer">
-      <AppButton type="primary" @click="onSubmit">
+      <button class="feedback-form__submit" @click="onSubmit">
         提交反馈
-      </AppButton>
-      <AppButton type="default" @click="onReset">
-        重置
-      </AppButton>
+      </button>
     </div>
   </div>
 </template>
@@ -114,21 +166,20 @@ function onReset(): void {
 <style lang="less" scoped>
 .feedback-form {
   .flex(column, flex-start);
-  gap: @spacing-base;
-  padding: 0;
-  background: transparent;
-  box-shadow: none;
+  gap: 20px;
+  width: 100%;
 
   &__field {
     .flex(column, flex-start);
-    gap: @spacing-xs;
+    gap: 10px;
     width: 100%;
   }
 
   &__label {
-    font-size: 11px;
+    font-size: 14px;
     font-weight: 500;
     color: @heading-color;
+    line-height: 20px;
   }
 
   &__required {
@@ -139,11 +190,11 @@ function onReset(): void {
   &__input,
   &__textarea {
     width: 100%;
-    padding: 0 12px;
+    padding: 0 14px;
     border: 1px solid @profile-input-border;
-    border-radius: @profile-radius;
+    border-radius: @radius-base;
     background: @white;
-    font-size: 11px;
+    font-size: 13px;
     color: @text-color;
     outline: none;
     transition: border-color 0.2s;
@@ -154,71 +205,175 @@ function onReset(): void {
     }
 
     &::placeholder {
-      color: @heading-color;
+      color: @text-color-disabled;
     }
   }
 
   &__input {
-    height: 32px;
+    height: 40px;
   }
 
   &__textarea {
-    padding: 8px 12px;
-    line-height: 1.6;
+    height: 150px;
+    padding: 12px 14px;
+    line-height: 1.7;
     resize: vertical;
   }
 
   &__counter {
     align-self: flex-end;
     color: @text-color-disabled;
-    font-size: 11px;
+    font-size: 12px;
+    line-height: 17px;
   }
 
-  &__tip {
-    padding: @spacing-sm @spacing-base;
-    border-radius: @profile-radius;
-    background: @primary-light;
-    color: @primary-strong;
+  &__attach-head {
+    .flex(row, flex-start, center);
+    gap: 14px;
+    width: 100%;
+    margin-top: 6px;
+  }
+
+  &__attach-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: @heading-color;
+    line-height: 24px;
+  }
+
+  &__attach-hint {
+    font-size: 12px;
+    color: @text-color-disabled;
+  }
+
+  &__upload-btn {
+    margin-left: auto;
+    height: 32px;
+    padding: 0 18px;
+    border: 1px solid @profile-input-border;
+    border-radius: @radius-base;
+    background: @white;
+    color: @text-color;
+    font-size: 13px;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @primary-strong;
+      color: @primary-strong;
+    }
+  }
+
+  &__file-input {
+    display: none;
+  }
+
+  &__files {
+    .flex(column, flex-start);
+    gap: 12px;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__file {
+    .flex(row, flex-start, center);
+    gap: 14px;
+    width: 100%;
+    padding: 13px 16px;
+    border-radius: @radius-base;
+    background: @service-input-bg;
+    box-sizing: border-box;
+  }
+
+  &__file-icon {
+    .flex(row, center);
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: @radius-base;
     font-size: 11px;
-    line-height: 1.6;
+    font-weight: 700;
+
+    &.is-pdf {
+      background: @profile-icon-phone;
+      color: @danger-color;
+    }
+
+    &.is-doc,
+    &.is-docx {
+      background: @profile-page-active-bg;
+      color: @primary-strong;
+    }
+
+    &.is-xls,
+    &.is-xlsx {
+      background: @profile-tag-ok-bg;
+      color: @success-color;
+    }
+  }
+
+  &__file-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__file-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: @heading-color;
+    line-height: 20px;
+    .ellipsis();
+  }
+
+  &__file-meta {
+    margin-top: 3px;
+    font-size: 12px;
+    color: @text-color-disabled;
+    line-height: 17px;
+  }
+
+  &__file-actions {
+    .flex(row, flex-end, center);
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  &__file-link {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: @primary-strong;
+    font-size: 13px;
+    cursor: pointer;
+
+    &:hover {
+      color: @primary-hover;
+    }
+
+    &.is-danger {
+      color: @danger-color;
+    }
   }
 
   &__footer {
     .flex(row, flex-start);
-    gap: @spacing-sm;
+    margin-top: 6px;
   }
 
-  :deep(.upload-area) {
-    min-height: 56px;
-    border: 1px solid @profile-input-border;
-    background: @white;
-
-    &:hover,
-    &.is-dragging {
-      background: @bg-color-light;
-    }
-  }
-
-  :deep(.upload-area__hint) {
-    color: @text-color-disabled;
-    font-size: 11px;
-  }
-
-  .app-button {
-    height: 32px;
-    padding: 0 16px;
-    border-radius: @profile-radius;
-    font-size: 12px;
-    font-weight: 500;
-  }
-
-  .app-button--primary {
-    border-color: @primary-strong;
+  &__submit {
+    height: 40px;
+    padding: 0 32px;
+    border: none;
+    border-radius: @radius-base;
     background: @primary-strong;
+    color: @white;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background 0.2s;
 
     &:hover {
-      border-color: darken(@primary-strong, 6%);
-      background: darken(@primary-strong, 6%);
+      background: @primary-hover;
     }
   }
 }