贯通商品编号全流程

frontend/src/features/listings/views/ListingDetailView.vue

@@ -16,6 +16,7 @@ import {
   assetRegions,
   formatEstimatedRentalDuration,
   formatHafCoinM,
+  formatListingCode,
   formatRatio,
   getCoinWan,
   getDailyLoss,
@@ -248,6 +249,16 @@ async function submitOrder() {
   }
 }
 
+async function copyListingCode() {
+  if (!listing.value) return
+  try {
+    await navigator.clipboard.writeText(formatListingCode(listing.value))
+    ElMessage.success('商品编号已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
 function handleAgreementScroll(type: 'virtual' | 'renter') {
   updateAgreementReadState(type)
 }
@@ -336,6 +347,9 @@ function listingPrice(item: Listing) {
               <span v-if="getLoginMethod(listing)">{{ getLoginMethod(listing) }}</span>
               <span v-if="listing.rank_level">{{ listing.rank_level }}</span>
             </div>
+            <button class="detail-code-chip" type="button" @click="copyListingCode">
+              编号 {{ formatListingCode(listing) }}
+            </button>
             <h1>{{ getListingTitle(listing) }}</h1>
             <p>{{ getListingSubtitle(listing) }}</p>
           </div>
@@ -606,6 +620,19 @@ function listingPrice(item: Listing) {
   font-weight: 900;
 }
 
+.detail-code-chip {
+  width: fit-content;
+  margin-top: 10px;
+  padding: 5px 10px;
+  border: 1px solid rgba(147, 197, 253, 0.6);
+  border-radius: 999px;
+  background: rgba(239, 246, 255, 0.92);
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
 .detail-hero-overlay h1 {
   margin: 0;
   color: #ffffff;