Skip to content

Instantly share code, notes, and snippets.

@sounisi5011

sounisi5011/.block

Last active July 26, 2018 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sounisi5011/8f81c99f0e9f3aa80776d03254cfc8a8 to your computer and use it in GitHub Desktop.
Save sounisi5011/8f81c99f0e9f3aa80776d03254cfc8a8 to your computer and use it in GitHub Desktop.
Download ZIP
三井住友カードの分割払い金額を計算する
Raw
.block
# See https://bl.ocks.org/-/about
license: mit
Raw
README.md
Raw
index.html
<!doctype html>
<html lang=ja>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>三井住友カードの分割払い金額を計算する</title>
<link rel=preload href=https://unpkg.com/bignumber.js@7.2.1/bignumber.min.js as=script crossorigin=anonymous>
<link rel=preload href=https://unpkg.com/hyperapp@1.2.8/dist/hyperapp.js as=script crossorigin=anonymous>
<link rel=preload href=./main.js as=script>
<h1>三井住友カードの分割払い金額を計算する</h1>
<main id=main><p>JavaScriptに対応していません</main>
<footer>
<h2>Gist</h2>
<p><a href="https://gist.github.com/sounisi5011/8f81c99f0e9f3aa80776d03254cfc8a8">https://gist.github.com/sounisi5011/8f81c99f0e9f3aa80776d03254cfc8a8</a>
</footer>
<script src=https://unpkg.com/bignumber.js@7.2.1/bignumber.min.js integrity="sha512-Qi6WM4UfVbLI+3QGd0T9Z27IF/BdVH7J+QBbCJRV3EfGn2pmGxhNutQRe9JNqQTecOKQ2ONFi3AutKvcvIPkFg==" crossorigin=anonymous></script>
<script src=https://unpkg.com/hyperapp@1.2.8/dist/hyperapp.js integrity="sha512-Jez1rCBiip8OXnfMDGNPzhyPriwL56Em57dg4/Zd4WkBqhJQoqolksWjFkCpPXyuwrLMBzaymNniv3uMUMfePQ==" crossorigin=anonymous></script>
<script src=./main.js></script>
Raw
main.js
function main() {
const {h, app} = hyperapp;
const COMISSION_MAP = new Map;
COMISSION_MAP.set(3, new BigNumber('2.01'));
COMISSION_MAP.set(5, new BigNumber('3.35'));
COMISSION_MAP.set(6, new BigNumber('4.02'));
COMISSION_MAP.set(10, new BigNumber('6.70'));
COMISSION_MAP.set(12, new BigNumber('8.04'));
COMISSION_MAP.set(15, new BigNumber('10.05'));
COMISSION_MAP.set(18, new BigNumber('12.06'));
COMISSION_MAP.set(20, new BigNumber('13.40'));
COMISSION_MAP.set(24, new BigNumber('16.08'));
const state = {
usedPrice: 50000,
splitCount: 10,
comissionPer100yen: new BigNumber(0),
};
const actions = {
input: value => ({ usedPrice: parseInt(value, 10) }),
select: value => state => {
const count = Number(value);
const splitCount = COMISSION_MAP.has(count) ? count :
COMISSION_MAP.has(state.splitCount) ? state.splitCount :
[...COMISSION_MAP.keys()][0];
return {
splitCount: splitCount,
comissionPer100yen: COMISSION_MAP.get(splitCount),
};
},
};
const view = (state, actions) => {
const usedPrice = new BigNumber(state.usedPrice);
const comission = usedPrice.multipliedBy(state.comissionPer100yen).div(100);
const allPrice = usedPrice.plus(comission);
const splitPrice = allPrice.div(state.splitCount);
const splitTruncPrice = splitPrice.integerValue(BigNumber.ROUND_DOWN);
return (
h('div', {}, [
h('p', {}, [
h('label', {}, [
'利用代金：',
h('input', {
type: 'number',
oninput: event => actions.input(event.target.value),
oncreate: element => element.value = state.usedPrice,
}),
'円',
]),
]),
h('p', {}, [
h('label', {}, [
'支払回数：',
h('select', {
onchange: event => actions.select(event.target.value),
oncreate: element => actions.select(element.value),
}, (
[...COMISSION_MAP.keys()]
.map(splitCount => h('option', {
value: splitCount,
oncreate: element => element.selected = (splitCount === state.splitCount),
}, `${splitCount}回`))
)),
]),
]),
h('table', {}, [
h('tr', { key: '利用代金' }, [
h('th', { colspan: 2 }, '利用代金'),
h('td', {}, usedPrice.toString()),
]),
h('tr', { key: '分割払手数料' }, [
h('th', { colspan: 2 }, '分割払手数料'),
h('td', {}, comission.toString()),
]),
h('tr', { key: '支払総額' }, [
h('th', { colspan: 2 }, '支払総額'),
h('td', {}, allPrice.toString()),
]),
(
splitPrice.eq(splitTruncPrice) ?
/*
* 分割支払額が割り切れていた場合
*/
[
h('tr', { key: '分割支払額' }, [
h('th', { colspan: 2, key: 't' }, '分割支払額'),
h('td', { key: 'v' }, splitPrice.toString()),
]),
] :
/*
* 分割支払額が割り切れていなかった場合
*/
[
h('tr', { key: '分割支払額' }, [
h('th', { rowspan: 3, key: 't' }, '分割支払額'),
h('th', { key: 'st' }, '初回'),
h('td', { key: 'v' }, allPrice.minus(splitTruncPrice.multipliedBy(state.splitCount - 1)).toString()),
]),
h('tr', { key: '分割支払額2' }, [
h('th', {}, '初回以降'),
h('td', {}, splitTruncPrice.toString()),
]),
h('tr', { key: '分割支払額3' }, [
h('th', {}, '均等分割'),
h('td', {}, splitPrice.toString()),
]),
]
),
h('tr', { key: '分割支払額手数料' }, [
h('th', { colspan: 2 }, '分割支払額手数料'),
h('td', {}, comission.div(state.splitCount).toString()),
]),
]),
])
);
};
app(state, actions, view, document.getElementById('main'));
}
main();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment