2025-01-01 旅行分帳應用程式-步驟03

發表於 閱讀次數：
2025-01-01 旅行分帳應用程式-步驟03

2025-01-01 旅行分帳應用程式-步驟03

太棒了～這樣設計互動更直覺、也更人性化！
你點選某位成員時，就針對那位成員新增「他／她付款的支出」對吧？
那我們來一步一步做這個功能：

✅ 目標

  • 點某個成員 li 時 → 該成員下面出現「➕ 新增支出款項」按鈕
  • 點按鈕後可以輸入：支出說明 + 金額
  • 點「記錄支出」按鈕 → 將這筆支出記錄下來（下一步再處理）

✨ 第一步：點成員時，出現「新增支出款項」按鈕

🔧 修改 <template> 中的成員列表區塊如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul>
  <li 
    v-for="(member, index) in members" 
    :key="index"
    @click="selectMember(index)"
    :class="{ selected: selectedMemberIndex === index }"
  >
    {{ member.name }}
    <span class="owe">應付 $0</span>

    <!-- 如果這位成員是被選中的，就顯示新增支出按鈕 -->
    <div v-if="selectedMemberIndex === index" class="add-expense-section">
      <button class="btn small-btn" @click.stop="showAddExpense = true">
        ➕ 新增支出款項
      </button>
    </div>
  </li>
</ul>

🧠 在 <script setup> 中加這些變數與方法

1
2
3
4
5
6
7
8
9
10
11
12
13
const selectedMemberIndex = ref(null)  // 儲存目前選中的成員 index
const showAddExpense = ref(false)

function selectMember(index) {
  // 點第二次同一位就取消選取
  if (selectedMemberIndex.value === index) {
    selectedMemberIndex.value = null
    showAddExpense.value = false
  } else {
    selectedMemberIndex.value = index
    showAddExpense.value = false
  }
}

🎨 建議加一點 CSS 讓選到的成員有背景色

1
2
3
4
5
6
7
8
9
.selected {
  background-color: #ffe6e6;
}

.small-btn {
  margin-top: 8px;
  font-size: 14px;
  padding: 6px 10px;
}

🎯 測試你會看到的效果：

  • 點成員 → 該列下面出現「➕ 新增支出款項」按鈕
  • 再點一次該成員 → 關閉按鈕（取消選取）
  • 點其他成員 → 切換顯示位置

要不要我接下來幫你做「新增支出款項」的輸入表單呢？ 😎