From f15e40d74c7907770169bd57ef75e3585ed42019 Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Sat, 14 Feb 2026 12:25:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=AF=B9=E5=A4=9A?=
 =?UTF-8?q?=E5=B8=82=E5=9C=BA=E6=98=BE=E7=A4=BA=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/EventMarkets.vue | 108 +++++++++++++++++++++++++++++++++++--
 1 file changed, 105 insertions(+), 3 deletions(-)

diff --git a/src/views/EventMarkets.vue b/src/views/EventMarkets.vue
index 23a7ce7..88a60b5 100644
--- a/src/views/EventMarkets.vue
+++ b/src/views/EventMarkets.vue
@@ -101,8 +101,8 @@
           </v-card>
         </v-col>
 
-        <!-- 右侧：购买组件（点击 Yes/No 时传入当前市场数据） -->
-        <v-col cols="12" class="trade-col">
+        <!-- 右侧：购买组件（桌面端显示；移动端用底部栏+弹窗） -->
+        <v-col v-if="!isMobile" cols="12" class="trade-col">
           <div v-if="markets.length > 0" class="trade-sidebar">
             <TradeComponent
               :market="tradeMarketPayload"
@@ -112,6 +112,45 @@
           </div>
         </v-col>
       </v-row>
+
+      <!-- 移动端：单 market 时显示固定底部 Buy Yes/No 栏；多 market 时仅通过列表点击弹出 -->
+      <template v-if="isMobile && markets.length === 1">
+        <div class="mobile-trade-bar-spacer" aria-hidden="true"></div>
+        <div class="mobile-trade-bar">
+          <v-btn
+            class="mobile-bar-btn mobile-bar-yes"
+            variant="flat"
+            color="success"
+            rounded="pill"
+            block
+            @click="openSheetWithOption('yes')"
+          >
+            Buy Yes {{ barMarket ? yesPrice(barMarket) : '0¢' }}
+          </v-btn>
+          <v-btn
+            class="mobile-bar-btn mobile-bar-no"
+            variant="flat"
+            color="error"
+            rounded="pill"
+            block
+            @click="openSheetWithOption('no')"
+          >
+            Buy No {{ barMarket ? noPrice(barMarket) : '0¢' }}
+          </v-btn>
+        </div>
+      </template>
+      <!-- 移动端交易弹窗：单 market 与多 market 均需（多 market 时通过列表 Buy Yes/No 打开） -->
+      <template v-if="isMobile && markets.length > 0">
+        <v-bottom-sheet v-model="tradeSheetOpen" content-class="event-markets-trade-sheet">
+          <TradeComponent
+            :key="`trade-${selectedMarketIndex}-${tradeInitialOption}`"
+            :market="tradeMarketPayload"
+            :initial-option="tradeInitialOption"
+            embedded-in-sheet
+            @submit="onTradeSubmit"
+          />
+        </v-bottom-sheet>
+      </template>
     </template>
   </v-container>
 </template>
@@ -120,6 +159,7 @@
 defineOptions({ name: 'EventMarkets' })
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useDisplay } from 'vuetify'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import TradeComponent from '../components/TradeComponent.vue'
@@ -136,6 +176,8 @@ import { useUserStore } from '../stores/user'
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
+const { mobile } = useDisplay()
+const isMobile = computed(() => mobile.value)
 
 const eventDetail = ref<PmEventListItem | null>(null)
 const detailLoading = ref(false)
@@ -144,11 +186,15 @@ const detailError = ref<string | null>(null)
 const selectedMarketIndex = ref(0)
 /** 点击 Buy Yes/No 时传给购买组件的初始方向，不点击则为 undefined 使用组件默认 */
 const tradeInitialOption = ref<'yes' | 'no' | undefined>(undefined)
+/** 移动端交易弹窗开关 */
+const tradeSheetOpen = ref(false)
 const markets = computed(() => {
   const list = eventDetail.value?.markets ?? []
   return list.length > 0 ? list : []
 })
 const selectedMarket = computed(() => markets.value[selectedMarketIndex.value] ?? null)
+/** 移动端底部栏显示的市场（选中项或首个），仅在 markets.length > 0 时使用 */
+const barMarket = computed(() => selectedMarket.value ?? markets.value[0])
 /** 传给购买组件的市场数据（当前选中的市场） */
 const tradeMarketPayload = computed(() => {
   const m = selectedMarket.value
@@ -436,10 +482,19 @@ function selectMarket(index: number) {
   selectedMarketIndex.value = index
 }
 
-/** 点击 Buy Yes/No：选中该市场并把数据和方向传给购买组件，不跳转 */
+/** 点击 Buy Yes/No：选中该市场并把数据和方向传给购买组件；移动端直接弹出交易弹窗 */
 function openTrade(market: PmEventMarketItem, index: number, side: 'yes' | 'no') {
   selectedMarketIndex.value = index
   tradeInitialOption.value = side
+  if (isMobile.value) {
+    tradeSheetOpen.value = true
+  }
+}
+
+/** 移动端底部栏：点击 Buy Yes/No 时打开交易弹窗 */
+function openSheetWithOption(side: 'yes' | 'no') {
+  tradeInitialOption.value = side
+  tradeSheetOpen.value = true
 }
 
 function onTradeSubmit(payload: {
@@ -860,4 +915,51 @@ watch(
   text-transform: none;
   font-weight: 500;
 }
+
+/* 移动端底部交易栏 */
+.mobile-trade-bar-spacer {
+  height: 72px;
+}
+
+.mobile-trade-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1px solid #eee;
+}
+
+.mobile-bar-btn {
+  border: none;
+  border-radius: 9999px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+  text-transform: none;
+}
+
+.mobile-bar-yes {
+  flex: 1;
+  min-width: 0;
+  background: #16a34a !important;
+  color: #fff !important;
+  padding: 14px 16px;
+}
+
+.mobile-bar-no {
+  flex: 1;
+  min-width: 0;
+  background: #dc2626 !important;
+  color: #fff !important;
+  padding: 14px 16px;
+}
 </style>