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

支持分类筛选、搜索、下单支付建群与固定二维码；合并迁移种子数据；后台表格编辑/详情链接恢复主题色可见。

frontend/src/features/admin/views/AdminMohongCategoriesView.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh } from '@element-plus/icons-vue'
+import {
+  createAdminMohongCategory,
+  deleteAdminMohongCategory,
+  fetchAdminMohongCategories,
+  updateAdminMohongCategory,
+  type MohongCategory,
+} from '@/features/mohong/api/mohong'
+import { readError } from '@/shared/utils/error'
+
+const loading = ref(false)
+const items = ref<MohongCategory[]>([])
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref<number | null>(null)
+const form = reactive({
+  name: '',
+  code: '',
+  sort_order: 0,
+  status: 'enabled',
+})
+
+onMounted(load)
+
+async function load() {
+  loading.value = true
+  try {
+    items.value = await fetchAdminMohongCategories()
+  } catch (error) {
+    ElMessage.error(readError(error, '加载失败'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, { name: '', code: '', sort_order: 0, status: 'enabled' })
+  dialogVisible.value = true
+}
+
+function openEdit(item: MohongCategory) {
+  editingId.value = item.id
+  Object.assign(form, {
+    name: item.name,
+    code: item.code || '',
+    sort_order: item.sort_order,
+    status: item.status,
+  })
+  dialogVisible.value = true
+}
+
+async function handleSave() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请填写分类名称')
+    return
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateAdminMohongCategory(editingId.value, { ...form })
+      ElMessage.success('已更新')
+    } else {
+      await createAdminMohongCategory({ ...form })
+      ElMessage.success('已创建')
+    }
+    dialogVisible.value = false
+    await load()
+  } catch (error) {
+    ElMessage.error(readError(error, '保存失败'))
+  } finally {
+    saving.value = false
+  }
+}
+
+async function handleDelete(item: MohongCategory) {
+  try {
+    await ElMessageBox.confirm(
+      `确认删除分类「${item.name}」？其下商品将变为未分类。`,
+      '提示',
+      { type: 'warning' }
+    )
+    await deleteAdminMohongCategory(item.id)
+    ElMessage.success('已删除')
+    await load()
+  } catch (error) {
+    if (error !== 'cancel') ElMessage.error(readError(error, '删除失败'))
+  }
+}
+</script>
+
+<template>
+  <div class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>摸大红分类</h2>
+        <p>大红 / 四格大红 / 炫彩等分类，前台左侧筛选使用</p>
+      </div>
+      <div class="actions">
+        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新建分类</el-button>
+      </div>
+    </div>
+
+    <el-table v-loading="loading" :data="items" border stripe>
+      <el-table-column prop="name" label="名称" min-width="140" />
+      <el-table-column prop="code" label="编码" width="140" />
+      <el-table-column prop="sort_order" label="排序" width="90" />
+      <el-table-column label="商品数" width="90">
+        <template #default="{ row }">{{ row.product_count }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          {{ row.status === 'enabled' ? '启用' : '停用' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
+          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="editingId ? '编辑分类' : '新建分类'"
+      width="480px"
+      destroy-on-close
+    >
+      <el-form label-width="80px">
+        <el-form-item label="名称" required>
+          <el-input v-model="form.name" maxlength="64" />
+        </el-form-item>
+        <el-form-item label="编码">
+          <el-input v-model="form.code" maxlength="64" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort_order" />
+          <span class="hint">越小越靠前</span>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="form.status" style="width: 160px">
+            <el-option label="启用" value="enabled" />
+            <el-option label="停用" value="disabled" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.admin-page {
+  display: grid;
+  gap: 16px;
+}
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+.page-head h2 {
+  margin: 0 0 4px;
+}
+.page-head p {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 13px;
+}
+.hint {
+  margin-left: 8px;
+  color: #8a94a6;
+  font-size: 12px;
+}
+</style>

frontend/src/features/admin/views/AdminMohongConfigView.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Upload } from '@element-plus/icons-vue'
+import {
+  fetchAdminMohongConfig,
+  updateAdminMohongConfig,
+  type MohongConfig,
+} from '@/features/mohong/api/mohong'
+import { uploadAdminFile } from '@/shared/api/files'
+import { readError } from '@/shared/utils/error'
+
+const loading = ref(false)
+const saving = ref(false)
+const form = reactive<MohongConfig>({
+  default_qrcode_url: '',
+  group_welcome_text: '',
+  order_copy_template: '',
+})
+
+onMounted(load)
+
+async function load() {
+  loading.value = true
+  try {
+    const config = await fetchAdminMohongConfig()
+    Object.assign(form, config)
+  } catch (error) {
+    ElMessage.error(readError(error, '加载配置失败'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleSave() {
+  saving.value = true
+  try {
+    const config = await updateAdminMohongConfig({
+      default_qrcode_url: form.default_qrcode_url,
+      group_welcome_text: form.group_welcome_text,
+      order_copy_template: form.order_copy_template,
+    })
+    Object.assign(form, config)
+    ElMessage.success('已保存')
+  } catch (error) {
+    ElMessage.error(readError(error, '保存失败'))
+  } finally {
+    saving.value = false
+  }
+}
+
+async function uploadQrcode(file: File) {
+  try {
+    const uploaded = await uploadAdminFile(file, 'mohong')
+    form.default_qrcode_url = uploaded.url
+    ElMessage.success('上传成功')
+  } catch (error) {
+    ElMessage.error(readError(error, '上传失败'))
+  }
+  return false
+}
+</script>
+
+<template>
+  <div v-loading="loading" class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>摸大红配置</h2>
+        <p>全局默认固定二维码、群欢迎语、订单复制模板。商品可覆盖默认二维码。</p>
+      </div>
+      <el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
+    </div>
+
+    <el-form label-width="140px" class="config-form">
+      <el-form-item label="默认固定二维码">
+        <div class="qr-row">
+          <el-image
+            v-if="form.default_qrcode_url"
+            :src="form.default_qrcode_url"
+            fit="contain"
+            style="width: 160px; height: 160px; border-radius: 12px; background: #f7f9fc"
+          />
+          <div class="qr-actions">
+            <el-upload :show-file-list="false" accept="image/*" :before-upload="uploadQrcode">
+              <el-button :icon="Upload">上传二维码</el-button>
+            </el-upload>
+            <el-input v-model="form.default_qrcode_url" placeholder="或直接填写图片 URL" />
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="群欢迎语">
+        <el-input v-model="form.group_welcome_text" type="textarea" :rows="3" />
+      </el-form-item>
+      <el-form-item label="复制文案模板">
+        <el-input v-model="form.order_copy_template" type="textarea" :rows="8" />
+        <div class="hint">
+          可用变量：&#123;&#123;order_no&#125;&#125; &#123;&#123;created_at&#125;&#125;
+          &#123;&#123;product_title&#125;&#125; &#123;&#123;quantity&#125;&#125; &#123;&#123;amount&#125;&#125;
+          &#123;&#123;buyer_name&#125;&#125; &#123;&#123;buyer_phone&#125;&#125; &#123;&#123;unit&#125;&#125;
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style scoped>
+.admin-page {
+  display: grid;
+  gap: 16px;
+}
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+.page-head h2 {
+  margin: 0 0 4px;
+}
+.page-head p {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 13px;
+}
+.config-form {
+  max-width: 820px;
+  padding: 20px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid #eef1f5;
+}
+.qr-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  width: 100%;
+}
+.qr-actions {
+  flex: 1;
+  display: grid;
+  gap: 10px;
+}
+.hint {
+  margin-top: 8px;
+  color: #8a94a6;
+  font-size: 12px;
+  line-height: 1.5;
+}
+</style>

frontend/src/features/admin/views/AdminMohongOrdersView.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh } from '@element-plus/icons-vue'
+import {
+  cancelAdminMohongOrder,
+  completeAdminMohongOrder,
+  fetchAdminMohongOrders,
+  mohongOrderStatusLabel,
+  type MohongOrder,
+} from '@/features/mohong/api/mohong'
+import { formatCent } from '@/shared/utils/money'
+import { formatDateTime } from '@/shared/utils/time'
+import { readError } from '@/shared/utils/error'
+import AdminTablePagination from '../components/AdminTablePagination.vue'
+
+const loading = ref(false)
+const items = ref<MohongOrder[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const keyword = ref('')
+const status = ref('')
+const detail = ref<MohongOrder | null>(null)
+
+onMounted(load)
+
+async function load() {
+  loading.value = true
+  try {
+    const result = await fetchAdminMohongOrders({
+      keyword: keyword.value || undefined,
+      status: status.value || undefined,
+      page: page.value,
+      page_size: pageSize.value,
+    })
+    items.value = result.items || []
+    total.value = result.total || 0
+  } catch (error) {
+    ElMessage.error(readError(error, '加载失败'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleComplete(row: MohongOrder) {
+  try {
+    await ElMessageBox.confirm(`确认将订单 ${row.order_no} 标记为已完成？`, '提示', {
+      type: 'warning',
+    })
+    await completeAdminMohongOrder(row.id)
+    ElMessage.success('已完成')
+    await load()
+  } catch (error) {
+    if (error !== 'cancel') ElMessage.error(readError(error, '操作失败'))
+  }
+}
+
+async function handleCancel(row: MohongOrder) {
+  try {
+    const { value } = await ElMessageBox.prompt('请输入取消原因', '取消订单', {
+      inputPlaceholder: '可选',
+      confirmButtonText: '确认取消',
+      cancelButtonText: '返回',
+    })
+    await cancelAdminMohongOrder(row.id, value || '后台取消')
+    ElMessage.success('已取消')
+    await load()
+  } catch (error) {
+    if (error !== 'cancel') ElMessage.error(readError(error, '操作失败'))
+  }
+}
+
+async function copyText(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    ElMessage.success('已复制')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+</script>
+
+<template>
+  <div class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>摸大红订单</h2>
+        <p>查看订单、完成履约、复制用户订单信息</p>
+      </div>
+      <el-button :icon="Refresh" @click="load">刷新</el-button>
+    </div>
+
+    <div class="filters">
+      <el-input v-model="keyword" clearable placeholder="订单号" style="width: 220px" @keyup.enter="load" />
+      <el-select v-model="status" clearable placeholder="状态" style="width: 140px">
+        <el-option label="待支付" value="pending_payment" />
+        <el-option label="已支付" value="paid" />
+        <el-option label="已完成" value="completed" />
+        <el-option label="已取消" value="cancelled" />
+      </el-select>
+      <el-button type="primary" @click=";(page = 1), load()">查询</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="items" border stripe>
+      <el-table-column prop="order_no" label="订单号" min-width="170" />
+      <el-table-column prop="product_title" label="商品" min-width="140" />
+      <el-table-column label="数量" width="70" prop="quantity" />
+      <el-table-column label="金额" width="100">
+        <template #default="{ row }">¥{{ row.amount || formatCent(row.amount_cent) }}</template>
+      </el-table-column>
+      <el-table-column label="买家" min-width="140">
+        <template #default="{ row }">
+          {{ row.buyer_nickname || '-' }}
+          <div class="sub">{{ row.buyer_phone || '' }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">{{ mohongOrderStatusLabel(row.status) }}</template>
+      </el-table-column>
+      <el-table-column label="下单时间" min-width="160">
+        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="220" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="detail = row">详情</el-button>
+          <el-button
+            v-if="row.status === 'paid'"
+            link
+            type="success"
+            @click="handleComplete(row)"
+          >
+            完成
+          </el-button>
+          <el-button
+            v-if="row.status === 'pending_payment' || row.status === 'paid'"
+            link
+            type="danger"
+            @click="handleCancel(row)"
+          >
+            取消
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <AdminTablePagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      @update:current-page="page = $event"
+      @update:page-size="pageSize = $event"
+      @page-change="load"
+    />
+
+    <el-drawer
+      :model-value="Boolean(detail)"
+      size="420px"
+      title="订单详情"
+      destroy-on-close
+      @update:model-value="(v: boolean) => !v && (detail = null)"
+    >
+      <template v-if="detail">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="订单号">{{ detail.order_no }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            {{ mohongOrderStatusLabel(detail.status) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="商品">{{ detail.product_title }}</el-descriptions-item>
+          <el-descriptions-item label="数量">{{ detail.quantity }}</el-descriptions-item>
+          <el-descriptions-item label="金额">
+            ¥{{ detail.amount || formatCent(detail.amount_cent) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="买家">
+            {{ detail.buyer_nickname }} {{ detail.buyer_phone }}
+          </el-descriptions-item>
+          <el-descriptions-item label="会话ID">
+            {{ detail.conversation_id || '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <div v-if="detail.copy_text" class="copy-box">
+          <div class="copy-head">
+            <strong>复制文案</strong>
+            <el-button size="small" @click="copyText(detail.copy_text)">复制</el-button>
+          </div>
+          <pre>{{ detail.copy_text }}</pre>
+        </div>
+        <div v-if="detail.qrcode_url_snapshot" class="qr-box">
+          <strong>二维码快照</strong>
+          <el-image :src="detail.qrcode_url_snapshot" fit="contain" style="width: 180px; height: 180px" />
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped>
+.admin-page {
+  display: grid;
+  gap: 16px;
+}
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.page-head h2 {
+  margin: 0 0 4px;
+}
+.page-head p,
+.sub {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 12px;
+}
+.filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.copy-box,
+.qr-box {
+  margin-top: 16px;
+}
+.copy-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.copy-box pre {
+  margin: 0;
+  padding: 12px;
+  background: #f7f9fc;
+  border-radius: 8px;
+  white-space: pre-wrap;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.qr-box {
+  display: grid;
+  gap: 8px;
+}
+</style>

frontend/src/features/admin/views/AdminMohongProductsView.vue

@@ -0,0 +1,418 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh, Upload } from '@element-plus/icons-vue'
+import {
+  createAdminMohongProduct,
+  deleteAdminMohongProduct,
+  fetchAdminMohongCategories,
+  fetchAdminMohongProducts,
+  mohongProductStatusLabel,
+  updateAdminMohongProduct,
+  type MohongCategory,
+  type MohongProduct,
+} from '@/features/mohong/api/mohong'
+import { uploadAdminFile } from '@/shared/api/files'
+import { formatCent, yuanToCent } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
+import AdminTablePagination from '../components/AdminTablePagination.vue'
+
+const loading = ref(false)
+const items = ref<MohongProduct[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const keyword = ref('')
+const status = ref('')
+const categoryId = ref<number | undefined>()
+const categories = ref<MohongCategory[]>([])
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref<number | null>(null)
+const form = reactive({
+  category_id: undefined as number | undefined,
+  title: '',
+  cover_url: '',
+  image_urls: [] as string[],
+  description: '',
+  price_yuan: 0,
+  original_price_yuan: 0,
+  unit: '份',
+  stock: -1,
+  sort_order: 0,
+  status: 'draft',
+  qrcode_image_url: '',
+  use_custom_qrcode: false,
+})
+
+onMounted(async () => {
+  await loadCategories()
+  await load()
+})
+
+async function loadCategories() {
+  try {
+    categories.value = await fetchAdminMohongCategories()
+  } catch {
+    categories.value = []
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const result = await fetchAdminMohongProducts({
+      keyword: keyword.value || undefined,
+      status: status.value || undefined,
+      category_id: categoryId.value,
+      page: page.value,
+      page_size: pageSize.value,
+    })
+    items.value = result.items || []
+    total.value = result.total || 0
+  } catch (error) {
+    ElMessage.error(readError(error, '加载失败'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    category_id: categoryId.value,
+    title: '',
+    cover_url: '',
+    image_urls: [],
+    description: '',
+    price_yuan: 0,
+    original_price_yuan: 0,
+    unit: '份',
+    stock: -1,
+    sort_order: 0,
+    status: 'on_sale',
+    qrcode_image_url: '',
+    use_custom_qrcode: false,
+  })
+  dialogVisible.value = true
+}
+
+function openEdit(item: MohongProduct) {
+  editingId.value = item.id
+  Object.assign(form, {
+    category_id: item.category_id || undefined,
+    title: item.title,
+    cover_url: item.cover_url,
+    image_urls: [...(item.image_urls || [])],
+    description: item.description,
+    price_yuan: item.price_cent / 100,
+    original_price_yuan: (item.original_price_cent || 0) / 100,
+    unit: item.unit || '份',
+    stock: item.stock,
+    sort_order: item.sort_order,
+    status: item.status,
+    qrcode_image_url: item.qrcode_image_url || '',
+    use_custom_qrcode: Boolean(item.qrcode_image_url),
+  })
+  dialogVisible.value = true
+}
+
+async function handleSave() {
+  if (!form.title.trim()) {
+    ElMessage.warning('请填写标题')
+    return
+  }
+  if (form.price_yuan <= 0) {
+    ElMessage.warning('请填写有效价格')
+    return
+  }
+  saving.value = true
+  try {
+    const payload: Record<string, unknown> = {
+      title: form.title.trim(),
+      cover_url: form.cover_url,
+      image_urls: form.image_urls,
+      description: form.description,
+      price_cent: yuanToCent(form.price_yuan),
+      original_price_cent: yuanToCent(form.original_price_yuan),
+      unit: form.unit || '份',
+      stock: form.stock,
+      sort_order: form.sort_order,
+      status: form.status,
+      qrcode_image_url: form.use_custom_qrcode ? form.qrcode_image_url : '',
+    }
+    if (form.category_id) {
+      payload.category_id = form.category_id
+    } else if (editingId.value) {
+      payload.clear_category = true
+    }
+    if (editingId.value) {
+      await updateAdminMohongProduct(editingId.value, payload)
+      ElMessage.success('已更新')
+    } else {
+      await createAdminMohongProduct(
+        payload as Partial<MohongProduct> & { title: string; price_cent: number }
+      )
+      ElMessage.success('已创建')
+    }
+    dialogVisible.value = false
+    await load()
+  } catch (error) {
+    ElMessage.error(readError(error, '保存失败'))
+  } finally {
+    saving.value = false
+  }
+}
+
+async function handleDelete(item: MohongProduct) {
+  try {
+    await ElMessageBox.confirm(`确认删除商品「${item.title}」？`, '提示', { type: 'warning' })
+    await deleteAdminMohongProduct(item.id)
+    ElMessage.success('已删除')
+    await load()
+  } catch (error) {
+    if (error !== 'cancel') ElMessage.error(readError(error, '删除失败'))
+  }
+}
+
+async function uploadImage(file: File, target: 'cover' | 'gallery' | 'qrcode') {
+  try {
+    const uploaded = await uploadAdminFile(file, 'mohong')
+    if (target === 'cover') form.cover_url = uploaded.url
+    else if (target === 'qrcode') form.qrcode_image_url = uploaded.url
+    else form.image_urls.push(uploaded.url)
+    ElMessage.success('上传成功')
+  } catch (error) {
+    ElMessage.error(readError(error, '上传失败'))
+  }
+  return false
+}
+
+function removeGallery(url: string) {
+  form.image_urls = form.image_urls.filter(item => item !== url)
+}
+</script>
+
+<template>
+  <div class="admin-page">
+    <div class="page-head">
+      <div>
+        <h2>摸大红商品</h2>
+        <p>管理商品图片、价格、库存与专属二维码</p>
+      </div>
+      <div class="actions">
+        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-button type="primary" :icon="Plus" @click="openCreate">新建商品</el-button>
+      </div>
+    </div>
+
+    <div class="filters">
+      <el-input v-model="keyword" clearable placeholder="搜索标题" style="width: 220px" @keyup.enter="load" />
+      <el-select v-model="categoryId" clearable placeholder="分类" style="width: 140px">
+        <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+      </el-select>
+      <el-select v-model="status" clearable placeholder="状态" style="width: 140px">
+        <el-option label="草稿" value="draft" />
+        <el-option label="上架中" value="on_sale" />
+        <el-option label="已下架" value="off_sale" />
+      </el-select>
+      <el-button type="primary" @click=";(page = 1), load()">查询</el-button>
+    </div>
+
+    <el-table v-loading="loading" :data="items" border stripe>
+      <el-table-column label="封面" width="80">
+        <template #default="{ row }">
+          <el-image
+            v-if="row.cover_url"
+            :src="row.cover_url"
+            style="width: 48px; height: 48px; border-radius: 8px"
+            fit="cover"
+          />
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="标题" min-width="160" />
+      <el-table-column label="分类" width="110">
+        <template #default="{ row }">{{ row.category_name || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="价格" width="100">
+        <template #default="{ row }">¥{{ row.price || formatCent(row.price_cent) }}</template>
+      </el-table-column>
+      <el-table-column label="库存" width="90">
+        <template #default="{ row }">{{ row.stock < 0 ? '不限' : row.stock }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">{{ mohongProductStatusLabel(row.status) }}</template>
+      </el-table-column>
+      <el-table-column prop="sort_order" label="排序" width="80" />
+      <el-table-column label="专属码" width="90">
+        <template #default="{ row }">{{ row.qrcode_image_url ? '是' : '默认' }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
+          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <AdminTablePagination
+      :current-page="page"
+      :page-size="pageSize"
+      :total="total"
+      @update:current-page="page = $event"
+      @update:page-size="pageSize = $event"
+      @page-change="load"
+    />
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="editingId ? '编辑商品' : '新建商品'"
+      width="640px"
+      destroy-on-close
+    >
+      <el-form label-width="100px">
+        <el-form-item label="分类">
+          <el-select v-model="form.category_id" clearable placeholder="选择分类" style="width: 100%">
+            <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标题" required>
+          <el-input v-model="form.title" maxlength="128" />
+        </el-form-item>
+        <el-form-item label="封面">
+          <div class="upload-row">
+            <el-image
+              v-if="form.cover_url"
+              :src="form.cover_url"
+              style="width: 80px; height: 80px; border-radius: 8px"
+              fit="cover"
+            />
+            <el-upload :show-file-list="false" accept="image/*" :before-upload="(f: File) => uploadImage(f, 'cover')">
+              <el-button :icon="Upload">上传封面</el-button>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item label="详情图">
+          <div class="gallery">
+            <div v-for="url in form.image_urls" :key="url" class="gallery-item">
+              <el-image :src="url" fit="cover" />
+              <button type="button" @click="removeGallery(url)">×</button>
+            </div>
+            <el-upload :show-file-list="false" accept="image/*" :before-upload="(f: File) => uploadImage(f, 'gallery')">
+              <el-button :icon="Upload">添加图片</el-button>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="form.description" type="textarea" :rows="4" />
+        </el-form-item>
+        <el-form-item label="售价(元)" required>
+          <el-input-number v-model="form.price_yuan" :min="0.1" :step="0.1" :precision="1" />
+        </el-form-item>
+        <el-form-item label="原价(元)">
+          <el-input-number v-model="form.original_price_yuan" :min="0" :step="0.1" :precision="1" />
+        </el-form-item>
+        <el-form-item label="单位">
+          <el-input v-model="form.unit" style="width: 120px" />
+        </el-form-item>
+        <el-form-item label="库存">
+          <el-input-number v-model="form.stock" :min="-1" />
+          <span class="hint">-1 表示不限库存</span>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort_order" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="form.status" style="width: 160px">
+            <el-option label="草稿" value="draft" />
+            <el-option label="上架" value="on_sale" />
+            <el-option label="下架" value="off_sale" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="专属二维码">
+          <el-switch v-model="form.use_custom_qrcode" active-text="覆盖默认" inactive-text="用默认" />
+          <div v-if="form.use_custom_qrcode" class="upload-row" style="margin-top: 8px">
+            <el-image
+              v-if="form.qrcode_image_url"
+              :src="form.qrcode_image_url"
+              style="width: 100px; height: 100px; border-radius: 8px"
+              fit="contain"
+            />
+            <el-upload
+              :show-file-list="false"
+              accept="image/*"
+              :before-upload="(f: File) => uploadImage(f, 'qrcode')"
+            >
+              <el-button :icon="Upload">上传二维码</el-button>
+            </el-upload>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.admin-page {
+  display: grid;
+  gap: 16px;
+}
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+.page-head h2 {
+  margin: 0 0 4px;
+}
+.page-head p {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 13px;
+}
+.filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.upload-row,
+.gallery {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.gallery-item {
+  position: relative;
+  width: 72px;
+  height: 72px;
+}
+.gallery-item :deep(.el-image) {
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+}
+.gallery-item button {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 50%;
+  background: #ef4444;
+  color: #fff;
+  cursor: pointer;
+}
+.hint {
+  margin-left: 8px;
+  color: #8a94a6;
+  font-size: 12px;
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
 import {
   defaultHomeAnnouncements,
   defaultHomeBanners,
@@ -255,6 +255,17 @@ loadHome()
         <HomeStats :stats="statCards" />
       </div>
 
+      <div class="biz-entry-grid" aria-label="业务入口">
+        <RouterLink class="biz-entry" to="/">
+          <strong>租号大厅</strong>
+          <small>高哈夫币 · 安全交接 · 随租随玩</small>
+        </RouterLink>
+        <RouterLink class="biz-entry mohong" to="/mohong">
+          <strong>摸大红 <em>NEW</em></strong>
+          <small>选购商品 · 支付后进群联系客服</small>
+        </RouterLink>
+      </div>
+
       <HomeFilters
         :filters="filters"
         :total-listings="totalListings"
@@ -326,6 +337,51 @@ loadHome()
   min-width: 0;
 }
 
+.biz-entry-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.biz-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+  border-radius: 14px;
+  border: 1px solid #eef1f5;
+  background: #fff;
+  text-decoration: none;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.biz-entry:hover {
+  border-color: #ffd4b0;
+  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.08);
+}
+
+.biz-entry strong {
+  color: #17233d;
+  font-size: 16px;
+}
+
+.biz-entry small {
+  color: #7b8798;
+  font-size: 13px;
+}
+
+.biz-entry.mohong strong em {
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 11px;
+  font-style: normal;
+}
+
 .infinite-load-state {
   padding: 6px 0 18px;
   color: #94a3b8;

frontend/src/features/listings/views/MobileHomeView.css

@@ -343,6 +343,75 @@
   font-weight: 800;
 }
 
+.biz-entry-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0 0 12px;
+}
+
+.biz-entry {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 12px 12px 12px 14px;
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid #eef1f5;
+  text-decoration: none;
+  box-shadow: 0 4px 14px rgba(23, 35, 61, 0.04);
+}
+
+.biz-entry-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  font-size: 13px;
+  font-weight: 800;
+  margin-bottom: 2px;
+}
+
+.biz-entry-icon.rental {
+  background: #fff1e6;
+  color: #ff6a00;
+}
+
+.biz-entry-icon.mohong {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.biz-entry strong {
+  color: #17233d;
+  font-size: 15px;
+}
+
+.biz-entry small {
+  color: #8a94a6;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.biz-entry-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+}
+
 .zone-strip {
   display: flex;
   gap: 6px;

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

@@ -815,6 +815,20 @@ syncMobileHomeQuery()
             </van-swipe-item>
           </van-swipe>
 
+          <div class="biz-entry-grid" aria-label="业务入口">
+            <RouterLink class="biz-entry" to="/">
+              <span class="biz-entry-icon rental">租</span>
+              <strong>租号大厅</strong>
+              <small>高哈夫币 · 随租随玩</small>
+            </RouterLink>
+            <RouterLink class="biz-entry" to="/mohong">
+              <span class="biz-entry-icon mohong">红</span>
+              <strong>摸大红</strong>
+              <small>选购商品 · 一键找客服</small>
+              <em class="biz-entry-badge">NEW</em>
+            </RouterLink>
+          </div>
+
           <div class="zone-strip" aria-label="账号专区">
             <button
               v-for="zone in visibleZoneOptions"

frontend/src/features/mohong/api/mohong.ts

@@ -0,0 +1,290 @@
+import { apiClient } from '@/shared/api/client'
+import type { ApiResponse } from '@/shared/types/types'
+import type { PaymentOrder, PaymentPayWay } from '@/features/orders/api/orders'
+
+export interface MohongCategory {
+  id: number
+  name: string
+  code: string
+  sort_order: number
+  status: string
+  product_count: number
+  created_at: string
+  updated_at: string
+}
+
+export interface MohongProduct {
+  id: number
+  category_id?: number | null
+  category_name?: string
+  title: string
+  cover_url: string
+  image_urls: string[]
+  description: string
+  price_cent: number
+  price: string
+  original_price_cent: number
+  original_price?: string
+  unit: string
+  stock: number
+  sort_order: number
+  status: string
+  qrcode_image_url?: string
+  created_at: string
+  updated_at: string
+}
+
+export interface MohongOrder {
+  id: number
+  order_no: string
+  user_id: number
+  product_id: number
+  quantity: number
+  unit_price_cent: number
+  unit_price: string
+  amount_cent: number
+  amount: string
+  status: string
+  product_title: string
+  product_cover_url: string
+  product_unit: string
+  qrcode_url_snapshot: string
+  copy_text: string
+  conversation_id?: number | null
+  buyer_nickname?: string
+  buyer_phone?: string
+  admin_remark?: string
+  cancel_reason?: string
+  paid_at?: string | null
+  completed_at?: string | null
+  cancelled_at?: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface MohongConfig {
+  default_qrcode_url: string
+  group_welcome_text: string
+  order_copy_template: string
+}
+
+export interface Paginated<T> {
+  items: T[]
+  total: number
+  page: number
+  page_size: number
+}
+
+export async function fetchMohongCategories() {
+  const { data } = await apiClient.get<ApiResponse<MohongCategory[]>>('/mohong/categories')
+  return data.data || []
+}
+
+export async function fetchMohongProducts(params?: {
+  keyword?: string
+  category_id?: number
+  page?: number
+  page_size?: number
+}) {
+  const { data } = await apiClient.get<ApiResponse<Paginated<MohongProduct>>>('/mohong/products', {
+    params,
+  })
+  return data.data
+}
+
+export async function fetchMohongProduct(id: number | string) {
+  const { data } = await apiClient.get<ApiResponse<MohongProduct>>(`/mohong/products/${id}`)
+  return data.data
+}
+
+export async function createMohongOrder(productId: number, quantity: number) {
+  const { data } = await apiClient.post<ApiResponse<MohongOrder>>('/mohong/orders', {
+    product_id: productId,
+    quantity,
+  })
+  return data.data
+}
+
+export async function fetchMyMohongOrders(params?: {
+  status?: string
+  page?: number
+  page_size?: number
+}) {
+  const { data } = await apiClient.get<ApiResponse<Paginated<MohongOrder>>>('/mohong/orders', {
+    params,
+  })
+  return data.data
+}
+
+export async function fetchMyMohongOrder(id: number | string) {
+  const { data } = await apiClient.get<ApiResponse<MohongOrder>>(`/mohong/orders/${id}`)
+  return data.data
+}
+
+export async function cancelMyMohongOrder(id: number | string, reason?: string) {
+  const { data } = await apiClient.post<ApiResponse<MohongOrder>>(`/mohong/orders/${id}/cancel`, {
+    reason: reason || '',
+  })
+  return data.data
+}
+
+export async function startMohongPayment(
+  orderId: number,
+  payWay: PaymentPayWay | string,
+  jsPayFlag?: string
+) {
+  const { data } = await apiClient.post<ApiResponse<PaymentOrder>>(
+    `/mohong/orders/${orderId}/start-payment`,
+    {
+      pay_way: payWay || 'ZFBZF',
+      jspay_flag: jsPayFlag || '',
+    }
+  )
+  return data.data
+}
+
+export async function queryMohongPayment(orderId: number) {
+  const { data } = await apiClient.get<ApiResponse<PaymentOrder>>(
+    `/mohong/orders/${orderId}/query-payment`
+  )
+  return data.data
+}
+
+// Admin APIs
+export async function fetchAdminMohongCategories() {
+  const { data } = await apiClient.get<ApiResponse<MohongCategory[]>>('/admin/mohong/categories')
+  return data.data || []
+}
+
+export async function createAdminMohongCategory(payload: {
+  name: string
+  code?: string
+  sort_order?: number
+  status?: string
+}) {
+  const { data } = await apiClient.post<ApiResponse<MohongCategory>>(
+    '/admin/mohong/categories',
+    payload
+  )
+  return data.data
+}
+
+export async function updateAdminMohongCategory(
+  id: number,
+  payload: Partial<{ name: string; code: string; sort_order: number; status: string }>
+) {
+  const { data } = await apiClient.put<ApiResponse<MohongCategory>>(
+    `/admin/mohong/categories/${id}`,
+    payload
+  )
+  return data.data
+}
+
+export async function deleteAdminMohongCategory(id: number) {
+  const { data } = await apiClient.delete<ApiResponse<{ message: string }>>(
+    `/admin/mohong/categories/${id}`
+  )
+  return data.data
+}
+
+export async function fetchAdminMohongProducts(params?: {
+  keyword?: string
+  status?: string
+  category_id?: number
+  page?: number
+  page_size?: number
+}) {
+  const { data } = await apiClient.get<ApiResponse<Paginated<MohongProduct>>>(
+    '/admin/mohong/products',
+    { params }
+  )
+  return data.data
+}
+
+export async function fetchAdminMohongProduct(id: number | string) {
+  const { data } = await apiClient.get<ApiResponse<MohongProduct>>(`/admin/mohong/products/${id}`)
+  return data.data
+}
+
+export async function createAdminMohongProduct(payload: Partial<MohongProduct> & { title: string; price_cent: number }) {
+  const { data } = await apiClient.post<ApiResponse<MohongProduct>>('/admin/mohong/products', payload)
+  return data.data
+}
+
+export async function updateAdminMohongProduct(id: number, payload: Record<string, unknown>) {
+  const { data } = await apiClient.put<ApiResponse<MohongProduct>>(
+    `/admin/mohong/products/${id}`,
+    payload
+  )
+  return data.data
+}
+
+export async function deleteAdminMohongProduct(id: number) {
+  const { data } = await apiClient.delete<ApiResponse<{ message: string }>>(
+    `/admin/mohong/products/${id}`
+  )
+  return data.data
+}
+
+export async function fetchAdminMohongOrders(params?: {
+  status?: string
+  keyword?: string
+  page?: number
+  page_size?: number
+}) {
+  const { data } = await apiClient.get<ApiResponse<Paginated<MohongOrder>>>('/admin/mohong/orders', {
+    params,
+  })
+  return data.data
+}
+
+export async function fetchAdminMohongOrder(id: number | string) {
+  const { data } = await apiClient.get<ApiResponse<MohongOrder>>(`/admin/mohong/orders/${id}`)
+  return data.data
+}
+
+export async function completeAdminMohongOrder(id: number, remark?: string) {
+  const { data } = await apiClient.post<ApiResponse<MohongOrder>>(
+    `/admin/mohong/orders/${id}/complete`,
+    { remark: remark || '' }
+  )
+  return data.data
+}
+
+export async function cancelAdminMohongOrder(id: number, reason?: string) {
+  const { data } = await apiClient.post<ApiResponse<MohongOrder>>(
+    `/admin/mohong/orders/${id}/cancel`,
+    { reason: reason || '' }
+  )
+  return data.data
+}
+
+export async function fetchAdminMohongConfig() {
+  const { data } = await apiClient.get<ApiResponse<MohongConfig>>('/admin/mohong/config')
+  return data.data
+}
+
+export async function updateAdminMohongConfig(payload: Partial<MohongConfig>) {
+  const { data } = await apiClient.put<ApiResponse<MohongConfig>>('/admin/mohong/config', payload)
+  return data.data
+}
+
+export function mohongOrderStatusLabel(status: string) {
+  const map: Record<string, string> = {
+    pending_payment: '待支付',
+    paid: '已支付',
+    completed: '已完成',
+    cancelled: '已取消',
+    refunded: '已退款',
+  }
+  return map[status] || status
+}
+
+export function mohongProductStatusLabel(status: string) {
+  const map: Record<string, string> = {
+    draft: '草稿',
+    on_sale: '上架中',
+    off_sale: '已下架',
+  }
+  return map[status] || status
+}

frontend/src/features/mohong/components/MohongProductCard.vue

@@ -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>

frontend/src/features/mohong/views/MobileMohongDetailView.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
+import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
+import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
+import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
+import {
+  createMohongOrder,
+  fetchMohongProduct,
+  queryMohongPayment,
+  startMohongPayment,
+  type MohongProduct,
+} from '@/features/mohong/api/mohong'
+import { useSessionStore } from '@/stores/session'
+import { formatCent } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
+
+const route = useRoute()
+const router = useRouter()
+const session = useSessionStore()
+const product = ref<MohongProduct | null>(null)
+const loading = ref(true)
+const quantity = ref(1)
+const submitting = ref(false)
+const payWaySelect = useMobilePayWaySelect()
+const {
+  paymentPopupVisible,
+  activePayment,
+  payURL,
+  paymentQRCodeURL,
+  qrGenerating,
+  checkingPayment,
+  openMobilePaymentCashier,
+  refreshPaymentStatus,
+} = useMobilePaymentCashier({
+  queryPayment: queryMohongPayment,
+  paidMessage: '支付成功',
+})
+
+const images = computed(() => {
+  if (!product.value) return []
+  const list = [...(product.value.image_urls || [])]
+  if (product.value.cover_url && !list.includes(product.value.cover_url)) {
+    list.unshift(product.value.cover_url)
+  }
+  return list
+})
+
+const totalPrice = computed(() => {
+  if (!product.value) return '0'
+  const cent = product.value.price_cent * quantity.value
+  return formatCent(cent)
+})
+
+const canBuy = computed(() => {
+  if (!product.value) return false
+  if (product.value.stock === 0) return false
+  if (product.value.stock > 0 && quantity.value > product.value.stock) return false
+  return true
+})
+
+onMounted(loadProduct)
+
+async function loadProduct() {
+  loading.value = true
+  try {
+    product.value = await fetchMohongProduct(String(route.params.id))
+  } catch (error) {
+    showToast({ message: readError(error, '商品不存在'), icon: 'cross' })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function ensureAuthReady() {
+  if (!session.isLoggedIn) {
+    router.push({ path: '/m/login', query: { redirect: route.fullPath } })
+    return false
+  }
+  try {
+    await session.loadMe()
+  } catch {
+    // ignore
+  }
+  if (session.realnameStatus !== 'verified') {
+    router.push({ path: '/m/realname', query: { redirect: route.fullPath } })
+    return false
+  }
+  return true
+}
+
+async function handleBuy() {
+  if (!product.value || submitting.value) return
+  if (!(await ensureAuthReady())) return
+  if (!canBuy.value) {
+    showToast({ message: '库存不足', icon: 'cross' })
+    return
+  }
+  const payWay = await payWaySelect.select()
+  if (!payWay) return
+
+  submitting.value = true
+  try {
+    const order = await createMohongOrder(product.value.id, quantity.value)
+    const payment = await startMohongPayment(order.id, payWay)
+    if (payment.paid || payment.status === 'paid') {
+      showToast({ message: '支付成功', icon: 'passed' })
+      await router.push(`/mohong/orders/${order.id}`)
+      return
+    }
+    await openMobilePaymentCashier(payment, async () => {
+      await router.push(`/mohong/orders/${order.id}`)
+    })
+  } catch (error) {
+    showToast({ message: readError(error, '下单失败'), icon: 'cross' })
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="detail-shell">
+    <header class="page-header">
+      <button type="button" class="back-btn" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <h1>商品详情</h1>
+    </header>
+
+    <van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
+    <template v-else-if="product">
+      <van-swipe v-if="images.length" class="gallery" :autoplay="4000">
+        <van-swipe-item v-for="(url, idx) in images" :key="idx">
+          <img :src="url" :alt="product.title" />
+        </van-swipe-item>
+      </van-swipe>
+      <div v-else class="gallery empty">暂无图片</div>
+
+      <section class="panel">
+        <div class="price-row">
+          <strong>¥{{ product.price || formatCent(product.price_cent) }}</strong>
+          <span v-if="product.original_price" class="origin">¥{{ product.original_price }}</span>
+          <em>/ {{ product.unit || '份' }}</em>
+        </div>
+        <h2>{{ product.title }}</h2>
+        <p class="stock">
+          库存：
+          <template v-if="product.stock < 0">充足</template>
+          <template v-else>{{ product.stock }}</template>
+        </p>
+      </section>
+
+      <section class="panel">
+        <h3>商品说明</h3>
+        <p class="desc">{{ product.description || '暂无说明' }}</p>
+      </section>
+
+      <section class="panel qty-panel">
+        <span>购买数量</span>
+        <van-stepper v-model="quantity" :min="1" :max="product.stock > 0 ? product.stock : 99" />
+      </section>
+
+      <div class="buy-bar">
+        <div class="sum">
+          合计 <strong>¥{{ totalPrice }}</strong>
+        </div>
+        <van-button
+          type="primary"
+          color="#ff6a00"
+          round
+          :loading="submitting"
+          :disabled="!canBuy"
+          @click="handleBuy"
+        >
+          {{ canBuy ? '立即购买' : '暂时缺货' }}
+        </van-button>
+      </div>
+    </template>
+    <van-empty v-else description="商品不存在" />
+
+    <MobilePayWaySelectPopup
+      v-model:show="payWaySelect.visible.value"
+      @choose="payWaySelect.choose"
+      @closed="payWaySelect.handleClosed"
+    />
+    <MobilePaymentCashierPopup
+      v-model:show="paymentPopupVisible"
+      :payment="activePayment"
+      :pay-url="payURL"
+      :qr-code-url="paymentQRCodeURL"
+      :qr-generating="qrGenerating"
+      :checking="checkingPayment"
+      @refresh="refreshPaymentStatus(false)"
+    />
+  </main>
+</template>
+
+<style scoped>
+.detail-shell {
+  min-height: 100vh;
+  background: #f5f7fb;
+  padding-bottom: 88px;
+}
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #fff;
+  border-bottom: 1px solid #eef1f5;
+}
+.back-btn {
+  border: 0;
+  background: transparent;
+}
+.page-header h1 {
+  margin: 0;
+  font-size: 17px;
+}
+.state-loading {
+  padding: 48px 0;
+}
+.gallery {
+  height: 280px;
+  background: #fff;
+}
+.gallery img {
+  width: 100%;
+  height: 280px;
+  object-fit: cover;
+}
+.gallery.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #a0aec0;
+}
+.panel {
+  margin: 10px 12px;
+  padding: 14px;
+  border-radius: 14px;
+  background: #fff;
+}
+.price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.price-row strong {
+  color: #ff6a00;
+  font-size: 24px;
+}
+.price-row .origin {
+  color: #b0b8c4;
+  text-decoration: line-through;
+  font-size: 13px;
+}
+.price-row em {
+  font-style: normal;
+  color: #8a94a6;
+  font-size: 13px;
+}
+.panel h2 {
+  margin: 0 0 8px;
+  font-size: 17px;
+  color: #17233d;
+}
+.stock,
+.desc {
+  margin: 0;
+  color: #6b7a90;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+.panel h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: #17233d;
+}
+.qty-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.buy-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1px solid #eef1f5;
+}
+.sum {
+  color: #6b7a90;
+  font-size: 13px;
+}
+.sum strong {
+  color: #ff6a00;
+  font-size: 20px;
+  margin-left: 4px;
+}
+.buy-bar :deep(.van-button) {
+  min-width: 128px;
+}
+</style>

frontend/src/features/mohong/views/MobileMohongListView.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import MobileBottomNav from '@/components/MobileBottomNav.vue'
+import {
+  fetchMohongCategories,
+  fetchMohongProducts,
+  type MohongCategory,
+  type MohongProduct,
+} from '@/features/mohong/api/mohong'
+import { formatCent } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
+
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false)
+const products = ref<MohongProduct[]>([])
+const categories = ref<MohongCategory[]>([])
+const total = ref(0)
+const page = ref(1)
+const hasMore = ref(true)
+const loadingMore = ref(false)
+const keyword = ref('')
+const activeCategoryId = ref<number | null>(null)
+const failedCover = ref<Record<number, boolean>>({})
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(async () => {
+  await loadCategories()
+  applyRouteQuery()
+  await loadProducts(true)
+})
+
+watch(
+  () => route.query,
+  () => {
+    applyRouteQuery()
+    loadProducts(true)
+  }
+)
+
+function applyRouteQuery() {
+  const q = route.query
+  keyword.value = typeof q.keyword === 'string' ? q.keyword : ''
+  const cat = Number(q.category_id || 0)
+  activeCategoryId.value = cat > 0 ? cat : null
+}
+
+async function loadCategories() {
+  try {
+    categories.value = await fetchMohongCategories()
+    if (!activeCategoryId.value && categories.value.length) {
+      const dahong = categories.value.find(c => c.name === '大红')
+      const first = categories.value.find(c => c.product_count > 0) || categories.value[0]
+      if (dahong || first) {
+        activeCategoryId.value = (dahong || first)!.id
+        syncQuery()
+      }
+    }
+  } catch (error) {
+    showToast({ message: readError(error, '加载分类失败'), icon: 'cross' })
+  }
+}
+
+async function loadProducts(reset = true) {
+  if (loadingMore.value) return
+  if (reset) {
+    loading.value = true
+    page.value = 1
+    hasMore.value = true
+  } else {
+    if (!hasMore.value) return
+    loadingMore.value = true
+  }
+  try {
+    const result = await fetchMohongProducts({
+      page: page.value,
+      page_size: 20,
+      keyword: keyword.value.trim() || undefined,
+      category_id: activeCategoryId.value || undefined,
+    })
+    products.value = reset ? result.items || [] : [...products.value, ...(result.items || [])]
+    total.value = result.total || 0
+    hasMore.value = products.value.length < total.value
+    page.value += 1
+  } catch (error) {
+    showToast({ message: readError(error, '加载商品失败'), icon: 'cross' })
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function selectCategory(id: number | null) {
+  activeCategoryId.value = id
+  syncQuery()
+  loadProducts(true)
+}
+
+function onSearchInput() {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    syncQuery()
+    loadProducts(true)
+  }, 280)
+}
+
+function syncQuery() {
+  const query: Record<string, string> = {}
+  if (keyword.value.trim()) query.keyword = keyword.value.trim()
+  if (activeCategoryId.value) query.category_id = String(activeCategoryId.value)
+  router.replace({ path: '/mohong', query })
+}
+
+function goDetail(id: number) {
+  router.push(`/mohong/${id}`)
+}
+
+function markCoverFailed(id: number) {
+  failedCover.value = { ...failedCover.value, [id]: true }
+}
+
+function showCover(item: MohongProduct) {
+  return Boolean(item.cover_url) && !failedCover.value[item.id]
+}
+</script>
+
+<template>
+  <main class="mohong-shell">
+    <header class="page-header">
+      <button type="button" class="back-btn" @click="router.push('/')">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <div class="search-wrap">
+        <van-icon name="search" :size="16" />
+        <input
+          v-model="keyword"
+          type="search"
+          placeholder="搜索商品"
+          @input="onSearchInput"
+        />
+      </div>
+      <button type="button" class="orders-btn" @click="router.push('/mohong/orders')">订单</button>
+    </header>
+
+    <div class="shop-body">
+      <aside class="cat-sidebar">
+        <button
+          type="button"
+          class="cat-item"
+          :class="{ active: !activeCategoryId }"
+          @click="selectCategory(null)"
+        >
+          全部
+        </button>
+        <button
+          v-for="cat in categories"
+          :key="cat.id"
+          type="button"
+          class="cat-item"
+          :class="{ active: activeCategoryId === cat.id }"
+          @click="selectCategory(cat.id)"
+        >
+          {{ cat.name }}
+        </button>
+      </aside>
+
+      <section class="list-panel">
+        <van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
+        <van-empty v-else-if="products.length === 0" description="暂无商品" />
+        <div v-else class="product-list">
+          <button
+            v-for="item in products"
+            :key="item.id"
+            type="button"
+            class="product-row"
+            @click="goDetail(item.id)"
+          >
+            <div class="cover">
+              <img
+                v-if="showCover(item)"
+                :src="item.cover_url"
+                :alt="item.title"
+                @error="markCoverFailed(item.id)"
+              />
+              <span v-else class="cover-fallback">{{ item.title.slice(0, 1) || '红' }}</span>
+            </div>
+            <div class="info">
+              <h2>{{ item.title }}</h2>
+              <div class="price-row">
+                <strong>¥{{ item.price || formatCent(item.price_cent) }}</strong>
+                <small v-if="item.original_price">¥{{ item.original_price }}</small>
+              </div>
+            </div>
+            <span class="buy-icon">购</span>
+          </button>
+        </div>
+        <van-button
+          v-if="hasMore && products.length"
+          size="small"
+          plain
+          block
+          :loading="loadingMore"
+          class="load-more"
+          @click="loadProducts(false)"
+        >
+          加载更多
+        </van-button>
+      </section>
+    </div>
+    <MobileBottomNav />
+  </main>
+</template>
+
+<style scoped>
+.mohong-shell {
+  min-height: 100vh;
+  background: #f5f7fb;
+  padding-bottom: calc(64px + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+}
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: #fff;
+  border-bottom: 1px solid #eef1f5;
+}
+.back-btn,
+.orders-btn {
+  border: 0;
+  background: transparent;
+  color: #17233d;
+  flex-shrink: 0;
+}
+.orders-btn {
+  color: #ff6a00;
+  font-size: 14px;
+  font-weight: 600;
+}
+.search-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: #f3f5f9;
+  color: #94a3b8;
+}
+.search-wrap input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  color: #17233d;
+}
+.shop-body {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  min-height: 0;
+}
+.cat-sidebar {
+  background: #f7f8fa;
+  overflow-y: auto;
+  padding: 8px 0 16px;
+}
+.cat-item {
+  display: block;
+  width: 100%;
+  padding: 14px 8px;
+  border: 0;
+  border-left: 3px solid transparent;
+  background: transparent;
+  color: #64748b;
+  font-size: 13px;
+  text-align: center;
+  cursor: pointer;
+}
+.cat-item.active {
+  background: #fff;
+  border-left-color: #ff4d4f;
+  color: #ff4d4f;
+  font-weight: 700;
+}
+.list-panel {
+  background: #fff;
+  overflow-y: auto;
+  padding: 0 0 12px;
+  min-height: 0;
+}
+.state-loading {
+  padding: 40px 0;
+}
+.product-list {
+  display: flex;
+  flex-direction: column;
+}
+.product-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr) 36px;
+  gap: 12px;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  border: 0;
+  border-bottom: 1px solid #f1f5f9;
+  background: #fff;
+  text-align: left;
+}
+.cover {
+  width: 88px;
+  height: 88px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #111;
+}
+.cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.cover-fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(145deg, #fff7ed, #ffe4cc);
+  color: #ff6a00;
+  font-size: 22px;
+  font-weight: 900;
+}
+.info h2 {
+  margin: 0 0 8px;
+  font-size: 15px;
+  color: #17233d;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+.price-row strong {
+  color: #ff4d4f;
+  font-size: 18px;
+  font-weight: 800;
+}
+.price-row small {
+  color: #c0c8d4;
+  text-decoration: line-through;
+  font-size: 12px;
+}
+.buy-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid #ffb4b4;
+  color: #ff4d4f;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+.load-more {
+  margin: 12px;
+  width: calc(100% - 24px);
+}
+</style>

frontend/src/features/mohong/views/MobileMohongOrderDetailView.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
+import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
+import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
+import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
+import {
+  cancelMyMohongOrder,
+  fetchMyMohongOrder,
+  mohongOrderStatusLabel,
+  queryMohongPayment,
+  startMohongPayment,
+  type MohongOrder,
+} from '@/features/mohong/api/mohong'
+import { formatCent } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
+
+const route = useRoute()
+const router = useRouter()
+const order = ref<MohongOrder | null>(null)
+const loading = ref(true)
+const acting = ref(false)
+const payWaySelect = useMobilePayWaySelect()
+const {
+  paymentPopupVisible,
+  activePayment,
+  payURL,
+  paymentQRCodeURL,
+  qrGenerating,
+  checkingPayment,
+  openMobilePaymentCashier,
+  refreshPaymentStatus,
+} = useMobilePaymentCashier({
+  queryPayment: queryMohongPayment,
+  paidMessage: '支付成功',
+})
+
+const statusText = computed(() =>
+  order.value ? mohongOrderStatusLabel(order.value.status) : ''
+)
+
+onMounted(loadOrder)
+
+async function loadOrder() {
+  loading.value = true
+  try {
+    order.value = await fetchMyMohongOrder(String(route.params.id))
+  } catch (error) {
+    showToast({ message: readError(error, '订单不存在'), icon: 'cross' })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handlePay() {
+  if (!order.value || acting.value) return
+  const payWay = await payWaySelect.select()
+  if (!payWay) return
+  acting.value = true
+  try {
+    const payment = await startMohongPayment(order.value.id, payWay)
+    if (payment.paid || payment.status === 'paid') {
+      showToast({ message: '支付成功', icon: 'passed' })
+      await loadOrder()
+      return
+    }
+    await openMobilePaymentCashier(payment, async () => {
+      await loadOrder()
+    })
+  } catch (error) {
+    showToast({ message: readError(error, '支付失败'), icon: 'cross' })
+  } finally {
+    acting.value = false
+  }
+}
+
+async function handleCancel() {
+  if (!order.value || acting.value) return
+  acting.value = true
+  try {
+    order.value = await cancelMyMohongOrder(order.value.id)
+    showToast({ message: '已取消', icon: 'passed' })
+  } catch (error) {
+    showToast({ message: readError(error, '取消失败'), icon: 'cross' })
+  } finally {
+    acting.value = false
+  }
+}
+
+async function copyText() {
+  if (!order.value?.copy_text) {
+    showToast({ message: '暂无可复制信息', icon: 'warning-o' })
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(order.value.copy_text)
+    showToast({ message: '已复制订单信息', icon: 'passed' })
+  } catch {
+    showToast({ message: '复制失败', icon: 'cross' })
+  }
+}
+
+function openChat() {
+  if (!order.value?.conversation_id) {
+    showToast({ message: '群聊尚未创建', icon: 'warning-o' })
+    return
+  }
+  router.push(`/chats/${order.value.conversation_id}`)
+}
+</script>
+
+<template>
+  <main class="order-shell">
+    <header class="page-header">
+      <button type="button" class="back-btn" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <h1>订单详情</h1>
+    </header>
+
+    <van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
+    <template v-else-if="order">
+      <section class="panel status-panel">
+        <strong>{{ statusText }}</strong>
+        <p>订单号 {{ order.order_no }}</p>
+      </section>
+
+      <section class="panel product-panel">
+        <div class="cover">
+          <img v-if="order.product_cover_url" :src="order.product_cover_url" alt="" />
+          <span v-else>图</span>
+        </div>
+        <div>
+          <h2>{{ order.product_title }}</h2>
+          <p>
+            ¥{{ order.unit_price || formatCent(order.unit_price_cent) }} × {{ order.quantity }}
+            {{ order.product_unit }}
+          </p>
+          <strong>合计 ¥{{ order.amount || formatCent(order.amount_cent) }}</strong>
+        </div>
+      </section>
+
+      <section v-if="order.copy_text" class="panel">
+        <div class="copy-head">
+          <h3>订单信息（发给客服）</h3>
+          <button type="button" @click="copyText">一键复制</button>
+        </div>
+        <pre class="copy-text">{{ order.copy_text }}</pre>
+      </section>
+
+      <section v-if="order.qrcode_url_snapshot" class="panel qr-panel">
+        <h3>客服二维码</h3>
+        <img :src="order.qrcode_url_snapshot" alt="客服二维码" />
+      </section>
+
+      <div class="actions">
+        <van-button
+          v-if="order.status === 'pending_payment'"
+          type="primary"
+          color="#ff6a00"
+          block
+          round
+          :loading="acting"
+          @click="handlePay"
+        >
+          去支付
+        </van-button>
+        <van-button
+          v-if="order.status === 'pending_payment'"
+          plain
+          block
+          round
+          :loading="acting"
+          @click="handleCancel"
+        >
+          取消订单
+        </van-button>
+        <van-button
+          v-if="order.conversation_id"
+          type="primary"
+          color="#ff6a00"
+          block
+          round
+          @click="openChat"
+        >
+          进入订单群
+        </van-button>
+        <van-button v-if="order.copy_text" plain block round @click="copyText">
+          复制订单信息
+        </van-button>
+      </div>
+    </template>
+    <van-empty v-else description="订单不存在" />
+
+    <MobilePayWaySelectPopup
+      v-model:show="payWaySelect.visible.value"
+      @choose="payWaySelect.choose"
+      @closed="payWaySelect.handleClosed"
+    />
+    <MobilePaymentCashierPopup
+      v-model:show="paymentPopupVisible"
+      :payment="activePayment"
+      :pay-url="payURL"
+      :qr-code-url="paymentQRCodeURL"
+      :qr-generating="qrGenerating"
+      :checking="checkingPayment"
+      @refresh="refreshPaymentStatus(false)"
+    />
+  </main>
+</template>
+
+<style scoped>
+.order-shell {
+  min-height: 100vh;
+  background: #f5f7fb;
+  padding-bottom: 24px;
+}
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #fff;
+  border-bottom: 1px solid #eef1f5;
+}
+.back-btn {
+  border: 0;
+  background: transparent;
+}
+.page-header h1 {
+  margin: 0;
+  font-size: 17px;
+}
+.state-loading {
+  padding: 48px 0;
+}
+.panel {
+  margin: 10px 12px;
+  padding: 14px;
+  border-radius: 14px;
+  background: #fff;
+}
+.status-panel strong {
+  display: block;
+  font-size: 20px;
+  color: #ff6a00;
+  margin-bottom: 4px;
+}
+.status-panel p {
+  margin: 0;
+  color: #8a94a6;
+  font-size: 13px;
+}
+.product-panel {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 12px;
+}
+.cover {
+  width: 72px;
+  height: 72px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f0f3f8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #a0aec0;
+}
+.cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.product-panel h2 {
+  margin: 0 0 6px;
+  font-size: 15px;
+}
+.product-panel p {
+  margin: 0 0 6px;
+  color: #8a94a6;
+  font-size: 13px;
+}
+.product-panel strong {
+  color: #ff6a00;
+}
+.copy-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.copy-head h3,
+.qr-panel h3 {
+  margin: 0;
+  font-size: 14px;
+}
+.copy-head button {
+  border: 0;
+  background: #fff4ea;
+  color: #ff6a00;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+.copy-text {
+  margin: 0;
+  padding: 12px;
+  border-radius: 10px;
+  background: #f7f9fc;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.qr-panel {
+  text-align: center;
+}
+.qr-panel img {
+  margin-top: 10px;
+  width: 180px;
+  height: 180px;
+  object-fit: contain;
+  border-radius: 12px;
+  background: #f7f9fc;
+}
+.actions {
+  padding: 8px 12px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

frontend/src/features/mohong/views/MobileMohongOrdersView.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import {
+  fetchMyMohongOrders,
+  mohongOrderStatusLabel,
+  type MohongOrder,
+} from '@/features/mohong/api/mohong'
+import { formatCent } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
+
+const router = useRouter()
+const loading = ref(false)
+const orders = ref<MohongOrder[]>([])
+
+onMounted(loadOrders)
+
+async function loadOrders() {
+  loading.value = true
+  try {
+    const result = await fetchMyMohongOrders({ page: 1, page_size: 50 })
+    orders.value = result.items || []
+  } catch (error) {
+    showToast({ message: readError(error, '加载订单失败'), icon: 'cross' })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="orders-shell">
+    <header class="page-header">
+      <button type="button" class="back-btn" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <h1>摸大红订单</h1>
+    </header>
+
+    <van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
+    <van-empty v-else-if="orders.length === 0" description="暂无订单" />
+    <div v-else class="list">
+      <button
+        v-for="item in orders"
+        :key="item.id"
+        type="button"
+        class="card"
+        @click="router.push(`/mohong/orders/${item.id}`)"
+      >
+        <div class="top">
+          <span>{{ item.order_no }}</span>
+          <em>{{ mohongOrderStatusLabel(item.status) }}</em>
+        </div>
+        <div class="body">
+          <div class="cover">
+            <img v-if="item.product_cover_url" :src="item.product_cover_url" alt="" />
+            <span v-else>图</span>
+          </div>
+          <div>
+            <h2>{{ item.product_title }}</h2>
+            <p>x{{ item.quantity }} · ¥{{ item.amount || formatCent(item.amount_cent) }}</p>
+          </div>
+        </div>
+      </button>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.orders-shell {
+  min-height: 100vh;
+  background: #f5f7fb;
+}
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  background: #fff;
+  border-bottom: 1px solid #eef1f5;
+}
+.back-btn {
+  border: 0;
+  background: transparent;
+}
+.page-header h1 {
+  margin: 0;
+  font-size: 17px;
+}
+.state-loading {
+  padding: 48px 0;
+}
+.list {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.card {
+  width: 100%;
+  border: 0;
+  border-radius: 14px;
+  background: #fff;
+  padding: 12px;
+  text-align: left;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 12px;
+  color: #8a94a6;
+}
+.top em {
+  font-style: normal;
+  color: #ff6a00;
+  font-weight: 600;
+}
+.body {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 10px;
+}
+.cover {
+  width: 64px;
+  height: 64px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f0f3f8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #a0aec0;
+}
+.cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.body h2 {
+  margin: 0 0 6px;
+  font-size: 15px;
+  color: #17233d;
+}
+.body p {
+  margin: 0;
+  color: #8a94a6;
+  font-size: 13px;
+}
+</style>

frontend/src/features/mohong/views/MohongDetailView.vue

@@ -0,0 +1,531 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  createMohongOrder,
+  fetchMohongProduct,
+  queryMohongPayment,
+  startMohongPayment,
+  type MohongProduct,
+} from '@/features/mohong/api/mohong'
+import type { PaymentPayWay } from '@/features/orders/api/orders'
+import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
+import { useSessionStore } from '@/stores/session'
+import { formatCent } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
+
+const route = useRoute()
+const router = useRouter()
+const session = useSessionStore()
+const product = ref<MohongProduct | null>(null)
+const loading = ref(true)
+const quantity = ref(1)
+const submitting = ref(false)
+const activeImage = ref('')
+const payWayDialogVisible = ref(false)
+let payWayResolver: ((value: PaymentPayWay | null) => void) | null = null
+
+const cashier = useOrderPaymentCashier({
+  notifySuccess: msg => ElMessage.success(msg),
+  notifyError: msg => ElMessage.error(msg),
+  notifyInfo: msg => ElMessage.info(msg),
+  notifyFallback: msg => ElMessage.warning(msg),
+  paidMessage: '支付成功',
+  pollIntervalMs: 3000,
+  qrWidth: 240,
+  queryPayment: queryMohongPayment,
+})
+
+const images = computed(() => {
+  if (!product.value) return [] as string[]
+  const list = [...(product.value.image_urls || [])]
+  if (product.value.cover_url && !list.includes(product.value.cover_url)) {
+    list.unshift(product.value.cover_url)
+  }
+  return list
+})
+
+const totalPrice = computed(() => {
+  if (!product.value) return '0.0'
+  return formatCent(product.value.price_cent * quantity.value)
+})
+
+const canBuy = computed(() => {
+  if (!product.value) return false
+  if (product.value.stock === 0) return false
+  if (product.value.stock > 0 && quantity.value > product.value.stock) return false
+  return true
+})
+
+const activePayWayLabel = computed(() => {
+  const map: Record<string, string> = { WXZF: '微信', ZFBZF: '支付宝' }
+  return map[cashier.activePayment.value?.pay_way || ''] || '微信/支付宝'
+})
+
+onMounted(loadProduct)
+
+async function loadProduct() {
+  loading.value = true
+  try {
+    product.value = await fetchMohongProduct(String(route.params.id))
+    activeImage.value = images.value[0] || ''
+  } catch (error) {
+    ElMessage.error(readError(error, '商品不存在'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectPayWay(): Promise<PaymentPayWay | null> {
+  payWayDialogVisible.value = true
+  return new Promise(resolve => {
+    payWayResolver = resolve
+  })
+}
+
+function choosePayWay(payWay: PaymentPayWay) {
+  payWayResolver?.(payWay)
+  payWayResolver = null
+  payWayDialogVisible.value = false
+}
+
+function handlePayWayDialogClosed() {
+  payWayResolver?.(null)
+  payWayResolver = null
+}
+
+async function ensureAuthReady() {
+  if (!session.isLoggedIn) {
+    router.push({ path: '/login', query: { redirect: route.fullPath } })
+    return false
+  }
+  try {
+    await session.loadMe()
+  } catch {
+    // ignore
+  }
+  if (session.realnameStatus !== 'verified') {
+    router.push({ path: '/realname', query: { redirect: route.fullPath } })
+    return false
+  }
+  return true
+}
+
+async function handleBuy() {
+  if (!product.value || submitting.value) return
+  if (!(await ensureAuthReady())) return
+  if (!canBuy.value) {
+    ElMessage.warning('库存不足')
+    return
+  }
+  const payWay = await selectPayWay()
+  if (!payWay) return
+
+  submitting.value = true
+  try {
+    const order = await createMohongOrder(product.value.id, quantity.value)
+    const payment = await startMohongPayment(order.id, payWay)
+    if (payment.paid || payment.status === 'paid') {
+      ElMessage.success('支付成功')
+      await router.push(`/mohong/orders/${order.id}`)
+      return
+    }
+    await cashier.openPaymentCashier(payment, async () => {
+      await router.push(`/mohong/orders/${order.id}`)
+    })
+  } catch (error) {
+    ElMessage.error(readError(error, '下单失败'))
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section v-loading="loading" class="mohong-detail-page">
+    <template v-if="product">
+      <div class="detail-layout">
+        <div class="gallery-panel">
+          <div class="main-image">
+            <img v-if="activeImage" :src="activeImage" :alt="product.title" />
+            <div v-else class="empty-image">暂无图片</div>
+          </div>
+          <div v-if="images.length > 1" class="thumbs">
+            <button
+              v-for="(url, idx) in images"
+              :key="idx"
+              type="button"
+              class="thumb"
+              :class="{ active: url === activeImage }"
+              @click="activeImage = url"
+            >
+              <img :src="url" :alt="`${product.title}-${idx + 1}`" />
+            </button>
+          </div>
+        </div>
+
+        <div class="info-panel">
+          <p class="eyebrow">摸大红商品</p>
+          <h1>{{ product.title }}</h1>
+          <p class="desc">{{ product.description || '暂无说明' }}</p>
+
+          <div class="price-box">
+            <div>
+              <small>售价</small>
+              <strong>¥{{ product.price || formatCent(product.price_cent) }}</strong>
+              <em>/ {{ product.unit || '份' }}</em>
+            </div>
+            <span v-if="product.original_price" class="origin">
+              原价 ¥{{ product.original_price }}
+            </span>
+          </div>
+
+          <div class="meta-rows">
+            <div class="meta-row">
+              <span>库存</span>
+              <strong>
+                <template v-if="product.stock < 0">充足</template>
+                <template v-else>{{ product.stock }}</template>
+              </strong>
+            </div>
+            <div class="meta-row">
+              <span>数量</span>
+              <el-input-number
+                v-model="quantity"
+                :min="1"
+                :max="product.stock > 0 ? product.stock : 99"
+              />
+            </div>
+            <div class="meta-row">
+              <span>合计</span>
+              <strong class="total">¥{{ totalPrice }}</strong>
+            </div>
+          </div>
+
+          <div class="actions">
+            <el-button
+              type="primary"
+              size="large"
+              color="#ff6a00"
+              :loading="submitting"
+              :disabled="!canBuy"
+              @click="handleBuy"
+            >
+              {{ canBuy ? '立即购买' : '暂时缺货' }}
+            </el-button>
+            <el-button size="large" @click="router.push('/mohong')">返回列表</el-button>
+          </div>
+
+          <div class="tips">
+            <p>购买须知</p>
+            <ul>
+              <li>下单需登录并完成实名认证</li>
+              <li>支付成功后自动创建订单群，发送固定客服二维码</li>
+              <li>群内与订单详情可一键复制订单信息发给客服</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+    <el-empty v-else-if="!loading" description="商品不存在" />
+
+    <el-dialog
+      v-model="payWayDialogVisible"
+      title="选择支付方式"
+      width="420px"
+      append-to-body
+      @closed="handlePayWayDialogClosed"
+    >
+      <p class="pay-way-tip">选择渠道后将生成对应的支付二维码</p>
+      <div class="pay-way-options">
+        <button type="button" class="pay-way-option wechat" @click="choosePayWay('WXZF')">
+          <strong>微信支付</strong>
+          <small>使用微信扫码完成支付</small>
+        </button>
+        <button type="button" class="pay-way-option alipay" @click="choosePayWay('ZFBZF')">
+          <strong>支付宝支付</strong>
+          <small>使用支付宝扫码完成支付</small>
+        </button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      v-model="cashier.paymentPopupVisible.value"
+      title="订单支付"
+      width="520px"
+      append-to-body
+      @closed="cashier.stopPaymentPolling"
+    >
+      <div v-if="cashier.activePayment.value" class="pay-dialog-body">
+        <div class="pay-amount">
+          支付金额
+          <strong>¥{{ formatCent(cashier.activePayment.value.amount_cent) }}</strong>
+        </div>
+        <div v-if="cashier.payURL.value" class="pay-qr">
+          <img
+            v-if="cashier.paymentQRCodeURL.value"
+            :src="cashier.paymentQRCodeURL.value"
+            alt="支付二维码"
+          />
+          <p>请使用{{ activePayWayLabel }}扫码支付</p>
+        </div>
+        <p v-else class="pay-hint">支付单已创建，请完成付款后刷新状态。</p>
+      </div>
+      <template #footer>
+        <el-button
+          type="primary"
+          :loading="cashier.checkingPayment.value"
+          @click="cashier.refreshPaymentStatus(false)"
+        >
+          我已支付，刷新状态
+        </el-button>
+      </template>
+    </el-dialog>
+  </section>
+</template>
+
+<style scoped>
+.mohong-detail-page {
+  width: 100%;
+  max-width: 1200px;
+}
+
+.detail-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.gallery-panel,
+.info-panel {
+  background: #fff;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  padding: 18px;
+}
+
+.main-image {
+  aspect-ratio: 1;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f3f6fb;
+}
+
+.main-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.empty-image {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  color: #a0aec0;
+}
+
+.thumbs {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.thumb {
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f3f6fb;
+  cursor: pointer;
+}
+
+.thumb.active {
+  border-color: #ff6a00;
+}
+
+.thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.info-panel h1 {
+  margin: 0 0 12px;
+  font-size: 28px;
+  color: #17233d;
+  line-height: 1.25;
+}
+
+.desc {
+  margin: 0 0 18px;
+  color: #6b7a90;
+  font-size: 14px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.price-box {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
+  padding: 16px;
+  border-radius: 12px;
+  background: #fff7ed;
+}
+
+.price-box small {
+  display: block;
+  color: #9a3412;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.price-box strong {
+  color: #ff6a00;
+  font-size: 32px;
+  font-weight: 900;
+}
+
+.price-box em {
+  margin-left: 6px;
+  color: #9a3412;
+  font-style: normal;
+  font-size: 14px;
+}
+
+.origin {
+  color: #b0b8c4;
+  text-decoration: line-through;
+  font-size: 13px;
+}
+
+.meta-rows {
+  display: grid;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.meta-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #6b7a90;
+  font-size: 14px;
+}
+
+.meta-row .total {
+  color: #ff6a00;
+  font-size: 22px;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.tips {
+  padding-top: 16px;
+  border-top: 1px solid #eef1f5;
+  color: #6b7a90;
+  font-size: 13px;
+}
+
+.tips p {
+  margin: 0 0 8px;
+  color: #17233d;
+  font-weight: 700;
+}
+
+.tips ul {
+  margin: 0;
+  padding-left: 18px;
+  line-height: 1.7;
+}
+
+.pay-way-tip {
+  margin: 0 0 14px;
+  color: #6b7a90;
+  font-size: 13px;
+}
+
+.pay-way-options {
+  display: grid;
+  gap: 10px;
+}
+
+.pay-way-option {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid #e7edf6;
+  border-radius: 12px;
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+}
+
+.pay-way-option:hover {
+  border-color: #ff6a00;
+}
+
+.pay-way-option strong {
+  color: #17233d;
+}
+
+.pay-way-option small {
+  color: #8a94a6;
+}
+
+.pay-dialog-body {
+  display: grid;
+  gap: 16px;
+  justify-items: center;
+  text-align: center;
+}
+
+.pay-amount {
+  color: #6b7a90;
+}
+
+.pay-amount strong {
+  display: block;
+  margin-top: 6px;
+  color: #ff6a00;
+  font-size: 28px;
+}
+
+.pay-qr img {
+  width: 220px;
+  height: 220px;
+  border-radius: 12px;
+  background: #f7f9fc;
+}
+
+.pay-hint {
+  color: #6b7a90;
+}
+
+@media (max-width: 960px) {
+  .detail-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

frontend/src/features/mohong/views/MohongListView.vue

@@ -0,0 +1,406 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Search, Tickets } from '@element-plus/icons-vue'
+import MohongProductCard from '@/features/mohong/components/MohongProductCard.vue'
+import {
+  fetchMohongCategories,
+  fetchMohongProducts,
+  type MohongCategory,
+  type MohongProduct,
+} from '@/features/mohong/api/mohong'
+import { readError } from '@/shared/utils/error'
+
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false)
+const loadingMore = ref(false)
+const products = ref<MohongProduct[]>([])
+const categories = ref<MohongCategory[]>([])
+const total = ref(0)
+const page = ref(1)
+const hasMore = ref(true)
+const keyword = ref('')
+const activeCategoryId = ref<number | null>(null)
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+onMounted(async () => {
+  await loadCategories()
+  applyRouteQuery()
+  await loadProducts(true)
+})
+
+watch(
+  () => route.query,
+  () => {
+    applyRouteQuery()
+    loadProducts(true)
+  }
+)
+
+function applyRouteQuery() {
+  const q = route.query
+  keyword.value = typeof q.keyword === 'string' ? q.keyword : ''
+  const cat = Number(q.category_id || 0)
+  activeCategoryId.value = cat > 0 ? cat : null
+}
+
+async function loadCategories() {
+  try {
+    categories.value = await fetchMohongCategories()
+    // 默认选中「大红」或第一个有商品的分类
+    if (!activeCategoryId.value && categories.value.length) {
+      const dahong = categories.value.find(c => c.name === '大红')
+      const first = categories.value.find(c => c.product_count > 0) || categories.value[0]
+      if (dahong || first) {
+        activeCategoryId.value = (dahong || first)!.id
+        syncQuery()
+      }
+    }
+  } catch (error) {
+    ElMessage.error(readError(error, '加载分类失败'))
+  }
+}
+
+async function loadProducts(reset = true) {
+  if (loadingMore.value) return
+  if (reset) {
+    loading.value = true
+    page.value = 1
+    hasMore.value = true
+  } else {
+    if (!hasMore.value) return
+    loadingMore.value = true
+  }
+  try {
+    const result = await fetchMohongProducts({
+      page: page.value,
+      page_size: 24,
+      keyword: keyword.value.trim() || undefined,
+      category_id: activeCategoryId.value || undefined,
+    })
+    const items = result.items || []
+    products.value = reset ? items : [...products.value, ...items]
+    total.value = result.total || 0
+    hasMore.value = products.value.length < total.value
+    page.value += 1
+  } catch (error) {
+    ElMessage.error(readError(error, '加载商品失败'))
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function selectCategory(id: number | null) {
+  activeCategoryId.value = id
+  syncQuery()
+  loadProducts(true)
+}
+
+function onKeywordInput() {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    syncQuery()
+    loadProducts(true)
+  }, 280)
+}
+
+function syncQuery() {
+  const query: Record<string, string> = {}
+  if (keyword.value.trim()) query.keyword = keyword.value.trim()
+  if (activeCategoryId.value) query.category_id = String(activeCategoryId.value)
+  router.replace({ path: '/mohong', query })
+}
+
+const activeCategoryName = () => {
+  if (!activeCategoryId.value) return '全部'
+  return categories.value.find(c => c.id === activeCategoryId.value)?.name || '全部'
+}
+</script>
+
+<template>
+  <section class="mohong-pc-page">
+    <header class="toolbar">
+      <div class="title-block">
+        <h1>摸大红</h1>
+        <span class="count">{{ total }} 件</span>
+        <span class="tip">{{ activeCategoryName() }} · 支付后自动进群</span>
+      </div>
+      <div class="actions">
+        <div class="search-box">
+          <el-icon><Search /></el-icon>
+          <input
+            v-model="keyword"
+            type="search"
+            placeholder="搜索商品名称"
+            @input="onKeywordInput"
+          />
+        </div>
+        <el-button size="small" :icon="Tickets" @click="router.push('/mohong/orders')">
+          我的订单
+        </el-button>
+        <el-button size="small" plain @click="router.push('/')">租号大厅</el-button>
+      </div>
+    </header>
+
+    <div class="shop-layout">
+      <aside class="cat-sidebar">
+        <button
+          type="button"
+          class="cat-item"
+          :class="{ active: !activeCategoryId }"
+          @click="selectCategory(null)"
+        >
+          全部
+        </button>
+        <button
+          v-for="cat in categories"
+          :key="cat.id"
+          type="button"
+          class="cat-item"
+          :class="{ active: activeCategoryId === cat.id }"
+          @click="selectCategory(cat.id)"
+        >
+          <span>{{ cat.name }}</span>
+          <em v-if="cat.product_count">{{ cat.product_count }}</em>
+        </button>
+      </aside>
+
+      <div class="shop-main">
+        <div v-if="!loading && products.length === 0" class="empty-state">
+          <strong>暂无商品</strong>
+          <span>试试切换分类或清空搜索关键词。</span>
+        </div>
+        <div v-else v-loading="loading" class="product-grid">
+          <MohongProductCard v-for="item in products" :key="item.id" :product="item" />
+        </div>
+        <div v-if="!loading && products.length" class="load-state">
+          <el-button v-if="hasMore" :loading="loadingMore" @click="loadProducts(false)">
+            加载更多
+          </el-button>
+          <span v-else class="end">已经到底了</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.mohong-pc-page {
+  display: grid;
+  gap: 14px;
+  width: 100%;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.title-block {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  min-width: 0;
+}
+
+.title-block h1 {
+  margin: 0;
+  color: #17233d;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.count {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: #fff4ea;
+  color: #ff6a00;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tip {
+  color: #8a94a6;
+  font-size: 12px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 220px;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #fff;
+  color: #94a3b8;
+}
+
+.search-box input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: #17233d;
+  font-size: 13px;
+}
+
+.shop-layout {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+  min-height: 480px;
+}
+
+.cat-sidebar {
+  position: sticky;
+  top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 0;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid #eef1f5;
+  overflow: hidden;
+}
+
+.cat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 0;
+  border-left: 3px solid transparent;
+  background: transparent;
+  color: #52616f;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.cat-item:hover {
+  background: #f8fafc;
+  color: #17233d;
+}
+
+.cat-item.active {
+  background: #fff7ed;
+  border-left-color: #ff6a00;
+  color: #ff6a00;
+  font-weight: 700;
+}
+
+.cat-item em {
+  font-style: normal;
+  color: #b0b8c4;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.cat-item.active em {
+  color: #ff9a4d;
+}
+
+.shop-main {
+  min-width: 0;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 14px;
+  width: 100%;
+}
+
+.product-grid :deep(.mohong-card) {
+  justify-self: center;
+}
+
+.empty-state {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  width: 100%;
+  padding: 64px 20px;
+  border-radius: 14px;
+  border: 1px dashed #dbe3ee;
+  background: #fff;
+  color: #8a94a6;
+}
+
+.empty-state strong {
+  color: #17233d;
+}
+
+.load-state {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 12px 0 8px;
+}
+
+.end {
+  color: #b0b8c4;
+  font-size: 12px;
+}
+
+@media (max-width: 900px) {
+  .shop-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .cat-sidebar {
+    position: static;
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 6px;
+    gap: 4px;
+  }
+
+  .cat-item {
+    flex: 0 0 auto;
+    border-left: 0;
+    border-radius: 8px;
+    padding: 8px 12px;
+    white-space: nowrap;
+  }
+
+  .cat-item.active {
+    border-left-color: transparent;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-box {
+    width: 100%;
+  }
+}
+</style>

frontend/src/features/mohong/views/MohongOrderDetailView.vue

@@ -0,0 +1,437 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  cancelMyMohongOrder,
+  fetchMyMohongOrder,
+  mohongOrderStatusLabel,
+  queryMohongPayment,
+  startMohongPayment,
+  type MohongOrder,
+} from '@/features/mohong/api/mohong'
+import type { PaymentPayWay } from '@/features/orders/api/orders'
+import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
+import { formatCent } from '@/shared/utils/money'
+import { formatDateTime } from '@/shared/utils/time'
+import { readError } from '@/shared/utils/error'
+
+const route = useRoute()
+const router = useRouter()
+const order = ref<MohongOrder | null>(null)
+const loading = ref(true)
+const acting = ref(false)
+const payWayDialogVisible = ref(false)
+let payWayResolver: ((value: PaymentPayWay | null) => void) | null = null
+
+const cashier = useOrderPaymentCashier({
+  notifySuccess: msg => ElMessage.success(msg),
+  notifyError: msg => ElMessage.error(msg),
+  notifyInfo: msg => ElMessage.info(msg),
+  notifyFallback: msg => ElMessage.warning(msg),
+  paidMessage: '支付成功',
+  pollIntervalMs: 3000,
+  qrWidth: 240,
+  queryPayment: queryMohongPayment,
+})
+
+const statusText = computed(() =>
+  order.value ? mohongOrderStatusLabel(order.value.status) : ''
+)
+
+const activePayWayLabel = computed(() => {
+  const map: Record<string, string> = { WXZF: '微信', ZFBZF: '支付宝' }
+  return map[cashier.activePayment.value?.pay_way || ''] || '微信/支付宝'
+})
+
+onMounted(loadOrder)
+
+async function loadOrder() {
+  loading.value = true
+  try {
+    order.value = await fetchMyMohongOrder(String(route.params.id))
+  } catch (error) {
+    ElMessage.error(readError(error, '订单不存在'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectPayWay(): Promise<PaymentPayWay | null> {
+  payWayDialogVisible.value = true
+  return new Promise(resolve => {
+    payWayResolver = resolve
+  })
+}
+
+function choosePayWay(payWay: PaymentPayWay) {
+  payWayResolver?.(payWay)
+  payWayResolver = null
+  payWayDialogVisible.value = false
+}
+
+function handlePayWayDialogClosed() {
+  payWayResolver?.(null)
+  payWayResolver = null
+}
+
+async function handlePay() {
+  if (!order.value || acting.value) return
+  const payWay = await selectPayWay()
+  if (!payWay) return
+  acting.value = true
+  try {
+    const payment = await startMohongPayment(order.value.id, payWay)
+    if (payment.paid || payment.status === 'paid') {
+      ElMessage.success('支付成功')
+      await loadOrder()
+      return
+    }
+    await cashier.openPaymentCashier(payment, async () => {
+      await loadOrder()
+    })
+  } catch (error) {
+    ElMessage.error(readError(error, '支付失败'))
+  } finally {
+    acting.value = false
+  }
+}
+
+async function handleCancel() {
+  if (!order.value || acting.value) return
+  acting.value = true
+  try {
+    order.value = await cancelMyMohongOrder(order.value.id)
+    ElMessage.success('已取消')
+  } catch (error) {
+    ElMessage.error(readError(error, '取消失败'))
+  } finally {
+    acting.value = false
+  }
+}
+
+async function copyText() {
+  if (!order.value?.copy_text) {
+    ElMessage.warning('暂无可复制信息')
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(order.value.copy_text)
+    ElMessage.success('已复制订单信息')
+  } catch {
+    ElMessage.error('复制失败')
+  }
+}
+
+function openChat() {
+  if (!order.value?.conversation_id) {
+    ElMessage.warning('群聊尚未创建')
+    return
+  }
+  router.push(`/messages/${order.value.conversation_id}`)
+}
+</script>
+
+<template>
+  <section v-loading="loading" class="order-detail-page">
+    <template v-if="order">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">订单详情</p>
+          <h1>{{ statusText }}</h1>
+          <p class="sub">订单号 {{ order.order_no }} · {{ formatDateTime(order.created_at) }}</p>
+        </div>
+        <el-button @click="router.push('/mohong/orders')">返回列表</el-button>
+      </header>
+
+      <div class="layout">
+        <div class="main-card">
+          <div class="product-row">
+            <div class="cover">
+              <img v-if="order.product_cover_url" :src="order.product_cover_url" alt="" />
+              <span v-else>图</span>
+            </div>
+            <div>
+              <h2>{{ order.product_title }}</h2>
+              <p>
+                ¥{{ order.unit_price || formatCent(order.unit_price_cent) }} × {{ order.quantity }}
+                {{ order.product_unit }}
+              </p>
+              <strong>合计 ¥{{ order.amount || formatCent(order.amount_cent) }}</strong>
+            </div>
+          </div>
+
+          <div v-if="order.copy_text" class="copy-box">
+            <div class="copy-head">
+              <h3>订单信息（发给客服）</h3>
+              <el-button type="primary" plain size="small" @click="copyText">一键复制</el-button>
+            </div>
+            <pre>{{ order.copy_text }}</pre>
+          </div>
+
+          <div v-if="order.qrcode_url_snapshot" class="qr-box">
+            <h3>客服二维码</h3>
+            <img :src="order.qrcode_url_snapshot" alt="客服二维码" />
+          </div>
+        </div>
+
+        <aside class="side-card">
+          <h3>操作</h3>
+          <el-button
+            v-if="order.status === 'pending_payment'"
+            type="primary"
+            color="#ff6a00"
+            :loading="acting"
+            @click="handlePay"
+          >
+            去支付
+          </el-button>
+          <el-button
+            v-if="order.status === 'pending_payment'"
+            :loading="acting"
+            @click="handleCancel"
+          >
+            取消订单
+          </el-button>
+          <el-button v-if="order.conversation_id" type="primary" plain @click="openChat">
+            进入订单群
+          </el-button>
+          <el-button v-if="order.copy_text" plain @click="copyText">复制订单信息</el-button>
+          <el-button plain @click="router.push('/mohong')">继续选购</el-button>
+        </aside>
+      </div>
+    </template>
+    <el-empty v-else-if="!loading" description="订单不存在" />
+
+    <el-dialog
+      v-model="payWayDialogVisible"
+      title="选择支付方式"
+      width="420px"
+      append-to-body
+      @closed="handlePayWayDialogClosed"
+    >
+      <div class="pay-way-options">
+        <button type="button" class="pay-way-option" @click="choosePayWay('WXZF')">
+          <strong>微信支付</strong>
+        </button>
+        <button type="button" class="pay-way-option" @click="choosePayWay('ZFBZF')">
+          <strong>支付宝支付</strong>
+        </button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      v-model="cashier.paymentPopupVisible.value"
+      title="订单支付"
+      width="520px"
+      append-to-body
+      @closed="cashier.stopPaymentPolling"
+    >
+      <div v-if="cashier.activePayment.value" class="pay-dialog-body">
+        <div class="pay-amount">
+          支付金额
+          <strong>¥{{ formatCent(cashier.activePayment.value.amount_cent) }}</strong>
+        </div>
+        <div v-if="cashier.paymentQRCodeURL.value" class="pay-qr">
+          <img :src="cashier.paymentQRCodeURL.value" alt="支付二维码" />
+          <p>请使用{{ activePayWayLabel }}扫码支付</p>
+        </div>
+      </div>
+      <template #footer>
+        <el-button
+          type="primary"
+          :loading="cashier.checkingPayment.value"
+          @click="cashier.refreshPaymentStatus(false)"
+        >
+          我已支付，刷新状态
+        </el-button>
+      </template>
+    </el-dialog>
+  </section>
+</template>
+
+<style scoped>
+.order-detail-page {
+  width: 100%;
+  max-width: 1100px;
+  display: grid;
+  gap: 18px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.eyebrow {
+  margin: 0 0 6px;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.page-header h1 {
+  margin: 0 0 6px;
+  font-size: 28px;
+  color: #17233d;
+}
+
+.sub {
+  margin: 0;
+  color: #8a94a6;
+  font-size: 13px;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 240px;
+  gap: 16px;
+  align-items: start;
+}
+
+.main-card,
+.side-card {
+  background: #fff;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  padding: 18px;
+}
+
+.product-row {
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.cover {
+  width: 88px;
+  height: 88px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #f3f6fb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #a0aec0;
+}
+
+.cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-row h2 {
+  margin: 0 0 8px;
+  font-size: 18px;
+}
+
+.product-row p {
+  margin: 0 0 8px;
+  color: #8a94a6;
+}
+
+.product-row strong {
+  color: #ff6a00;
+  font-size: 18px;
+}
+
+.copy-box,
+.qr-box {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #eef1f5;
+}
+
+.copy-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.copy-box h3,
+.qr-box h3,
+.side-card h3 {
+  margin: 0;
+  font-size: 15px;
+  color: #17233d;
+}
+
+.copy-box pre {
+  margin: 0;
+  padding: 12px;
+  border-radius: 10px;
+  background: #f7f9fc;
+  white-space: pre-wrap;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #334155;
+}
+
+.qr-box {
+  text-align: center;
+}
+
+.qr-box img {
+  margin-top: 12px;
+  width: 180px;
+  height: 180px;
+  object-fit: contain;
+  border-radius: 12px;
+  background: #f7f9fc;
+}
+
+.side-card {
+  display: grid;
+  gap: 10px;
+}
+
+.side-card :deep(.el-button) {
+  width: 100%;
+  margin: 0;
+}
+
+.pay-way-options {
+  display: grid;
+  gap: 10px;
+}
+
+.pay-way-option {
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid #e7edf6;
+  border-radius: 12px;
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+}
+
+.pay-dialog-body {
+  display: grid;
+  gap: 14px;
+  justify-items: center;
+  text-align: center;
+}
+
+.pay-amount strong {
+  display: block;
+  margin-top: 6px;
+  color: #ff6a00;
+  font-size: 28px;
+}
+
+.pay-qr img {
+  width: 220px;
+  height: 220px;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

frontend/src/features/mohong/views/MohongOrdersView.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  fetchMyMohongOrders,
+  mohongOrderStatusLabel,
+  type MohongOrder,
+} from '@/features/mohong/api/mohong'
+import { formatCent } from '@/shared/utils/money'
+import { formatDateTime } from '@/shared/utils/time'
+import { readError } from '@/shared/utils/error'
+
+const router = useRouter()
+const loading = ref(false)
+const orders = ref<MohongOrder[]>([])
+
+onMounted(loadOrders)
+
+async function loadOrders() {
+  loading.value = true
+  try {
+    const result = await fetchMyMohongOrders({ page: 1, page_size: 50 })
+    orders.value = result.items || []
+  } catch (error) {
+    ElMessage.error(readError(error, '加载订单失败'))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="mohong-orders-page">
+    <header class="page-header">
+      <div>
+        <p class="eyebrow">My Orders</p>
+        <h1>摸大红订单</h1>
+      </div>
+      <el-button @click="router.push('/mohong')">返回商品列表</el-button>
+    </header>
+
+    <el-table v-loading="loading" :data="orders" border stripe empty-text="暂无订单">
+      <el-table-column prop="order_no" label="订单号" min-width="180" />
+      <el-table-column prop="product_title" label="商品" min-width="160" />
+      <el-table-column label="数量" width="80" prop="quantity" />
+      <el-table-column label="金额" width="110">
+        <template #default="{ row }">¥{{ row.amount || formatCent(row.amount_cent) }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">{{ mohongOrderStatusLabel(row.status) }}</template>
+      </el-table-column>
+      <el-table-column label="下单时间" min-width="170">
+        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="router.push(`/mohong/orders/${row.id}`)">
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<style scoped>
+.mohong-orders-page {
+  display: grid;
+  gap: 18px;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 28px;
+  color: #17233d;
+}
+</style>

frontend/src/features/orders/composables/useMobilePaymentCashier.ts

@@ -1,5 +1,6 @@
 import { showDialog, showToast } from 'vant'
 
+import type { PaymentOrder } from '@/features/orders/api/orders'
 import {
   paymentPayURL,
   useOrderPaymentCashier,
@@ -14,7 +15,11 @@ export { paymentPayURL as mobilePaymentPayURL }
  * 并处理微信 / 支付宝内嵌浏览器的直接跳转拉起支付。对外 API 名保持不变，
  * Mobile 视图无需改动。
  */
-export function useMobilePaymentCashier() {
+
+export function useMobilePaymentCashier(options?: {
+  queryPayment?: (orderId: number) => Promise<PaymentOrder>
+  paidMessage?: string
+}) {
   function isInAppPaymentBrowser(): boolean {
     if (typeof navigator === 'undefined') return false
     const ua = navigator.userAgent || ''
@@ -32,9 +37,10 @@ export function useMobilePaymentCashier() {
         confirmButtonText: '知道了',
       })
     },
-    paidMessage: '支付成功，正在进入群消息',
+    paidMessage: options?.paidMessage || '支付成功，正在进入群消息',
     pollIntervalMs: 2500,
     qrWidth: 220,
+    queryPayment: options?.queryPayment,
     openExternalURL: url => {
       if (isHTTPURL(url) && isInAppPaymentBrowser()) {
         window.location.href = url

frontend/src/features/orders/composables/useOrderPaymentCashier.ts

@@ -41,6 +41,11 @@ export interface UseOrderPaymentCashierOptions {
    */
   openExternalURL?: (url: string) => boolean
   /** 弹窗显隐控制方式。PC 用 el-dialog（v-model 一个 ref），Mobile 用 van-popup。返回 true 表示用 ref，false 表示 composable 内部 ref。 */
+  /**
+   * 自定义支付状态查询。默认走租号订单 `/orders/:id/query-payment`。
+   * 摸大红等独立业务可注入自己的查询函数。
+   */
+  queryPayment?: (orderId: number) => Promise<PaymentOrder>
 }
 
 /**
@@ -131,7 +136,8 @@ export function useOrderPaymentCashier(options: UseOrderPaymentCashierOptions) {
     checkingPayment.value = true
     const previousPayURL = payURL.value
     try {
-      const payment = await queryOrderPayment(activePayment.value.order_id)
+      const query = options.queryPayment || queryOrderPayment
+      const payment = await query(activePayment.value.order_id)
       activePayment.value = payment
       if (payment.paid) {
         await handlePaid()

frontend/src/layouts/AdminLayout.vue

@@ -15,6 +15,7 @@ import {
   Money,
   Operation,
   Picture,
+  Present,
   ScaleToOriginal,
   Service,
   Shop,
@@ -103,6 +104,30 @@ const allNavGroups: NavGroup[] = [
         icon: DocumentChecked,
         permission: 'listing:approve',
       },
+      {
+        label: '摸大红分类',
+        to: adminPath('mohong/categories'),
+        icon: Present,
+        permission: 'mohong:category',
+      },
+      {
+        label: '摸大红商品',
+        to: adminPath('mohong/products'),
+        icon: Present,
+        permission: 'mohong:product_view',
+      },
+      {
+        label: '摸大红订单',
+        to: adminPath('mohong/orders'),
+        icon: Tickets,
+        permission: 'mohong:order_view',
+      },
+      {
+        label: '摸大红配置',
+        to: adminPath('mohong/config'),
+        icon: Setting,
+        permission: 'mohong:config',
+      },
     ],
   },
   {

frontend/src/router/adminRoutes.ts

@@ -72,6 +72,30 @@ export const adminRoutes: RouteRecordRaw[] = [
     component: () => import('@/features/admin/views/AdminListingReviewView.vue'),
     meta: adminMeta,
   },
+  {
+    path: adminPath('mohong/categories'),
+    name: 'admin-mohong-categories',
+    component: () => import('@/features/admin/views/AdminMohongCategoriesView.vue'),
+    meta: adminMeta,
+  },
+  {
+    path: adminPath('mohong/products'),
+    name: 'admin-mohong-products',
+    component: () => import('@/features/admin/views/AdminMohongProductsView.vue'),
+    meta: adminMeta,
+  },
+  {
+    path: adminPath('mohong/orders'),
+    name: 'admin-mohong-orders',
+    component: () => import('@/features/admin/views/AdminMohongOrdersView.vue'),
+    meta: adminMeta,
+  },
+  {
+    path: adminPath('mohong/config'),
+    name: 'admin-mohong-config',
+    component: () => import('@/features/admin/views/AdminMohongConfigView.vue'),
+    meta: adminMeta,
+  },
   {
     path: adminPath('disputes'),
     name: 'admin-disputes',

frontend/src/router/mobileHost.ts

@@ -23,6 +23,9 @@ export function getMobilePath(path: string): string {
   if (path === '/listings' || path.startsWith('/listings/')) {
     return `/m${path}`
   }
+  if (path === '/mohong' || path.startsWith('/mohong/')) {
+    return `/m${path}`
+  }
   if (path === '/orders' || path.startsWith('/orders/')) {
     return `/m${path}`
   }
@@ -65,6 +68,9 @@ export function getPcPath(path: string): string {
   if (subPath === '/listings' || subPath.startsWith('/listings/')) {
     return subPath
   }
+  if (subPath === '/mohong' || subPath.startsWith('/mohong/')) {
+    return subPath
+  }
   if (subPath === '/orders' || subPath.startsWith('/orders/')) {
     return subPath
   }

frontend/src/router/mobileRoutes.ts

@@ -91,6 +91,30 @@ export const mobileRoutes: RouteRecordRaw[] = [
     component: () => import('@/features/wallet/views/MobileWithdrawalView.vue'),
     meta: { layout: 'blank', requiresAuth: true },
   },
+  {
+    path: '/m/mohong',
+    name: 'mobile-mohong-list',
+    component: () => import('@/features/mohong/views/MobileMohongListView.vue'),
+    meta: { layout: 'blank' },
+  },
+  {
+    path: '/m/mohong/orders',
+    name: 'mobile-mohong-orders',
+    component: () => import('@/features/mohong/views/MobileMohongOrdersView.vue'),
+    meta: { layout: 'blank', requiresAuth: true },
+  },
+  {
+    path: '/m/mohong/orders/:id',
+    name: 'mobile-mohong-order-detail',
+    component: () => import('@/features/mohong/views/MobileMohongOrderDetailView.vue'),
+    meta: { layout: 'blank', requiresAuth: true },
+  },
+  {
+    path: '/m/mohong/:id',
+    name: 'mobile-mohong-detail',
+    component: () => import('@/features/mohong/views/MobileMohongDetailView.vue'),
+    meta: { layout: 'blank' },
+  },
   {
     path: '/m/orders',
     name: 'mobile-orders',

frontend/src/router/publicRoutes.ts

@@ -16,4 +16,27 @@ export const publicRoutes: RouteRecordRaw[] = [
     name: 'listing-detail',
     component: () => import('@/features/listings/views/ListingDetailView.vue'),
   },
+  // 摸大红 PC 端；移动端访问会被守卫重写到 /m/mohong*
+  {
+    path: '/mohong',
+    name: 'mohong-list',
+    component: () => import('@/features/mohong/views/MohongListView.vue'),
+  },
+  {
+    path: '/mohong/orders',
+    name: 'mohong-orders',
+    component: () => import('@/features/mohong/views/MohongOrdersView.vue'),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/mohong/orders/:id',
+    name: 'mohong-order-detail',
+    component: () => import('@/features/mohong/views/MohongOrderDetailView.vue'),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/mohong/:id',
+    name: 'mohong-detail',
+    component: () => import('@/features/mohong/views/MohongDetailView.vue'),
+  },
 ]

frontend/src/styles/admin.css

@@ -348,19 +348,31 @@
 }
 
 /* ========== Button Enhancements ========== */
-.el-button--primary:not(.is-text) {
+/* 仅实体主按钮强制白字；link/text 需保留主题色，否则表格「编辑」等会白字看不见 */
+.el-button--primary:not(.is-text):not(.is-link) {
   font-weight: 700 !important;
   --el-button-text-color: #ffffff;
   --el-button-hover-text-color: #ffffff;
   --el-button-active-text-color: #ffffff;
 }
 
-.el-button--primary:not(.is-text) span {
+.el-button--primary:not(.is-text):not(.is-link) span {
   color: #ffffff !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   font-weight: 700;
 }
 
+.el-button.is-link.el-button--primary {
+  --el-button-text-color: var(--el-color-primary);
+  --el-button-hover-text-color: var(--el-color-primary-light-3);
+  --el-button-active-text-color: var(--el-color-primary-dark-2);
+}
+
+.el-button.is-link.el-button--primary span {
+  color: inherit !important;
+  text-shadow: none;
+}
+
 .eyebrow {
   margin: 0 0 8px;
   color: #4f7cff;