モバイルアプリ風

Wijmoのコントロールを使用して、モバイル風なアプリケーションを作成します。このサンプルでは、次のシナリオを確認することができます。

  • 電子マネーのタブ

    • FlexGridを利用して月々の支出データを表示します
      • formatItemを利用して、モバイルサイズに合った列幅の調整と列ヘッダーに月データを切り替え用のボタンを追加しています
    • Code128で会員用のバーコードを表示しています
    • FlexChartで出費額の内訳を表示しています
  • ポイントのタブ

    • Codabarでポイントカード用のバーコードを表示しています
    • RadialGaugeで現在の累計ポイント数を表示しています
    • FlexChartで獲得ポイントの推移を表示しています
  • クーポンのタブ

    • MultiRowformatItemを利用して、セルのレイアウトを調整しています
    • QrCodeを利用してクーポン用のQRを表示しています

*表示されるバーコードおよびQRコードはダミーデータです。実際に利用することはできません。

import './styles.css'; import '@mescius/wijmo.cultures/wijmo.culture.ja'; import '@mescius/wijmo.styles/wijmo.css'; import * as wjCore from '@mescius/wijmo'; import * as wjNav from '@mescius/wijmo.nav'; import { Codabar, Code128, QrCode } from '@mescius/wijmo.barcode.common'; import { ShowText, RadialGauge } from '@mescius/wijmo.gauge'; import * as wjcGrid from '@mescius/wijmo.grid'; import * as input from '@mescius/wijmo.input'; import { history, monthArray, getChartData, getExpenseData, couponData, heartIcon } from './data.js'; import * as chart from '@mescius/wijmo.chart'; import { MultiRow } from '@mescius/wijmo.grid.multirow'; document.readyState === 'complete' ? init() : window.onload = init; function init() { new Codabar('#nw', { value: 'A1512-6893-987D', font: { fontSize: 12 }, }); new Code128('#barcode', { value: '9000 1234-w000-j123', }); let theTabPanel = new wjNav.TabPanel('#theTabPanel'); let host = theTabPanel.hostElement; let clsName = 'tabs-below'; wjCore.toggleClass(host, clsName, true); new RadialGauge('#pointGauge', { min: 0, max: 10000, value: 8000, startAngle: -270, sweepAngle: 360, showText: ShowText.Value, face: { thickness: 0.3, }, pointer: { thickness: 0.3, }, format: 'n0', getText: getTextCallback, }); function getTextCallback(gauge, part, value, text) { return `${text}pt`; } let theChart = new chart.FlexChart('#pointchart', { bindingX: 'month', series: [ { binding: '2022', }, { binding: 'sum', chartType: 'LineSymbols' }, ], axisY: { labels: false, }, dataLabel: { content: '{y}', }, tooltip: { content: '', }, itemsSource: getChartData(), }); //電子マネー let historyGird = new wjcGrid.FlexGrid('#history', { autoGenerateColumns: false, allowSorting: false, columns: [ { header: '2022年XX月 利用履歴', binding: 'amount', width: '*', align: 'center' }, ], headersVisibility: wjcGrid.HeadersVisibility.Column, selectionMode: wjcGrid.SelectionMode.None, formatItem: function (s, e) { if (e.panel == s.cells && e.col == 0) { let html = wjCore.format('<div class="item-header">{operate}</div>' + '<div class="item-detail1">' + '<div class="item-detail1-1">{date}</div>' + '<div class="item-detail1-2">{amount}</div></div>', s.rows[e.row].dataItem); e.cell.innerHTML = html; } if (e.panel == s.columnHeaders) { e.cell.innerHTML = '<div class=header>' + '<div id="h-left"><span class="wj-glyph-left" onclick="previousMonth()"></span></div>' + '<div >' + e.cell.innerHTML + '</div>' + '<div ><span class="wj-glyph-right" onclick="nextMonth()"></span></div></div>'; } }, }); let currentMonthIndex = monthArray.length - 1; let data = getExpenseData(); let sumExpense = () => { return data.filter((item) => item.month === monthArray[currentMonthIndex]) .map(function (data) { return data.amount; }) .reduce(function (sum = 0, cur) { return sum + cur; }); }; let setinnerText = () => { return '計:' + wjCore.Globalize.format(sumExpense(), 'C'); }; let expensChart = new chart.FlexPie('#expensechart', { bindingName: 'type', binding: 'amount', tooltip: { content: '', }, innerRadius: 0.6, dataLabel: { content: (ht) => { return `${ht.name} ${wjCore.Globalize.format(ht.value, 'c0')}`; }, }, innerText: setinnerText(), innerTextStyle: { fontWeight: 'bold', fontSize: '15px', }, legend: { position: 0, }, itemsSource: data.filter((item) => item.month === monthArray[currentMonthIndex]), }); historyGird.itemsSource = history.filter((item) => item.month === monthArray[currentMonthIndex]); historyGird.rows.defaultSize = 80; historyGird.columns[0].header = historyGird.columns[0].header.replace('XX月', monthArray[currentMonthIndex]); let monthExpense = document.getElementById('monthExpense'); monthExpense.textContent = monthExpense.textContent.replace('今月', monthArray[currentMonthIndex]); let previousMonth = () => { if (currentMonthIndex === 0) return; currentMonthIndex--; historyGird.itemsSource = history.filter((item) => item.month === monthArray[currentMonthIndex]); historyGird.columns[0].header = historyGird.columns[0].header.replace(monthArray[currentMonthIndex + 1], monthArray[currentMonthIndex]); monthExpense.textContent = monthExpense.textContent.replace(monthArray[currentMonthIndex + 1], monthArray[currentMonthIndex]); expensChart.itemsSource = data.filter((item) => item.month === monthArray[currentMonthIndex]); expensChart.innerText = setinnerText(); }; let nextMonth = () => { if (currentMonthIndex === monthArray.length - 1) return; currentMonthIndex++; historyGird.itemsSource = history.filter((item) => item.month === monthArray[currentMonthIndex]); historyGird.columns[0].header = historyGird.columns[0].header.replace(monthArray[currentMonthIndex - 1], monthArray[currentMonthIndex]); monthExpense.textContent = monthExpense.textContent.replace(monthArray[currentMonthIndex - 1], monthArray[currentMonthIndex]); expensChart.itemsSource = data.filter((item) => item.month === monthArray[currentMonthIndex]); expensChart.innerText = setinnerText(); }; window.previousMonth = previousMonth; window.nextMonth = nextMonth; document.getElementById('syleChangebtn').addEventListener('click', () => { let elm = document.getElementsByClassName('barcode-area')[0]; elm.classList.toggle('hide'); elm.classList.toggle('show'); }); //クーポンタブ let frmLogin = new input.Popup('#theDialog'); let qrCode = new QrCode('#barcode2', { value: 'https://en.wikipedia.org/wiki/QR_code' }); const multiRow = new MultiRow('#multiRow', { itemsSource: couponData(), headersVisibility: wjcGrid.HeadersVisibility.None, selectionMode: wjcGrid.SelectionMode.Cell, layoutDefinition: [ { cells: [ { binding: 'descriptionL', width: '*', cssClass: 'id', align: 'center' } ] }, { cells: [ { binding: 'descriptionR', width: '*', cssClass: 'id', align: 'center' } ] } ], formatItem: function (s, e) { if (e.panel == s.cells) { let icon = s.columns[e.col].binding === 'descriptionL' ? s.rows[e.row].dataItem.iconL : s.rows[e.row].dataItem.iconR; let text = s.columns[e.col].binding === 'descriptionL' ? s.rows[e.row].dataItem.descriptionL : s.rows[e.row].dataItem.descriptionR; var item = s.rows[e.row].dataItem; formatRatingCell(e.cell, icon, text); } } }); multiRow.rows.defaultSize = 140; multiRow.addEventListener(multiRow.hostElement, 'click', function (e) { var ht = multiRow.hitTest(e); if (ht.panel == multiRow.cells) { frmLogin.show(true, (sender) => { }); } }); function formatRatingCell(cell, icon, test) { let testArr = test.split(','); let html = '<div>' + heartIcon + '<div class="couponIcon">' + icon + '<hr><div class="couponText1">' + testArr[0] + '<div class="couponText2">' + testArr[1]; html += '</div></div></div><div>'; cell.innerHTML = html; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo mobile like</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name=”description” content=”Wijmoのコントロールを使用して、モバイル風なアプリケーションを作成します。” /> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="mobile"> <div class="display"> <div id="theTabPanel"> <div> <a><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-currency-yen tab-icon" viewBox="0 0 16 16"> <path d="M8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z" /> </svg> <div class="tabText">電子マネー</div> </a> <div class="digital-money"> <div class="card"> <div class="tile-content"> <div class="color-white balance"> <div> <p>残高</p> </div> <div class="digital-money-font">¥12,500</div> </div> <div class="barcode-area hide"> <div id="barcode"></div> </div> <div class="btn-area"> <button type="button" class="circle-btn" id="syleChangebtn"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="80" fill="currentColor" class="bi bi-arrow-repeat swicthIcon" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" /> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" /> </svg> </button> </div> </div> </div> <div class="history-area"> <div id="history"></div> <hr /> <b id="monthExpense">今月の出費</b> <div class="expensechartarea"> <div id="expensechart"></div> </div> </div> </div> </div> <div> <a><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-piggy-bank tab-icon" viewBox="0 0 16 16"> <path d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z" /> <path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z" /> </svg> <div class="tabText">ポイント</div> </a> <div> <div class="card"> <div class="tile-content"> <div class="content"> <p class="card-title">Wijmo member's card</p> <div id="nw"></div> </div> </div> </div> <div class="point-scroll"> <div class="gauge-area"> <div class="gauge-description">ブロンズステージ</div> <div class="gauge"> <div id="pointGauge"></div> </div> <div class="gauge-description2">あと、2000でシルバー</div> <hr /> <b class="pointDescription"> 獲得ポイント</b> <div class="chartarea"> <div id="pointchart"></div> </div> </div> </div> </div> </div> <div> <a><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-ticket tab-icon" viewBox="0 0 16 16"> <path d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5V6a.5.5 0 0 1-.5.5 1.5 1.5 0 0 0 0 3 .5.5 0 0 1 .5.5v1.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5V10a.5.5 0 0 1 .5-.5 1.5 1.5 0 1 0 0-3A.5.5 0 0 1 0 6V4.5ZM1.5 4a.5.5 0 0 0-.5.5v1.05a2.5 2.5 0 0 1 0 4.9v1.05a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.05a2.5 2.5 0 0 1 0-4.9V4.5a.5.5 0 0 0-.5-.5h-13Z" /> </svg> <div class="tabText">クーポン</div> </a> <div class="couponArea"> <b>利用可能なクーポン</b> <div id="multiRow"></div> <div id="theDialog"> <div id="barcode2"></div> <div>上記のQRコードを提示してください</div> </div> </div> </div> </div> </div> <div class="box2"></div> </div> <div> <p>このデモサイトではBootstrap Iconsを利用しています。</p> <p>Copyright (c) 2011-2024 The Bootstrap Authors</p> <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">Bootstrap Iconsのライセンス</a> </div> </body> </html>
const cartIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-cart-check couponIcon" viewBox="0 0 16 16"><path d="M11.354 6.354a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/><path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>'; const basketIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-basket couponIcon" viewBox="0 0 16 16"><path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9H2zM1 7v1h14V7H1zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5z"/></svg>'; const bookIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-book couponIcon" viewBox="0 0 16 16"><path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/></svg>'; const pointCardIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-piggy-bank couponIcon" viewBox="0 0 16 16"><path d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z"/><path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z"/></svg>'; const cupIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-cup-straw couponIcon" viewBox="0 0 16 16"><path d="M13.902.334a.5.5 0 0 1-.28.65l-2.254.902-.4 1.927c.376.095.715.215.972.367.228.135.56.396.56.82 0 .046-.004.09-.011.132l-.962 9.068a1.28 1.28 0 0 1-.524.93c-.488.34-1.494.87-3.01.87-1.516 0-2.522-.53-3.01-.87a1.28 1.28 0 0 1-.524-.93L3.51 5.132A.78.78 0 0 1 3.5 5c0-.424.332-.685.56-.82.262-.154.607-.276.99-.372C5.824 3.614 6.867 3.5 8 3.5c.712 0 1.389.045 1.985.127l.464-2.215a.5.5 0 0 1 .303-.356l2.5-1a.5.5 0 0 1 .65.278zM9.768 4.607A13.991 13.991 0 0 0 8 4.5c-1.076 0-2.033.11-2.707.278A3.284 3.284 0 0 0 4.645 5c.146.073.362.15.648.222C5.967 5.39 6.924 5.5 8 5.5c.571 0 1.109-.03 1.588-.085l.18-.808zm.292 1.756C9.445 6.45 8.742 6.5 8 6.5c-1.133 0-2.176-.114-2.95-.308a5.514 5.514 0 0 1-.435-.127l.838 8.03c.013.121.06.186.102.215.357.249 1.168.69 2.438.69 1.27 0 2.081-.441 2.438-.69.042-.029.09-.094.102-.215l.852-8.03a5.517 5.517 0 0 1-.435.127 8.88 8.88 0 0 1-.89.17zM4.467 4.884s.003.002.005.006l-.005-.006zm7.066 0-.005.006c.002-.004.005-.006.005-.006zM11.354 5a3.174 3.174 0 0 0-.604-.21l-.099.445.055-.013c.286-.072.502-.149.648-.222z"/></svg>'; const yenIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-currency-yen couponIcon" viewBox="0 0 16 16"><path d="M8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z"/></svg>'; export const heartIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart hartIcon" viewBox="0 0 16 16"><path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>'; export let point = [ { expired: '2023年3月末 ', point: 300 }, { expired: '2023年9月末 ', point: 600 }, { expired: '2024年3月末 ', point: 900 }, ]; export let monthArray = ['9月', '10月', '11月', '12月']; export let history = [ { operate: 'チャージ (入)', date: '2022/12/29', amount: '¥5000', month: '12月' }, { operate: '雑費(出)', date: '2022/12/22', amount: '¥-1500', month: '12月' }, { operate: '食費(出)', date: '2022/12/19', amount: '¥-900', month: '12月' }, { operate: '食費(出)', date: '2022/12/15', amount: '¥-2700', month: '12月' }, { operate: 'チャージ (入)', date: '2022/12/10', amount: '¥3000', month: '12月' }, { operate: '日用品(出)', date: '2022/12/05', amount: '¥-900', month: '12月' }, { operate: '雑費(出)', date: '2022/11/30', amount: '¥880', month: '11月' }, { operate: '食費(出)', date: '2022/11/15', amount: '¥4500', month: '11月' }, { operate: 'チャージ (入)', date: '2022/11/10', amount: '¥3000', month: '11月' }, { operate: '書籍(出)', date: '2022/11/05', amount: '¥-2700', month: '11月' }, { operate: '日用品(出)', date: '2022/10/27', amount: '¥-3000', month: '10月' }, { operate: 'チャージ (入)', date: '2022/10/10', amount: '¥3000', month: '10月' }, { operate: '雑費(出)', date: '2022/10/01', amount: '¥-1500', month: '10月' }, { operate: '書籍(出)', date: '2022/9/25', amount: '¥-900', month: '9月' }, { operate: 'チャージ (入)', date: '2022/10/15', amount: '¥4000', month: '9月' }, { operate: '日用品(出)', date: '2022/9/8', amount: '¥-2000', month: '9月' }, ]; export function getChartData() { return [ { month: '8月', 2022: 1500, sum: 0 }, { month: '9月', 2022: 500, sum: 2000 }, { month: '10月', 2022: 2000, sum: 4000 }, { month: '11月', 2022: 1000, sum: 5000 }, { month: '12月', 2022: 3000, sum: 8000 }, ]; } export function getExpenseData() { return [ { type: '雑費', amount: 1500, month: '12月' }, { type: '食費', amount: 3600, month: '12月' }, { type: '日用品', amount: 900, month: '12月' }, { type: '雑費', amount: 880, month: '11月' }, { type: '食費', amount: 4500, month: '11月' }, { type: '書籍', amount: 2700, month: '11月' }, { type: '日用品', amount: 3000, month: '10月' }, { type: '雑費', amount: 1500, month: '10月' }, { type: '書籍', amount: 900, month: '9月' }, { type: '日用品', amount: 2000, month: '9月' }, ]; } export function couponData() { return [ { descriptionL: 'お会計から,5%OFF', descriptionR: '食料品,10%OFF', iconL: cartIcon, iconR: cupIcon }, { descriptionL: '日用品,10%OFF', descriptionR: 'ポイント,5倍', iconL: basketIcon, iconR: pointCardIcon }, { descriptionL: '書籍,15%OFF', descriptionR: 'お会計から,500円OFF', iconL: bookIcon, iconR: yenIcon }, ]; }
body { font-family: sans-serif; font-size: 14px; margin: 50px 15px; } .mobile { height: 480px; width: 310px; margin: 0 auto 0; border: 1px solid #cfd8df; background-color: black; border-radius: 50px; } .display { margin-top: 35px; height: 83.5%; width: 91%; margin-left: 13px; border-radius: 40px; border: 1px solid #cfd8df; background-color: #fff; justify-content: center; display: flex; } .point-scroll { justify-content: center; display: flex; margin-top: 10%; height: 190px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .gauge-area { margin-top: -8.1%; } .point-scroll::-webkit-scrollbar, .history-area::-webkit-scrollbar, .couponArea::-webkit-scrollbar { display: none; } #pointGauge { width: 65%; height: 65%; margin-left: 18%; } .gauge-description { position: relative; top: 30%; font-size: 13px; text-align: center; color: #0085c7; } .gauge-description2 { position: relative; top: -33%; font-size: 11px; text-align: center; color: #0085c7; } table, td { border: 1px solid #333; border-collapse: collapse; border-color: lightgrey; } thead { background-color: #0085c7; color: #fff; } .card { display: flex; justify-content: center; } .tile-content { height: 120px; width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; background: linear-gradient(to right, #96c7eb, #b5d5eb); } .content { margin-left: 10%; } #nw { width: 90%; } .wj-gauge .wj-pointer { fill: #66a2cc; } .wj-gauge .wj-value { color: #66a2cc; font-size: 200%; } .wj-tabpanel.tabs-below>div { display: flex; flex-direction: column; align-items: stretch; } .wj-tabpanel.tabs-below .wj-tabheaders { order: 1; } .wj-tabpanel.tabs-below .wj-tabpanes { order: 0; } .wj-tabpanel.tabs-below .wj-tabheaders .wj-tabheader.wj-state-active:after { top: 0; bottom: unset; } #theTabPanel { height: 90%; margin-top: 5%; width: 90%; } .chartarea { margin-top: -10%; margin-left: -2%; } #pointchart.wj-flexchart { border: none; height: 200px; width: 280px; } .history-area { justify-content: center; margin-top: 10%; height: 190px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .tile .tile-container { border-bottom: 1px solid #e0e0e0; padding: 0.75rem 1rem; } .tile .tile-content2 { padding: 0.75rem 1rem; } .tile { width: 100%; background: #f2f2f2; border-radius: 10px; margin-top: 10%; margin-bottom: 5%; } .bold-font { font-weight: bold; } .row-text { margin-left: 23%; } .wj-gridline { display: none; } .card-title { font-size: 0.9rem; color: white; padding-left: 15px; } .digital-money { height: 90%; } .balance { padding-left: 14%; padding-top: 15%; display: flex; flex-direction: row; user-select: none; } .animation { animation: fadein 1s ease-out forwards; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } .wj-flexgrid, .wj-flexgrid .wj-cell { border: none; } .col-expired { padding-left: 20px; } .col-point { padding-right: 15px; } .color-white { color: white; } .digital-money-font { font-size: 2em; margin-left: 5%; } .item-header { font-weight: bold; font-size: 100%; text-align: left; } .item-detail1 { text-align: right; } .item-detail1-1 { margin-top: -9%; } .item-detail1-2 { margin-top: 10%; font-weight: bold; font-size: 140%; color: #0085c7; } .barcode-area { margin-left: 4%; margin-top: -22%; } .btn-area { display: flex; justify-content: flex-end; margin-top: -5px; font-size: larger; } .circle-btn { width: 2.5rem; height: 2.5rem; border-radius: 100%; background-color: white; border: 0.1px solid #0085c7; } .swicthIcon { margin-top: -88%; margin-left: -13%; } .wj-tabheader { width: 33%; } .hide { opacity: 0; visibility: hidden; transition: 0.8s; } .show { transition: 0.8s; opacity: 1; visibility: visible; } .circle-btn:active { background: #96c7eb; color: #fff; } .box2 { background-color: whitesmoke; margin-top: 3px; position: relative; left: 45%; width: 35px; height: 35px; border-radius: 50%; } #expensechart{ height: 230px; } #expensechart.wj-flexchart { border: none; } .expensechartarea { position: relative; top: -10%; } #pointchart .wj-data-label { font-size: 10px; } .wj-data-label { font-size: 12px; } #theTabPanel.wj-tabpanel>div>.wj-tabheaders>.wj-tabheader { padding: 8px 0px; font-size: smaller; } .couponArea { justify-content: center; margin-top: 10%; height: 310px; width: 100%; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .barcodePopup { position: relative; top: 200px } .wj-multirow .wj-row .wj-cell.id { border: 1px solid rgba(0, 0, 0, .2); border-radius: 5px; width: 120px !important; height: 130px !important; font-size: 12.5px; } .wj-content { border: none !important; } .couponIcon { margin-top: 10px; } .wj-cells .wj-cell.wj-state-selected { background: white !important; color: black !important; } #theDialog { display: flex; flex-direction: column; align-items: center; width: 280px; top: 150px !important; margin-right: 4%; } #theDialog .wj-barcode-qrcode { width: 180px; height: 172px; } .couponText {} .tabText { font-size: smaller; margin-top: -9px } .tab-icon{ margin-top: -3px; } .wj-tabheader{ height: 40px; } .wj-tabheaders{ margin-top: 3px; } .couponText1{ font-size: 11px; } .couponText2{ font-size:16px; font-weight: bold; } .couponIcon{ margin-top: -5px; } .hartIcon{ margin-left: 80px; } .pointDescription{ margin-left: 20px; } .wj-glyph-left{ padding-right: 10px; } .header{ display: flex; width: 100%; flex-direction: row; justify-content: space-between; } .h-center{ align-items: center; } .h-right{ align-items:end; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);