feat: client main page
This commit is contained in:
parent
4ea494cdff
commit
f907dd5adb
GPG Key ID:
569349933C77A854
@ -39,6 +39,18 @@ hr {
|
|||||||
background: #060606;
|
background: #060606;
|
||||||
color: white;
|
color: white;
|
||||||
} */
|
} */
|
||||||
|
.panel {
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-heading {
|
||||||
|
background-color: #5B5B5B;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-block {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
.box.is-fullwidth h1.title.is-4{
|
.box.is-fullwidth h1.title.is-4{
|
||||||
color: #060606;
|
color: #060606;
|
||||||
|
|||||||
74
src/components/ClientNav.vue
Normal file
74
src/components/ClientNav.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ClientNav',
|
||||||
|
props: ['path'],
|
||||||
|
mounted () {
|
||||||
|
console.log(this.path)
|
||||||
|
this.navCSS[this.path] += ' is-active'
|
||||||
|
console.log(this.navCSS)
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
navCSS: {
|
||||||
|
main: 'panel-block',
|
||||||
|
pay: 'panel-block',
|
||||||
|
credit: 'panel-block',
|
||||||
|
info: 'panel-block',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav class="panel">
|
||||||
|
<p class="panel-heading">
|
||||||
|
使用者選項
|
||||||
|
</p>
|
||||||
|
<RouterLink to="/client" :class="this.navCSS['main']">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fas fa-book" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<template v-if="this.path == 'main'">
|
||||||
|
<strong>主選單</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<p>主選單</p>
|
||||||
|
</template>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/client/info" :class="this.navCSS['info']">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fas fa-book" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<template v-if="this.path == 'info'">
|
||||||
|
<strong>個人資料</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<p>個人資料</p>
|
||||||
|
</template>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/client/pay" :class="this.navCSS['pay']">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fas fa-book" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<template v-if="this.path == 'pay'">
|
||||||
|
<strong>掃描支付</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<p>掃描支付</p>
|
||||||
|
</template>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/client/credit" :class="this.navCSS['credit']">
|
||||||
|
<span class="panel-icon">
|
||||||
|
<i class="fas fa-book" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<template v-if="this.path == 'credit'">
|
||||||
|
<strong>信用紀錄</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<p>信用紀錄</p>
|
||||||
|
</template>
|
||||||
|
</RouterLink>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
@ -3,6 +3,10 @@ import HomeView from '../views/HomeView.vue'
|
|||||||
import SignupView from '../views/SignupView.vue'
|
import SignupView from '../views/SignupView.vue'
|
||||||
import LinkSBTView from '../views/LinkSBTView.vue'
|
import LinkSBTView from '../views/LinkSBTView.vue'
|
||||||
import CreditView from '../views/CreditView.vue'
|
import CreditView from '../views/CreditView.vue'
|
||||||
|
import ClientMainView from '../views/ClientMainView.vue'
|
||||||
|
import ClientInfoView from '../views/ClientInfoView.vue'
|
||||||
|
import ClientCreditView from '../views/ClientCreditView.vue'
|
||||||
|
import ClientPayView from '../views/ClientPayView.vue'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
@ -26,7 +30,27 @@ const router = createRouter({
|
|||||||
path: '/signup/credit',
|
path: '/signup/credit',
|
||||||
name: 'startcredit',
|
name: 'startcredit',
|
||||||
component: CreditView
|
component: CreditView
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/client',
|
||||||
|
name: 'clientmain',
|
||||||
|
component: ClientMainView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/client/info',
|
||||||
|
name: 'clientinfo',
|
||||||
|
component: ClientInfoView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/client/credit',
|
||||||
|
name: 'clientcredit',
|
||||||
|
component: ClientCreditView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/client/pay',
|
||||||
|
name: 'clientpay',
|
||||||
|
component: ClientPayView
|
||||||
|
},
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
111
src/views/ClientMainView.vue
Normal file
111
src/views/ClientMainView.vue
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<script>
|
||||||
|
import Web3 from 'web3';
|
||||||
|
import SBT from '@/assets/SBT.json'
|
||||||
|
import PageTitle from '../components/PageTitle.vue'
|
||||||
|
import detectEthereumProvider from '@metamask/detect-provider'
|
||||||
|
import WarningModal from '../components/WarningModal.vue'
|
||||||
|
import SuccessModal from '../components/SuccessModal.vue'
|
||||||
|
import { useClientStore } from '../stores/Client.js'
|
||||||
|
import ClientNav from '../components/ClientNav.vue'
|
||||||
|
|
||||||
|
// To use Html5QrcodeScanner (more info below)
|
||||||
|
import { Html5QrcodeScanner } from "html5-qrcode";
|
||||||
|
|
||||||
|
// To use Html5Qrcode (more info below)
|
||||||
|
import { Html5Qrcode } from "html5-qrcode";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { PageTitle, WarningModal, SuccessModal, ClientNav },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
SBTAddress: import.meta.env.VITE_SBT_ADDR,
|
||||||
|
number: 0,
|
||||||
|
warningModalStatus: false,
|
||||||
|
successModalStatus: false,
|
||||||
|
msg: '',
|
||||||
|
clientAddr: '',
|
||||||
|
web3: null,
|
||||||
|
token: null,
|
||||||
|
isWaiting: false,
|
||||||
|
log: [],
|
||||||
|
scanner: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
this.web3 = new Web3(window.ethereum)
|
||||||
|
this.clientAddr = (await this.web3.eth.getAccounts())[0]
|
||||||
|
this.web3.eth.defaultAccount = this.clientAddr
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onScanSuccess(decodedText, decodedResult) {
|
||||||
|
// handle the scanned code as you like, for example:
|
||||||
|
console.log(`Code matched = ${decodedText}`, decodedResult);
|
||||||
|
this.scanner.clear()
|
||||||
|
},
|
||||||
|
scan() {
|
||||||
|
this.scanner = new Html5QrcodeScanner(
|
||||||
|
"reader",
|
||||||
|
{ fps: 10, qrbox: { width: 250, height: 250 } },
|
||||||
|
/* verbose= */ false);
|
||||||
|
this.scanner.render(this.onScanSuccess);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="blog-posts">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-2">
|
||||||
|
<!-- <ClientNav path="main"></ClientNav> -->
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="container">
|
||||||
|
<div class="block">
|
||||||
|
<PageTitle title="Set Credit Limit" subtitle="根據 SBT 信用紀錄設定額度"></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>
|
||||||
|
<!-- <p class="subtitle">Top tile</p> -->
|
||||||
|
</article>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/client/pay" class="tile is-child notification is-info">
|
||||||
|
<article>
|
||||||
|
<p class="title"><i class="fas fa-credit-card"></i> 掃描支付</p>
|
||||||
|
<!-- <p class="subtitle">Top tile</p> -->
|
||||||
|
</article>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink to="/client/credit" class="tile is-child notification is-info">
|
||||||
|
<article>
|
||||||
|
<p class="title"><i class="fas fa-history"></i> 信用紀錄</p>
|
||||||
|
<!-- <p class="subtitle">Top tile</p> -->
|
||||||
|
</article>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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="/signup/linksbt" btnName="繼續"></SuccessModal>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user