<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>課程成果 &#8211; 愛點網</title>
	<atom:link href="https://886point.com/showcase/course-display/feed/" rel="self" type="application/rss+xml" />
	<link>https://886point.com</link>
	<description></description>
	<lastBuildDate>Mon, 06 Apr 2026 10:27:41 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://886point.com/wp-content/uploads/2026/04/cropped-886point-logo-20260409-1323-01-32x32.webp</url>
	<title>課程成果 &#8211; 愛點網</title>
	<link>https://886point.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>food-demo</title>
		<link>https://886point.com/food-demo/</link>
					<comments>https://886point.com/food-demo/#respond</comments>
		
		<dc:creator><![CDATA[愛點網]]></dc:creator>
		<pubDate>Tue, 20 Feb 2018 08:19:15 +0000</pubDate>
				<category><![CDATA[課程成果]]></category>
		<guid isPermaLink="false">https://886point.com/?p=6791</guid>

					<description><![CDATA[<p> ... <a title="food-demo" class="read-more" href="https://886point.com/food-demo/" aria-label="Read more about food-demo">Read more</a></p>
<p>The post <a rel="nofollow" href="https://886point.com/food-demo/">food-demo</a> appeared first on <a rel="nofollow" href="https://886point.com">愛點網</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <style>
    .container { max-width: 100%; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; }
    h1 { text-align: center; color: #d35400; font-size: 24px;  padding-bottom: 10px; }
    .section { margin-bottom: 20px; }
    .section-title { font-weight: bold; margin-bottom: 10px; font-size: 16px; color: #555; }
    
    /* 選單樣式  */
    .menu-item { 
      display: flex !important; 
      justify-content: space-between !important; 
      align-items: center !important; 
      padding: 15px 0 !important; 
      border-bottom: 1px solid #eee !important; 
    }
    
    .menu-info { 
      width: calc(100% - 110px) !important; 
      padding-right: 10px !important; 
      box-sizing: border-box !important;
    }
    
    .menu-name { 
      font-weight: bold; 
      font-size: 16px; 
      margin-bottom: 5px; 
      line-height: 1.4; 
      word-break: keep-all; 
    }
    
    .menu-price { color: #e67e22; font-size: 14px; }
    .menu-note { font-size: 12px; color: #888; display: block; margin-top: 2px; }

    /* 數量按鈕區塊 (鐵壁防禦) */
    .qty-control { 
      width: 110px !important; 
      min-width: 110px !important; 
      max-width: 110px !important;
      display: flex !important; 
      justify-content: space-between !important; 
      align-items: center !important; 
    }
    
    .qty-btn { 
      width: 32px !important; 
      height: 32px !important; 
      min-width: 32px !important;
      background: #eee !important; 
      border: none !important; 
      border-radius: 5px !important; 
      font-size: 18px !important; 
      padding: 0 !important; 
      margin: 0 !important; 
      display: flex !important; 
      justify-content: center !important; 
      align-items: center !important; 
      color: #333 !important; 
    }
    
    .menu-item input[type="text"].qty-input { 
      width: 38px !important; 
      min-width: 38px !important;
      max-width: 38px !important;
      height: 32px !important; 
      text-align: center !important; 
      border: none !important; 
      background: transparent !important; 
      font-size: 16px !important; 
      padding: 0 !important; 
      margin: 0 !important; 
      box-shadow: none !important; 
    }
    
    /* 表單元件 */
    select, input[type="text"], input[type="tel"], input[type="date"], input[type="time"] { 
      width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; margin-bottom: 10px; 
    }
    .form-row { display: flex; gap: 10px; margin-bottom: 10px; }
    .form-row input { margin-bottom: 0 !important; }

    /* 外送區塊預設隱藏 */
    #delivery-section { display: none; background: #fff3cd; padding: 10px; border-radius: 5px; border: 1px solid #ffeeba; margin-top: 10px;}
    .delivery-alert { font-size: 13px; color: #856404; margin-bottom: 10px; }

    /* 底部結帳區 */
    .footer { position: sticky; bottom: 0; background: #fff; padding: 15px 0; border-top: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
    .total-price { font-size: 20px; font-weight: bold; color: #d35400; }
    .submit-btn { background: #d35400; color: #fff; border: none; padding: 10px 20px; border-radius: 20px; font-size: 16px; cursor: pointer; font-weight: bold; }
    .submit-btn:disabled { background: #ccc; }

    #loading { text-align: center; color: #888; padding: 20px; }
    #order-form-content { display: none; }
  </style>



<div class="container">
  <h1><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f33e.png" alt="🌾" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 走遊家行動攤車微點餐</h1>
  <div id="live-location-card" style="display:none; background: #e8f5e9; border: 2px solid #4caf50; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
    <div style="color: #2e7d32; font-weight: bold; font-size: 16px; margin-bottom: 8px;">
      <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3c3-200d-2642-fe0f.png" alt="🏃‍♂️" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 免預訂！攤車目前營業中：
    </div>
    <div id="live-location-text" style="font-size: 18px; color: #333; font-weight: bold; margin-bottom: 12px; line-height: 1.4;">
      </div>
    <a id="live-map-btn" href="#" target="_blank" style="display:none; background: #4caf50; color: #fff; padding: 8px 20px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0 auto;">
      <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 開啟導航，馬上過去買
    </a>
  </div>

  <div id="announcement-bar" style="background:#fff3cd; color:#856404; padding:10px; text-align:center; font-size:14px; display:none; border-radius:8px; margin-bottom:15px;"></div>
  
  <div id="loading"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4e1.png" alt="📡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 系統載入中，請稍候&#8230;</div>

  <div id="order-form-content">
    <div class="section">
      <div class="section-title"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f464.png" alt="👤" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 聯絡資訊</div>
      <input type="text" id="cust-name" placeholder="您的姓名 (必填)" required>
      <input type="tel" id="cust-phone" placeholder="您的電話 (必填)" required>
    </div>

    <div class="section">
      <div class="section-title"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6cd.png" alt="🛍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 選擇口味與數量</div>
      <div id="menu-container"></div>
    </div>

    <div class="section">
      <div class="section-title"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 選擇取貨場次 (或外送)</div>
      <select id="schedule-select">
        <option value="">&#8212; 請選擇取貨地點 &#8212;</option>
      </select>
      
      <div id="map-btn-container" style="margin-top:5px; margin-bottom:10px; display:none;">
        <a id="map-link" href="#" target="_blank" style="display:inline-block; background:#3498db; color:#fff; padding:8px 15px; border-radius:5px; text-decoration:none; font-size:14px;">
          <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 查看取貨地點地圖 / 導航
        </a>
      </div>
      
      <div id="delivery-section">
        <div class="delivery-alert"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2728.png" alt="✨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 讚！您已訂購滿 6 包，解鎖外送服務。需提前3天預約：</div>
        <select id="delivery-type" onchange="toggleDelivery()">
          <option value="pickup">我要現場自取</option>
          <option value="delivery">我要預約外送</option>
        </select>
        
        <div id="delivery-details" style="display:none; margin-top: 10px;">
          <div class="form-row">
            <input type="date" id="delivery-date" title="希望外送日期">
            <input type="time" id="delivery-time" title="希望外送時間">
          </div>
          <input type="text" id="delivery-address" placeholder="請輸入外送詳細地址">
        </div>
      </div>
    </div>

    <div class="section">
      <div class="section-title"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4dd.png" alt="📝" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 備註需求</div>
      <input type="text" id="order-note" placeholder="例如：特殊口味需求(現場自取)、花生加量等">
    </div>

    <div class="footer">
      <div>總計：<span class="total-price">$<span id="total-amount">0</span></span><br>
      <span style="font-size: 12px; color: #888;">共 <span id="total-qty">0</span> 包</span></div>
      <button class="submit-btn" id="submit-btn" onclick="submitOrder()">確認送出</button>
    </div>
    
    <div id="bulk-section" style="margin-top:40px; border-top:1px dashed #ccc; padding-top:20px; text-align:center; display:none;">
      <p id="bulk-text" style="font-size:14px; color:#666; margin-bottom:10px;"></p>
      <button onclick="contactBulk()" style="background:#555; color:#fff; border:none; padding:10px 20px; border-radius:25px; cursor:pointer;">
        私訊洽詢大宗/教學合作
      </button>
    </div>
  </div>
</div>



<script>
  // &#x1f447; 您的 Web App URL
  const API_URL = "https://script.google.com/macros/s/AKfycbwwYfrzEmvzKZx6xSEhObeqXXxT1g5QUI4xULCVJ1vm55TLr9fLGg1ekiYBDiWhk1emaQ/exec"; 
  const LIFF_ID = "2009663917-wKJJq6Ed"; 
  
  // &#x1f31f; 全域變數宣告
  let LINE_OA_ID = ""; 
  let menuData = [];
  let cart = {};
  let scheduleMap = {}; 
  let customerUserId = ""; // 客人的 LINE User ID

  // ==========================================
  // 1. 網頁載入時啟動的動作
  // ==========================================
  window.onload = function() {
    // 嘗試初始化 LIFF 並取得用戶資料
    try {
      liff.init({ liffId: LIFF_ID }).then(() => {
        console.log("LIFF 準備完成");
        
        // 確認是在 LINE 裡面，並且已經登入授權
        if (liff.isLoggedIn()) {
          
          // &#x1f31f; 1. 取得基本資料 (名稱、User ID)
          liff.getProfile().then(profile => {
            const userName = profile.displayName;
            customerUserId = profile.userId; //
            
            // 超貼心功能：自動把客人的 LINE 名稱填入姓名欄位！
            const nameInput = document.getElementById('cust-name');
            if (nameInput && !nameInput.value) {
              nameInput.value = userName; 
            }
            
            // 您也可以把 userId 存起來，等送出訂單時一起寫進 Google Sheets
            console.log("客人的 User ID 是:", userId);
          }).catch(err => console.error("取得 Profile 失敗", err));

          // &#x1f31f; 2. 取得 Email (前提是後台有開通 Email 權限)
          const idToken = liff.getDecodedIDToken();
          if (idToken && idToken.email) {
             console.log("客人的 Email 是:", idToken.email);
          }
        }
      }).catch(err => console.log("LIFF 尚未設定或不在 LINE 環境"));
    } catch(e) {}

    // 抓取 Google Sheets 資料
    fetch(API_URL + "?action=getInitialData")
      .then(res => res.json())
      .then(data => {
        if(data.status === "success") {
          menuData = data.data.menu;
          
          // 接住 GAS 傳過來的 OA ID
          if(data.data.oaId) LINE_OA_ID = data.data.oaId; 

          // 渲染公告
          if (data.data.config.SHOP_ANNOUNCEMENT) {
            const bar = document.getElementById('announcement-bar');
            bar.innerText = data.data.config.SHOP_ANNOUNCEMENT;
            bar.style.display = 'block';
          }

          // &#x1f31f; 渲染「即時營業位置」
          if (data.data.config.LIVE_LOCATION) {
            // 有填寫位置，顯示整塊卡片並塞入文字
            document.getElementById('live-location-text').innerText = data.data.config.LIVE_LOCATION;
            document.getElementById('live-location-card').style.display = 'block';

            // 檢查有沒有附上地圖網址
            const liveMapUrl = data.data.config.LIVE_MAP_URL;
            if (liveMapUrl && (liveMapUrl.includes('http') || liveMapUrl.includes('maps'))) {
              const liveMapBtn = document.getElementById('live-map-btn');
              liveMapBtn.href = liveMapUrl;
              liveMapBtn.style.display = 'inline-block'; // 顯示導航按鈕
            }
          }

          // 渲染大宗需求
          if (data.data.config.BULK_INFO) {
            document.getElementById('bulk-text').innerText = data.data.config.BULK_INFO;
            document.getElementById('bulk-section').style.display = 'block';
          }

          renderMenu(data.data.menu);
          renderSchedule(data.data.schedule);
          
          document.getElementById('loading').style.display = 'none';
          document.getElementById('order-form-content').style.display = 'block';
        } else {
          document.getElementById('loading').innerHTML = "載入失敗，請檢查 API 網址設定。";
        }
      })
      .catch(err => {
        document.getElementById('loading').innerHTML = "連線發生錯誤，請確認 GAS 是否已部署。";
      });
  };

  // 大宗需求跳轉函數
  function contactBulk() {
    if(!LINE_OA_ID) {
      alert("系統發生錯誤：無法取得官方帳號 ID，請稍後再試。");
      return;
    }
    const msg = encodeURIComponent("您好，我想詢問關於大宗訂購/教學合作的事宜：");
    window.location.href = `https://line.me/R/oaMessage/${LINE_OA_ID}/?${msg}`;
  }

  // ==========================================
  // 2. 渲染與邏輯運算區
  // ==========================================
  function renderMenu(menu) {
    const container = document.getElementById('menu-container');
    let html = '';
    menu.forEach(item => {
      cart[item.id] = 0;
      html += `
        <div class="menu-item">
          <div class="menu-info">
            <div class="menu-name">${item.name}</div>
            <div class="menu-price">$${item.price} <span class="menu-note">${item.note}</span></div>
          </div>
          <div class="qty-control">
            <button class="qty-btn" onclick="changeQty('${item.id}', -1)">-</button>
            <input type="text" class="qty-input" id="qty-${item.id}" value="0" readonly>
            <button class="qty-btn" onclick="changeQty('${item.id}', 1)">+</button>
          </div>
        </div>
      `;
    });
    container.innerHTML = html;
  }

  function renderSchedule(schedule) {
    const select = document.getElementById('schedule-select');
    const btnContainer = document.getElementById('map-btn-container');
    const mapLink = document.getElementById('map-link');
    
    // 清空現有選項
    select.innerHTML = '<option value="">-- 請選擇取貨地點 --</option>';
    scheduleMap = {};

    schedule.forEach((s, index) => {
      let option = document.createElement('option');
      option.value = index; // 用索引當 Value
      option.text = `${s.date} ${s.time} | ${s.location}`;
      select.appendChild(option);
      
      // 把地圖連結存進對照表
      scheduleMap[index] = s.mapUrl ? String(s.mapUrl).trim() : "";
    });

    // 定義更新地圖按鈕的動作
    const updateMapButton = (val) => {
      const url = scheduleMap[val];
      if (url && (url.includes('http') || url.includes('maps'))) {
        mapLink.href = url;
        btnContainer.style.display = 'block';
      } else {
        btnContainer.style.display = 'none';
      }
    };

    // 監聽選單變動
    select.onchange = function() {
      updateMapButton(this.value);
    };
  }

  function changeQty(id, delta) {
    let newQty = cart[id] + delta;
    if (newQty < 0) return;
    cart[id] = newQty;
    document.getElementById(`qty-${id}`).value = newQty;
    calculateTotal();
  }

  function calculateTotal() {
    let totalAmount = 0;
    let totalQty = 0;

    menuData.forEach(item => {
      let qty = cart[item.id];
      totalAmount += qty * item.price;
      totalQty += qty;
    });

    document.getElementById('total-amount').innerText = totalAmount;
    document.getElementById('total-qty').innerText = totalQty;

    const deliverySection = document.getElementById('delivery-section');
    if (totalQty >= 6) {
      deliverySection.style.display = 'block';
    } else {
      deliverySection.style.display = 'none';
      document.getElementById('delivery-type').value = 'pickup';
      toggleDelivery();
    }
  }

  function toggleDelivery() {
    const type = document.getElementById('delivery-type').value;
    const deliveryDetails = document.getElementById('delivery-details');
    const scheduleSelect = document.getElementById('schedule-select');

    if (type === 'delivery') {
      deliveryDetails.style.display = 'block';
      scheduleSelect.disabled = true;
    } else {
      deliveryDetails.style.display = 'none';
      scheduleSelect.disabled = false;
    }
  }

  // ==========================================
  // 3. 送出訂單核心動作
  // ==========================================
  function submitOrder() {
    const name = document.getElementById('cust-name').value;
    const phone = document.getElementById('cust-phone').value;
    const totalAmount = document.getElementById('total-amount').innerText;
    const totalQty = parseInt(document.getElementById('total-qty').innerText);
    const note = document.getElementById('order-note').value || "無";
    const deliveryType = document.getElementById('delivery-type')?.value || "pickup";
    
    // 判斷取貨或外送資訊
    let pickupInfo = "";
    if (deliveryType === "delivery") {
      const dDate = document.getElementById('delivery-date').value;
      const dTime = document.getElementById('delivery-time').value;
      const dAddress = document.getElementById('delivery-address').value;
      
      if (!dDate || !dTime || !dAddress) { alert("請填寫完整的外送日期、時間與地址！"); return; }
      pickupInfo = `[預約外送] ${dDate} ${dTime} | ${dAddress}`;
    } else {
      const selectElement = document.getElementById('schedule-select');
      // &#x1f31f; 修正「0」被誤判的問題
      if (selectElement.value === "") { alert("請選擇取貨場次！"); return; }
      
      const selectedText = selectElement.options[selectElement.selectedIndex].text;
      pickupInfo = "[現場自取] " + selectedText;
    }

    if(!name || !phone) { alert("請填寫姓名與電話喔！"); return; }
    if(totalQty === 0) { alert("您還沒有選擇米香喔！"); return; }

    let orderDetailsText = "";
    menuData.forEach(item => {
      if (cart[item.id] > 0) {
        orderDetailsText += `${item.name} x ${cart[item.id]}包\n`;
      }
    });

    const btn = document.getElementById('submit-btn');
    btn.innerText = "訂單送出中...";
    btn.disabled = true;

    const postData = {
      action: "submitOrder",
      name: name,
      phone: phone,
      pickupInfo: pickupInfo,
      orderDetails: orderDetailsText.trim(),
      totalAmount: totalAmount,
      note: note,
      userId: customerUserId
    };

    fetch(API_URL, {
      method: "POST",
      body: JSON.stringify(postData)
    }).catch(err => console.error("Sheets 寫入失敗", err));

    const lineMessage = `&#x1f33e;【走遊家行動攤車 新訂單】&#x1f33e;\n` +
                        `姓名：${name}\n` +
                        `電話：${phone}\n` +
                        `取貨方式：\n${pickupInfo}\n` +
                        `------------------\n` +
                        `${orderDetailsText.trim()}\n` +
                        `------------------\n` +
                        `總包數：${totalQty} 包\n` +
                        `總金額：$${totalAmount}\n` +
                        `備註：${note}`;

    if (typeof liff !== 'undefined' && liff.isInClient()) {
      liff.sendMessages([
        { type: "text", text: lineMessage }
      ]).then(() => {
        alert("訂單已傳送給店家！");
        liff.closeWindow(); 
      }).catch((err) => {
        alert("傳送 LINE 訊息失敗，但訂單已記錄至系統。");
        btn.innerText = "確認送出";
        btn.disabled = false;
      });
    } else {
      if(!LINE_OA_ID) {
        alert("系統發生錯誤：無法取得官方帳號 ID，請稍後再試。");
        btn.innerText = "確認送出";
        btn.disabled = false;
        return;
      }

      const encodedMessage = encodeURIComponent(lineMessage);
      const lineUrl = `https://line.me/R/oaMessage/${LINE_OA_ID}/?${encodedMessage}`;
      
      alert("訂單資料已準備完成！\n即將為您打開 LINE，請記得在對話框按下「傳送」發給我們喔！");
      window.location.href = lineUrl;
      
      setTimeout(() => {
        btn.innerText = "確認送出";
        btn.disabled = false;
      }, 3000);
    }
  }
</script>
<p>The post <a rel="nofollow" href="https://886point.com/food-demo/">food-demo</a> appeared first on <a rel="nofollow" href="https://886point.com">愛點網</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://886point.com/food-demo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
