yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化了 pc 和移动端我的商品界面 ui

Browse Source
This commit is contained in:
yml2213
2026-06-29 20:19:38 +08:00
parent 8498884cb4
commit 8a11c2517e
3 changed files with 726 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/seller/views/MobileSellerListingsView.vue
+580
View File
@@ -0,0 +1,580 @@
<script setup lang="ts">
import { showDialog, showToast } from 'vant'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
fetchSellerListings,
offlineListing,
submitListingReview,
type Listing,
} from '@/features/listings'
import { formatCent, formatMoneyWithSymbol } from '@/shared/utils/money'
import { listingReviewStatusLabel, listingStatusLabel } from '@/shared/utils/statusLabels'
import { formatListingCode, getListingSellerPrice } from '@/shared/utils/listingDisplay'
import MobileBottomNav from '@/components/MobileBottomNav.vue'
const router = useRouter()
const loading = ref(false)
const submittingID = ref<number | null>(null)
const offliningID = ref<number | null>(null)
const listings = ref<Listing[]>([])
const activeTab = ref('all')
const statusTabs = computed(() => [
{ key: 'all', label: '全部', value: listings.value.length },
{
key: 'published',
label: '已上架',
value: listings.value.filter(item => item.status === 'published').length,
},
{
key: 'pending',
label: '待审核',
value: listings.value.filter(item => isPendingReview(item)).length,
},
{
key: 'offline',
label: '已下架',
value: listings.value.filter(item => item.status === 'offline').length,
},
{
key: 'completed',
label: '已完成',
value: listings.value.filter(item => item.status === 'completed').length,
},
])
const displayListings = computed(() => {
if (activeTab.value === 'all') return listings.value
if (activeTab.value === 'pending') return listings.value.filter(item => isPendingReview(item))
return listings.value.filter(item => item.status === activeTab.value)
})
onMounted(loadListings)
async function loadListings() {
loading.value = true
try {
listings.value = await fetchSellerListings()
} catch {
showToast({ message: '加载失败，请稍后重试', icon: 'warning-o' })
} finally {
loading.value = false
}
}
async function submitReview(row: Listing) {
submittingID.value = row.id
try {
const listing = await submitListingReview(row.id)
replaceListing(listing)
showToast({
message:
listing.status === 'published' && listing.review_status === 'approved'
? '已上架'
: '已提交审核，等待后台处理',
icon: 'passed',
})
} catch {
showToast({ message: '提交失败，请稍后重试', icon: 'cross' })
} finally {
submittingID.value = null
}
}
async function offline(row: Listing) {
try {
await showDialog({
title: '下架确认',
message: `确认下架「${row.title}」吗？下架后后台待审列表会同步移除。`,
showCancelButton: true,
confirmButtonText: '确认下架',
cancelButtonText: '取消',
})
} catch {
return
}
offliningID.value = row.id
try {
const listing = await offlineListing(row.id)
replaceListing(listing)
showToast({ message: '已下架', icon: 'passed' })
} catch {
showToast({ message: '下架失败，请稍后重试', icon: 'cross' })
} finally {
offliningID.value = null
}
}
function replaceListing(next: Listing) {
const index = listings.value.findIndex(item => item.id === next.id)
if (index >= 0) {
listings.value.splice(index, 1, next)
} else {
listings.value.unshift(next)
}
}
function listingPrice(row: Listing) {
return formatMoneyWithSymbol(getListingSellerPrice(row))
}
async function copyListingCode(row: Listing) {
try {
await navigator.clipboard.writeText(formatListingCode(row))
showToast({ message: '商品编号已复制', icon: 'passed' })
} catch {
showToast({ message: '复制失败', icon: 'cross' })
}
}
function coinText(row: Listing) {
const coinM = Number(row.haf_coin_amount || 0) / 1000000
return Number.isInteger(coinM) ? `${coinM}M` : `${coinM.toFixed(2)}M`
}
function goCreate() {
router.push('/m/seller/listings/create')
}
function goEdit(row: Listing) {
router.push(`/m/seller/listings/${row.id}/edit`)
}
function canSubmit(row: Listing) {
return !isTerminalListing(row) && !isPendingReview(row) && row.status !== 'published'
}
function canEdit(row: Listing) {
return !isTerminalListing(row) && !isPendingReview(row) && row.status !== 'published'
}
function canOffline(row: Listing) {
return !isTerminalListing(row) && row.status !== 'offline'
}
function statusTone(status: string) {
const tones: Record<string, string> = {
published: 'success',
draft: 'info',
offline: 'muted',
completed: 'success',
rented: 'warning',
abnormal: 'danger',
}
return tones[status] || 'info'
}
function reviewTone(status: string) {
const tones: Record<string, string> = {
approved: 'success',
pending: 'warning',
rejected: 'danger',
none: 'muted',
}
return tones[status] || 'info'
}
function effectiveReviewStatus(row: Listing) {
return row.status === 'offline' ? 'none' : row.review_status
}
function showReviewStatus(row: Listing) {
return row.status !== 'completed'
}
function isTerminalListing(row: Listing) {
return row.status === 'rented' || row.status === 'completed'
}
function isPendingReview(row: Listing) {
return !isTerminalListing(row) && row.status !== 'offline' && row.review_status === 'pending'
}
</script>
<template>
<main class="mobile-seller-listings">
<!-- 顶部导航 -->
<header class="page-header">
<button class="back-btn" @click="router.back()">
<van-icon name="arrow-left" :size="20" />
</button>
<h1>我的商品</h1>
<button class="refresh-btn" :class="{ spinning: loading }" @click="loadListings">
<van-icon name="replay" :size="18" />
</button>
</header>
<!-- 状态筛选条 -->
<van-tabs
v-model:active="activeTab"
class="custom-tabs"
line-width="20px"
line-height="3px"
color="#ff6a00"
title-active-color="#ff6a00"
title-inactive-color="#6b7280"
:border="false"
swipeable
animated
>
<van-tab
v-for="tab in statusTabs"
:key="tab.key"
:name="tab.key"
:title="tab.value > 0 ? `${tab.label} ${tab.value}` : tab.label"
/>
</van-tabs>
<!-- 商品列表 -->
<section class="listing-list">
<van-loading v-if="loading" class="center-loading" size="24px" vertical>加载中...</van-loading>
<div v-else-if="displayListings.length === 0" class="empty-state-wrap">
<van-empty description="暂无相关商品" image="search" />
<van-button round type="primary" class="empty-publish-btn" @click="goCreate">
去发布账号
</van-button>
</div>
<div v-else v-for="item in displayListings" :key="item.id" class="listing-card">
<!-- 卡片头：编号 + 状态 -->
<div class="card-header">
<button class="listing-code-chip" type="button" @click="copyListingCode(item)">
编号 {{ formatListingCode(item) }}
<van-icon name="description" :size="12" />
</button>
<div class="status-tags">
<span class="status-badge" :class="statusTone(item.status)">
{{ listingStatusLabel(item.status) }}
</span>
<span
v-if="showReviewStatus(item)"
class="status-badge"
:class="reviewTone(effectiveReviewStatus(item))"
>
{{ listingReviewStatusLabel(effectiveReviewStatus(item)) }}
</span>
</div>
</div>
<!-- 卡片体 -->
<h3 class="listing-title">{{ item.title }}</h3>
<div class="meta-grid">
<div class="meta-item">
<span class="meta-label">区服</span>
<span class="meta-val">{{ item.server_region || '-' }}</span>
</div>
<div class="meta-item">
<span class="meta-label">哈夫币</span>
<span class="meta-val">{{ coinText(item) }}</span>
</div>
<div class="meta-item">
<span class="meta-label">价格</span>
<span class="meta-val price">{{ listingPrice(item) }}</span>
</div>
<div class="meta-item">
<span class="meta-label">押金</span>
<span class="meta-val">¥{{ formatCent(item.deposit_amount_cent) }}</span>
</div>
</div>
<p v-if="item.review_reason" class="review-reason">
<van-icon name="info-o" :size="13" />
{{ item.review_reason }}
</p>
<!-- 卡片底：操作 -->
<div class="card-footer">
<van-button
v-if="canEdit(item)"
size="small"
plain
round
icon="edit"
class="action-btn"
@click="goEdit(item)"
>
编辑
</van-button>
<van-button
v-if="canSubmit(item)"
size="small"
plain
round
type="primary"
class="action-btn"
:loading="submittingID === item.id"
@click="submitReview(item)"
>
提审
</van-button>
<van-button
v-if="canOffline(item)"
size="small"
plain
round
type="danger"
class="action-btn"
:loading="offliningID === item.id"
@click="offline(item)"
>
下架
</van-button>
</div>
</div>
</section>
<MobileBottomNav />
</main>
</template>
<style scoped>
.mobile-seller-listings {
min-height: 100dvh;
background: #f6f8fa;
padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
/* ========== 顶部导航 ========== */
.page-header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
height: 48px;
padding: 0 12px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(243, 244, 246, 0.8);
}
.page-header h1 {
flex: 1;
margin: 0;
font-size: 17px;
font-weight: 700;
text-align: center;
color: #111827;
}
.back-btn,
.refresh-btn {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border: none;
background: none;
color: #374151;
cursor: pointer;
}
.refresh-btn.spinning :deep(.van-icon) {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ========== Vant Tabs ========== */
.custom-tabs {
position: sticky;
top: 48px;
z-index: 99;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(243, 244, 246, 0.6);
}
:deep(.van-tabs__nav) {
background: transparent;
padding-bottom: 4px;
}
:deep(.van-tab) {
font-size: 13px;
font-weight: 600;
}
/* ========== 列表 ========== */
.listing-list {
padding: 14px 16px;
}
.center-loading {
display: flex;
justify-content: center;
padding: 60px 0;
}
.empty-state-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 0;
}
.empty-publish-btn {
margin-top: 4px;
padding: 0 28px;
background: linear-gradient(135deg, #ff8c00, #ff5f00);
border: none;
font-weight: 700;
}
/* ========== 商品卡片 ========== */
.listing-card {
background: #ffffff;
border-radius: 16px;
margin-bottom: 14px;
padding: 16px;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.02),
0 1px 4px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(243, 244, 246, 0.9);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.listing-code-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border: 1px solid #dbeafe;
border-radius: 999px;
background: #eff6ff;
color: #2563eb;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.status-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
line-height: 1;
background: #eef2f7;
color: #64748b;
}
.status-badge.success {
background: rgba(16, 185, 129, 0.1);
color: #15803d;
}
.status-badge.warning {
background: rgba(217, 119, 6, 0.1);
color: #c2410c;
}
.status-badge.danger {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
.status-badge.info {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
}
.status-badge.muted {
background: #f1f5f9;
color: #64748b;
}
.listing-title {
margin: 12px 0 0;
font-size: 15px;
font-weight: 700;
color: #111827;
line-height: 1.45;
}
.meta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 12px;
padding: 12px 14px;
background: #f9fafb;
border-radius: 12px;
}
.meta-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.meta-label {
font-size: 12px;
color: #9ca3af;
}
.meta-val {
font-size: 13px;
font-weight: 700;
color: #374151;
}
.meta-val.price {
color: #ff5f00;
font-size: 15px;
font-weight: 800;
}
.review-reason {
display: flex;
align-items: flex-start;
gap: 5px;
margin: 12px 0 0;
padding: 9px 12px;
border-radius: 10px;
background: rgba(217, 119, 6, 0.08);
color: #b45309;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
}
.card-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.action-btn {
height: 32px !important;
padding: 0 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
}
</style>