---
title: Bookwalker Event 組件
tags: Bookwalker, Event
description: View the slide with "Slide Mode".
---

# Bookwalker Event 組件

## 開發目的:
企劃活動使用率高

## 企劃目的:
增進月平均UU付款金額

## 安裝步驟
1. 依賴 Bootstrap3 ，以下代碼進行 CDN 引入

<!-- 引入 Bootstrap3 樣式 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2. 引入主程式 javascript 腳本

<!-- 引入 VUE 撰寫的主腳本 -->
<script src="https://eventtest.bookwalker.com.tw/my-app/dist/app.js"></script>

### 注意事項
1. 組件樣式，引入即可看到
2. 組件的功能必須在eventTest 和 event 機 才能使用，因為會有CSRF(跨域問題)
---
## 會員登入、註冊組件
### 基础用法
1. 將所需的位置，引入以下程式碼即可，例如以下範例

<!-- 會員登入、註冊組件  -->
<member :list="{'點數回饋':0,'VIP活動點數加倍':1,'我的活動進度':2,各館選購:3}"></member>
<!-- End 會員登入、註冊組件 -->


### 參數訊息
1. list:菜單名(非必填，如不填則只會顯示「登入/註冊」)
代表表頭的「登入/註冊」旁的菜單名
請傳遞 object 格式，故 list需加「:」 例如: :list
list 內容: 以下舉例

<member :list="{'活動方式':1,'查詢進度':2,'各館選購':3}"></member>

例如:以上範例「活動方式」 對應 section 第1個 錨點
所以說 當我點 '查詢進度' 會自動 滾動到 section 第2個 錨點
接下來 依此類推

2. scroll:滾動速度(非必填，預設 '1500ms')
>px: 1秒，行進的像素 (數字越大跳得越快)
s:幾毫秒內到達目標(數字越大越慢)

要傳參數可看以下範例

<!-- 以1秒所行進的1像素 -->
<member scroll="1px"></member>

### 注意
1. 「會員登入、註冊組件」已經集成 滾動監聽器、隱藏或顯示表頭、菜單滾動動畫，請勿重複使用滾動相關腳本，避免出錯!，例如: event 頁常用的 custom.js 中的 scroll 相關 JS請拔除!
2. 「會員登入、註冊組件」也已經集成 Css 樣式，固無需再加載Css樣式，並且使用`CSS scoped`方法，會在class名稱加上一個後綴屬性，可避免Css樣式衝突
---
## 參加活動組件
### 基础用法
1. 將所需的位置，引入以下程式碼即可，例如以下範例

<!-- 參加活動組件  -->
<participate-event event_id="event20200501"></participate-event>
<!-- End 參加活動組件 -->

### 參數訊息
1. event_id:活動名 (必填)
一般命名來說 event + 活動開始日期，例如以下:

<!-- 參加活動組件  -->
<participate-event event_id="event20200501"></participate-event>
<!-- End 參加活動組件 -->

---
## 活動進度組件
### 基础用法
1. 將所需的位置，引入以下程式碼即可，例如以下範例

<!-- 活動進度組件  -->
<activity-progress event_id="event20200601" start_day="2020-06-01 00:00:00"
end_day="2020-06-30 23:59:59" :simple="true"></activity-progress>
<!-- End 活動進度組件 -->

### 參數訊息
1. event_id:活動名(必填)
一般命名 event + 活動開始日期，如: event_id="event20200601"
2. start_day:活動開始日(必填)
測試階段，可將日期調前，進行測試
3. end_day:活動結束日(必填)
測試階段，可將日期調前，進行測試
4. simple:簡易模式(非必填，預設關閉)
開啟此模式，可以不用，引入「參加活動組件」，單獨使用此組件即可
以下範例

<!-- 活動進度組件  -->
<activity-progress event_id="event20200601" start_day="2020-06-01 00:00:00"
end_day="2020-06-30 23:59:59" :simple="true"></activity-progress>
<!-- End 活動進度組件 -->