新增摸大红业务并修复后台链接按钮白字

支持分类筛选、搜索、下单支付建群与固定二维码；合并迁移种子数据；后台表格编辑/详情链接恢复主题色可见。
2026-07-16 18:08:18 +08:00
parent 97a34e0329
commit 6d61027318
49 changed files with 9533 additions and 20 deletions
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { MohongProduct } from '@/features/mohong/api/mohong'
+import { formatCent } from '@/shared/utils/money'
+
+const props = defineProps<{ product: MohongProduct }>()
+
+const imgFailed = ref(false)
+const coverURL = computed(() => props.product.cover_url || props.product.image_urls?.[0] || '')
+const showImage = computed(() => Boolean(coverURL.value) && !imgFailed.value)
+const priceText = computed(() => props.product.price || formatCent(props.product.price_cent))
+const stockLabel = computed(() => {
+  if (props.product.stock < 0) return ''
+  if (props.product.stock === 0) return '缺货'
+  return `剩${props.product.stock}`
+})
+</script>
+
+<template>
+  <RouterLink class="mohong-card" :to="`/mohong/${product.id}`">
+    <div class="card-cover">
+      <img
+        v-if="showImage"
+        :src="coverURL"
+        :alt="product.title"
+        loading="lazy"
+        decoding="async"
+        @error="imgFailed = true"
+      />
+      <div v-else class="empty-cover">{{ product.title.slice(0, 1) || '红' }}</div>
+      <span v-if="stockLabel" class="stock-tag" :class="{ danger: product.stock === 0 }">
+        {{ stockLabel }}
+      </span>
+    </div>
+
+    <div class="card-body">
+      <h3 :title="product.title">{{ product.title }}</h3>
+      <div class="row">
+        <div class="price">
+          <strong>¥{{ priceText }}</strong>
+          <small v-if="product.original_price">¥{{ product.original_price }}</small>
+        </div>
+        <span class="buy">购买</span>
+      </div>
+    </div>
+  </RouterLink>
+</template>
+
+<style scoped>
+.mohong-card {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  min-width: 200px;
+  max-width: 200px;
+  overflow: hidden;
+  border: 1px solid #e8edf5;
+  border-radius: 14px;
+  background: #fff;
+  text-decoration: none;
+  color: inherit;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.mohong-card:hover {
+  border-color: #ffb27a;
+  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.card-cover {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  background: #f4f6fa;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.card-cover img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.empty-cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(145deg, #fff7ed, #ffe4cc);
+  color: #ff6a00;
+  font-size: 28px;
+  font-weight: 900;
+}
+
+.stock-tag {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.62);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.stock-tag.danger {
+  background: rgba(220, 38, 38, 0.88);
+}
+
+.card-body {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+}
+
+.card-body h3 {
+  margin: 0;
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.price {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.price strong {
+  color: #ff6a00;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.price small {
+  color: #c0c8d4;
+  font-size: 12px;
+  text-decoration: line-through;
+}
+
+.buy {
+  flex-shrink: 0;
+  padding: 5px 10px;
+  border-radius: 8px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.mohong-card:hover .buy {
+  background: #ea580c;
+}
+</style>