修复前端迁移后的类型错误
This commit is contained in:
yml2213
@@ -29,6 +29,6 @@ export {
|
||||
updateRole,
|
||||
deleteRole,
|
||||
fetchPermissions,
|
||||
type AdminRole,
|
||||
type Role,
|
||||
type Permission
|
||||
} from './api/adminRoles'
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
export type FilterSection =
|
||||
| {
|
||||
key: string
|
||||
title: string
|
||||
type: 'range'
|
||||
unit?: string
|
||||
minPlaceholder?: string
|
||||
maxPlaceholder?: string
|
||||
}
|
||||
| {
|
||||
key: string
|
||||
title: string
|
||||
type: 'chips'
|
||||
options: string[]
|
||||
}
|
||||
|
||||
type SelectedFilters = Record<string, string[]>
|
||||
type RangeFilters = Record<string, { min: string; max: string }>
|
||||
type RangePresets = Record<string, Array<{ label: string; min: string; max: string }>>
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
selectedFilters: SelectedFilters
|
||||
rangeFilters: RangeFilters
|
||||
sections: FilterSection[]
|
||||
rangePresets: RangePresets
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:show': [value: boolean]
|
||||
'update:selectedFilters': [value: SelectedFilters]
|
||||
'update:rangeFilters': [value: RangeFilters]
|
||||
}>()
|
||||
|
||||
const activeCount = computed(() => {
|
||||
const chipCount = Object.values(props.selectedFilters).reduce((sum, values) => sum + values.length, 0)
|
||||
const rangeCount = Object.values(props.rangeFilters).filter((range) => range.min || range.max).length
|
||||
return chipCount + rangeCount
|
||||
})
|
||||
|
||||
function toggleChip(sectionKey: string, value: string) {
|
||||
const selected = props.selectedFilters[sectionKey] || []
|
||||
const next = selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]
|
||||
emit('update:selectedFilters', { ...props.selectedFilters, [sectionKey]: next })
|
||||
}
|
||||
|
||||
function updateRange(sectionKey: string, side: 'min' | 'max', value: string) {
|
||||
const current = props.rangeFilters[sectionKey] || { min: '', max: '' }
|
||||
emit('update:rangeFilters', {
|
||||
...props.rangeFilters,
|
||||
[sectionKey]: { ...current, [side]: value },
|
||||
})
|
||||
}
|
||||
|
||||
function applyRangePreset(sectionKey: string, min: string, max: string) {
|
||||
emit('update:rangeFilters', {
|
||||
...props.rangeFilters,
|
||||
[sectionKey]: { min, max },
|
||||
})
|
||||
}
|
||||
|
||||
function isRangePresetActive(sectionKey: string, min: string, max: string) {
|
||||
const range = props.rangeFilters[sectionKey]
|
||||
return range?.min === min && range?.max === max
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
emit('update:selectedFilters', {})
|
||||
emit('update:rangeFilters', {})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-popup
|
||||
:show="show"
|
||||
position="bottom"
|
||||
round
|
||||
class="mobile-filter-sheet"
|
||||
@update:show="emit('update:show', $event)"
|
||||
>
|
||||
<header class="sheet-header">
|
||||
<strong>筛选</strong>
|
||||
<button type="button" @click="emit('update:show', false)">完成</button>
|
||||
</header>
|
||||
|
||||
<div class="sheet-body">
|
||||
<section v-for="section in sections" :key="section.key" class="filter-section">
|
||||
<div class="filter-title">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<span v-if="section.type === 'range' && section.unit">单位：{{ section.unit }}</span>
|
||||
</div>
|
||||
|
||||
<template v-if="section.type === 'range'">
|
||||
<div class="range-row">
|
||||
<input
|
||||
:value="rangeFilters[section.key]?.min || ''"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="section.minPlaceholder || '最低'"
|
||||
@input="updateRange(section.key, 'min', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<span></span>
|
||||
<input
|
||||
:value="rangeFilters[section.key]?.max || ''"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
:placeholder="section.maxPlaceholder || '最高'"
|
||||
@input="updateRange(section.key, 'max', ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="rangePresets[section.key]?.length" class="chip-grid">
|
||||
<button
|
||||
v-for="preset in rangePresets[section.key]"
|
||||
:key="`${section.key}-${preset.label}`"
|
||||
type="button"
|
||||
:class="{ active: isRangePresetActive(section.key, preset.min, preset.max) }"
|
||||
@click="applyRangePreset(section.key, preset.min, preset.max)"
|
||||
>
|
||||
{{ preset.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="chip-grid">
|
||||
<button
|
||||
v-for="option in section.options"
|
||||
:key="`${section.key}-${option}`"
|
||||
type="button"
|
||||
:class="{ active: selectedFilters[section.key]?.includes(option) }"
|
||||
@click="toggleChip(section.key, option)"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="sheet-footer">
|
||||
<button type="button" @click="resetFilters">重置</button>
|
||||
<button type="button" class="primary" @click="emit('update:show', false)">
|
||||
查看结果{{ activeCount ? ` (${activeCount})` : '' }}
|
||||
</button>
|
||||
</footer>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-filter-sheet {
|
||||
max-height: 86vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sheet-header,
|
||||
.sheet-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.sheet-header strong {
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sheet-header button,
|
||||
.sheet-footer button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sheet-body {
|
||||
max-height: calc(86vh - 112px);
|
||||
overflow-y: auto;
|
||||
padding: 4px 16px 16px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filter-title h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-title span {
|
||||
color: #8b9cb5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chip-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chip-grid button {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chip-grid button.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.range-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 18px 1fr;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.range-row span {
|
||||
height: 1px;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.range-row input {
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.sheet-footer .primary {
|
||||
min-width: 128px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,389 @@
|
||||
.mobile-shell {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 68px;
|
||||
background: #f6f8fb;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.mobile-hero {
|
||||
padding: 12px 12px 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.mobile-brand strong,
|
||||
.mobile-brand small {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-brand strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 34px;
|
||||
margin-top: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #f5e6a3;
|
||||
border-radius: 8px;
|
||||
background: #fffdf0;
|
||||
color: #8a6d1b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: #f59e0b;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.announcement-swipe {
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.announcement-swipe span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.banner-swipe {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 116px;
|
||||
align-items: flex-end;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
background: #0f172a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-warm {
|
||||
background: #7c2d12;
|
||||
}
|
||||
|
||||
.mobile-banner.tone-cool {
|
||||
background: #1e3a8a;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mobile-banner.has-image::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.72));
|
||||
}
|
||||
|
||||
.mobile-banner > div:not(.banner-badge) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner span {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 1;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sort-entry,
|
||||
.filter-entry {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-entry {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-entry {
|
||||
min-width: 86px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-entry em {
|
||||
display: grid;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sort-panel {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sort-panel button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 34px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
margin-bottom: 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.state-loading {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #e2e8f0;
|
||||
color: #64748b;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-cover-labels {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.card-cover-labels em {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 99, 235, 0.92);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-main {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.card-title-row h2 {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin: 6px 0 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-badges-row,
|
||||
.card-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.trust-badge,
|
||||
.server-badge,
|
||||
.card-chip-row span {
|
||||
padding: 3px 7px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.trust-badge {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.price-col strong {
|
||||
color: #ef4444;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rent-sub {
|
||||
margin-left: 8px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-chip-row {
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.mobile-load-state {
|
||||
padding: 18px 0 4px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.mobile-brand small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,9 @@ export interface Order {
|
||||
deposit_amount: number
|
||||
platform_fee?: number
|
||||
account_snapshot?: Record<string, unknown>
|
||||
listing_snapshot?: string
|
||||
checkout_info?: string
|
||||
counter_info?: string
|
||||
status: OrderStatus
|
||||
handoff_status: HandoffStatus
|
||||
settlement_status: SettlementStatus
|
||||
|
||||
@@ -131,11 +131,10 @@ export function useOrderDetail() {
|
||||
if (!order.value) return false
|
||||
disputing.value = true
|
||||
try {
|
||||
await createDispute({
|
||||
order_id: order.value.id,
|
||||
await createDispute(order.value.id, {
|
||||
type: disputeType.value,
|
||||
description: disputeDescription.value.trim(),
|
||||
evidence: disputeEvidenceText.value.trim(),
|
||||
evidence_urls: linesToList(disputeEvidenceText.value),
|
||||
})
|
||||
await loadOrder()
|
||||
return true
|
||||
@@ -180,6 +179,13 @@ export function useOrderDetail() {
|
||||
return stepMap[status] ?? 0
|
||||
}
|
||||
|
||||
function linesToList(value: string) {
|
||||
return value
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
onMounted(loadOrder)
|
||||
|
||||
return {
|
||||
|
||||
@@ -41,7 +41,7 @@ export function readSnapshotResources(order: Order | null): SnapshotResource[] {
|
||||
label: String(item.label || ''),
|
||||
quantity: readNumber(item.quantity),
|
||||
unitPrice: readNumber(item.price),
|
||||
chargeMode: item.charge_mode === '收费' ? '收费' : '赠送',
|
||||
chargeMode: (item.charge_mode === '收费' ? '收费' : '赠送') as SnapshotResource['chargeMode'],
|
||||
}))
|
||||
.filter((item) => item.key && item.label)
|
||||
}
|
||||
@@ -108,7 +108,7 @@ export function hydrateResourceUsageFromOrder(
|
||||
if (consumedResources) {
|
||||
resources.forEach((res) => {
|
||||
if (res.key in consumedResources) {
|
||||
usage[res.key] = consumedResources[res.key]
|
||||
usage[res.key] = consumedResources[res.key] ?? 0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, type Ref } from 'vue'
|
||||
import { submitCheckout, acceptCheckout, counterCheckout, confirmCheckout } from '../api/orders'
|
||||
import type { Order } from '../api/orders'
|
||||
|
||||
@@ -23,7 +23,7 @@ export interface CounterForm {
|
||||
* 订单结算 Composable
|
||||
* 负责处理订单结算流程：提交结算、接受结算、反驳结算、确认结算
|
||||
*/
|
||||
export function useSettlement(order: globalThis.Ref<Order | null>) {
|
||||
export function useSettlement(order: Ref<Order | null>) {
|
||||
const returning = ref(false)
|
||||
const acceptingCheckout = ref(false)
|
||||
const countering = ref(false)
|
||||
@@ -61,7 +61,7 @@ export function useSettlement(order: globalThis.Ref<Order | null>) {
|
||||
consumable_amount: checkoutForm.value.consumable_amount,
|
||||
coin_consumed_m: checkoutForm.value.coin_consumed_m,
|
||||
other_amount: checkoutForm.value.other_amount,
|
||||
evidence: checkoutForm.value.evidenceText.trim(),
|
||||
evidence_urls: linesToList(checkoutForm.value.evidenceText),
|
||||
})
|
||||
onSuccess?.()
|
||||
return true
|
||||
@@ -98,7 +98,7 @@ export function useSettlement(order: globalThis.Ref<Order | null>) {
|
||||
other_amount: counterForm.value.other_amount,
|
||||
deposit_deduct_amount: counterForm.value.deposit_deduct_amount,
|
||||
reason: counterForm.value.reason.trim(),
|
||||
evidence: counterForm.value.evidenceText.trim(),
|
||||
evidence_urls: linesToList(counterForm.value.evidenceText),
|
||||
})
|
||||
onSuccess?.()
|
||||
return true
|
||||
@@ -120,7 +120,7 @@ export function useSettlement(order: globalThis.Ref<Order | null>) {
|
||||
other_amount: 0,
|
||||
deposit_deduct_amount: 0,
|
||||
reason: reason.trim(),
|
||||
evidence: '',
|
||||
evidence_urls: [],
|
||||
})
|
||||
onSuccess?.()
|
||||
return true
|
||||
@@ -144,6 +144,13 @@ export function useSettlement(order: globalThis.Ref<Order | null>) {
|
||||
}
|
||||
}
|
||||
|
||||
function linesToList(value: string) {
|
||||
return value
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
return {
|
||||
// Loading states
|
||||
returning,
|
||||
|
||||
@@ -3,9 +3,9 @@ import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { showToast, showDialog } from "vant";
|
||||
|
||||
import { fetchOrderChat } from "@/api/chats";
|
||||
import { createDispute } from "@/api/disputes";
|
||||
import { uploadFile } from "@/api/files";
|
||||
import { fetchOrderChat } from "@/features/chats/api/chats";
|
||||
import { createDispute } from "@/features/disputes/api/disputes";
|
||||
import { uploadFile } from "@/shared/api/files";
|
||||
import {
|
||||
acceptCheckout,
|
||||
cancelOrder,
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
type HandoffRecord,
|
||||
type Order,
|
||||
type PaymentOrder,
|
||||
} from "@/api/orders";
|
||||
} from "@/features/orders/api/orders";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { handoffStatusLabel, orderStatusLabel } from "@/utils/statusLabels";
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRouter, useRoute } from "vue-router";
|
||||
import { showDialog, showToast } from "vant";
|
||||
import MobileBottomNav from "@/components/MobileBottomNav.vue";
|
||||
|
||||
import { fetchOrders, startOrderPayment, type Order, type PaymentOrder } from "@/api/orders";
|
||||
import { fetchOrders, startOrderPayment, type Order, type PaymentOrder } from "@/features/orders/api/orders";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { formatDateMinute } from "@/utils/time";
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
type ScreenshotKey,
|
||||
} from '@/features/listings/api/listingOptions'
|
||||
import { createListing } from '@/features/listings/api/listings'
|
||||
import { usePricingCalculator } from '@/composables/usePricingCalculator'
|
||||
import { usePricingCalculator } from '@/shared/composables/usePricingCalculator'
|
||||
import {
|
||||
buildPublishDraft,
|
||||
clearRecord,
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
readPublishDraft,
|
||||
removePublishDraft,
|
||||
writePublishDraft,
|
||||
} from '@/composables/usePublishDraft'
|
||||
} from '@/features/seller/composables/usePublishDraft'
|
||||
import type { PublishForm } from '@/types/publish'
|
||||
import { commonOnlineTimes, dailyLossOptions, formatNumber, roundRatio } from '@/utils/pricing'
|
||||
|
||||
|
||||
@@ -0,0 +1,391 @@
|
||||
.publish-page {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px 40px;
|
||||
}
|
||||
|
||||
.publish-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-column,
|
||||
.summary-column {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.summary-column {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: 84px;
|
||||
}
|
||||
|
||||
.field-row,
|
||||
.input-block {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field-row + .field-row,
|
||||
.compact-grid + .field-row,
|
||||
.level-panel,
|
||||
.time-preset-panel,
|
||||
.region-panel,
|
||||
.ratio-panel,
|
||||
.price-grid,
|
||||
.remark {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.field-row label,
|
||||
.input-block > span,
|
||||
.quantity-meta strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-row span,
|
||||
.input-block b,
|
||||
.quantity-meta span,
|
||||
.upload-copy span {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.compact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.compact-grid.two {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.level-panel,
|
||||
.time-preset-panel,
|
||||
.region-panel,
|
||||
.ratio-panel,
|
||||
.summary-panel {
|
||||
padding: 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.level-row,
|
||||
.time-preset-row,
|
||||
.region-title,
|
||||
.skin-title {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.level-row + .level-row,
|
||||
.time-preset-row + .time-preset-row,
|
||||
.skin-group + .skin-group {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.level-options,
|
||||
.region-grid,
|
||||
.mode-toggle,
|
||||
.ratio-mode-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.level-btn,
|
||||
.region-btn,
|
||||
.mode-toggle button,
|
||||
.ratio-mode-btn,
|
||||
.recommend-button,
|
||||
.upload-add {
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.level-btn,
|
||||
.region-btn,
|
||||
.mode-toggle button {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.level-btn.active,
|
||||
.region-btn.active,
|
||||
.mode-toggle button.active,
|
||||
.ratio-mode-btn.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.quantity-table {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.quantity-header,
|
||||
.quantity-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 1fr) 100px 120px 116px 80px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quantity-header {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.quantity-item {
|
||||
padding: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.quantity-item.disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.quantity-meta small,
|
||||
.quantity-status,
|
||||
.quantity-price {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.time-preset-content,
|
||||
.deposit-control {
|
||||
display: grid;
|
||||
grid-template-columns: 160px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.upload-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.upload-copy strong {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.upload-copy small,
|
||||
.deposit-breakdown {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.upload-preview {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.upload-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.upload-preview button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.upload-add {
|
||||
display: grid;
|
||||
min-height: 112px;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 6px;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.hidden-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recommend-button {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.deposit-breakdown {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ratio-reference {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ratio-reference span,
|
||||
.price-cell span,
|
||||
.summary-main span,
|
||||
.summary-list span {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ratio-reference strong {
|
||||
color: #2563eb;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.ratio-panel p {
|
||||
margin: 8px 0 14px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ratio-mode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.ratio-mode-btn,
|
||||
.ratio-custom-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ratio-mode-btn span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.price-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.price-cell {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.price-cell strong,
|
||||
.summary-list strong {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.price-cell.accent strong,
|
||||
.summary-main strong {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.summary-panel {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.summary-main {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.summary-main strong {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.summary-list div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.summary-actions .el-button {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.publish-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.summary-column {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.compact-grid,
|
||||
.compact-grid.two,
|
||||
.upload-grid,
|
||||
.price-grid,
|
||||
.ratio-mode-grid,
|
||||
.time-preset-content,
|
||||
.deposit-control {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quantity-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quantity-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
import { Delete, DocumentChecked, Picture, RefreshRight, UploadFilled } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
import { usePublishForm } from '@/composables/usePublishForm'
|
||||
import { usePublishForm } from '@/features/seller/composables/usePublishForm'
|
||||
import OptionChips from './components/OptionChips.vue'
|
||||
import PublishSection from './components/PublishSection.vue'
|
||||
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
options: Array<string | number>
|
||||
modelValue?: string | number
|
||||
activeValues?: Array<string | number>
|
||||
keyPrefix?: string
|
||||
compact?: boolean
|
||||
suffix?: string
|
||||
}>(),
|
||||
{
|
||||
modelValue: undefined,
|
||||
activeValues: () => [],
|
||||
keyPrefix: '',
|
||||
compact: false,
|
||||
suffix: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [value: string | number]
|
||||
}>()
|
||||
|
||||
function isActive(value: string | number) {
|
||||
return props.activeValues.includes(value) || props.modelValue === value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="option-chips" :class="{ compact }">
|
||||
<button
|
||||
v-for="option in options"
|
||||
:key="`${keyPrefix}${option}`"
|
||||
type="button"
|
||||
:class="{ active: isActive(option) }"
|
||||
@click="emit('select', option)"
|
||||
>
|
||||
{{ option }}{{ suffix }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.option-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option-chips button {
|
||||
min-height: 34px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.option-chips.compact button {
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.option-chips button.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
description?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="publish-section">
|
||||
<header class="publish-section-header">
|
||||
<h2>{{ title }}</h2>
|
||||
<p v-if="description">{{ description }}</p>
|
||||
</header>
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.publish-section {
|
||||
padding: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.publish-section + .publish-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.publish-section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.publish-section-header h2 {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.publish-section-header p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user