支持号主与租客查看自己的发布/订单详情
新增卖家商品详情页；订单详情底部增加可折叠账号快照，已完成订单展示结账明细。
This commit is contained in:
yml2213
@@ -0,0 +1,661 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { showDialog, showToast } from 'vant'
|
||||
|
||||
import {
|
||||
fetchSellerListing,
|
||||
offlineListing,
|
||||
submitListingReview,
|
||||
type Listing,
|
||||
} from '@/features/listings'
|
||||
import AuthImage from '@/shared/components/business/AuthImage.vue'
|
||||
import { formatCent, formatMoney, formatMoneyWithSymbol } from '@/shared/utils/money'
|
||||
import { listingReviewStatusLabel, listingStatusLabel } from '@/shared/utils/statusLabels'
|
||||
import {
|
||||
assetRegions,
|
||||
formatAssetNumber,
|
||||
formatEstimatedRentalDuration,
|
||||
formatHafCoinM,
|
||||
formatListingCode,
|
||||
formatRatio,
|
||||
getCoinWan,
|
||||
getDailyLoss,
|
||||
getListingChips,
|
||||
getListingResources,
|
||||
getListingSellerPrice,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getOnlineTimeText,
|
||||
getServerRegion,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from '@/shared/utils/listingDisplay'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
import { formatDateTime } from '@/shared/utils/time'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const acting = ref(false)
|
||||
const listing = ref<Listing | null>(null)
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
listing.value = await fetchSellerListing(String(route.params.id))
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '加载失败，仅能查看自己的商品'), icon: 'cross' })
|
||||
listing.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const sellerPrice = computed(() =>
|
||||
listing.value ? formatMoneyWithSymbol(getListingSellerPrice(listing.value)) : '—'
|
||||
)
|
||||
|
||||
const detailMetrics = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const dailyLoss = getDailyLoss(listing.value)
|
||||
const secretKD = readAssetNumber(listing.value, 'secret_kd')
|
||||
return [
|
||||
{ label: '纯币', value: formatHafCoinM(getCoinWan(listing.value)) },
|
||||
{
|
||||
label: '绝密KD',
|
||||
value: secretKD > 0 ? formatAssetNumber(secretKD) : '--',
|
||||
},
|
||||
{ label: '日损耗', value: dailyLoss ? `${dailyLoss}/天` : '--' },
|
||||
{ label: '价格', value: sellerPrice.value, tone: 'price' },
|
||||
{ label: '押金', value: `¥${formatCent(listing.value.deposit_amount_cent)}` },
|
||||
]
|
||||
})
|
||||
|
||||
const detailScreenshots = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const groups = listing.value.asset_summary?.screenshot_groups
|
||||
if (typeof groups === 'object' && groups !== null) {
|
||||
const slots = [
|
||||
{ key: 'coin', label: '纯币截图' },
|
||||
{ key: 'gameId', label: '游戏ID截图' },
|
||||
{ key: 'totalAsset', label: '总资产截图' },
|
||||
{ key: 'tencentSecurity', label: '腾讯安全中心截图' },
|
||||
{ key: 'skin', label: '皮肤截图' },
|
||||
]
|
||||
return slots.flatMap(slot => {
|
||||
const urls = (groups as Record<string, unknown>)[slot.key]
|
||||
if (!Array.isArray(urls)) return []
|
||||
const valid = urls.filter((u): u is string => typeof u === 'string' && Boolean(u))
|
||||
return valid.map((url, i) => ({
|
||||
label: valid.length > 1 ? `${slot.label}${i + 1}` : slot.label,
|
||||
url,
|
||||
}))
|
||||
})
|
||||
}
|
||||
const labels = ['纯币截图', '游戏ID截图', '总资产截图', '腾讯安全中心截图', '皮肤截图']
|
||||
return (listing.value.screenshot_urls || []).map((url, index) => ({
|
||||
label: labels[index] || `账号截图${index + 1}`,
|
||||
url,
|
||||
}))
|
||||
})
|
||||
const detailScreenshotUrls = computed(() => detailScreenshots.value.map(s => s.url))
|
||||
|
||||
const detailSkinGroups = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const groups = listing.value.asset_summary?.skin_groups
|
||||
if (typeof groups !== 'object' || groups === null) return []
|
||||
const titles: Record<string, string> = {
|
||||
melee: '近战皮肤',
|
||||
operator: '干员皮肤',
|
||||
operatorGold: '干员金皮',
|
||||
operatorRed: '干员红皮',
|
||||
weapon: '武器皮肤',
|
||||
}
|
||||
return Object.entries(groups as Record<string, unknown>)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
title: titles[key] || key,
|
||||
options: Array.isArray(value)
|
||||
? value.filter((skin): skin is string => typeof skin === 'string')
|
||||
: [],
|
||||
}))
|
||||
.filter(g => g.options.length)
|
||||
})
|
||||
|
||||
const accountRows = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const regions = assetRegions(listing.value)
|
||||
const secretKD = readAssetNumber(listing.value, 'secret_kd')
|
||||
const fireLevel = readAssetNumber(listing.value, 'fire_level')
|
||||
return [
|
||||
{ label: '所属区服', value: getServerRegion(listing.value) || '--' },
|
||||
{ label: '上号方式', value: getLoginMethod(listing.value) || '--' },
|
||||
{ label: '游戏段位', value: listing.value.rank_level || '--' },
|
||||
{ label: '烽火等级', value: fireLevel > 0 ? `${fireLevel}级` : '--' },
|
||||
{ label: '体力等级', value: readAssetString(listing.value, 'stamina_level') || '--' },
|
||||
{ label: '负重等级', value: readAssetString(listing.value, 'load_level') || '--' },
|
||||
{ label: '绝密KD', value: secretKD > 0 ? formatAssetNumber(secretKD) : '--' },
|
||||
{ label: 'M单价', value: formatRatio(listing.value) },
|
||||
{ label: '方便上号', value: getOnlineTimeText(listing.value) || '--' },
|
||||
{ label: '预计可租', value: formatEstimatedRentalDuration(listing.value) },
|
||||
{ label: '常用登录地', value: regions.length ? regions.join('、') : '--' },
|
||||
{ label: '封禁记录', value: readAssetString(listing.value, 'ban_record') || '无' },
|
||||
]
|
||||
})
|
||||
|
||||
function isTerminal(row: Listing) {
|
||||
return row.status === 'rented' || row.status === 'completed'
|
||||
}
|
||||
function isPendingReview(row: Listing) {
|
||||
return !isTerminal(row) && row.status !== 'offline' && row.review_status === 'pending'
|
||||
}
|
||||
function canEdit(row: Listing) {
|
||||
return !isTerminal(row) && !isPendingReview(row) && row.status !== 'published'
|
||||
}
|
||||
function canSubmit(row: Listing) {
|
||||
return !isTerminal(row) && !isPendingReview(row) && row.status !== 'published'
|
||||
}
|
||||
function canOffline(row: Listing) {
|
||||
return !isTerminal(row) && row.status !== 'offline'
|
||||
}
|
||||
|
||||
async function copyCode() {
|
||||
if (!listing.value) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(formatListingCode(listing.value))
|
||||
showToast({ message: '商品编号已复制', icon: 'passed' })
|
||||
} catch {
|
||||
showToast({ message: '复制失败', icon: 'cross' })
|
||||
}
|
||||
}
|
||||
|
||||
function goEdit() {
|
||||
if (!listing.value) return
|
||||
router.push(`/m/seller/listings/${listing.value.id}/edit`)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!listing.value) return
|
||||
acting.value = true
|
||||
try {
|
||||
listing.value = await submitListingReview(listing.value.id)
|
||||
showToast({
|
||||
message:
|
||||
listing.value.status === 'published' && listing.value.review_status === 'approved'
|
||||
? '已上架'
|
||||
: '已提交审核',
|
||||
icon: 'passed',
|
||||
})
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '提审失败'), icon: 'cross' })
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOffline() {
|
||||
if (!listing.value) return
|
||||
try {
|
||||
await showDialog({
|
||||
title: '下架确认',
|
||||
message: `确认下架「${listing.value.title}」吗？`,
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确认下架',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
acting.value = true
|
||||
try {
|
||||
listing.value = await offlineListing(listing.value.id)
|
||||
showToast({ message: '已下架', icon: 'passed' })
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '下架失败'), icon: 'cross' })
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="seller-detail">
|
||||
<header class="page-header">
|
||||
<button type="button" class="icon-btn" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>商品详情</h1>
|
||||
<span class="icon-btn" />
|
||||
</header>
|
||||
|
||||
<van-loading v-if="loading" class="center-loading" size="24px" vertical>加载中...</van-loading>
|
||||
|
||||
<template v-else-if="listing">
|
||||
<div class="status-bar">
|
||||
<button type="button" class="code-chip" @click="copyCode">
|
||||
编号 {{ formatListingCode(listing) }}
|
||||
<van-icon name="description" :size="12" />
|
||||
</button>
|
||||
<div class="tags">
|
||||
<span class="tag">{{ listingStatusLabel(listing.status) }}</span>
|
||||
<span v-if="listing.review_status && listing.review_status !== 'none'" class="tag soft">
|
||||
{{ listingReviewStatusLabel(listing.review_status) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detailScreenshots[0]" class="cover-area">
|
||||
<AuthImage
|
||||
:source="detailScreenshots[0].url"
|
||||
:alt="getListingTitle(listing)"
|
||||
image-class="cover-img"
|
||||
fit="cover"
|
||||
:preview-src-list="detailScreenshotUrls"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="card">
|
||||
<h2>{{ getListingTitle(listing) }}</h2>
|
||||
<p class="sub">{{ getListingSubtitle(listing) }}</p>
|
||||
<div class="tag-row">
|
||||
<van-tag plain type="primary" size="medium">{{ getServerRegion(listing) || '—' }}</van-tag>
|
||||
<van-tag v-if="getLoginMethod(listing)" plain type="primary" size="medium">
|
||||
{{ getLoginMethod(listing) }}
|
||||
</van-tag>
|
||||
<van-tag v-if="listing.rank_level" plain size="medium">{{ listing.rank_level }}</van-tag>
|
||||
</div>
|
||||
<p v-if="listing.review_reason" class="review-reason">
|
||||
<van-icon name="info-o" :size="13" />
|
||||
{{ listing.review_reason }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="metric-row">
|
||||
<div v-for="m in detailMetrics" :key="m.label" class="metric">
|
||||
<span>{{ m.label }}</span>
|
||||
<strong :class="m.tone">{{ m.value }}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3>账号资料</h3>
|
||||
<div class="chip-row">
|
||||
<span v-for="chip in getListingChips(listing)" :key="chip.label">
|
||||
{{ chip.label }}:{{ chip.value }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-for="row in accountRows" :key="row.label" class="info-line">
|
||||
<span>{{ row.label }}</span>
|
||||
<em>{{ row.value }}</em>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="getListingResources(listing).length" class="card">
|
||||
<h3>额外消耗品</h3>
|
||||
<div class="resource-grid">
|
||||
<div v-for="r in getListingResources(listing)" :key="r.key" class="resource-pill">
|
||||
<span>{{ r.label }}</span>
|
||||
<strong>{{ r.quantity }}</strong>
|
||||
<small>
|
||||
{{ r.mode || '--' }}
|
||||
<template v-if="r.amount > 0"> · ¥{{ formatMoney(r.amount) }}</template>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="detailSkinGroups.length" class="card">
|
||||
<h3>皮肤</h3>
|
||||
<div v-for="g in detailSkinGroups" :key="g.key" class="skin-group">
|
||||
<p>{{ g.title }}</p>
|
||||
<div class="chip-row">
|
||||
<span v-for="skin in g.options" :key="skin">{{ skin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="listing.description" class="card">
|
||||
<h3>备注</h3>
|
||||
<p class="desc">{{ listing.description }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="detailScreenshots.length" class="card">
|
||||
<h3>账号截图</h3>
|
||||
<div class="shot-grid">
|
||||
<figure v-for="(shot, index) in detailScreenshots" :key="shot.url + index">
|
||||
<AuthImage
|
||||
:source="shot.url"
|
||||
:alt="shot.label"
|
||||
image-class="shot-img"
|
||||
fit="cover"
|
||||
:preview-src-list="detailScreenshotUrls"
|
||||
:preview-initial-index="index"
|
||||
/>
|
||||
<figcaption>{{ shot.label }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3>时间信息</h3>
|
||||
<div class="info-line">
|
||||
<span>创建时间</span>
|
||||
<em>{{ formatDateTime(listing.created_at) }}</em>
|
||||
</div>
|
||||
<div v-if="listing.published_at" class="info-line">
|
||||
<span>上架时间</span>
|
||||
<em>{{ formatDateTime(listing.published_at) }}</em>
|
||||
</div>
|
||||
<div class="info-line">
|
||||
<span>更新时间</span>
|
||||
<em>{{ formatDateTime(listing.updated_at) }}</em>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="bottom-spacer" />
|
||||
|
||||
<footer class="action-bar">
|
||||
<van-button v-if="canEdit(listing)" plain round class="btn" @click="goEdit">编辑</van-button>
|
||||
<van-button
|
||||
v-if="canSubmit(listing)"
|
||||
type="primary"
|
||||
plain
|
||||
round
|
||||
class="btn"
|
||||
:loading="acting"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提审
|
||||
</van-button>
|
||||
<van-button
|
||||
v-if="canOffline(listing)"
|
||||
type="danger"
|
||||
plain
|
||||
round
|
||||
class="btn"
|
||||
:loading="acting"
|
||||
@click="handleOffline"
|
||||
>
|
||||
下架
|
||||
</van-button>
|
||||
<van-button plain round class="btn" @click="router.push('/m/seller/listings')">
|
||||
返回列表
|
||||
</van-button>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<div v-else class="empty">
|
||||
<van-empty description="未找到商品，或无权查看" />
|
||||
<van-button round type="primary" @click="router.push('/m/seller/listings')">
|
||||
返回我的商品
|
||||
</van-button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.seller-detail {
|
||||
min-height: 100dvh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: calc(72px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.page-header h1 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
.icon-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #333;
|
||||
}
|
||||
.center-loading {
|
||||
padding: 60px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px 0;
|
||||
}
|
||||
.code-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tag.soft {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
.cover-area {
|
||||
margin: 12px 14px 0;
|
||||
height: 180px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card {
|
||||
margin: 12px 14px 0;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 17px;
|
||||
color: #111827;
|
||||
}
|
||||
.card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
color: #111827;
|
||||
}
|
||||
.sub,
|
||||
.desc {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.review-reason {
|
||||
margin: 10px 0 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.metric-row {
|
||||
margin: 12px 14px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
padding: 12px 8px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.metric {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.metric span {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.metric strong {
|
||||
font-size: 12px;
|
||||
color: #111827;
|
||||
word-break: break-all;
|
||||
}
|
||||
.metric strong.price {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chip-row span {
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
font-size: 12px;
|
||||
}
|
||||
.info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
font-size: 13px;
|
||||
}
|
||||
.info-line:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.info-line span {
|
||||
color: #94a3b8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-line em {
|
||||
font-style: normal;
|
||||
color: #111827;
|
||||
text-align: right;
|
||||
}
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.resource-pill {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.resource-pill span {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
.resource-pill strong {
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
}
|
||||
.resource-pill small {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.skin-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.skin-group p {
|
||||
margin: 0 0 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
.shot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.shot-grid figure {
|
||||
margin: 0;
|
||||
}
|
||||
.shot-img {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.shot-grid figcaption {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
}
|
||||
.bottom-spacer {
|
||||
height: 16px;
|
||||
}
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-top: 1px solid #eef1f5;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.action-bar .btn {
|
||||
flex: 1;
|
||||
}
|
||||
.empty {
|
||||
padding: 40px 20px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
justify-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -142,6 +142,10 @@ function goEdit(row: Listing) {
|
||||
router.push(`/m/seller/listings/${row.id}/edit`)
|
||||
}
|
||||
|
||||
function goDetail(row: Listing) {
|
||||
router.push(`/m/seller/listings/${row.id}`)
|
||||
}
|
||||
|
||||
function canSubmit(row: Listing) {
|
||||
return !isTerminalListing(row) && !isPendingReview(row) && row.status !== 'published'
|
||||
}
|
||||
@@ -244,7 +248,7 @@ function isPendingReview(row: Listing) {
|
||||
<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)">
|
||||
<button class="listing-code-chip" type="button" @click.stop="copyListingCode(item)">
|
||||
编号 {{ formatListingCode(item) }}
|
||||
<van-icon name="description" :size="12" />
|
||||
</button>
|
||||
@@ -262,35 +266,47 @@ function isPendingReview(row: Listing) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片体 -->
|
||||
<h3 class="listing-title">{{ item.title }}</h3>
|
||||
<!-- 卡片体：点击查看完整发布信息（仅本人） -->
|
||||
<button type="button" class="card-body-btn" @click="goDetail(item)">
|
||||
<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 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>
|
||||
<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>
|
||||
<p v-if="item.review_reason" class="review-reason">
|
||||
<van-icon name="info-o" :size="13" />
|
||||
{{ item.review_reason }}
|
||||
</p>
|
||||
<span class="detail-hint">查看完整信息 ›</span>
|
||||
</button>
|
||||
|
||||
<!-- 卡片底：操作 -->
|
||||
<div class="card-footer">
|
||||
<van-button
|
||||
size="small"
|
||||
plain
|
||||
round
|
||||
class="action-btn"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
详情
|
||||
</van-button>
|
||||
<van-button
|
||||
v-if="canEdit(item)"
|
||||
size="small"
|
||||
@@ -509,6 +525,18 @@ function isPendingReview(row: Listing) {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.card-body-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.listing-title {
|
||||
margin: 12px 0 0;
|
||||
font-size: 15px;
|
||||
@@ -517,6 +545,14 @@ function isPendingReview(row: Listing) {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.detail-hint {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
@@ -0,0 +1,515 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ArrowLeft, CopyDocument, Edit } from '@element-plus/icons-vue'
|
||||
|
||||
import {
|
||||
fetchSellerListing,
|
||||
offlineListing,
|
||||
submitListingReview,
|
||||
type Listing,
|
||||
} from '@/features/listings'
|
||||
import AuthImage from '@/shared/components/business/AuthImage.vue'
|
||||
import { formatCent, formatMoney, formatMoneyWithSymbol } from '@/shared/utils/money'
|
||||
import { listingReviewStatusLabel, listingStatusLabel } from '@/shared/utils/statusLabels'
|
||||
import {
|
||||
assetRegions,
|
||||
formatAssetNumber,
|
||||
formatEstimatedRentalDuration,
|
||||
formatHafCoinM,
|
||||
formatListingCode,
|
||||
formatRatio,
|
||||
getCoinWan,
|
||||
getDailyLoss,
|
||||
getListingChips,
|
||||
getListingResources,
|
||||
getListingSellerPrice,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getOnlineTimeText,
|
||||
getServerRegion,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from '@/shared/utils/listingDisplay'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
import { formatDateTime } from '@/shared/utils/time'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const acting = ref(false)
|
||||
const listing = ref<Listing | null>(null)
|
||||
|
||||
onMounted(load)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
listing.value = await fetchSellerListing(String(route.params.id))
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '加载失败，仅能查看自己的商品'))
|
||||
listing.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const sellerPrice = computed(() =>
|
||||
listing.value ? formatMoneyWithSymbol(getListingSellerPrice(listing.value)) : '—'
|
||||
)
|
||||
|
||||
const detailScreenshots = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const groups = listing.value.asset_summary?.screenshot_groups
|
||||
if (typeof groups === 'object' && groups !== null) {
|
||||
const slots = [
|
||||
{ key: 'coin', label: '纯币截图' },
|
||||
{ key: 'gameId', label: '游戏ID截图' },
|
||||
{ key: 'totalAsset', label: '总资产截图' },
|
||||
{ key: 'tencentSecurity', label: '腾讯安全中心截图' },
|
||||
{ key: 'skin', label: '皮肤截图' },
|
||||
]
|
||||
return slots.flatMap(slot => {
|
||||
const urls = (groups as Record<string, unknown>)[slot.key]
|
||||
if (!Array.isArray(urls)) return []
|
||||
const valid = urls.filter((u): u is string => typeof u === 'string' && Boolean(u))
|
||||
return valid.map((url, i) => ({
|
||||
label: valid.length > 1 ? `${slot.label}${i + 1}` : slot.label,
|
||||
url,
|
||||
}))
|
||||
})
|
||||
}
|
||||
const labels = ['纯币截图', '游戏ID截图', '总资产截图', '腾讯安全中心截图', '皮肤截图']
|
||||
return (listing.value.screenshot_urls || []).map((url, index) => ({
|
||||
label: labels[index] || `账号截图${index + 1}`,
|
||||
url,
|
||||
}))
|
||||
})
|
||||
const detailScreenshotUrls = computed(() => detailScreenshots.value.map(s => s.url))
|
||||
|
||||
const detailSkinGroups = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const groups = listing.value.asset_summary?.skin_groups
|
||||
if (typeof groups !== 'object' || groups === null) return []
|
||||
const titles: Record<string, string> = {
|
||||
melee: '近战皮肤',
|
||||
operator: '干员皮肤',
|
||||
operatorGold: '干员金皮',
|
||||
operatorRed: '干员红皮',
|
||||
weapon: '武器皮肤',
|
||||
}
|
||||
return Object.entries(groups as Record<string, unknown>)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
title: titles[key] || key,
|
||||
options: Array.isArray(value)
|
||||
? value.filter((skin): skin is string => typeof skin === 'string')
|
||||
: [],
|
||||
}))
|
||||
.filter(g => g.options.length)
|
||||
})
|
||||
|
||||
const accountRows = computed(() => {
|
||||
if (!listing.value) return []
|
||||
const regions = assetRegions(listing.value)
|
||||
const secretKD = readAssetNumber(listing.value, 'secret_kd')
|
||||
const fireLevel = readAssetNumber(listing.value, 'fire_level')
|
||||
return [
|
||||
{ label: '所属区服', value: getServerRegion(listing.value) || '--' },
|
||||
{ label: '上号方式', value: getLoginMethod(listing.value) || '--' },
|
||||
{ label: '游戏段位', value: listing.value.rank_level || '--' },
|
||||
{ label: '烽火等级', value: fireLevel > 0 ? `${fireLevel}级` : '--' },
|
||||
{ label: '体力等级', value: readAssetString(listing.value, 'stamina_level') || '--' },
|
||||
{ label: '负重等级', value: readAssetString(listing.value, 'load_level') || '--' },
|
||||
{ label: '绝密KD', value: secretKD > 0 ? formatAssetNumber(secretKD) : '--' },
|
||||
{ label: '纯币', value: formatHafCoinM(getCoinWan(listing.value)) },
|
||||
{ label: '日损耗', value: getDailyLoss(listing.value) ? `${getDailyLoss(listing.value)}/天` : '--' },
|
||||
{ label: 'M单价', value: formatRatio(listing.value) },
|
||||
{ label: '方便上号', value: getOnlineTimeText(listing.value) || '--' },
|
||||
{ label: '预计可租', value: formatEstimatedRentalDuration(listing.value) },
|
||||
{ label: '常用登录地', value: regions.length ? regions.join('、') : '--' },
|
||||
{ label: '封禁记录', value: readAssetString(listing.value, 'ban_record') || '无' },
|
||||
{ label: '卖家到手价', value: sellerPrice.value },
|
||||
{ label: '押金', value: `¥${formatCent(listing.value.deposit_amount_cent)}` },
|
||||
]
|
||||
})
|
||||
|
||||
function isTerminal(row: Listing) {
|
||||
return row.status === 'rented' || row.status === 'completed'
|
||||
}
|
||||
function isPendingReview(row: Listing) {
|
||||
return !isTerminal(row) && row.status !== 'offline' && row.review_status === 'pending'
|
||||
}
|
||||
function canEdit(row: Listing) {
|
||||
return !isTerminal(row) && !isPendingReview(row) && row.status !== 'published'
|
||||
}
|
||||
function canSubmit(row: Listing) {
|
||||
return !isTerminal(row) && !isPendingReview(row) && row.status !== 'published'
|
||||
}
|
||||
function canOffline(row: Listing) {
|
||||
return !isTerminal(row) && row.status !== 'offline'
|
||||
}
|
||||
|
||||
async function copyCode() {
|
||||
if (!listing.value) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(formatListingCode(listing.value))
|
||||
ElMessage.success('商品编号已复制')
|
||||
} catch {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!listing.value) return
|
||||
acting.value = true
|
||||
try {
|
||||
listing.value = await submitListingReview(listing.value.id)
|
||||
ElMessage.success(
|
||||
listing.value.status === 'published' && listing.value.review_status === 'approved'
|
||||
? '已上架'
|
||||
: '已提交审核'
|
||||
)
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '提审失败'))
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOffline() {
|
||||
if (!listing.value) return
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认下架「${listing.value.title}」吗？`, '下架确认', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确认下架',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
acting.value = true
|
||||
try {
|
||||
listing.value = await offlineListing(listing.value.id)
|
||||
ElMessage.success('已下架')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '下架失败'))
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="seller-detail-page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<el-button text :icon="ArrowLeft" @click="router.push('/seller/listings')">返回列表</el-button>
|
||||
<h1>我的商品详情</h1>
|
||||
<p>仅本人可查看完整发布信息；他人无法通过此入口访问。</p>
|
||||
</div>
|
||||
<div v-if="listing" class="head-actions">
|
||||
<el-button :icon="CopyDocument" @click="copyCode">复制编号</el-button>
|
||||
<el-button v-if="canEdit(listing)" :icon="Edit" @click="router.push(`/seller/listings/${listing.id}/edit`)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-if="canSubmit(listing)" type="primary" plain :loading="acting" @click="handleSubmit">
|
||||
提审
|
||||
</el-button>
|
||||
<el-button v-if="canOffline(listing)" type="danger" plain :loading="acting" @click="handleOffline">
|
||||
下架
|
||||
</el-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<el-empty v-if="!loading && !listing" description="未找到商品，或无权查看" />
|
||||
|
||||
<template v-else-if="listing">
|
||||
<div class="hero card">
|
||||
<div class="hero-main">
|
||||
<div class="code-row">
|
||||
<span class="code">编号 {{ formatListingCode(listing) }}</span>
|
||||
<el-tag size="small">{{ listingStatusLabel(listing.status) }}</el-tag>
|
||||
<el-tag
|
||||
v-if="listing.review_status && listing.review_status !== 'none'"
|
||||
size="small"
|
||||
type="info"
|
||||
>
|
||||
{{ listingReviewStatusLabel(listing.review_status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<h2>{{ getListingTitle(listing) }}</h2>
|
||||
<p>{{ getListingSubtitle(listing) }}</p>
|
||||
<div class="chips">
|
||||
<span v-for="chip in getListingChips(listing)" :key="chip.label">
|
||||
{{ chip.label }}: {{ chip.value }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="listing.review_reason" class="reason">审核备注：{{ listing.review_reason }}</p>
|
||||
</div>
|
||||
<div class="hero-price">
|
||||
<small>卖家到手价</small>
|
||||
<strong>{{ sellerPrice }}</strong>
|
||||
<em>押金 ¥{{ formatCent(listing.deposit_amount_cent) }}</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<section class="card">
|
||||
<h3>账号资料</h3>
|
||||
<dl class="kv">
|
||||
<template v-for="row in accountRows" :key="row.label">
|
||||
<dt>{{ row.label }}</dt>
|
||||
<dd>{{ row.value }}</dd>
|
||||
</template>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3>时间信息</h3>
|
||||
<dl class="kv">
|
||||
<dt>创建时间</dt>
|
||||
<dd>{{ formatDateTime(listing.created_at) }}</dd>
|
||||
<dt>上架时间</dt>
|
||||
<dd>{{ listing.published_at ? formatDateTime(listing.published_at) : '—' }}</dd>
|
||||
<dt>更新时间</dt>
|
||||
<dd>{{ formatDateTime(listing.updated_at) }}</dd>
|
||||
</dl>
|
||||
<h3 class="sub-title">备注</h3>
|
||||
<p class="desc">{{ listing.description || '无' }}</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section v-if="getListingResources(listing).length" class="card">
|
||||
<h3>额外消耗品</h3>
|
||||
<div class="resource-grid">
|
||||
<div v-for="r in getListingResources(listing)" :key="r.key" class="resource">
|
||||
<span>{{ r.label }}</span>
|
||||
<strong>{{ r.quantity }}</strong>
|
||||
<small>
|
||||
{{ r.mode || '--' }}
|
||||
<template v-if="r.amount > 0"> · ¥{{ formatMoney(r.amount) }}</template>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="detailSkinGroups.length" class="card">
|
||||
<h3>皮肤</h3>
|
||||
<div v-for="g in detailSkinGroups" :key="g.key" class="skin-group">
|
||||
<p>{{ g.title }}</p>
|
||||
<div class="chips">
|
||||
<span v-for="skin in g.options" :key="skin">{{ skin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="detailScreenshots.length" class="card">
|
||||
<h3>账号截图</h3>
|
||||
<div class="shots">
|
||||
<figure v-for="(shot, index) in detailScreenshots" :key="shot.url + index">
|
||||
<AuthImage
|
||||
:source="shot.url"
|
||||
:alt="shot.label"
|
||||
image-class="shot-img"
|
||||
fit="cover"
|
||||
:preview-src-list="detailScreenshotUrls"
|
||||
:preview-initial-index="index"
|
||||
/>
|
||||
<figcaption>{{ shot.label }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.seller-detail-page {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.page-head h1 {
|
||||
margin: 4px 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.page-head p {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
.head-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.card {
|
||||
padding: 18px;
|
||||
border: 1px solid #eef1f6;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
.hero-main h2 {
|
||||
margin: 8px 0 6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.hero-main p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
.code-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.code {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.chips span {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
font-size: 12px;
|
||||
}
|
||||
.reason {
|
||||
margin-top: 12px !important;
|
||||
color: #c2410c !important;
|
||||
}
|
||||
.hero-price {
|
||||
min-width: 160px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: #fff7ed;
|
||||
text-align: right;
|
||||
}
|
||||
.hero-price small,
|
||||
.hero-price em {
|
||||
display: block;
|
||||
color: #9a3412;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
.hero-price strong {
|
||||
display: block;
|
||||
margin: 6px 0;
|
||||
color: #ff6a00;
|
||||
font-size: 28px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.card h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.sub-title {
|
||||
margin-top: 18px !important;
|
||||
}
|
||||
.kv {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap: 8px 12px;
|
||||
margin: 0;
|
||||
}
|
||||
.kv dt {
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
}
|
||||
.kv dd {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.desc {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.resource {
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
.resource span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
.resource strong {
|
||||
color: #0f172a;
|
||||
}
|
||||
.resource small {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.skin-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.skin-group p {
|
||||
margin: 0 0 6px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
}
|
||||
.shots {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.shots figure {
|
||||
margin: 0;
|
||||
}
|
||||
.shot-img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.shots figcaption {
|
||||
margin-top: 6px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.hero,
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { CopyDocument, Edit, Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import { CopyDocument, Edit, Plus, Refresh, View } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import {
|
||||
fetchSellerListings,
|
||||
@@ -20,6 +20,7 @@ const offliningID = ref<number | null>(null)
|
||||
const listings = ref<Listing[]>([])
|
||||
const statusFilter = ref('all')
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const displayListings = computed(() => {
|
||||
if (statusFilter.value === 'all') return listings.value
|
||||
@@ -146,6 +147,16 @@ function editPath(row: Listing) {
|
||||
: `/seller/listings/${row.id}/edit`
|
||||
}
|
||||
|
||||
function detailPath(row: Listing) {
|
||||
return route.path.startsWith('/m/')
|
||||
? `/m/seller/listings/${row.id}`
|
||||
: `/seller/listings/${row.id}`
|
||||
}
|
||||
|
||||
function goDetail(row: Listing) {
|
||||
router.push(detailPath(row))
|
||||
}
|
||||
|
||||
function statusTone(status: string) {
|
||||
const tones: Record<string, string> = {
|
||||
published: 'success',
|
||||
@@ -220,7 +231,7 @@ function isPendingReview(row: Listing) {
|
||||
|
||||
<article v-for="item in displayListings" :key="item.id" class="listing-card">
|
||||
<div class="listing-card-head">
|
||||
<button class="listing-code-chip" type="button" @click="copyListingCode(item)">
|
||||
<button class="listing-code-chip" type="button" @click.stop="copyListingCode(item)">
|
||||
编号 {{ formatListingCode(item) }}
|
||||
<el-icon><CopyDocument /></el-icon>
|
||||
</button>
|
||||
@@ -238,30 +249,34 @@ function isPendingReview(row: Listing) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="listing-title">{{ item.title }}</h3>
|
||||
<button type="button" class="listing-body-btn" @click="goDetail(item)">
|
||||
<h3 class="listing-title">{{ item.title }}</h3>
|
||||
|
||||
<div class="listing-meta-grid">
|
||||
<div>
|
||||
<span>区服</span>
|
||||
<strong>{{ item.server_region || '-' }}</strong>
|
||||
<div class="listing-meta-grid">
|
||||
<div>
|
||||
<span>区服</span>
|
||||
<strong>{{ item.server_region || '-' }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>哈夫币</span>
|
||||
<strong>{{ coinText(item) }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>价格</span>
|
||||
<strong class="price-text">{{ listingPrice(item) }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>押金</span>
|
||||
<strong>¥{{ formatCent(item.deposit_amount_cent) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>哈夫币</span>
|
||||
<strong>{{ coinText(item) }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>价格</span>
|
||||
<strong class="price-text">{{ listingPrice(item) }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>押金</span>
|
||||
<strong>¥{{ formatCent(item.deposit_amount_cent) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="item.review_reason" class="review-reason">{{ item.review_reason }}</p>
|
||||
<p v-if="item.review_reason" class="review-reason">{{ item.review_reason }}</p>
|
||||
<span class="detail-hint">查看完整发布信息 ›</span>
|
||||
</button>
|
||||
|
||||
<div class="listing-actions">
|
||||
<el-button :icon="View" @click="goDetail(item)">详情</el-button>
|
||||
<RouterLink v-if="canEdit(item)" :to="editPath(item)">
|
||||
<el-button :icon="Edit">编辑</el-button>
|
||||
</RouterLink>
|
||||
@@ -423,6 +438,17 @@ function isPendingReview(row: Listing) {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.listing-body-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.listing-title {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
@@ -435,6 +461,14 @@ function isPendingReview(row: Listing) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-hint {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.listing-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user