小小商家一點靈的點餐功能

liff/
├── src/
│   ├── views/              # 頁面組件
│   │   ├── OrderFood.vue   # 點餐頁面
│   │   ├── MyOrders.vue    # 我的訂單
│   │   └── UserRegister.vue # 用戶註冊
│   ├── components/         # 共用組件
│   │   ├── LoadingSpinner.vue
│   │   ├── MessageAlert.vue
│   │   ├── UserProfileCard.vue
│   │   └── LiffDebugPanel.vue
│   ├── composables/        # 組合式函數
│   │   ├── useLiff.js      # LIFF 相關邏輯
│   │   └── useApi.js       # API 請求邏輯
│   ├── services/           # API 服務層
│   │   ├── api.js
│   │   ├── productService.js
│   │   ├── orderService.js
│   │   └── userService.js
│   ├── router/             # 路由設定
│   ├── utils/              # 工具函數
│   ├── config/             # 設定檔
│   ├── App.vue             # 主要組件
│   └── main.js             # 入口檔案
├── package.json
└── vite.config.js

<template>
  <div id="app">
    <!-- 全局加載指示器 -->
    <div v-if="isInitializing" class="global-loading">
      <div class="loading-spinner"></div>
      <p>正在初始化 LINE 服務...</p>
    </div>

    <!-- LIFF 初始化錯誤 -->
    <div v-else-if="error" class="global-error">
      <div class="error-icon">⚠️</div>
      <h3>服務初始化失敗</h3>
      <p>{{ error }}</p>
      <button @click="retryInit" class="retry-btn">重試</button>
    </div>

    <!-- 主要內容 -->
    <router-view v-else />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useLiff } from './composables/useLiff.js'

const {
  initializeLiff,
  isInitializing,
  error,
  isReady
} = useLiff()

const retryInit = async () => {
  try {
    await initializeLiff()
  } catch (err) {
    console.error('重試初始化失敗：', err)
  }
}

onMounted(async () => {
  await initializeLiff()
})
</script>

import { reactive, computed, readonly } from 'vue'
import { liff } from '@line/liff'
import { isDev, getLiffId } from '../config'

const liffState = reactive({
    isReady: false,
    isLoggedIn: false,
    profile: null,
    context: null,
    error: null,
    isInitializing: false
})

const initializeLiff = async () => {
    if (liffState.isInitializing || liffState.isReady) {
        return liffState
    }

    liffState.isInitializing = true
    liffState.error = null

    try {
        if (isDev()) {
            // 開發模式：使用 Mock 資料
            const mockProfile = {
                userId: 'U1234567890abcdef',
                displayName: '測試用戶🎭',
                pictureUrl: 'https://profile.line-scdn.net/...',
            }
            liffState.isReady = true
            liffState.isLoggedIn = true
            liffState.profile = mockProfile
            return liffState
        }

        // 生產模式：使用真實 LIFF
        await liff.init({ liffId: getLiffId() })
        
        const context = liff.getContext()
        const isLoggedIn = liff.isLoggedIn()

        liffState.isReady = true
        liffState.context = context
        liffState.isLoggedIn = isLoggedIn

        if (isLoggedIn) {
            const userProfile = await liff.getProfile()
            liffState.profile = userProfile
        }

    } catch (error) {
        let errorMessage = 'LINE 服務初始化失敗'
        if (error.code === 'INVALID_CONFIG') {
            errorMessage = 'LIFF ID 不正確，請檢查設定'
        }
        liffState.error = errorMessage + '，請重新整理頁面'
        throw error
    } finally {
        liffState.isInitializing = false
    }

    return liffState
}

export const useLiff = () => {
    return {
        liffState: readonly(liffState),
        isReady: computed(() => liffState.isReady),
        isLoggedIn: computed(() => liffState.isLoggedIn),
        profile: computed(() => liffState.profile),
        initializeLiff,
        getUserId: () => liffState.profile?.userId,
    }
}

import { createRouter, createWebHistory } from 'vue-router'
import UserRegister from '../views/UserRegister.vue'
import OrderFood from '../views/OrderFood.vue'
import MyOrders from '../views/MyOrders.vue'
import { validateUserForNavigation, UserValidator } from '../utils/userValidator.js'
import NProgress from 'nprogress'

const routes = [
    { path: '/', redirect: { name: 'OrderFood' } },
    { path: '/register', name: 'UserRegister', component: UserRegister, meta: { title: '用戶註冊' } },
    { path: '/order', name: 'OrderFood', component: OrderFood, meta: { title: '線上點餐' } },
    { path: '/my-orders', name: 'MyOrders', component: MyOrders, meta: { title: '我的訂單' } }
]

const router = createRouter({
    history: createWebHistory('/liff/'),
    routes
})

router.beforeEach(async (to, from, next) => {
    NProgress.start()
    try {
        const user_line_uid = await UserValidator.getUserIdFromLiff(liff)
        const validation = await validateUserForNavigation(user_line_uid, to.name, to)

        if (validation.shouldRedirect) {
            return next({ name: validation.redirectTo, query: validation.query })
        }

        if (to.meta.title) {
            document.title = "小小商家一點靈 | " + to.meta.title
        }

        next()
    } catch (error) {
        if (to.name !== 'UserRegister') {
            return next({ name: 'UserRegister' })
        }
        next()
    }
})

router.afterEach(() => {
    NProgress.done()
})

export default router

import { API_BASE_URL } from '../config'

class ApiService {
    constructor() {
        this.baseURL = API_BASE_URL
    }

    async request(endpoint, options = {}) {
        const url = `${this.baseURL}${endpoint}`
        
        try {
            const response = await fetch(url, {
                headers: {
                    'Content-Type': 'application/json',
                    ...options.headers,
                },
                ...options,
            })

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`)
            }

            return await response.json()
        } catch (error) {
            console.error('API request failed:', error)
            throw error
        }
    }

    get(endpoint) {
        return this.request(endpoint, { method: 'GET' })
    }

    post(endpoint, data) {
        return this.request(endpoint, {
            method: 'POST',
            body: JSON.stringify(data),
        })
    }
}

export default new ApiService()

import api from './api'

export const productService = {
    getAllProducts() {
        return api.get('/products')
    },

    getProductsByCategory(category) {
        return api.get(`/products?category=${category}`)
    },

    searchProducts(keyword) {
        return api.get(`/products/search?q=${keyword}`)
    }
}

<template>
    <div class="order-food-container">
        <!-- 頂部標題區域 -->
        <header class="header">
            <button @click="goToOrders" class="orders-btn">
                <span>📝</span>
                <span>我的訂單</span>
            </button>
            <h1>🍔 線上點餐</h1>
            <div class="cart-summary" @click="showCart = true">
                <span>🛒</span>
                <span v-if="cartItemCount > 0">{{ cartItemCount }}</span>
                <span>NT$ {{ cartTotal }}</span>
            </div>
        </header>

        <!-- 搜尋欄 -->
        <div class="search-section">
            <input v-model="searchKeyword" type="text" 
                   placeholder="搜尋商品..." 
                   @input="handleSearch">
        </div>

        <!-- 分類篩選 -->
        <div class="category-section">
            <button v-for="category in categories" :key="category"
                    :class="['category-tab', { active: selectedCategory === category }]"
                    @click="selectCategory(category)">
                {{ category }}
            </button>
        </div>

        <!-- 商品列表 -->
        <div class="products-grid">
            <div v-for="product in filteredProducts" :key="product.name" 
                 class="product-card">
                <div class="product-info">
                    <h3>{{ product.name }}</h3>
                    <p>{{ product.description }}</p>
                    <span class="product-price">NT$ {{ product.price }}</span>
                    <div class="quantity-controls">
                        <button @click="decreaseQuantity(product)">-</button>
                        <span>{{ getProductQuantity(product) }}</span>
                        <button @click="increaseQuantity(product)">+</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 購物車彈窗 -->
        <div v-if="showCart" class="cart-modal">
            <h2>🛒 購物車</h2>
            <div v-for="item in cartItems" :key="item.product.name">
                <span>{{ item.product.name }}</span>
                <span>x{{ item.quantity }}</span>
                <span>NT$ {{ item.product.price * item.quantity }}</span>
            </div>
            <button @click="submitOrder">送出訂單</button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { productService } from '../services/productService'
import { orderService } from '../services/orderService'
import { useLiff } from '../composables/useLiff'

const router = useRouter()
const { profile } = useLiff()

const products = ref([])
const cartItems = ref([])
const searchKeyword = ref('')
const selectedCategory = ref('全部')
const showCart = ref(false)

// 計算屬性
const filteredProducts = computed(() => {
    let result = products.value

    if (selectedCategory.value !== '全部') {
        result = result.filter(p => p.category === selectedCategory.value)
    }

    if (searchKeyword.value) {
        result = result.filter(p => 
            p.name.includes(searchKeyword.value)
        )
    }

    return result
})

const cartItemCount = computed(() => {
    return cartItems.value.reduce((sum, item) => sum + item.quantity, 0)
})

const cartTotal = computed(() => {
    return cartItems.value.reduce((sum, item) => 
        sum + (item.product.price * item.quantity), 0
    )
})

// 方法
const loadProducts = async () => {
    try {
        const data = await productService.getAllProducts()
        products.value = data
    } catch (error) {
        console.error('載入商品失敗：', error)
    }
}

const increaseQuantity = (product) => {
    const item = cartItems.value.find(i => i.product.name === product.name)
    if (item) {
        item.quantity++
    } else {
        cartItems.value.push({ product, quantity: 1 })
    }
}

const decreaseQuantity = (product) => {
    const item = cartItems.value.find(i => i.product.name === product.name)
    if (item) {
        item.quantity--
        if (item.quantity === 0) {
            cartItems.value = cartItems.value.filter(i => i !== item)
        }
    }
}

const submitOrder = async () => {
    try {
        const orderData = {
            user_line_uid: profile.value.userId,
            items: cartItems.value.map(item => ({
                product_name: item.product.name,
                quantity: item.quantity,
                price: item.product.price
            })),
            total: cartTotal.value
        }

        await orderService.createOrder(orderData)
        alert('訂單送出成功！')
        cartItems.value = []
        showCart.value = false
    } catch (error) {
        console.error('送出訂單失敗：', error)
        alert('訂單送出失敗，請稍後再試')
    }
}

onMounted(() => {
    loadProducts()
})
</script>

<template>
    <div class="my-orders-container">
        <header>
            <button @click="goBack">← 返回</button>
            <h1>📝 我的訂單</h1>
        </header>

        <div v-if="loading">載入中...</div>

        <div v-else-if="orders.length === 0">
            <p>目前沒有訂單</p>
        </div>

        <div v-else class="orders-list">
            <div v-for="order in orders" :key="order.id" class="order-card">
                <div class="order-header">
                    <span>訂單編號：{{ order.id }}</span>
                    <span :class="`status-${order.status}`">{{ order.status }}</span>
                </div>
                <div class="order-items">
                    <div v-for="item in order.items" :key="item.id">
                        {{ item.product_name }} x{{ item.quantity }}
                    </div>
                </div>
                <div class="order-footer">
                    <span>總金額：NT$ {{ order.total }}</span>
                    <span>{{ formatDate(order.created_at) }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { orderService } from '../services/orderService'
import { useLiff } from '../composables/useLiff'

const router = useRouter()
const { profile } = useLiff()

const orders = ref([])
const loading = ref(true)

const loadOrders = async () => {
    try {
        loading.value = true
        const data = await orderService.getUserOrders(profile.value.userId)
        orders.value = data
    } catch (error) {
        console.error('載入訂單失敗：', error)
    } finally {
        loading.value = false
    }
}

const formatDate = (dateString) => {
    const date = new Date(dateString)
    return date.toLocaleString('zh-TW')
}

const goBack = () => {
    router.push({ name: 'OrderFood' })
}

onMounted(() => {
    loadOrders()
})
</script>

<template>
    <div class="loading-container">
        <div class="spinner"></div>
        <p v-if="message">{{ message }}</p>
    </div>
</template>

<script setup>
defineProps({
    message: {
        type: String,
        default: ''
    }
})
</script>

<style scoped>
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>

<template>
    <div v-if="show" :class="['alert', `alert-${type}`]">
        <span>{{ message }}</span>
        <button @click="$emit('close')">✕</button>
    </div>
</template>

<script setup>
defineProps({
    show: Boolean,
    type: {
        type: String,
        default: 'info'
    },
    message: String
})

defineEmits(['close'])
</script>

<LoadingSpinner message="載入中..." />
<MessageAlert :show="showAlert" type="success" message="操作成功" @close="showAlert = false" />

<template>
    <div class="register-container">
        <h1>用戶註冊</h1>
        
        <UserProfileCard :profile="profile" />

        <form @submit.prevent="handleRegister">
            <input v-model="form.name" type="text" placeholder="姓名" required>
            <input v-model="form.phone" type="tel" placeholder="手機號碼" required>
            <button type="submit" :disabled="submitting">
                {{ submitting ? '註冊中...' : '完成註冊' }}
            </button>
        </form>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useLiff } from '../composables/useLiff'
import { userService } from '../services/userService'
import UserProfileCard from '../components/UserProfileCard.vue'

const router = useRouter()
const { profile } = useLiff()

const form = ref({
    name: '',
    phone: ''
})
const submitting = ref(false)

const handleRegister = async () => {
    try {
        submitting.value = true
        
        await userService.registerUser({
            line_uid: profile.value.userId,
            name: form.value.name,
            phone: form.value.phone
        })

        alert('註冊成功！')
        router.push({ name: 'OrderFood' })
    } catch (error) {
        console.error('註冊失敗：', error)
        alert('註冊失敗，請稍後再試')
    } finally {
        submitting.value = false
    }
}

onMounted(() => {
    if (profile.value) {
        form.value.name = profile.value.displayName
    }
})
</script>