480 lines
24 KiB
HTML
480 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>法會報名</title>
|
|
<!-- Bootstrap 5.3.3 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
#sidebarMenu {
|
|
transition: margin 0.3s;
|
|
}
|
|
@media (min-width: 992px) {
|
|
#sidebarMenu.collapsing {
|
|
margin-left: -25%;
|
|
}
|
|
#sidebarMenu.show {
|
|
margin-left: 0;
|
|
}
|
|
.main-content {
|
|
transition: margin-left 0.3s;
|
|
}
|
|
#sidebarMenu + .main-content {
|
|
margin-left: 25%;
|
|
}
|
|
#sidebarMenu.show + .main-content {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 頂部導航欄 -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">法會報名：清明法會</a>
|
|
<button class="navbar-toggler" type="button" @click="toggleSidebar" aria-label="切換導航">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主內容區 -->
|
|
<div class="container-fluid mt-3">
|
|
<div class="row">
|
|
<!-- 側邊欄 -->
|
|
<div class="col-3">
|
|
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light rounded" style="height: 100vh;">
|
|
<ul class="nav nav-pills flex-column mb-auto">
|
|
<li class="nav-item" v-for="(item, index) in sidebarItems" :key="index">
|
|
<a href="#" class="nav-link" :class="{ active: activeItem === index }" @click.prevent="setActiveItem(index)">{{ item.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- 主要內容 -->
|
|
<div class="col-9">
|
|
<div class="p-3 bg-white">
|
|
<!-- Header Part -->
|
|
<div class="header-part p-3 px-5 bg-light rounded">
|
|
<h2>{{ currentPage().title }}</h2>
|
|
<div>{{ currentPage().description }}</div>
|
|
</div>
|
|
<!-- Main Area with Step-specific Content -->
|
|
<div class="main-area my-4">
|
|
<!-- Step 1 -->
|
|
<div v-if="activeItem === 0">
|
|
<div class="container">
|
|
<div class="row border-bottom mb-4">
|
|
<form>
|
|
<!-- 第一列：姓名和電話 -->
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<label for="nameInput" class="form-label">姓名</label>
|
|
<input type="text" class="form-control" id="nameInput" placeholder="請輸入您的姓名">
|
|
</div>
|
|
<div class="col">
|
|
<label for="phoneInput" class="form-label">電話</label>
|
|
<input type="text" class="form-control" id="phoneInput" placeholder="請輸入您的電話號碼">
|
|
<div class="d-flex mt-2">
|
|
<div class="form-check ms-2">
|
|
<input class="form-check-input" type="radio" name="phoneType" id="landline" value="landline">
|
|
<label class="form-check-label" for="landline">
|
|
市話
|
|
</label>
|
|
</div>
|
|
<div class="form-check ms-2">
|
|
<input class="form-check-input" type="radio" name="phoneType" id="mobile" value="mobile" checked>
|
|
<label class="form-check-label" for="mobile">
|
|
手機
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第二列：電話類型選擇及查詢按鈕 -->
|
|
<div class="row mb-3">
|
|
<div class="col-auto">
|
|
<button type="button" class="btn btn-primary">查詢</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="row border-bottom mb-4">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">姓名</th>
|
|
<th scope="col">地址/電話</th>
|
|
<th scope="col"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">王大明</th>
|
|
<td>
|
|
<div>台中市中區台中路100號</div>
|
|
<div>04-98765432</div>
|
|
</td>
|
|
<td class="text-end">
|
|
<button type="button" class="btn btn-primary" @click="navigate(2)">報名</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">王中明</th>
|
|
<td>
|
|
<div>台中市中區台中路100號</div>
|
|
<div>04-98765432</div>
|
|
</td>
|
|
<td class="text-end">
|
|
<button type="button" class="btn btn-primary" @click="navigate(2)">報名</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">王小明</th>
|
|
<td>
|
|
<div>台中市中區台中路100號</div>
|
|
<div>04-98765432</div>
|
|
</td>
|
|
<td class="text-end">
|
|
<button type="button" class="btn btn-primary" @click="navigate(2)">報名</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row border-bottom mb-4">
|
|
<p>沒有找到資料, 請先新增信眾資料</p>
|
|
<div class="mb-4">
|
|
<button type="button" class="btn btn-primary" @click="navigate(1)">新增信眾</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Step 2 -->
|
|
<div v-if="activeItem === 1">
|
|
<div class="container">
|
|
<form>
|
|
<!-- 姓名 -->
|
|
<div class="mb-3 row">
|
|
<label for="inputName" class="form-label col-sm-3">姓名</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputName">
|
|
</div>
|
|
</div>
|
|
<!-- 電話 -->
|
|
<div class="mb-3 row">
|
|
<label for="inputPhone" class="form-label col-sm-3">電話</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputPhone">
|
|
</div>
|
|
</div>
|
|
<!-- 手機 -->
|
|
<div class="mb-3 row">
|
|
<label for="inputMobile" class="form-label col-sm-3">手機</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputMobile">
|
|
</div>
|
|
</div>
|
|
<!-- 收件地址 -->
|
|
<div class="mb-3 row">
|
|
<label for="inputAddress" class="form-label col-sm-3">收件地址</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputAddress">
|
|
</div>
|
|
</div>
|
|
<!-- 性別 (radio) -->
|
|
<div class="mb-3 row">
|
|
<label class="form-label col-sm-3">性別</label>
|
|
<div class="col-sm-9">
|
|
<div class="d-flex">
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="radio" name="gender" id="genderMale" value="male">
|
|
<label class="form-check-label" for="genderMale">男</label>
|
|
</div>
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="radio" name="gender" id="genderFemale" value="female">
|
|
<label class="form-check-label" for="genderFemale">女</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 身分別 (select) -->
|
|
<div class="mb-3 row">
|
|
<label for="selectIdentity" class="form-label col-sm-3">身分別</label>
|
|
<div class="col-sm-9">
|
|
<select class="form-select" id="selectIdentity">
|
|
<option selected>選擇...</option>
|
|
<option value="0">出家眾</option>
|
|
<option value="1">在家眾</option>
|
|
<option value="1">蓮友</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- 國籍 (select) -->
|
|
<div class="mb-3 row">
|
|
<label for="selectNationality" class="form-label col-sm-3">國籍</label>
|
|
<div class="col-sm-9">
|
|
<select class="form-select" id="selectNationality">
|
|
<option selected>選擇...</option>
|
|
<option value="taiwan">台灣</option>
|
|
<option value="usa">美國</option>
|
|
<option value="japan">日本</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- 生日 (date) -->
|
|
<div class="mb-3 row">
|
|
<label for="inputBirthday" class="form-label col-sm-3">生日</label>
|
|
<div class="col-sm-9">
|
|
<input type="date" class="form-control" id="inputBirthday">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row border-bottom mb-5 py-2">
|
|
<button type="button" class="btn btn-primary" @click="navigate(1)">儲存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Step 3 -->
|
|
<div v-if="activeItem === 2">
|
|
<form>
|
|
<div class="mb-3 row">
|
|
<label for="inputName" class="form-label col-sm-3">信眾姓名</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputName" readonly value="王大明">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputPhone" class="form-label col-sm-3">報名單號</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputPhone" readonly value="AA202402020001">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputMobile" class="form-label col-sm-3">報名日期</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputMobile" readonly value="2024/02/02">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputAddress" class="form-label col-sm-3">聯絡電話</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputAddress" value="04-98765432">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label class="form-label col-sm-3">寄送收據</label>
|
|
<div class="col-sm-9">
|
|
<div class="d-flex">
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="radio" name="gender" id="genderMale" value="male">
|
|
<label class="form-check-label" for="genderMale">是</label>
|
|
</div>
|
|
<div class="form-check me-2">
|
|
<input class="form-check-input" type="radio" name="gender" id="genderFemale" value="female">
|
|
<label class="form-check-label" for="genderFemale">否</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputBirthday" class="form-label col-sm-3">收據抬頭</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputBirthday" value="王大明">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row border-bottom mb-5 py-2">
|
|
<button type="button" class="btn btn-primary" @click="navigate(1)">輸入牌位資料</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Step 4 -->
|
|
<div v-if="activeItem === 3">
|
|
<div class="mb-3 row">
|
|
<label for="inputName" class="form-label col-sm-3">信眾姓名</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputName" readonly value="王大明">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputPhone" class="form-label col-sm-3">報名單號</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputPhone" readonly value="AA202402020001">
|
|
</div>
|
|
</div>
|
|
<h3>以往報名資料</h3>
|
|
<div class="row">
|
|
<div class="col text-end">
|
|
<button type="button" class="btn btn-primary">新增牌位</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row bg-light rounded my-3 p-3">
|
|
<div class="col-sm-9 mb-2">隨喜牌位</div>
|
|
<div class="col-sm-3 mb-2 text-end">
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
|
<label class="form-check-label text-primary" for="exampleCheck1">選取</label>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">牌位標題</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">陽上</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row bg-light rounded my-3 p-3">
|
|
<div class="col-sm-9 mb-2">隨喜牌位</div>
|
|
<div class="col-sm-3 mb-2 text-end">
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck2">
|
|
<label class="form-check-label text-primary" for="exampleCheck2">選取</label>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">牌位標題</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">陽上</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row bg-light rounded my-3 p-3">
|
|
<div class="col-sm-9 mb-2">隨喜牌位</div>
|
|
<div class="col-sm-3 mb-2 text-end">
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck3">
|
|
<label class="form-check-label text-primary" for="exampleCheck3">選取</label>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">牌位標題</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">陽上</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<button type="button" class="btn btn-primary" @click="navigate(1)">完成報名</button>
|
|
</div>
|
|
</div>
|
|
<!-- Step 5 -->
|
|
<div v-if="activeItem === 4">
|
|
<div class="mb-3 row">
|
|
<label for="inputName" class="form-label col-sm-3">信眾姓名</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputName" readonly value="王大明">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="inputPhone" class="form-label col-sm-3">報名單號</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" id="inputPhone" readonly value="AA202402020001">
|
|
</div>
|
|
</div>
|
|
<h3>報名資料</h3>
|
|
<div class="mb-3 row bg-light rounded my-3 p-3">
|
|
<h5 class="col-sm-12 mb-2">隨喜牌位</h5>
|
|
<div class="col-sm-3 mb-2">牌位標題</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">陽上</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row bg-light rounded my-3 p-3">
|
|
<h5 class="col-sm-12 mb-2">隨喜牌位</h5>
|
|
<div class="col-sm-3 mb-2">牌位標題</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">陽上</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row bg-light rounded my-3 p-3">
|
|
<h5 class="col-sm-12 mb-2">隨喜牌位</h5>
|
|
<div class="col-sm-3 mb-2">牌位標題</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
<div class="col-sm-3 mb-2">陽上</div>
|
|
<div class="col-sm-9 mb-2">
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
功德金：$1000
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<p>
|
|
注意事項： ...
|
|
</p>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<h5>備註</h5>
|
|
<textarea class="form-control" name="" id=""></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<button type="button" class="btn btn-primary" @click="navigate(1)">確認送出</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Action Area -->
|
|
<div class="bottom-action-area">
|
|
<button v-if="activeItem > 0" class="btn btn-secondary" @click="navigate(-1)">上一頁</button>
|
|
<button v-if="activeItem < sidebarItems.length - 1" class="btn btn-primary" @click="navigate(1)">下一頁</button>
|
|
<p class="mt-2">步驟 {{ activeItem + 1 }} / {{ sidebarItems.length }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vue 2 CDN -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
<!-- Bootstrap 5.3.3 Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
activeItem: 0,
|
|
sidebarItems: [
|
|
{ name: '查詢信眾資料', title: '查詢信眾資料', description: '這是查詢信眾資料的內容。' },
|
|
{ name: '新增信眾資料', title: '新增信眾資料', description: '這是新增信眾資料的內容。' },
|
|
{ name: '報名資料輸入', title: '報名資料輸入', description: '這是報名資料輸入的內容。' },
|
|
{ name: '選擇報名項目', title: '選擇報名項目', description: '這是選擇報名項目的內容。' },
|
|
{ name: '完成報名', title: '完成報名', description: '這是完成報名的內容。' },
|
|
]
|
|
},
|
|
methods: {
|
|
toggleSidebar() {
|
|
// 切換側邊欄顯示狀態
|
|
},
|
|
setActiveItem(index) {
|
|
this.activeItem = index;
|
|
},
|
|
navigate(step) {
|
|
this.activeItem += step;
|
|
},
|
|
currentPage() {
|
|
return this.sidebarItems[this.activeItem];
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|