feat:實作 Coach Portal — 教練後台課程管理
後端： - Migration：diving_offers 新增 provider_id（nullable FK） - Migration：users.role ENUM 加入 provider 值 - Migration：diving_offers.spot 改為 nullable - AuthController：registerProvider business_name 改為選填 - AuthController：updateProviderProfile 補上 certifications / dive_sites / services / facilities / website / social_media - ProviderOfferController：教練課程 CRUD（index/show/store/update/destroy），實作 provider_id 所有權不變式（404 → 403 兩步驟） 前端（frontend/）： - coachAuth store、coachAxios（獨立於 member auth） - /coach/* 路由群組 + beforeEach guard - CoachNavBar、CoachLayout（教練頁隱藏會員 NavBar） - LoginView、RegisterView、DashboardView（表格 + 刪除確認） - OfferFormView（新增/編輯共用）、ProfileView OpenSpec： - openspec/config.yaml 補入專案 context 與 rules - 新增 specs：coach-offers-api / coach-portal-ui / provider-auth - 更新 spec：diving-offers-api 加入 provider_id - 歸檔：openspec/changes/archive/2026-05-10-coach-portal Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
+14
-4
@@ -1,15 +1,25 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useAuthStore } from './stores/auth'
|
||||
import { useCoachAuthStore } from './stores/coachAuth'
|
||||
import { useRoute } from 'vue-router'
|
||||
import NavBar from './components/NavBar.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
onMounted(() => auth.init())
|
||||
const auth = useAuthStore()
|
||||
const coachAuth = useCoachAuthStore()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(() => {
|
||||
auth.init()
|
||||
coachAuth.init()
|
||||
})
|
||||
|
||||
const isCoachPage = computed(() => route.path.startsWith('/coach'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<NavBar />
|
||||
<NavBar v-if="!isCoachPage" />
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const coachApi = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL + '/api',
|
||||
headers: { Accept: 'application/json' },
|
||||
})
|
||||
|
||||
coachApi.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('coach_token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
})
|
||||
|
||||
export default coachApi
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
import { useCoachAuthStore } from '../stores/coachAuth'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const coachAuth = useCoachAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
async function handleLogout() {
|
||||
await coachAuth.logout()
|
||||
router.push('/coach/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="bg-gray-900 text-white shadow-md">
|
||||
<div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-6">
|
||||
<RouterLink to="/coach/dashboard" class="text-lg font-bold tracking-wide hover:text-gray-300 transition">
|
||||
🤿 Coach Portal
|
||||
</RouterLink>
|
||||
<RouterLink to="/coach/dashboard" class="text-sm hover:text-gray-300 transition">我的課程</RouterLink>
|
||||
<RouterLink to="/coach/profile" class="text-sm hover:text-gray-300 transition">個人資料</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-gray-400">{{ coachAuth.user?.name }}</span>
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="bg-gray-700 hover:bg-gray-600 px-4 py-1.5 rounded-full transition"
|
||||
>
|
||||
登出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
import CoachNavBar from '../components/CoachNavBar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<CoachNavBar />
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,9 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useCoachAuthStore } from '../stores/coachAuth'
|
||||
|
||||
const routes = [
|
||||
// Member
|
||||
{ path: '/', component: () => import('../views/HomeView.vue') },
|
||||
{ path: '/courses', component: () => import('../views/CoursesView.vue') },
|
||||
{ path: '/courses/:id', component: () => import('../views/CourseDetailView.vue') },
|
||||
@@ -9,6 +11,22 @@ const routes = [
|
||||
{ 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 } },
|
||||
|
||||
// Coach (public)
|
||||
{ path: '/coach/login', component: () => import('../views/coach/LoginView.vue') },
|
||||
{ path: '/coach/register', component: () => import('../views/coach/RegisterView.vue') },
|
||||
// Coach (protected) — wrapped in CoachLayout
|
||||
{
|
||||
path: '/coach',
|
||||
component: () => import('../layouts/CoachLayout.vue'),
|
||||
meta: { requiresCoach: true },
|
||||
children: [
|
||||
{ path: 'dashboard', component: () => import('../views/coach/DashboardView.vue') },
|
||||
{ path: 'offers/new', component: () => import('../views/coach/OfferFormView.vue') },
|
||||
{ path: 'offers/:id/edit', component: () => import('../views/coach/OfferFormView.vue') },
|
||||
{ path: 'profile', component: () => import('../views/coach/ProfileView.vue') },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
@@ -17,10 +35,15 @@ const router = createRouter({
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const auth = useAuthStore()
|
||||
const auth = useAuthStore()
|
||||
const coachAuth = useCoachAuthStore()
|
||||
|
||||
if (to.meta.requiresAuth && !auth.isLoggedIn) {
|
||||
return { path: '/login' }
|
||||
}
|
||||
if (to.meta.requiresCoach && !coachAuth.isLoggedIn) {
|
||||
return { path: '/coach/login' }
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import coachApi from '../api/coachAxios'
|
||||
|
||||
export const useCoachAuthStore = defineStore('coachAuth', () => {
|
||||
const user = ref(null)
|
||||
const token = ref(null)
|
||||
|
||||
const isLoggedIn = computed(() => !!token.value)
|
||||
|
||||
function init() {
|
||||
const savedToken = localStorage.getItem('coach_token')
|
||||
const savedUser = localStorage.getItem('coach_user')
|
||||
if (savedToken) {
|
||||
token.value = savedToken
|
||||
user.value = savedUser ? JSON.parse(savedUser) : null
|
||||
}
|
||||
}
|
||||
|
||||
function setAuth(userData, tokenValue) {
|
||||
user.value = userData
|
||||
token.value = tokenValue
|
||||
localStorage.setItem('coach_token', tokenValue)
|
||||
localStorage.setItem('coach_user', JSON.stringify(userData))
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await coachApi.post('/provider/logout')
|
||||
} catch {}
|
||||
user.value = null
|
||||
token.value = null
|
||||
localStorage.removeItem('coach_token')
|
||||
localStorage.removeItem('coach_user')
|
||||
}
|
||||
|
||||
return { user, token, isLoggedIn, init, setAuth, logout }
|
||||
})
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import coachApi from '../../api/coachAxios'
|
||||
|
||||
const router = useRouter()
|
||||
const offers = ref([])
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const confirmId = ref(null)
|
||||
|
||||
async function fetchOffers() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await coachApi.get('/provider/offers')
|
||||
offers.value = res.data.data
|
||||
} catch {
|
||||
error.value = '無法載入課程列表'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteOffer(id) {
|
||||
try {
|
||||
await coachApi.delete(`/provider/offers/${id}`)
|
||||
confirmId.value = null
|
||||
await fetchOffers()
|
||||
} catch (e) {
|
||||
alert(e.response?.data?.message || '刪除失敗')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchOffers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="max-w-5xl mx-auto px-4 py-10">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-800">我的課程</h1>
|
||||
<RouterLink
|
||||
to="/coach/offers/new"
|
||||
class="bg-gray-900 hover:bg-gray-700 text-white text-sm font-medium px-5 py-2 rounded-lg transition"
|
||||
>
|
||||
+ 新增課程
|
||||
</RouterLink>
|
||||
</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 py-20">
|
||||
<p class="text-5xl mb-4">🌊</p>
|
||||
<p class="text-gray-500 mb-4">尚無課程，立即新增第一堂課</p>
|
||||
<RouterLink to="/coach/offers/new"
|
||||
class="bg-gray-900 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition text-sm">
|
||||
新增課程
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-white rounded-2xl shadow overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left">課程名稱</th>
|
||||
<th class="px-6 py-3 text-left">地點</th>
|
||||
<th class="px-6 py-3 text-left">地區</th>
|
||||
<th class="px-6 py-3 text-right">價格</th>
|
||||
<th class="px-6 py-3 text-center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr v-for="offer in offers" :key="offer.id" class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 font-medium text-gray-800">{{ offer.title }}</td>
|
||||
<td class="px-6 py-4 text-gray-500">{{ offer.location }}</td>
|
||||
<td class="px-6 py-4 text-gray-500">{{ offer.region }}</td>
|
||||
<td class="px-6 py-4 text-right font-medium">NT$ {{ offer.price?.toLocaleString() }}</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="flex justify-center gap-2">
|
||||
<RouterLink :to="`/coach/offers/${offer.id}/edit`"
|
||||
class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition">
|
||||
編輯
|
||||
</RouterLink>
|
||||
<button @click="confirmId = offer.id"
|
||||
class="text-xs bg-red-50 hover:bg-red-100 text-red-600 px-3 py-1 rounded-lg transition">
|
||||
刪除
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 刪除確認 dialog -->
|
||||
<div v-if="confirmId" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-2xl shadow-xl p-6 w-80">
|
||||
<p class="font-semibold text-gray-800 mb-2">確定要刪除這堂課程？</p>
|
||||
<p class="text-sm text-gray-500 mb-6">此操作無法復原。</p>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button @click="confirmId = null"
|
||||
class="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition">
|
||||
取消
|
||||
</button>
|
||||
<button @click="deleteOffer(confirmId)"
|
||||
class="px-4 py-2 text-sm bg-red-600 hover:bg-red-500 text-white rounded-lg transition">
|
||||
確定刪除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import coachApi from '../../api/coachAxios'
|
||||
import { useCoachAuthStore } from '../../stores/coachAuth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const coachAuth = useCoachAuthStore()
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
const registeredMsg = route.query.registered ? '註冊成功，請登入。' : ''
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await coachApi.post('/provider/login', {
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
})
|
||||
const { user, token } = res.data.data
|
||||
coachAuth.setAuth(user, token)
|
||||
router.push('/coach/dashboard')
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '帳號或密碼錯誤'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
|
||||
<div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-8">
|
||||
|
||||
<div class="text-center mb-8">
|
||||
<p class="text-gray-500 text-sm mb-1">CFDive 教練後台</p>
|
||||
<h1 class="text-2xl font-bold text-gray-800">教練登入</h1>
|
||||
</div>
|
||||
|
||||
<div v-if="registeredMsg" class="bg-green-50 text-green-700 text-sm rounded-lg px-4 py-3 mb-4">
|
||||
{{ registeredMsg }}
|
||||
</div>
|
||||
<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">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-gray-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-gray-400" />
|
||||
</div>
|
||||
<button type="submit" :disabled="loading"
|
||||
class="bg-gray-900 hover:bg-gray-700 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="/coach/register" class="text-gray-700 hover:underline font-medium">申請教練帳號</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,174 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import coachApi from '../../api/coachAxios'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const isEdit = computed(() => !!route.params.id)
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const error = ref('')
|
||||
const errors = ref({})
|
||||
|
||||
const REGIONS = ['北部', '中部', '南部', '東部', '離島']
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
location: '',
|
||||
spot: '',
|
||||
price: '',
|
||||
region: '',
|
||||
tag: '',
|
||||
badges: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
if (!isEdit.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await coachApi.get(`/provider/offers/${route.params.id}`)
|
||||
const o = res.data.data
|
||||
form.value = {
|
||||
title: o.title || '',
|
||||
location: o.location || '',
|
||||
spot: o.spot || '',
|
||||
price: o.price ?? '',
|
||||
region: o.region || '',
|
||||
tag: o.tag || '',
|
||||
badges: Array.isArray(o.badges) ? o.badges.join(', ') : (o.badges || ''),
|
||||
description: o.description || '',
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || '無法載入課程資料'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
async function submit() {
|
||||
errors.value = {}
|
||||
error.value = ''
|
||||
|
||||
if (!form.value.title) { errors.value.title = '課程名稱為必填'; }
|
||||
if (!form.value.location) { errors.value.location = '地點為必填'; }
|
||||
if (!form.value.price) { errors.value.price = '價格為必填'; }
|
||||
if (!form.value.region) { errors.value.region = '地區為必填'; }
|
||||
if (Object.keys(errors.value).length) return
|
||||
|
||||
const payload = {
|
||||
...form.value,
|
||||
price: Number(form.value.price),
|
||||
badges: form.value.badges
|
||||
? form.value.badges.split(',').map(b => b.trim()).filter(Boolean)
|
||||
: [],
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await coachApi.put(`/provider/offers/${route.params.id}`, payload)
|
||||
} else {
|
||||
await coachApi.post('/provider/offers', payload)
|
||||
}
|
||||
router.push('/coach/dashboard')
|
||||
} catch (e) {
|
||||
const data = e.response?.data
|
||||
error.value = data?.message || '儲存失敗'
|
||||
errors.value = data?.errors || {}
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="max-w-2xl mx-auto px-4 py-10">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<RouterLink to="/coach/dashboard" class="text-gray-400 hover:text-gray-600 text-sm">← 返回</RouterLink>
|
||||
<h1 class="text-2xl font-bold text-gray-800">{{ isEdit ? '編輯課程' : '新增課程' }}</h1>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="text-center text-gray-400 py-20">載入中...</div>
|
||||
|
||||
<form v-else @submit.prevent="submit" class="bg-white rounded-2xl shadow p-6 space-y-5">
|
||||
|
||||
<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">課程名稱 <span class="text-red-400">*</span></label>
|
||||
<input v-model="form.title" type="text"
|
||||
class="w-full border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
:class="errors.title ? 'border-red-400' : 'border-gray-300'" />
|
||||
<p v-if="errors.title" class="text-red-500 text-xs mt-1">{{ errors.title }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">地點 <span class="text-red-400">*</span></label>
|
||||
<input v-model="form.location" type="text"
|
||||
class="w-full border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
:class="errors.location ? 'border-red-400' : 'border-gray-300'" />
|
||||
<p v-if="errors.location" class="text-red-500 text-xs mt-1">{{ errors.location }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">潛點</label>
|
||||
<input v-model="form.spot" type="text"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">地區 <span class="text-red-400">*</span></label>
|
||||
<select v-model="form.region"
|
||||
class="w-full border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
:class="errors.region ? 'border-red-400' : 'border-gray-300'">
|
||||
<option value="">請選擇</option>
|
||||
<option v-for="r in REGIONS" :key="r" :value="r">{{ r }}</option>
|
||||
</select>
|
||||
<p v-if="errors.region" class="text-red-500 text-xs mt-1">{{ errors.region }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">價格（NT$）<span class="text-red-400">*</span></label>
|
||||
<input v-model="form.price" type="number" min="0"
|
||||
class="w-full border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||
:class="errors.price ? 'border-red-400' : 'border-gray-300'" />
|
||||
<p v-if="errors.price" class="text-red-500 text-xs mt-1">{{ errors.price }}</p>
|
||||
</div>
|
||||
</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.tag" type="text" placeholder="例：初學者"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">徽章（逗號分隔）</label>
|
||||
<input v-model="form.badges" type="text" placeholder="例：PADI認證, 含裝備"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">課程說明</label>
|
||||
<textarea v-model="form.description" rows="4"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 resize-none" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-end pt-2">
|
||||
<RouterLink to="/coach/dashboard"
|
||||
class="px-5 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition">
|
||||
取消
|
||||
</RouterLink>
|
||||
<button type="submit" :disabled="saving"
|
||||
class="px-5 py-2 text-sm bg-gray-900 hover:bg-gray-700 text-white rounded-lg transition disabled:opacity-60">
|
||||
{{ saving ? '儲存中...' : (isEdit ? '更新課程' : '新增課程') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import coachApi from '../../api/coachAxios'
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const success = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const profile = ref(null)
|
||||
const form = ref({
|
||||
name: '', phone: '',
|
||||
business_name: '', description: '',
|
||||
certifications: '', dive_sites: '', services: '', facilities: '',
|
||||
contact_person: '', contact_phone: '', contact_email: '',
|
||||
address: '', business_hours: '',
|
||||
website: '', social_media: '',
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await coachApi.get('/provider/profile')
|
||||
const d = res.data.data
|
||||
profile.value = d
|
||||
const p = d.provider_profile || {}
|
||||
form.value = {
|
||||
name: d.name || '',
|
||||
phone: d.phone || '',
|
||||
business_name: p.business_name || '',
|
||||
description: p.description || '',
|
||||
certifications: p.certifications || '',
|
||||
dive_sites: p.dive_sites || '',
|
||||
services: p.services || '',
|
||||
facilities: p.facilities || '',
|
||||
contact_person: p.contact_person || '',
|
||||
contact_phone: p.contact_phone || '',
|
||||
contact_email: p.contact_email || '',
|
||||
address: p.address || '',
|
||||
business_hours: p.business_hours || '',
|
||||
website: p.website || '',
|
||||
social_media: p.social_media || '',
|
||||
}
|
||||
} catch {
|
||||
error.value = '無法載入個人資料'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
success.value = false
|
||||
error.value = ''
|
||||
try {
|
||||
await coachApi.put('/provider/profile', form.value)
|
||||
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="space-y-6">
|
||||
|
||||
<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 class="bg-white rounded-2xl shadow p-6 space-y-3">
|
||||
<h2 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3">帳號資訊</h2>
|
||||
<p class="text-sm text-gray-500">Email：<span class="text-gray-800">{{ profile?.email }}</span></p>
|
||||
<p class="text-sm text-gray-500">
|
||||
驗證狀態：
|
||||
<span :class="profile?.provider_profile?.is_verified ? 'text-green-600' : 'text-yellow-600'">
|
||||
{{ profile?.provider_profile?.is_verified ? '✅ 已驗證' : '⏳ 審核中' }}
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">評分：<span class="text-gray-800">{{ profile?.provider_profile?.rating ?? '-' }}</span></p>
|
||||
</div>
|
||||
|
||||
<!-- 可編輯表單 -->
|
||||
<div class="bg-white rounded-2xl shadow p-6 space-y-4">
|
||||
<h2 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3">基本資料</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<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 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">手機</label>
|
||||
<input v-model="form.phone" type="tel" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">工作室 / 教練名稱</label>
|
||||
<input v-model="form.business_name" type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">自我介紹</label>
|
||||
<textarea v-model="form.description" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 resize-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow p-6 space-y-4">
|
||||
<h2 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3">專業資訊</h2>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">認證（PADI / SSI 等）</label>
|
||||
<input v-model="form.certifications" type="text" placeholder="例：PADI OWSI, SSI Instructor" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">常駐潛點</label>
|
||||
<input v-model="form.dive_sites" type="text" placeholder="例：墾丁,小琉球,綠島" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">服務項目</label>
|
||||
<input v-model="form.services" type="text" placeholder="例：體驗潛水,初級課程,進階課程" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">設施</label>
|
||||
<input v-model="form.facilities" type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow p-6 space-y-4">
|
||||
<h2 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3">聯絡資訊</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">聯絡人</label>
|
||||
<input v-model="form.contact_person" type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">聯絡電話</label>
|
||||
<input v-model="form.contact_phone" type="tel" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">聯絡信箱</label>
|
||||
<input v-model="form.contact_email" type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</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 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">營業時間</label>
|
||||
<input v-model="form.business_hours" type="text" placeholder="例：週一至週五 09:00-18:00" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-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.website" type="url" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">社群媒體</label>
|
||||
<input v-model="form.social_media" type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" :disabled="saving"
|
||||
class="w-full bg-gray-900 hover:bg-gray-700 text-white font-semibold py-3 rounded-lg transition disabled:opacity-60">
|
||||
{{ saving ? '儲存中...' : '儲存變更' }}
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,145 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import coachApi from '../../api/coachAxios'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
phone: '',
|
||||
business_name: '',
|
||||
description: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
address: '',
|
||||
})
|
||||
|
||||
const error = ref('')
|
||||
const errors = ref({})
|
||||
const loading = ref(false)
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
errors.value = {}
|
||||
loading.value = true
|
||||
try {
|
||||
await coachApi.post('/provider/register', form.value)
|
||||
router.push('/coach/login?registered=1')
|
||||
} catch (e) {
|
||||
const data = e.response?.data
|
||||
error.value = data?.message || '註冊失敗，請稍後再試'
|
||||
errors.value = data?.errors || {}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="min-h-screen bg-gray-50 flex items-center justify-center px-4 py-12">
|
||||
<div class="bg-white rounded-2xl shadow-lg w-full max-w-lg p-8">
|
||||
|
||||
<div class="text-center mb-8">
|
||||
<p class="text-ocean-600 text-sm font-medium mb-1">CFDive 教練後台</p>
|
||||
<h1 class="text-2xl font-bold text-gray-800">申請成為教練</h1>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="bg-red-50 text-red-600 text-sm rounded-lg px-4 py-3 mb-6">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit" class="space-y-5">
|
||||
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2">帳號資訊</legend>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">姓名 <span class="text-red-400">*</span></label>
|
||||
<input v-model="form.name" type="text" required
|
||||
class="w-full border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
:class="errors.name ? 'border-red-400' : 'border-gray-300'" />
|
||||
<p v-if="errors.name" class="text-red-500 text-xs mt-1">{{ errors.name[0] }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">Email <span class="text-red-400">*</span></label>
|
||||
<input v-model="form.email" type="email" required
|
||||
class="w-full border rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400"
|
||||
:class="errors.email ? 'border-red-400' : 'border-gray-300'" />
|
||||
<p v-if="errors.email" class="text-red-500 text-xs mt-1">{{ errors.email[0] }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">密碼 <span class="text-red-400">*</span></label>
|
||||
<input v-model="form.password" type="password" required minlength="6"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">確認密碼 <span class="text-red-400">*</span></label>
|
||||
<input v-model="form.password_confirmation" type="password" required
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">手機號碼</label>
|
||||
<input v-model="form.phone" type="tel"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<hr class="border-gray-100" />
|
||||
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2">教練 / 業者資訊</legend>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">工作室 / 個人教練名稱</label>
|
||||
<input v-model="form.business_name" type="text" placeholder="例：藍海潛水工作室（選填）"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-600 mb-1">自我介紹</label>
|
||||
<textarea v-model="form.description" rows="3" placeholder="簡短介紹你的教學風格與專長..."
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400 resize-none" />
|
||||
</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.contact_phone" type="tel"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm 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.contact_email" type="email"
|
||||
class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400" />
|
||||
</div>
|
||||
</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 text-sm focus:outline-none focus:ring-2 focus:ring-ocean-400" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" :disabled="loading"
|
||||
class="w-full bg-ocean-700 hover:bg-ocean-600 text-white font-semibold py-3 rounded-lg transition disabled:opacity-60 mt-2">
|
||||
{{ loading ? '送出中...' : '申請教練帳號' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-sm text-gray-500 mt-6">
|
||||
已有帳號？
|
||||
<RouterLink to="/coach/login" class="text-ocean-600 hover:underline">返回登入</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user