Widget 產品說明

產品目標

產品功能

data-props參數說明
使用方法

產品目標

本產品以資訊圖卡的方式呈現各個運動賽事的資訊，並以套件方式供用戶使用。用戶僅需串接套件即可將資訊圖卡引入自家網站使用，不須額外透過前後端工程師與設計師開發和設計介面。目前涵蓋的運動賽事為板球 (Cricket)、足球(Soccer)，提供的賽事資訊為比分卡 (Scoreboard)。

產品功能

比分卡

比分卡 UI 版型種類
- 板球UI 版型1、板球UI版型2、足球UI版型
  - 板球：
  - 足球：
  - 其他球種：
Cricket Exchange：

Cricket Exchange UI 版型

data-props 參數說明

依 data-props 的 type 值，data-props 參數作用略有不同：

Type 值為 scoreboard、soccer、others 時：

Key	Type	Attributes	Value	Description
type	string	required	scoreboard	widget 資訊圖卡的種類
預設為板球比分卡。
板球比分卡：“scoreboard”
足球比分卡： “soccer”
其他球種比分卡：“others”
event_type_id	string	required	4	球種 id，預設為 4:
4 為 Cricket，
1 為 Soccer，

Type 值為 cricketExchange 時：

Key	Type	Attributes	Value	Description
type	string	required	cricketExchange	顯示板球Exchange
event_type_id	string	required	4	球種id，目前只接受板球(4)
count	string	required	6	設定要顯示的比分卡張數，預設為6
width	string	optional	90px	設定比分卡的寬度，預設為90px
secondary_background_color	string	optional	#2B2B2B	1. 功能為調整圖卡背景色。

可輸入顏色名稱、三原色光(RGB)模式、十六進位(HEX)色碼。
如不調整顏色,則可直接不添加該key 值,顏色會以 #2B2B2B 計算。 | | text_primary_color | string | optional | #FFFFFF | 1. 功能為調整文字顏色。
文字包含主隊隊名、比賽時間。
可輸入顏色名稱、三原色光(RGB)模式、十六進位(HEX)色碼。 4. 如不調整顏色,則可直接不添加該 key 值,顏色會以 #FFFFFF 計算。 | | text_secondary_color | string | optional | #999999 | 1. 功能為調整文字顏色。
文字包含聯賽名稱、客隊隊名。
可輸入顏色名稱、三原色光(RGB)模式、十六進位(HEX)色碼。
如不調整顏色,則可直接不添加該 key 值,顏色會以 #999999計算。 | | border_color | string | optional | #4C9EEA | 1. 功能為調整邊框顏色。
可輸入顏色名稱、三原色光(RGB)模式、十六進位(HEX)色碼。
如不調整顏色,則可直接不添加該 key 值,顏色會以 #999999計算。 | | lang | string | optional | en | 更改語言別,目前可選擇 'en' / 'zh' / 'th' / 'vi' / 'hi’ 等。 | | team_logo_size | string | optional | 36px | 更改隊伍隊徽大小，預設值為 36px。 | | text_ratio | string | optional | 1 | 改變整體比分卡字體大小的倍率，預設值為 1 倍，可接受小數位 ( 例：1.25 )。 | | box_shadow | string | optional | | 調整比分卡的陰影 | | backdrop_filter | string | optional | | 調整比分卡背景區域的視覺效果(例如：模糊、顏色偏移等)，比方卡背景顏色須為透明或部分透明才有作用 | | outside_border_radius | string | optional | 4px | 調整比分卡外框圓角 | | back_color | string | optional | #96DCF4 | 調整 back 區塊的底色 | | lay_color | string | optional | #F1A1BD | 調整 lay 區塊的底色 | | font_family | string | optional | Avenir Next | 調整比分卡的字型 |

使用方法

請將下方兩個文檔創建置於同一目錄下

demo.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			#scorecard {
				display: flex;
				gap: 10px;
				/* 調整比分卡之間的間隔 */
			}
		</style>
	</head>
	<body>
		<!-- 渲染比分卡组件的容器 -->
		<div id="scorecard"></div>
		<script src="scorecard-widget.js"></script>
	</body>
</html>

scorecard-widget.js

// 存儲已加載的腳本 URL
const loadedScripts = [];
const widgetContainers = [];

// 比分卡 data-props 參數
const widgetDataProps = {
  type: 'scoreboard',
  // 變更比分卡類型 scoreboard:板球 soccer:足球 others:其他球種
  // cricketExchange:板球Exchange
  event_type_id: '4', // 變更球種資料，預設為4:板球
  count: '6', // 要顯示的比分卡張數
  width: '',
  secondary_background_color: '',
  text_primary_color: '',
  text_secondary_color: '',
  secondary_color: '',
  border_color: '',
  quick_link_border_color: '',
  lang: '',
  team_logo_size: '',
  text_ratio: '',
	box_shadow: '',
	backdrop_filter: '',
  outside_border_radius: '',
  inside_border_radius: '',
  status_color: '',
	odds_width: '',
	odds_gap: '',
	team_logo_gap: '',
	top_row_padding: '',
	font_family: '',
};

// 通過 API 獲取 eids
async function fetchEidsAndOddsFromAPI() {
  try {
    let url = `https://quote-cdn.uni247.xyz/api/quote/vsb/overall-matches/light/v1/?event_type_id=${widgetDataProps.event_type_id || 4}&count=${widgetDataProps.count || 6}`;
    if (widgetDataProps.type === 'cricketExchange') {
      url = `${url.split('&')[0]}&market_type=match_odds&${url.split('&')[1]}`;
    }
    const response = await fetch(
      url,
      {
        method: 'GET',
        headers: {
          // 添加自定義標頭
          Authorization: 'bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiODg1YWI5NDQtNzhmMS00NmZkLTgzNTItNDc1MTJlM2VhOTY3IiwicGxheWVyX2lkIjoiaW5kaWFfMy4wX2Zvcl9kaXNwbGF5IiwibWVyY2hhbnRfY29kZSI6ImJhY2tvZmZpY2UtZDllMzIiLCJpc3N1ZWRfYXQiOiIyMDIyLTEwLTI4VDA4OjA5OjUzLjU0ODE0ODcyNloiLCJleHBpcmVzX2F0IjoiMjEyMi0xMC0yOFQwMDowMDowMC4wMDAwMDE2ODdaIn0.WEL6t_UEf8KglL-p_OLQe5xsHhDgaDelQMYZniCkcGk',
          // 適當設置其他標頭
          'Content-Type': 'application/json',
        },
      },
    );

    const data = await response.json();
    return data.data.map((d) => d.event_id);
  } catch (error) {
    console.error('Error fetching eids:', error);
    return null;
  }
}

// 獲取 widget 腳本
async function loadWidgetScript() {
  if (!loadedScripts.includes('widget')) {
    const script = document.createElement('script');
    script.src = '<https://storage.googleapis.com/oddsbeta-web-stage/widgetsV2/main.js>';
    script.async = true;
    document.body.appendChild(script);
    loadedScripts.push('widget');
    return new Promise((resolve) => {
      script.onload = resolve;
    });
  }
  return Promise.resolve();
}

// 創建小部件並將 eids 應用於它
async function createWidgets() {
  // 取 eids
  const eids = await fetchEidsAndOddsFromAPI();
  if (!eids.length) {
    console.error('Failed to fetch eids.');
    return;
  }
  // 創建比分卡
  eids.forEach(async (eid) => {
    const widgetContainer = document.createElement('div');
    widgetContainer.className = 'himalaya-dashboard';
    widgetContainer.setAttribute(
      'data-props',
      JSON.stringify({ eid, ...widgetDataProps }),
    );

    // 使用 eid 變數，需要您自行加入點擊跳轉事件，點擊後跳轉至#/markets/cricket/eid
    widgetContainer.addEventListener('click', () => {
      
    });

    document.getElementById('scorecard').appendChild(widgetContainer);
    widgetContainers.push(widgetContainer);
  });
  // 引入比分卡 widget
  await loadWidgetScript();
}

// 在用戶嘗試離開頁面之前執行清理工作
window.addEventListener('beforeunload', () => {
  // 移除小部件容器
  widgetContainers.forEach((container) => container.remove());

  // 移除小部件腳本元素
  loadedScripts.forEach((scriptName) => {
    const scriptElement = document.querySelector(`script[src*="${scriptName}"]`);
    if (scriptElement) {
      document.body.removeChild(scriptElement);
    }
  });
});

// 執行創建小部件的函數
createWidgets();