2024-12-23 旅行分帳應用程式-步驟01

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

2024-12-23 旅行分帳應用程式-步驟01

這是一個完整的 UI 規格，我們可以按照以下步驟逐步完成：

📌 步驟 1：建立基本畫面（這一步沒有 Vue 邏輯）

我們先搭建基本的 Vue 模板，讓畫面上有：

  • 「分帳成員」區塊
  • 「新增成員」按鈕
  • 「新增支出款項」按鈕
  • 帳款清單
  • 應付 / 應收金額顯示
  • 「旅程結束」按鈕

🔷 畫面設計

這裡的畫面還沒有功能，下一步我們會用 Vue 讓它變成動態的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <div class="app-container">
    <!-- 標題 -->
    <div class="header">
      <h1>旅行分帳應用程式</h1>
    </div>

    <!-- 分帳成員 -->
    <div class="section">
      <h2>分帳成員</h2>
      <ul>
        <li>
          小明 <span class="owe">應付 $500</span>
        </li>
        <li>
          小美 <span class="receive">應收 $500</span>
        </li>
      </ul>
      <button class="btn">➕ 新增成員</button>
    </div>

    <!-- 新增支出款項 -->
    <div class="section">
      <h2>支出紀錄</h2>
      <button class="btn">➕ 新增支出款項</button>
      <ul>
        <li>🛏️ 住宿費 - 小明支付 $3000 <button class="delete-btn">🗑️</button></li>
        <li>🍽️ 晚餐 - 小美支付 $1500 <button class="delete-btn">🗑️</button></li>
      </ul>
    </div>

    <!-- 旅程結束 -->
    <div class="section">
      <button class="end-trip-btn">🚀 旅程結束</button>
    </div>
  </div>
</template>

<style scoped>
.app-container {
  max-width: 500px;
  margin: auto;
  font-family: Arial, sans-serif;
}

.header {
  font-size: 1.5em;
  font-weight: 600;
  color: #5e3a4a;
  text-align: center;
  padding: 10px;
}

.section {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

h2 {
  color: #4a2c38;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: #f8f8f8;
  margin: 5px 0;
  padding: 8px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.owe {
  color: red;
}

.receive {
  color: green;
}

.btn {
  background-color: #d16a7b;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #b85967;
}

.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.end-trip-btn {
  background-color: #555;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}

.end-trip-btn:hover {
  background-color: #333;
}
</style>

🔍 你的任務

✅ 把這個模板放進 Vue 項目，看看畫面是否正確顯示。
✅ 調整假資料（成員姓名、金額）讓它符合你的需求。

🚀 下一步

👉 在步驟 2，我們會用 Vue data() 讓這些成員和支出變成動態的，讓你可以「新增」和「刪除」項目！

你先試試這一步，確保 UI 沒問題後，我們再繼續。 🎉