From 1cc23a08365f1e3056b2dda7db1c2a472ae6167d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E9=BA=9F=20=E7=8E=8B?= <Jinlin.Wang@cicc.com.cn>
Date: Thu, 18 Jun 2026 11:11:40 +0800
Subject: [PATCH] feat(mobile): stage 6 - polls + bets

- migrate PollListMobile.vue (list + detail/vote + create + settle)
- migrate BetListMobile.vue (list + detail/place-bet + create + close/settle)
- GroupViewMobile: wire polls/bets tabs (replace placeholders)
- verified: polls API (8 fns) + bets API (8 fns) match uat

build verified: vue-tsc + vite build pass
---
 .../components-mobile/bet/BetListMobile.vue   | 410 ++++++++++++++++
 .../components-mobile/poll/PollListMobile.vue | 463 ++++++++++++++++++
 frontend/src/views-mobile/GroupViewMobile.vue |   7 +-
 3 files changed, 879 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components-mobile/bet/BetListMobile.vue
 create mode 100644 frontend/src/components-mobile/poll/PollListMobile.vue

diff --git a/frontend/src/components-mobile/bet/BetListMobile.vue b/frontend/src/components-mobile/bet/BetListMobile.vue
new file mode 100644
index 0000000..347ea80
--- /dev/null
+++ b/frontend/src/components-mobile/bet/BetListMobile.vue
@@ -0,0 +1,410 @@
+<!-- src/components-mobile/bet/BetListMobile.vue -->
+<!-- 手机端竞猜列表 + 详情 + 下注 + 创建 + 结算 -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { listBets, getBet, getBetOptions, getBetEntries, placeBet, createBet, closeBet, settleBet } from '@/api/bets'
+import { useUserStore } from '@/stores/user'
+import type { Bet, BetOption, BetEntry } from '@/types'
+import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'
+
+const props = defineProps<{ groupId: string }>()
+
+const userStore = useUserStore()
+
+const bets = ref<Bet[]>([])
+const loading = ref(false)
+const viewingBetId = ref<string | null>(null)
+
+const currentBet = ref<Bet | null>(null)
+const options = ref<BetOption[]>([])
+const entries = ref<BetEntry[]>([])
+const detailLoading = ref(false)
+
+async function loadBets() {
+  loading.value = true
+  try {
+    bets.value = await listBets(props.groupId)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadBets()
+})
+
+async function viewBet(betId: string) {
+  viewingBetId.value = betId
+  detailLoading.value = true
+  try {
+    const [bet, opts, ents] = await Promise.all([
+      getBet(betId),
+      getBetOptions(betId),
+      getBetEntries(betId)
+    ])
+    currentBet.value = bet
+    options.value = opts
+    entries.value = ents
+  } catch (e) {
+    showFailToast('加载失败')
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function backToList() {
+  viewingBetId.value = null
+  currentBet.value = null
+  loadBets()
+}
+
+function optionEntryCount(optionId: string): number {
+  return entries.value.filter(e => e.option === optionId).length
+}
+
+function optionTotalStake(optionId: string): number {
+  return entries.value.filter(e => e.option === optionId).reduce((sum, e) => sum + e.stake, 0)
+}
+
+const myEntry = () => entries.value.find(e => e.user === userStore.userId)
+
+// 下注
+const showBet = ref(false)
+const selectedOption = ref<string>('')
+const stakeAmount = ref(0)
+const placeLoading = ref(false)
+
+function openBetSheet(optionId: string) {
+  if (!currentBet.value || currentBet.value.status !== 'open') return
+  if (myEntry()) {
+    showFailToast('你已经下注了')
+    return
+  }
+  selectedOption.value = optionId
+  stakeAmount.value = currentBet.value.minStake
+  showBet.value = true
+}
+
+async function handlePlaceBet() {
+  if (!currentBet.value) return
+  if (stakeAmount.value < currentBet.value.minStake || stakeAmount.value > currentBet.value.maxStake) {
+    showFailToast(`下注范围 ${currentBet.value.minStake}-${currentBet.value.maxStake}`)
+    return
+  }
+  placeLoading.value = true
+  try {
+    await placeBet(currentBet.value.id, selectedOption.value, stakeAmount.value)
+    showSuccessToast('下注成功')
+    showBet.value = false
+    await viewBet(currentBet.value.id)
+  } catch (e: any) {
+    showFailToast(e.message || '下注失败')
+  } finally {
+    placeLoading.value = false
+  }
+}
+
+// 创建竞猜
+const showCreate = ref(false)
+const createForm = ref({
+  title: '',
+  description: '',
+  optionsText: '',
+  minStake: 1,
+  maxStake: 100,
+  deadline: ''
+})
+const createLoading = ref(false)
+
+async function handleCreate() {
+  if (!createForm.value.title.trim()) {
+    showFailToast('请输入标题')
+    return
+  }
+  const opts = createForm.value.optionsText.split('\n').map(s => s.trim()).filter(Boolean)
+  if (opts.length < 2) {
+    showFailToast('至少 2 个选项')
+    return
+  }
+  if (!createForm.value.deadline) {
+    showFailToast('请设置截止时间')
+    return
+  }
+  createLoading.value = true
+  try {
+    await createBet({
+      group: props.groupId,
+      title: createForm.value.title.trim(),
+      description: createForm.value.description.trim() || undefined,
+      options: opts,
+      minStake: createForm.value.minStake,
+      maxStake: createForm.value.maxStake,
+      deadline: createForm.value.deadline
+    })
+    showSuccessToast('创建成功')
+    showCreate.value = false
+    createForm.value = { title: '', description: '', optionsText: '', minStake: 1, maxStake: 100, deadline: '' }
+    await loadBets()
+  } catch (e: any) {
+    showFailToast(e.message || '创建失败')
+  } finally {
+    createLoading.value = false
+  }
+}
+
+// 关闭/结算（创建者）
+async function handleClose() {
+  if (!currentBet.value) return
+  showConfirmDialog({ title: '关闭竞猜', message: '关闭后将停止下注，确定？' })
+    .then(async () => {
+      try {
+        await closeBet(currentBet.value!.id)
+        showSuccessToast('已关闭')
+        await viewBet(currentBet.value!.id)
+      } catch (e: any) {
+        showFailToast(e.message || '操作失败')
+      }
+    }).catch(() => {})
+}
+
+const showSettle = ref(false)
+const settleOption = ref('')
+
+async function handleSettle() {
+  if (!currentBet.value || !settleOption.value) return
+  try {
+    await settleBet(currentBet.value.id, settleOption.value)
+    showSuccessToast('已结算')
+    showSettle.value = false
+    await viewBet(currentBet.value.id)
+  } catch (e: any) {
+    showFailToast(e.message || '结算失败')
+  }
+}
+
+const isCreator = () => currentBet.value?.creator === userStore.userId
+
+function timeAgo(dateStr: string): string {
+  const min = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000)
+  if (min < 60) return `${min}分钟前`
+  const hour = Math.floor(min / 60)
+  if (hour < 24) return `${hour}小时前`
+  return new Date(dateStr).toLocaleDateString('zh-CN')
+}
+</script>
+
+<template>
+  <div class="bet-mobile">
+    <!-- 详情 -->
+    <div v-if="viewingBetId && currentBet">
+      <van-nav-bar :title="currentBet.title" left-arrow @click-left="backToList" />
+
+      <div v-if="detailLoading" class="loading-box">
+        <van-loading size="24px">加载中...</van-loading>
+      </div>
+
+      <div v-else class="detail-content">
+        <div class="detail-header">
+          <van-tag :type="currentBet.status === 'open' ? 'success' : currentBet.status === 'closed' ? 'warning' : 'default'">
+            {{ currentBet.status === 'open' ? '下注中' : currentBet.status === 'closed' ? '待结算' : '已结算' }}
+          </van-tag>
+          <span class="detail-meta">范围 {{ currentBet.minStake }}-{{ currentBet.maxStake }} 积分</span>
+        </div>
+
+        <p v-if="currentBet.description" class="detail-desc">{{ currentBet.description }}</p>
+
+        <div class="options-list">
+          <div
+            v-for="opt in options"
+            :key="opt.id"
+            class="option-item"
+            @click="currentBet.status === 'open' && openBetSheet(opt.id)"
+          >
+            <div class="option-row">
+              <span class="option-text">{{ opt.content }}</span>
+              <span v-if="currentBet.resultOption === opt.id" class="winner-badge">🏆 胜出</span>
+            </div>
+            <div class="option-stats">
+              <span>{{ optionEntryCount(opt.id) }} 注</span>
+              <span>{{ optionTotalStake(opt.id) }} 积分</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 我的结果 -->
+        <div v-if="currentBet.status === 'settled' && myEntry()" class="my-result">
+          <van-notice-bar
+            :type="myEntry()?.won ? 'success' : 'warning'"
+            wrapable
+          >
+            {{ myEntry()?.won ? `🎉 你赢了！` : '本次未中奖' }}
+          </van-notice-bar>
+        </div>
+
+        <!-- 创建者操作 -->
+        <div v-if="isCreator()" class="detail-actions">
+          <van-button v-if="currentBet.status === 'open'" type="warning" block round plain @click="handleClose">
+            关闭下注
+          </van-button>
+          <van-button v-if="currentBet.status === 'closed'" type="primary" block round @click="showSettle = true">
+            结算
+          </van-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 列表 -->
+    <template v-else>
+      <div class="list-header">
+        <van-button type="primary" size="small" round icon="plus" @click="showCreate = true">
+          发起竞猜
+        </van-button>
+      </div>
+
+      <van-pull-refresh v-model="loading" @refresh="loadBets">
+        <div v-if="bets.length === 0 && !loading" class="empty">
+          <van-empty description="暂无竞猜" image-size="100" />
+        </div>
+
+        <div class="bet-list">
+          <div
+            v-for="bet in bets"
+            :key="bet.id"
+            class="bet-card"
+            @click="viewBet(bet.id)"
+          >
+            <div class="bet-card-header">
+              <van-tag :type="bet.status === 'open' ? 'success' : bet.status === 'closed' ? 'warning' : 'default'" size="medium">
+                {{ bet.status === 'open' ? '下注中' : bet.status === 'closed' ? '待结算' : '已结算' }}
+              </van-tag>
+              <span class="bet-stake">{{ bet.minStake }}-{{ bet.maxStake }} 积分</span>
+            </div>
+            <div class="bet-title">{{ bet.title }}</div>
+            <div class="bet-card-footer">
+              <span class="bet-time">{{ timeAgo(bet.created) }}</span>
+              <van-icon name="arrow" />
+            </div>
+          </div>
+        </div>
+      </van-pull-refresh>
+    </template>
+
+    <!-- 下注弹层 -->
+    <van-action-sheet v-model:show="showBet" title="下注">
+      <div class="bet-sheet-content">
+        <div class="stake-display">
+          <span class="stake-num">{{ stakeAmount }}</span>
+          <span class="stake-unit">积分</span>
+        </div>
+        <van-stepper
+          v-model="stakeAmount"
+          :min="currentBet?.minStake"
+          :max="currentBet?.maxStake"
+          integer
+        />
+        <div class="bet-sheet-actions">
+          <van-button type="primary" block round :loading="placeLoading" @click="handlePlaceBet">
+            确认下注
+          </van-button>
+        </div>
+      </div>
+    </van-action-sheet>
+
+    <!-- 创建弹层 -->
+    <van-popup v-model:show="showCreate" position="bottom" round closeable :style="{ height: '85%' }">
+      <div class="popup-content">
+        <div class="popup-title">发起竞猜</div>
+        <van-cell-group inset>
+          <van-field v-model="createForm.title" label="标题" placeholder="竞猜主题" required />
+          <van-field v-model="createForm.description" label="说明" placeholder="可选" />
+          <van-field
+            v-model="createForm.optionsText"
+            type="textarea"
+            label="选项"
+            placeholder="每行一个选项"
+            rows="3"
+          />
+          <van-field name="stepper" label="最低下注">
+            <template #input><van-stepper v-model="createForm.minStake" min="1" /></template>
+          </van-field>
+          <van-field name="stepper" label="最高下注">
+            <template #input><van-stepper v-model="createForm.maxStake" min="1" /></template>
+          </van-field>
+          <van-field v-model="createForm.deadline" label="截止时间" placeholder="如 2026-12-31 23:59" required />
+        </van-cell-group>
+        <div class="popup-actions">
+          <van-button type="primary" block round :loading="createLoading" @click="handleCreate">
+            创建
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
+
+    <!-- 结算弹层 -->
+    <van-action-sheet v-model:show="showSettle" title="选择胜出选项">
+      <div class="settle-content">
+        <div
+          v-for="opt in options"
+          :key="opt.id"
+          class="settle-option"
+          :class="{ 'settle-selected': settleOption === opt.id }"
+          @click="settleOption = opt.id"
+        >
+          {{ opt.content }}
+        </div>
+        <div class="settle-actions">
+          <van-button type="primary" block round @click="handleSettle">确认结算</van-button>
+        </div>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<style scoped>
+.bet-mobile { padding: 12px; }
+.loading-box { display: flex; justify-content: center; padding: 40px; }
+.empty { padding: 30px 0; }
+.list-header { display: flex; justify-content: flex-end; margin-bottom: 10px; }
+
+.bet-list { display: flex; flex-direction: column; gap: 10px; }
+.bet-card { background: var(--gg-bg-card); border-radius: var(--gg-radius-md); padding: 14px; box-shadow: var(--gg-shadow); }
+.bet-card:active { opacity: 0.85; }
+.bet-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.bet-stake { font-size: 12px; color: var(--gg-text-muted); }
+.bet-title { font-size: 16px; font-weight: 600; color: var(--gg-text); }
+.bet-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--gg-text-muted); font-size: 13px; }
+
+.detail-content { padding: 12px; }
+.detail-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.detail-meta { font-size: 12px; color: var(--gg-text-muted); }
+.detail-desc { font-size: 14px; color: var(--gg-text-secondary); margin: 0 0 16px; line-height: 1.5; }
+
+.options-list { display: flex; flex-direction: column; gap: 10px; }
+.option-item { background: var(--gg-bg-card); border-radius: var(--gg-radius-sm); padding: 12px 14px; border: 1px solid var(--gg-border); }
+.option-row { display: flex; align-items: center; justify-content: space-between; }
+.option-text { font-size: 14px; font-weight: 500; color: var(--gg-text); }
+.winner-badge { font-size: 13px; color: var(--gg-warning); font-weight: 600; }
+.option-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--gg-text-muted); }
+
+.my-result { margin-top: 16px; }
+.detail-actions { margin-top: 20px; }
+
+/* 下注弹层 */
+.bet-sheet-content { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
+.stake-display { display: flex; align-items: baseline; gap: 4px; }
+.stake-num { font-size: 40px; font-weight: 700; color: var(--gg-primary); }
+.stake-unit { font-size: 14px; color: var(--gg-text-muted); }
+.bet-sheet-actions { width: 100%; }
+
+/* 弹层通用 */
+.popup-content { padding: 16px 0 24px; display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
+.popup-title { text-align: center; font-size: 16px; font-weight: 600; padding: 8px 0 16px; }
+.popup-actions { padding: 20px 16px 0; }
+
+.settle-content { padding: 16px; }
+.settle-option { padding: 14px; background: var(--gg-bg); border-radius: var(--gg-radius-sm); margin-bottom: 8px; text-align: center; border: 1px solid var(--gg-border); font-size: 14px; }
+.settle-selected { background: rgba(5, 150, 105, 0.1); border-color: var(--gg-primary); color: var(--gg-primary); font-weight: 600; }
+.settle-actions { margin-top: 16px; }
+</style>
diff --git a/frontend/src/components-mobile/poll/PollListMobile.vue b/frontend/src/components-mobile/poll/PollListMobile.vue
new file mode 100644
index 0000000..377bab9
--- /dev/null
+++ b/frontend/src/components-mobile/poll/PollListMobile.vue
@@ -0,0 +1,463 @@
+<!-- src/components-mobile/poll/PollListMobile.vue -->
+<!-- 手机端投票列表 + 详情 + 创建 -->
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { listPolls, getPoll, getPollOptions, getPollVotes, getUserVote, votePoll, createPoll, settlePoll } from '@/api/polls'
+import type { Poll, PollOption, PollVote } from '@/types'
+import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'
+
+const props = defineProps<{ groupId: string }>()
+
+const polls = ref<Poll[]>([])
+const loading = ref(false)
+const viewingPollId = ref<string | null>(null)
+
+// 详情数据
+const currentPoll = ref<Poll | null>(null)
+const options = ref<PollOption[]>([])
+const votes = ref<PollVote[]>([])
+const userVote = ref<PollVote | null>(null)
+const detailLoading = ref(false)
+
+let unsub: (() => void) | null = null
+
+async function loadPolls() {
+  loading.value = true
+  try {
+    polls.value = await listPolls(props.groupId)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadPolls()
+})
+
+onUnmounted(() => {
+  if (unsub) { (unsub as () => void)() }
+})
+
+async function viewPoll(pollId: string) {
+  viewingPollId.value = pollId
+  detailLoading.value = true
+  try {
+    const [poll, opts, allVotes, myVote] = await Promise.all([
+      getPoll(pollId),
+      getPollOptions(pollId),
+      getPollVotes(pollId),
+      getUserVote(pollId)
+    ])
+    currentPoll.value = poll
+    options.value = opts
+    votes.value = allVotes
+    userVote.value = myVote
+  } catch (e) {
+    showFailToast('加载失败')
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function backToList() {
+  viewingPollId.value = null
+  currentPoll.value = null
+  loadPolls()
+}
+
+// 每个选项的票数
+function optionVoteCount(optionId: string): number {
+  return votes.value.filter(v => v.option === optionId).length
+}
+
+function totalVotes(): number {
+  return votes.value.length || 1
+}
+
+async function doVote(optionId: string) {
+  if (!currentPoll.value || currentPoll.value.status === 'settled') return
+  if (userVote.value) {
+    showFailToast('你已经投过票了')
+    return
+  }
+  try {
+    await votePoll(currentPoll.value.id, optionId)
+    showSuccessToast('投票成功')
+    await viewPoll(currentPoll.value.id)
+  } catch (e: any) {
+    showFailToast(e.message || '投票失败')
+  }
+}
+
+async function doSettle() {
+  if (!currentPoll.value) return
+  showConfirmDialog({
+    title: '结算投票',
+    message: '结算后将结束投票，确定吗？'
+  }).then(async () => {
+    try {
+      await settlePoll(currentPoll.value!.id)
+      showSuccessToast('已结算')
+      await viewPoll(currentPoll.value!.id)
+    } catch (e: any) {
+      showFailToast(e.message || '结算失败')
+    }
+  }).catch(() => {})
+}
+
+// 创建投票
+const showCreate = ref(false)
+const createForm = ref({
+  title: '',
+  type: 'option' as 'option' | 'rollcall',
+  anonymous: false,
+  deadline: '',
+  optionsText: ''
+})
+const createLoading = ref(false)
+
+async function handleCreate() {
+  if (!createForm.value.title.trim()) {
+    showFailToast('请输入标题')
+    return
+  }
+  const opts = createForm.value.optionsText.split('\n').map(s => s.trim()).filter(Boolean)
+  if (opts.length < 2) {
+    showFailToast('至少输入 2 个选项（每行一个）')
+    return
+  }
+  createLoading.value = true
+  try {
+    await createPoll({
+      group: props.groupId,
+      title: createForm.value.title.trim(),
+      type: createForm.value.type,
+      anonymous: createForm.value.anonymous,
+      deadline: createForm.value.deadline || undefined,
+      options: opts
+    })
+    showSuccessToast('创建成功')
+    showCreate.value = false
+    createForm.value = { title: '', type: 'option', anonymous: false, deadline: '', optionsText: '' }
+    await loadPolls()
+  } catch (e: any) {
+    showFailToast(e.message || '创建失败')
+  } finally {
+    createLoading.value = false
+  }
+}
+
+function timeAgo(dateStr: string): string {
+  const min = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000)
+  if (min < 60) return `${min}分钟前`
+  const hour = Math.floor(min / 60)
+  if (hour < 24) return `${hour}小时前`
+  return new Date(dateStr).toLocaleDateString('zh-CN')
+}
+</script>
+
+<template>
+  <div class="poll-mobile">
+    <!-- 详情视图 -->
+    <div v-if="viewingPollId && currentPoll" class="poll-detail">
+      <van-nav-bar
+        :title="currentPoll.title"
+        left-arrow
+        @click-left="backToList"
+      />
+
+      <div v-if="detailLoading" class="loading-box">
+        <van-loading size="24px">加载中...</van-loading>
+      </div>
+
+      <div v-else class="detail-content">
+        <div class="detail-header">
+          <van-tag :type="currentPoll.status === 'settled' ? 'default' : 'success'">
+            {{ currentPoll.status === 'settled' ? '已结算' : '进行中' }}
+          </van-tag>
+          <span class="detail-meta">{{ votes.length }} 人参与 · {{ timeAgo(currentPoll.created) }}</span>
+        </div>
+
+        <div class="options-list">
+          <div
+            v-for="opt in options"
+            :key="opt.id"
+            class="option-item"
+            :class="{
+              'option-voted': userVote?.option === opt.id,
+              'option-disabled': currentPoll.status === 'settled' || !!userVote
+            }"
+            @click="doVote(opt.id)"
+          >
+            <div class="option-bar">
+              <div
+                class="option-bar-fill"
+                :style="{ width: `${(optionVoteCount(opt.id) / totalVotes()) * 100}%` }"
+              />
+            </div>
+            <div class="option-content">
+              <span class="option-text">{{ opt.content }}</span>
+              <span class="option-count">{{ optionVoteCount(opt.id) }} 票</span>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="currentPoll.status === 'active'" class="detail-actions">
+          <van-button
+            type="warning"
+            block
+            round
+            plain
+            @click="doSettle"
+          >
+            结算投票
+          </van-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 列表视图 -->
+    <template v-else>
+      <div class="list-header">
+        <van-button type="primary" size="small" round icon="plus" @click="showCreate = true">
+          发起投票
+        </van-button>
+      </div>
+
+      <van-pull-refresh v-model="loading" @refresh="loadPolls">
+        <div v-if="polls.length === 0 && !loading" class="empty">
+          <van-empty description="暂无投票" image-size="100" />
+        </div>
+
+        <div class="poll-list">
+          <div
+            v-for="poll in polls"
+            :key="poll.id"
+            class="poll-card"
+            @click="viewPoll(poll.id)"
+          >
+            <div class="poll-card-header">
+              <van-tag :type="poll.status === 'settled' ? 'default' : 'success'" size="medium">
+                {{ poll.status === 'settled' ? '已结算' : '进行中' }}
+              </van-tag>
+              <span class="poll-time">{{ timeAgo(poll.created) }}</span>
+            </div>
+            <div class="poll-title">{{ poll.title }}</div>
+            <div class="poll-card-footer">
+              <span class="poll-type">{{ poll.type === 'rollcall' ? '点名' : '选项投票' }}</span>
+              <van-icon name="arrow" />
+            </div>
+          </div>
+        </div>
+      </van-pull-refresh>
+    </template>
+
+    <!-- 创建弹层 -->
+    <van-popup
+      v-model:show="showCreate"
+      position="bottom"
+      round
+      closeable
+      :style="{ height: '80%' }"
+    >
+      <div class="popup-content">
+        <div class="popup-title">发起投票</div>
+        <van-cell-group inset>
+          <van-field v-model="createForm.title" label="标题" placeholder="投票主题" required />
+          <van-field name="radio" label="类型">
+            <template #input>
+              <van-radio-group v-model="createForm.type" direction="horizontal">
+                <van-radio name="option">选项投票</van-radio>
+                <van-radio name="rollcall">点名</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field
+            v-model="createForm.optionsText"
+            type="textarea"
+            label="选项"
+            placeholder="每行输入一个选项"
+            rows="4"
+          />
+          <van-field
+            v-model="createForm.deadline"
+            label="截止时间"
+            placeholder="留空则不截止"
+          />
+          <van-cell title="匿名投票" center>
+            <template #right-icon>
+              <van-switch v-model="createForm.anonymous" size="22px" />
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <div class="popup-actions">
+          <van-button type="primary" block round :loading="createLoading" @click="handleCreate">
+            创建
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<style scoped>
+.poll-mobile {
+  padding: 12px;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  padding: 40px;
+}
+
+.empty {
+  padding: 30px 0;
+}
+
+.list-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.poll-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.poll-card {
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-md);
+  padding: 14px;
+  box-shadow: var(--gg-shadow);
+}
+
+.poll-card:active {
+  opacity: 0.85;
+}
+
+.poll-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.poll-time {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+}
+
+.poll-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--gg-text);
+}
+
+.poll-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  color: var(--gg-text-muted);
+  font-size: 13px;
+}
+
+/* 详情 */
+.detail-content {
+  padding: 12px;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.detail-meta {
+  font-size: 12px;
+  color: var(--gg-text-muted);
+}
+
+.options-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.option-item {
+  position: relative;
+  background: var(--gg-bg-card);
+  border-radius: var(--gg-radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--gg-border);
+}
+
+.option-voted {
+  border-color: var(--gg-primary);
+}
+
+.option-bar {
+  position: absolute;
+  inset: 0;
+}
+
+.option-bar-fill {
+  height: 100%;
+  background: rgba(5, 150, 105, 0.08);
+  transition: width 0.3s;
+}
+
+.option-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+}
+
+.option-text {
+  font-size: 14px;
+  color: var(--gg-text);
+  font-weight: 500;
+}
+
+.option-count {
+  font-size: 13px;
+  color: var(--gg-primary);
+  font-weight: 600;
+}
+
+.option-disabled {
+  opacity: 0.9;
+}
+
+.detail-actions {
+  margin-top: 20px;
+}
+
+/* 弹层 */
+.popup-content {
+  padding: 16px 0 24px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.popup-title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 8px 0 16px;
+}
+
+.popup-actions {
+  padding: 20px 16px 0;
+}
+</style>
diff --git a/frontend/src/views-mobile/GroupViewMobile.vue b/frontend/src/views-mobile/GroupViewMobile.vue
index 6a4b147..6ecbe66 100644
--- a/frontend/src/views-mobile/GroupViewMobile.vue
+++ b/frontend/src/views-mobile/GroupViewMobile.vue
@@ -8,6 +8,8 @@ import { useGroupStore } from '@/stores/group'
 import { pb } from '@/api/pocketbase'
 import ActivityFeedMobile from '@/components-mobile/group/ActivityFeedMobile.vue'
 import MemberListMobile from '@/components-mobile/group/MemberListMobile.vue'
+import PollListMobile from '@/components-mobile/poll/PollListMobile.vue'
+import BetListMobile from '@/components-mobile/bet/BetListMobile.vue'
 import Placeholder from '@/views-mobile/Placeholder.vue'
 import { Wallet, Box, Warning } from '@element-plus/icons-vue'
 
@@ -123,7 +125,10 @@ function goBlacklist() {
           <!-- 阶段 4 已迁移 -->
           <ActivityFeedMobile v-if="activeTab === 'activity'" :group-id="groupId" />
           <MemberListMobile v-else-if="activeTab === 'members'" :group-id="groupId" />
-          <!-- 以下 tab 子组件在阶段 6/9 迁移后接入，现暂用占位 -->
+          <!-- 阶段 6 已迁移 -->
+          <PollListMobile v-else-if="activeTab === 'polls'" :group-id="groupId" />
+          <BetListMobile v-else-if="activeTab === 'bets'" :group-id="groupId" />
+          <!-- 以下 tab 子组件在阶段 9 迁移后接入，现暂用占位 -->
           <Placeholder v-else />
         </div>
       </van-tab>