zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

add price calculator and fix color of buy

Browse Source
This commit is contained in:
liangping 2023-06-15 15:59:31 +08:00
parent 78d2d8b36e
commit 4a98482eeb
2 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/modules/[chain]/index.vue
View File

@ -103,6 +103,25 @@ function updateState() {
function trustColor(v: string) {
return `text-${colorMap(v)}`
}
const quantity = ref(100)
const qty = computed({
get: () => {
return parseFloat(quantity.value.toFixed(6))
},
set: val => {
quantity.value = val
}
})
const amount = computed({
get: () => {
return quantity.value * ticker.value.converted_last.usd || 0
},
set: val => {
quantity.value = val / ticker.value.converted_last.usd || 0
}
})
</script>
<template>
@ -182,10 +201,42 @@ function trustColor(v: string) {
</div>
</div>
<a class="my-5 !text-white btn w-full" :class="store.trustColor" :href="ticker.trade_url"
target="_blank">
Buy {{ coinInfo.symbol || '' }}
</a>
<div class="flex">
<label class="btn btn-primary px-1 my-5 mr-2" for="calculator">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="4" y="2" width="16" height="20" rx="2"></rect> <line x1="8" x2="16" y1="6" y2="6"></line> <line x1="16" x2="16" y1="14" y2="18"></line> <path d="M16 10h.01"></path> <path d="M12 10h.01"></path> <path d="M8 10h.01"></path> <path d="M12 14h.01"></path> <path d="M8 14h.01"></path> <path d="M12 18h.01"></path> <path d="M8 18h.01"></path> </g></svg>
</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="calculator" class="modal-toggle" />
<div class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold">Price Calculator</h3>
<div class="flex flex-col w-full mt-5">
<div class="grid h-20 flex-grow card rounded-box place-items-center">
<div class="join w-full">
<label class="join-item btn">
<span class="uppercase">{{ coinInfo.symbol }}</span>
</label>
<input type="number" v-model="qty" min="0" placeholder="Input a number" class="input grow input-bordered join-item" />
</div>
</div>
<div class="divider">=</div>
<div class="grid h-20 flex-grow card rounded-box place-items-center">
<div class="join w-full">
<label class="join-item btn">
<span>USD</span>
</label>
<input type="number" v-model="amount" min="0" placeholder="Input amount" class="join-item grow input input-bordered" />
</div>
</div>
</div>
</div>
<label class="modal-backdrop" for="calculator">Close</label>
</div>
<a class="my-5 !text-white btn grow" :class="{'btn-success': store.trustColor === 'green', 'btn-warning': store.trustColor === 'yellow'}" :href="ticker.trade_url"
target="_blank">
Buy {{ coinInfo.symbol || '' }}
</a>
</div>
</div>
</div>

2
src/modules/[chain]/indexStore.ts
View File

@ -128,7 +128,7 @@ export const useIndexModule = defineStore('module-index', {
trustColor(): string {
if(!this.coinInfo?.tickers) return ""
const change = this.coinInfo?.tickers[this.tickerIndex]?.trust_score;
return `btn-${colorMap(change)}`;
return change;
},
pool() {