摸大红支持购物车多选一起结账

下单支持多商品行快照与一次支付；支付后整单复制文案，前台提供购物车加购与结账。

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

@@ -2,9 +2,14 @@
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { Search, Service, Tickets } from '@element-plus/icons-vue'
+import { Search, Service, ShoppingCart, Tickets } from '@element-plus/icons-vue'
+import MohongCartPanel from '@/features/mohong/components/MohongCartPanel.vue'
 import MohongProductCard from '@/features/mohong/components/MohongProductCard.vue'
+import { useMohongCart } from '@/features/mohong/composables/useMohongCart'
 import { ensureSupportChat } from '@/features/chats/api/chats'
+import type { PaymentPayWay } from '@/features/orders/api/orders'
+import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
+import { queryMohongPayment, startMohongPayment } from '@/features/mohong/api/mohong'
 import {
   fetchMohongCategories,
   fetchMohongProducts,
@@ -17,8 +22,38 @@ import { readError } from '@/shared/utils/error'
 const router = useRouter()
 const route = useRoute()
 const session = useSessionStore()
+const { totalCount: cartCount, openCart } = useMohongCart()
 const supportLoading = ref(false)
 const loading = 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,
+})
+
+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
+}
 const loadingMore = ref(false)
 const products = ref<MohongProduct[]>([])
 const categories = ref<MohongCategory[]>([])
@@ -188,6 +223,10 @@ async function handleSupportClick() {
             @input="onKeywordInput"
           />
         </div>
+        <button type="button" class="toolbar-btn outline" @click="openCart">
+          <el-icon><ShoppingCart /></el-icon>
+          <span>购物车{{ cartCount > 0 ? `(${cartCount})` : '' }}</span>
+        </button>
         <button type="button" class="toolbar-btn outline" @click="router.push('/mohong/orders')">
           <el-icon><Tickets /></el-icon>
           <span>我的订单</span>
@@ -252,6 +291,29 @@ async function handleSupportClick() {
         </div>
       </div>
     </div>
+
+    <MohongCartPanel
+      :select-pay-way="selectPayWay"
+      :start-cashier="(payment, onPaid) => cashier.openPaymentCashier(payment, onPaid)"
+    />
+    <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>
+          <small>使用微信扫码完成支付</small>
+        </button>
+        <button type="button" class="pay-way-option" @click="choosePayWay('ZFBZF')">
+          <strong>支付宝支付</strong>
+          <small>使用支付宝扫码完成支付</small>
+        </button>
+      </div>
+    </el-dialog>
   </section>
 </template>
 
@@ -481,6 +543,32 @@ async function handleSupportClick() {
   font-size: 12px;
 }
 
+.pay-way-options {
+  display: grid;
+  gap: 10px;
+}
+.pay-way-option {
+  display: grid;
+  gap: 4px;
+  padding: 14px 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+}
+.pay-way-option:hover {
+  border-color: #ff6a00;
+}
+.pay-way-option strong {
+  color: #0f172a;
+  font-size: 15px;
+}
+.pay-way-option small {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
 @media (max-width: 900px) {
   .shop-layout {
     grid-template-columns: 1fr;