snsd0805/Credit-Card-System-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: complete repay page

Browse Source
This commit is contained in:
snsd0805 2023-06-12 19:40:21 +08:00
parent 887019ed5e
commit a508651199
Signed by: snsd0805
GPG Key ID: 569349933C77A854
5 changed files with 227 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ClientNav.vue
View File

@ -14,7 +14,8 @@ export default {
pay: 'panel-block',
credit: 'panel-block',
info: 'panel-block',
log: 'panel-block'
log: 'panel-block',
repay: 'panel-block'
}
}
}
@ -60,6 +61,17 @@ export default {
<p>掃描支付</p>
</template>
</RouterLink>
<RouterLink to="/client/repay" :class="this.navCSS['repay']">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
<template v-if="this.path == 'repay'">
<strong>還款</strong>
</template>
<template v-else>
<p>還款</p>
</template>
</RouterLink>
<RouterLink to="/client/log" :class="this.navCSS['log']">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>

6
src/router/index.js
View File

@ -13,6 +13,7 @@ import ShopPayQRcodeView from '../views/ShopPayQRcodeView.vue'
import ShopLogView from '../views/ShopLogView.vue'
import OrderView from '../views/OrderView.vue'
import ClientLogView from '../views/ClientLogView.vue'
import ClientRepayView from '../views/ClientRepayView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -87,6 +88,11 @@ const router = createRouter({
name: 'log',
component: ClientLogView
},
{
path: '/client/repay',
name: 'repay',
component: ClientRepayView
},
]
})

4
src/views/ClientLogView.vue
View File

@ -47,9 +47,9 @@ export default {
<div class="container">
<div class="columns">
<div class="column is-2">
<ClientNav path="shoplog"></ClientNav>
<ClientNav path="log"></ClientNav>
<template v-if="this.$cookies.get('isShop') == 'true'">
<ShopNav path="shoplog"></ShopNav>
<ShopNav path="log"></ShopNav>
</template>
</div>

40
src/views/ClientMainView.vue
View File

@ -70,16 +70,13 @@ export default {
<div class="column">
<div class="container">
<div class="block">
<PageTitle title="Set Credit Limit" subtitle="根據 SBT 信用紀錄設定額度"></PageTitle>
<PageTitle title="使用者選項" subtitle=""></PageTitle>
</div>
<div class="block">
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<RouterLink to="/client/info" class="tile is-child notification is-info">
<article>
<p class="title"><i class="fas fa-user"></i> 個人資料</p>
@ -92,6 +89,12 @@ export default {
<!-- <p class="subtitle">Top tile</p> -->
</article>
</RouterLink>
<RouterLink to="/client/repay" class="tile is-child notification is-info">
<article>
<p class="title"><i class="fas fa-hand-holding-usd"></i> 還款</p>
<!-- <p class="subtitle">Top tile</p> -->
</article>
</RouterLink>
<RouterLink to="/client/log" class="tile is-child notification is-info">
<article>
<p class="title"><i class="fas fa-history"></i> 借款紀錄</p>
@ -104,8 +107,20 @@ export default {
<!-- <p class="subtitle">Top tile</p> -->
</article>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<PageTitle title="店家選項" subtitle=""></PageTitle>
</div>
<template v-if="this.isShop">
<div class="block">
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<RouterLink to="/shop/pay" class="tile is-child notification is-info">
<article>
<p class="title"><i class="fas fa-cash-register"></i> 店家結帳</p>
@ -124,16 +139,12 @@ export default {
<!-- <p class="subtitle">Top tile</p> -->
</article>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -143,3 +154,4 @@ export default {
<SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false"
link="/signup/linksbt" btnName="繼續"></SuccessModal>
</template>

182
src/views/ClientRepayView.vue Normal file
View File

@ -0,0 +1,182 @@
<script>
import Web3 from 'web3';
import SBT from '@/assets/SBT.json'
import Bank from '@/assets/Bank.json'
import PageTitle from '../components/PageTitle.vue'
import WarningModal from '../components/WarningModal.vue'
import SuccessModal from '../components/SuccessModal.vue'
import ClientNav from '../components/ClientNav.vue'
import ShopNav from '../components/ShopNav.vue'
// To use Html5QrcodeScanner (more info below)
import { Html5QrcodeScanner } from "html5-qrcode";
export default {
components: { PageTitle, WarningModal, SuccessModal, ClientNav, ShopNav },
data() {
return {
SBTAddress: import.meta.env.VITE_SBT_ADDR,
BankAddress: import.meta.env.VITE_BANK_ADDR,
clientAddr: '',
web3: null,
token: null,
bank: null,
log: [],
warningModalStatus: false,
successModalStatus: false,
msg: '',
isWaiting: false,
products: {},
productCar: [],
orderId: '0'
}
},
async mounted() {
this.web3 = new Web3(window.ethereum)
if (this.$cookies.isKey('address')) {
this.clientAddr = this.$cookies.get('address')
} else {
console.log("Use default address")
this.clientAddr = import.meta.env.VITE_DEFAULT_SHOP
}
this.web3.eth.defaultAccount = this.clientAddr
this.token = new this.web3.eth.Contract(SBT, this.SBTAddress)
this.bank = new this.web3.eth.Contract(Bank, this.BankAddress)
var borrow = await this.token.getPastEvents("Borrow", { fromBlock: 0, toBlock: 'latest', filter: { client: this.clientAddr, bank: this.BankAddress } })
for (let i of borrow) {
let result = i.returnValues
let obj = {
bank: result['bank'],
shop: result['shop'],
id: result['id'],
amount: result['amount'],
repay: false
}
this.log.push(obj)
}
var repay = await this.token.getPastEvents("Repay", { fromBlock: 0, toBlock: 'latest', filter: { client: this.clientAddr, bank: this.BankAddress } })
for (let i of repay) {
let result = i.returnValues
for (let j of this.log) {
if ((result['bank'] == j.bank) && (result['id'] == j.id)) {
j.repay = true
}
}
}
console.log(this.log)
},
computed: {
amountWei() {
if (!this.web3) {
return 0
}
var ans = 0
for (let item of this.log) {
if (item.repay == false){
ans += parseInt(item['amount'])
}
}
return ans
},
amount() {
if (!this.web3) {
return 0
}
return this.web3.utils.fromWei(this.amountWei.toString())
}
},
methods: {
async repay() {
this.isWaiting = true
await this.bank.methods.repay().send({
from: this.clientAddr,
value: this.amountWei
})
try {
this.msg = "還款成功！"
this.successModalStatus = true
} catch (error) {
this.msg = "匯款失敗"
this.warningModalStatus = true
}
this.isWaiting = false
}
}
}
</script>
<template>
<section class="blog-posts">
<div class="container">
<div class="columns">
<div class="column is-2">
<ClientNav path="repay"></ClientNav>
<template v-if="this.$cookies.get('isShop') == 'true'">
<ShopNav path="repay"></ShopNav>
</template>
</div>
<div class="column">
<div class="container">
<div class="block">
<PageTitle title="還款" subtitle="向本銀行償還帳款"></PageTitle>
</div>
<div class="block">
<table class="table is-fullwidth">
<thead>
<tr>
<th>#</th>
<th>銀行帳款編號</th>
<th>商店</th>
<th>金額</th>
<th>詳細資訊</th>
</tr>
</thead>
<tbody>
<template v-for="(item, index) in log">
<template v-if="item.repay == false">
<tr>
<td>{{ index }}</td>
<td>#{{ item.id }}</td>
<td>{{ item.shop }}</td>
<td>{{ this.web3.utils.fromWei(item.amount) }} ETH</td>
<td>
<RouterLink :to="'/order/' + item.id" class="button is-info is-outlined">查詢
</RouterLink>
</td>
</tr>
</template>
</template>
<tr>
<td colspan="3"></td>
<td><strong>共計 {{ amount }} ETH</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<div class="column is-2 is-offset-5">
<template v-if="!isWaiting">
<button class="button is-info is-outlined is-large" @click="repay">還款</button>
</template>
<template v-else>
<button class="button is-info is-outlined is-large is-loading"></button>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus = false"></WarningModal>
<SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false"
:link="`/shop/pay/${this.orderId}`" btnName="繼續"></SuccessModal>
</template>