feat:實作 Member Portal MVP 前端與後端整合
後端： - 新增 DivingOffer Model / DivingOfferController（列表+詳情 API，支援搜尋/篩選/分頁） - 修正 Google OAuth callback 改為 redirect 至前端（SocialAuthController） - 新增 config/cors.php 允許前端 origin - .gitignore 新增 frontend/ 排除規則 前端（frontend/）： - Vue 3 + Vite + Tailwind CSS + Pinia + Vue Router - 頁面：首頁、課程列表、課程詳情、登入、註冊、個人資料、OAuth callback - 整合至 Docker（multi-stage build，nginx 靜態服務於 port 5173） Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useAuthStore } from './stores/auth'
|
||||
import NavBar from './components/NavBar.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
onMounted(() => auth.init())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<NavBar />
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL + '/api',
|
||||
headers: { Accept: 'application/json' },
|
||||
})
|
||||
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
export default api
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
offer: { type: Object, required: true },
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink
|
||||
:to="`/courses/${offer.id}`"
|
||||
class="bg-white rounded-2xl shadow hover:shadow-lg transition overflow-hidden flex flex-col"
|
||||
>
|
||||
<div class="bg-ocean-700 h-40 flex items-center justify-center text-white text-5xl">🤿</div>
|
||||
|
||||
<div class="p-4 flex flex-col gap-2 flex-1">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span
|
||||
v-for="badge in (offer.badges || [])"
|
||||
:key="badge"
|
||||
class="text-xs bg-ocean-100 text-ocean-700 px-2 py-0.5 rounded-full"
|
||||
>
|
||||
{{ badge }}
|
||||
</span>
|
||||
<span v-if="offer.tag" class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">
|
||||
{{ offer.tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="font-semibold text-gray-800 line-clamp-2 leading-snug">{{ offer.title }}</h3>
|
||||
|
||||
<p class="text-sm text-gray-500 flex items-center gap-1">
|
||||
📍 {{ offer.location }}
|
||||
</p>
|
||||
|
||||
<div class="mt-auto flex items-center justify-between pt-2 border-t border-gray-100">
|
||||
<span class="text-sm text-amber-500 font-medium">
|
||||
★ {{ offer.rating }} <span class="text-gray-400">({{ offer.reviews }})</span>
|
||||
</span>
|
||||
<span class="text-ocean-700 font-bold">NT$ {{ offer.price.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import viteLogo from '../assets/vite.svg'
|
||||
import heroImg from '../assets/hero.png'
|
||||
import vueLogo from '../assets/vue.svg'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<button type="button" class="counter" @click="count++">
|
||||
Count is {{ count }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" :src="viteLogo" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img class="button-icon" :src="vueLogo" alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
async function handleLogout() {
|
||||
await auth.logout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="bg-ocean-800 text-white shadow-md">
|
||||
<div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<RouterLink to="/" class="text-xl font-bold tracking-wide hover:text-ocean-100 transition">
|
||||
🤿 CFDive
|
||||
</RouterLink>
|
||||
|
||||
<div class="flex items-center gap-6 text-sm font-medium">
|
||||
<RouterLink to="/courses" class="hover:text-ocean-100 transition">探索課程</RouterLink>
|
||||
|
||||
<template v-if="auth.isLoggedIn">
|
||||
<span class="text-ocean-200 hidden sm:inline">
|
||||
👤 {{ auth.user?.name }}
|
||||
</span>
|
||||
<RouterLink to="/profile" class="hover:text-ocean-100 transition">個人資料</RouterLink>
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="bg-ocean-600 hover:bg-ocean-500 px-4 py-1.5 rounded-full transition"
|
||||
>
|
||||
登出
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<RouterLink to="/login" class="hover:text-ocean-100 transition">登入</RouterLink>
|
||||
<RouterLink
|
||||
to="/register"
|
||||
class="bg-ocean-600 hover:bg-ocean-500 px-4 py-1.5 rounded-full transition"
|
||||
>
|
||||
註冊
|
||||
</RouterLink>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,26 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: () => import('../views/HomeView.vue') },
|
||||
{ path: '/courses', component: () => import('../views/CoursesView.vue') },
|
||||
{ path: '/courses/:id', component: () => import('../views/CourseDetailView.vue') },
|
||||
{ path: '/login', component: () => import('../views/LoginView.vue') },
|
||||
{ path: '/register', component: () => import('../views/RegisterView.vue') },
|
||||
{ path: '/auth/callback', component: () => import('../views/AuthCallbackView.vue') },
|
||||
{ path: '/profile', component: () => import('../views/ProfileView.vue'), meta: { requiresAuth: true } },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const auth = useAuthStore()
|
||||
if (to.meta.requiresAuth && !auth.isLoggedIn) {
|
||||
return { path: '/login' }
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,38 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import api from '../api/axios'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const user = ref(null)
|
||||
const token = ref(null)
|
||||
|
||||
const isLoggedIn = computed(() => !!token.value)
|
||||
|
||||
function init() {
|
||||
const saved = localStorage.getItem('token')
|
||||
const savedUser = localStorage.getItem('user')
|
||||
if (saved) {
|
||||
token.value = saved
|
||||
user.value = savedUser ? JSON.parse(savedUser) : null
|
||||
}
|
||||
}
|
||||
|
||||
function setAuth(userData, tokenValue) {
|
||||
user.value = userData
|
||||
token.value = tokenValue
|
||||
localStorage.setItem('token', tokenValue)
|
||||
localStorage.setItem('user', JSON.stringify(userData))
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await api.post('/member/logout')
|
||||
} catch {}
|
||||
user.value = null
|
||||
token.value = null
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
}
|
||||
|
||||
return { user, token, isLoggedIn, init, setAuth, logout }
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import api from '../api/axios'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
onMounted(async () => {
|
||||
const token = route.query.token
|
||||
const error = route.query.error
|
||||
|
||||
if (error || !token) {
|
||||
router.push('/login?error=oauth_failed')
|
||||
return
|
||||
}
|
||||
|
||||
// 存 token 先，再拉 profile
|
||||
localStorage.setItem('token', token)
|
||||
try {
|
||||
const res = await api.get('/member/profile')
|
||||
auth.setAuth(res.data.data, token)
|
||||
} catch {
|
||||
auth.setAuth(null, token)
|
||||
}
|
||||
|
||||
// 清除 URL 上的 token
|
||||
history.replaceState({}, '', '/auth/callback')
|
||||
router.push('/courses')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-[80vh] flex items-center justify-center text-gray-400">
|
||||
正在完成登入，請稍候...
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import api from '../api/axios'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const offer = ref(null)
|
||||
const loading = ref(true)
|
||||
const notFound = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await api.get(`/diving-offers/${route.params.id}`)
|
||||
offer.value = res.data.data
|
||||
} catch (e) {
|
||||
notFound.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="max-w-4xl mx-auto px-4 py-10">
|
||||
|
||||
<div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
|
||||
|
||||
<div v-else-if="notFound" class="text-center py-20">
|
||||
<p class="text-5xl mb-4">🌊</p>
|
||||
<p class="text-gray-500 text-lg mb-6">課程不存在或已下架</p>
|
||||
<RouterLink to="/courses" class="text-ocean-600 hover:underline">← 返回課程列表</RouterLink>
|
||||
</div>
|
||||
|
||||
<template v-else-if="offer">
|
||||
<RouterLink to="/courses" class="text-ocean-600 hover:underline text-sm mb-6 inline-block">
|
||||
← 返回課程列表
|
||||
</RouterLink>
|
||||
|
||||
<div class="bg-ocean-700 rounded-2xl h-56 flex items-center justify-center text-white text-7xl mb-6">🤿</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<span
|
||||
v-for="badge in (offer.badges || [])"
|
||||
:key="badge"
|
||||
class="text-sm bg-ocean-100 text-ocean-700 px-3 py-1 rounded-full"
|
||||
>
|
||||
{{ badge }}
|
||||
</span>
|
||||
<span v-if="offer.tag" class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded-full">
|
||||
{{ offer.tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-2">{{ offer.title }}</h1>
|
||||
|
||||
<div class="flex flex-wrap gap-6 text-sm text-gray-500 mb-6">
|
||||
<span>📍 {{ offer.location }}・{{ offer.spot }}</span>
|
||||
<span>🗺️ {{ offer.region }}</span>
|
||||
<span>★ {{ offer.rating }} （{{ offer.reviews }} 則評論）</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow p-6 mb-6">
|
||||
<p class="text-gray-700 leading-relaxed whitespace-pre-wrap">{{ offer.description || '暫無課程說明。' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between bg-ocean-50 rounded-2xl p-6">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">課程費用</p>
|
||||
<p class="text-3xl font-bold text-ocean-800">NT$ {{ offer.price.toLocaleString() }}</p>
|
||||
</div>
|
||||
<button class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold px-8 py-3 rounded-full transition">
|
||||
立即洽詢
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import api from '../api/axios'
|
||||
import CourseCard from '../components/CourseCard.vue'
|
||||
|
||||
const offers = ref([])
|
||||
const meta = ref(null)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const search = ref('')
|
||||
const region = ref('')
|
||||
|
||||
const REGIONS = ['北部', '中部', '南部', '東部', '離島']
|
||||
|
||||
async function fetchOffers(page = 1) {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const params = { page, per_page: 12 }
|
||||
if (search.value) params.q = search.value
|
||||
if (region.value) params.region = region.value
|
||||
|
||||
const res = await api.get('/diving-offers', { params })
|
||||
offers.value = res.data.data
|
||||
meta.value = res.data.meta
|
||||
} catch {
|
||||
error.value = '無法載入課程，請稍後再試。'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() { fetchOffers(1) }
|
||||
function onRegion() { fetchOffers(1) }
|
||||
|
||||
onMounted(() => fetchOffers())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="max-w-6xl mx-auto px-4 py-10">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-6">探索潛水課程</h1>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 mb-8">
|
||||
<input
|
||||
v-model="search"
|
||||
@keyup.enter="onSearch"
|
||||
type="text"
|
||||
placeholder="搜尋課程名稱、地點..."
|
||||
class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
<button
|
||||
@click="onSearch"
|
||||
class="bg-ocean-700 text-white px-6 py-2 rounded-lg hover:bg-ocean-600 transition"
|
||||
>
|
||||
搜尋
|
||||
</button>
|
||||
<select
|
||||
v-model="region"
|
||||
@change="onRegion"
|
||||
class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
>
|
||||
<option value="">所有地區</option>
|
||||
<option v-for="r in REGIONS" :key="r" :value="r">{{ r }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
|
||||
|
||||
<div v-else-if="error" class="text-center text-red-500 py-20">{{ error }}</div>
|
||||
|
||||
<div v-else-if="offers.length === 0" class="text-center text-gray-400 py-20">
|
||||
😢 找不到符合的課程，試試其他關鍵字
|
||||
</div>
|
||||
|
||||
<div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<CourseCard v-for="offer in offers" :key="offer.id" :offer="offer" />
|
||||
</div>
|
||||
|
||||
<div v-if="meta && meta.last_page > 1" class="flex justify-center gap-2 mt-10">
|
||||
<button
|
||||
v-for="p in meta.last_page"
|
||||
:key="p"
|
||||
@click="fetchOffers(p)"
|
||||
:class="[
|
||||
'px-3 py-1 rounded-lg border transition',
|
||||
p === meta.current_page
|
||||
? 'bg-ocean-700 text-white border-ocean-700'
|
||||
: 'border-gray-300 text-gray-600 hover:bg-gray-100'
|
||||
]"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<main>
|
||||
<section class="bg-gradient-to-br from-ocean-900 to-ocean-600 text-white py-28 px-4 text-center">
|
||||
<p class="text-ocean-100 text-sm uppercase tracking-widest mb-4">探索台灣最美的海底世界</p>
|
||||
<h1 class="text-5xl font-bold mb-6 leading-tight">
|
||||
找到你的<br class="sm:hidden" />完美潛水課程
|
||||
</h1>
|
||||
<p class="text-ocean-100 text-lg max-w-xl mx-auto mb-10">
|
||||
連結優質潛水教練與愛好者，無論初學者還是進階玩家，都能找到最適合的課程體驗。
|
||||
</p>
|
||||
<RouterLink
|
||||
to="/courses"
|
||||
class="inline-block bg-white text-ocean-800 font-semibold px-8 py-3 rounded-full text-lg hover:bg-ocean-50 transition shadow-lg"
|
||||
>
|
||||
探索課程 →
|
||||
</RouterLink>
|
||||
</section>
|
||||
|
||||
<section class="max-w-6xl mx-auto px-4 py-16 grid sm:grid-cols-3 gap-8 text-center">
|
||||
<div class="p-6 bg-white rounded-2xl shadow">
|
||||
<div class="text-4xl mb-3">🏅</div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">認證教練</h3>
|
||||
<p class="text-sm text-gray-500">所有教練皆具備 PADI / SSI 國際認證</p>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-2xl shadow">
|
||||
<div class="text-4xl mb-3">🗺️</div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">全台潛點</h3>
|
||||
<p class="text-sm text-gray-500">墾丁、小琉球、綠島、蘭嶼等多地課程</p>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-2xl shadow">
|
||||
<div class="text-4xl mb-3">🛡️</div>
|
||||
<h3 class="font-semibold text-gray-800 mb-1">安心保障</h3>
|
||||
<p class="text-sm text-gray-500">完整保險與安全設備，讓你無後顧之憂</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import api from '../api/axios'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
const oauthError = route.query.error === 'oauth_failed'
|
||||
? 'Google 登入失敗，請重試。'
|
||||
: ''
|
||||
|
||||
const successMsg = route.query.registered ? '註冊成功，請登入。' : ''
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.post('/member/login', {
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
})
|
||||
auth.setAuth(res.data.data.user, res.data.data.token)
|
||||
router.push('/courses')
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '帳號或密碼錯誤'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function loginWithGoogle() {
|
||||
window.location.href = import.meta.env.VITE_API_URL + '/api/auth/google/redirect'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-[80vh] flex items-center justify-center px-4">
|
||||
<div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">會員登入</h1>
|
||||
|
||||
<div v-if="successMsg" class="bg-green-50 text-green-700 text-sm rounded-lg px-4 py-3 mb-4">
|
||||
{{ successMsg }}
|
||||
</div>
|
||||
<div v-if="oauthError || error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3 mb-4">
|
||||
{{ oauthError || error }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit" class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">Email</label>
|
||||
<input
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">密碼</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60"
|
||||
>
|
||||
{{ loading ? '登入中...' : '登入' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="relative my-5 flex items-center">
|
||||
<div class="flex-1 border-t border-gray-200"></div>
|
||||
<span class="mx-3 text-sm text-gray-400">或</span>
|
||||
<div class="flex-1 border-t border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="loginWithGoogle"
|
||||
class="w-full flex items-center justify-center gap-3 border border-gray-300 rounded-lg py-2.5 hover:bg-gray-50 transition text-sm font-medium text-gray-700"
|
||||
>
|
||||
<svg class="w-5 h-5" viewBox="0 0 48 48">
|
||||
<path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.2l6.7-6.7C35.8 2.5 30.2 0 24 0 14.6 0 6.6 5.4 2.5 13.3l7.8 6C12.3 13.1 17.7 9.5 24 9.5z"/>
|
||||
<path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9C43.8 37.6 46.5 31.5 46.5 24.5z"/>
|
||||
<path fill="#FBBC05" d="M10.3 28.7A14.7 14.7 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.8-6A23.9 23.9 0 0 0 0 24c0 3.9.9 7.5 2.5 10.7l7.8-6z"/>
|
||||
<path fill="#34A853" d="M24 48c6.2 0 11.4-2 15.2-5.5l-7.6-5.9c-2 1.4-4.7 2.2-7.6 2.2-6.3 0-11.7-3.6-13.7-9.1l-7.8 6C6.6 42.6 14.6 48 24 48z"/>
|
||||
</svg>
|
||||
以 Google 帳號登入
|
||||
</button>
|
||||
|
||||
<p class="text-center text-sm text-gray-500 mt-6">
|
||||
還沒有帳號？
|
||||
<RouterLink to="/register" class="text-ocean-600 hover:underline">立即註冊</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import api from '../api/axios'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const success = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
birthday: '',
|
||||
gender: '',
|
||||
address: '',
|
||||
emergency_contact: '',
|
||||
emergency_phone: '',
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await api.get('/member/profile')
|
||||
const d = res.data.data
|
||||
form.value.name = d.name || ''
|
||||
form.value.birthday = d.profile?.birthday || ''
|
||||
form.value.gender = d.profile?.gender || ''
|
||||
form.value.address = d.profile?.address || ''
|
||||
form.value.emergency_contact = d.profile?.emergency_contact|| ''
|
||||
form.value.emergency_phone = d.profile?.emergency_phone || ''
|
||||
} catch {
|
||||
error.value = '無法載入個人資料'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
success.value = false
|
||||
error.value = ''
|
||||
try {
|
||||
await api.put('/member/profile', form.value)
|
||||
auth.user = { ...auth.user, name: form.value.name }
|
||||
success.value = true
|
||||
setTimeout(() => (success.value = false), 3000)
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '儲存失敗，請稍後再試'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="max-w-2xl mx-auto px-4 py-10">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">個人資料</h1>
|
||||
|
||||
<div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
|
||||
|
||||
<form v-else @submit.prevent="save" class="bg-white rounded-2xl shadow p-6 flex flex-col gap-5">
|
||||
|
||||
<div v-if="success" class="bg-green-50 text-green-700 text-sm rounded-lg px-4 py-3">
|
||||
✅ 資料已更新
|
||||
</div>
|
||||
<div v-if="error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">姓名</label>
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">生日</label>
|
||||
<input
|
||||
v-model="form.birthday"
|
||||
type="date"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">性別</label>
|
||||
<select
|
||||
v-model="form.gender"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
>
|
||||
<option value="">請選擇</option>
|
||||
<option value="male">男</option>
|
||||
<option value="female">女</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">地址</label>
|
||||
<input
|
||||
v-model="form.address"
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">緊急聯絡人</label>
|
||||
<input
|
||||
v-model="form.emergency_contact"
|
||||
type="text"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">緊急聯絡電話</label>
|
||||
<input
|
||||
v-model="form.emergency_phone"
|
||||
type="tel"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60"
|
||||
>
|
||||
{{ saving ? '儲存中...' : '儲存變更' }}
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import api from '../api/axios'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const name = ref('')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const confirm = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
if (password.value !== confirm.value) {
|
||||
error.value = '兩次密碼輸入不一致'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await api.post('/member/register', {
|
||||
name: name.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
password_confirmation: confirm.value,
|
||||
})
|
||||
router.push('/login?registered=1')
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '註冊失敗，請稍後再試'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-[80vh] flex items-center justify-center px-4">
|
||||
<div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">建立帳號</h1>
|
||||
|
||||
<div v-if="error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3 mb-4">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit" class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">姓名</label>
|
||||
<input
|
||||
v-model="name"
|
||||
type="text"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">Email</label>
|
||||
<input
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">密碼</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
minlength="8"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">確認密碼</label>
|
||||
<input
|
||||
v-model="confirm"
|
||||
type="password"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-2.5 rounded-lg transition disabled:opacity-60"
|
||||
>
|
||||
{{ loading ? '處理中...' : '建立帳號' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-sm text-gray-500 mt-6">
|
||||
已有帳號？
|
||||
<RouterLink to="/login" class="text-ocean-600 hover:underline">立即登入</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user