18 changed files with 965 additions and 25 deletions
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 611 B |
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<div class="d-flex pb-2 mt-2"> |
|||
<div class="markets-pair-list page-bottom bg-plain flex-fill"> |
|||
<div class="nav nav-pills"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1;">{{$t('common.d5')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{$t('common.d6')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 3 }" @click="tab = 3">{{$t('common.d7')}}</a> |
|||
</div> |
|||
</div> |
|||
<div class="body bg-panel"> |
|||
<!-- 持有仓位 --> |
|||
<finances-product v-if="tab == 1" /> |
|||
<!-- 当前委托 --> |
|||
<finances-hold v-if="tab == 2" /> |
|||
<!-- 历史记录 --> |
|||
<finances-history v-if="tab == 3" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import financesProduct from "./finances-product"; |
|||
import financesHold from "./finances-hold.vue"; |
|||
import financesHistory from "./finances-history.vue"; |
|||
import Contract from "@/api/contract"; |
|||
export default { |
|||
name: "page-bottom", |
|||
props: { |
|||
|
|||
}, |
|||
components: { |
|||
financesProduct, |
|||
financesHold, |
|||
financesHistory |
|||
}, |
|||
watch: { |
|||
symbol() {} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
tab: 1 |
|||
}; |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.bg-plain{ |
|||
width: 367px !important; |
|||
font-size: 16px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th class="color1">{{ $t("common.d8") }}</th> |
|||
<th class="color1">{{ $t("exchange.amount") }}</th> |
|||
<th class="color1">{{ $t("common.d9") }}</th> |
|||
<th class="color1">{{ $t("common.d10") }}</th> |
|||
<th class="color1" style="text-align: center;">{{ $t("common.d13") }}</th> |
|||
<th class="color1" style="text-align: center;">{{ $t("common.d15") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item,index) in recordsList" :key="index"> |
|||
<td>{{item.currency}}</td> |
|||
<td>{{item.amount}}</td> |
|||
<td>{{item.rate}}%</td> |
|||
<td v-if="item.type==1">{{$t('common.d17')}}</td> |
|||
<td v-if="item.type==2">{{item.day}}{{$t('exchange.day')}}</td> |
|||
<td style="text-align: center;">{{item.financial_time}}</td> |
|||
<td style="text-align: center;">{{item.redemption_time}}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
name: "finances-product", |
|||
props: { |
|||
|
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
created() { |
|||
this.init() |
|||
this.getBalance() |
|||
}, |
|||
data() { |
|||
return { |
|||
recordsList:[], |
|||
subscriptionobj:{}, |
|||
coin_name:"USDT", |
|||
activeCoin:{}, |
|||
action:null, |
|||
amount:0 |
|||
}; |
|||
}, |
|||
methods: { |
|||
init(){ |
|||
Wallet.financial_records({status:1}).then(res => { |
|||
this.recordsList = res.data; |
|||
console.log(this.recordsList); |
|||
}) |
|||
}, |
|||
Subscription(data){ |
|||
this.subscriptionobj = data; |
|||
this.action = "add1"; |
|||
console.log(this.subscriptionobj); |
|||
}, |
|||
handleUserAddress() { |
|||
// const data = { |
|||
// amount: this.amount, |
|||
// coin_id: this.subscriptionobj.coin_id, |
|||
// type: this.subscriptionobj.index, |
|||
// day: this.subscriptionobj.day |
|||
// } |
|||
// Wallet.financialNow(data).then(res => { |
|||
// // console.log(res); |
|||
// }); |
|||
// $("#editAddress").modal("hide"); |
|||
// this.getBalance() |
|||
}, |
|||
getBalance(){ |
|||
let data = { |
|||
account: 4, |
|||
coin_name: this.coin_name |
|||
}; |
|||
Wallet.getBalance(data).then(res => { |
|||
this.activeCoin = res; |
|||
// console.log(res); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.color1{ |
|||
color: #908F94; |
|||
} |
|||
tbody tr:hover{ |
|||
background: #e9e9e9; |
|||
} |
|||
.jump_btn{ |
|||
display: inline-block; |
|||
min-width: 80px; |
|||
height: 35px; |
|||
line-height: 33px; |
|||
text-align: center; |
|||
border: 1px solid #444444; |
|||
border-radius: 50px; |
|||
font-size: 15px; |
|||
padding: 0px 20px; |
|||
font-weight: 400; |
|||
color: #000; |
|||
box-sizing: border-box; |
|||
|
|||
&:hover{ |
|||
cursor: pointer; |
|||
color: #67e2da; |
|||
border: 1px solid #67e2da; |
|||
} |
|||
} |
|||
.jump_btn1{ |
|||
display: inline-block; |
|||
min-width: 80px; |
|||
height: 35px; |
|||
line-height: 33px; |
|||
text-align: center; |
|||
color: #999999; |
|||
border: 1px solid #999999; |
|||
border-radius: 50px; |
|||
font-size: 15px; |
|||
padding: 0px 20px; |
|||
font-weight: 400; |
|||
box-sizing: border-box; |
|||
} |
|||
.tr_box{ |
|||
display: flex; |
|||
margin: 0px 10px; |
|||
line-height: 50px; |
|||
} |
|||
.collapse_box{ |
|||
width: 100%; |
|||
display: flex; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
} |
|||
.collapse_box1{ |
|||
display: flex; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
line-height: 50px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.collapse_box2{ |
|||
display: flex; |
|||
font-size: 15px; |
|||
line-height: 50px; |
|||
font-weight: bold; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.currency_box{ |
|||
display: flex; |
|||
padding-top: 20px; |
|||
align-items: center; |
|||
padding-bottom: 30px; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #bcbcbc; |
|||
} |
|||
.box1{ |
|||
width: 26%; |
|||
padding-left: 5px; |
|||
} |
|||
.box2{ |
|||
width: 25%; |
|||
} |
|||
.box4{ |
|||
width: 20%; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,248 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th class="color1">{{ $t("common.d8") }}</th> |
|||
<th class="color1">{{ $t("exchange.amount") }}</th> |
|||
<th class="color1">{{ $t("common.d9") }}</th> |
|||
<th class="color1">{{ $t("common.d10") }}</th> |
|||
<th class="color1" style="text-align: center;">{{ $t("common.d13") }}</th> |
|||
<th class="color1" style="text-align: right;">{{ $t("common.d11") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item,index) in recordsList" :key="index"> |
|||
<td>{{item.currency}}</td> |
|||
<td>{{item.amount}}</td> |
|||
<td>{{item.rate}}%</td> |
|||
<td v-if="item.type==1">{{$t('common.d17')}}</td> |
|||
<td v-if="item.type==2">{{item.day}}{{$t('exchange.day')}}</td> |
|||
<td style="text-align: center;">{{item.financial_time}}</td> |
|||
<td style="text-align: right;"> |
|||
<div class="jump_btn" v-if="item.type==1" data-toggle="modal" data-target="#editAddress" @click="Subscription(item)">{{$t('common.d14')}}</div> |
|||
<div class="jump_btn1" v-if="item.type==2">{{$t('common.d14')}}</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<div class="modal fade" id="editAddress" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalLabel"> |
|||
{{ action == "add" ? $t("common.d18") : $t("common.d19") }} |
|||
</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form> |
|||
<div class="form-group"> |
|||
<div class="currency_box"> |
|||
<div> |
|||
<div style="font-weight: bold;">{{subscriptionobj.currency}}</div> |
|||
<div v-if="subscriptionobj.day"> |
|||
<img src="@/assets/img/icon/hint.png" width="15" /> |
|||
{{$t('common.d20')}} |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div> |
|||
<div v-if="subscriptionobj.day">{{subscriptionobj.day}}{{$t('exchange.day')}}</div> |
|||
<div v-else style="font-weight: bold;"> |
|||
{{$t('common.d17')}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" style="display: flex;justify-content: space-between;"> |
|||
<div style="color: #B4B4B4;font-weight: bold;">{{$t('common.d9')}}</div> |
|||
<div style="display: flex;align-items: center;"> |
|||
<div>{{subscriptionobj.rate}}%</div> |
|||
<div style="display: flex;align-items: center;margin-left: 10px;"><img src="@/assets/img/icon/rise.png" width="18" /></div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<div class="d-flex justify-content-between"> |
|||
<div style="color: #B4B4B4;font-weight: bold;">{{$t('exchange.amount')}}</div> |
|||
<div>{{subscriptionobj.amount}}</div> |
|||
</div> |
|||
<div class="d-flex justify-content-between" style="margin-top: 30px;font-size: 20px;"> |
|||
<div style="color: #B4B4B4;font-weight: bold;">{{$t('common.d21')}}</div> |
|||
<div> |
|||
<span style="color: #7458A8;">{{subscriptionobj.interest}}</span> |
|||
<span style="font-size: 15px;margin-left: 2px;">USDT</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary rounded-pill" data-dismiss="modal">{{ $t("common.cancelBtn") }}</button> |
|||
<button type="button" class="btn btn-primary rounded-pill" @click="handleUserAddress"> |
|||
{{ $t("common.confirmBtn") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
name: "finances-product", |
|||
props: { |
|||
|
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
created() { |
|||
this.init() |
|||
this.getBalance() |
|||
}, |
|||
data() { |
|||
return { |
|||
recordsList:[], |
|||
subscriptionobj:{}, |
|||
coin_name:"USDT", |
|||
activeCoin:{}, |
|||
action:null, |
|||
amount:0 |
|||
}; |
|||
}, |
|||
methods: { |
|||
init(){ |
|||
Wallet.financial_records({status:0}).then(res => { |
|||
this.recordsList = res.data; |
|||
console.log(this.recordsList); |
|||
}) |
|||
}, |
|||
Subscription(data){ |
|||
this.subscriptionobj = data; |
|||
this.action = "add1"; |
|||
console.log(this.subscriptionobj); |
|||
}, |
|||
handleUserAddress() { |
|||
const data = { |
|||
id: this.subscriptionobj.id |
|||
} |
|||
Wallet.financial_redemption(data).then(res => { |
|||
// console.log(res); |
|||
this.$message.success(this.$t("wallet.success")); |
|||
$("#editAddress").modal("hide"); |
|||
this.init() |
|||
this.getBalance() |
|||
}); |
|||
}, |
|||
getBalance(){ |
|||
let data = { |
|||
account: 4, |
|||
coin_name: this.coin_name |
|||
}; |
|||
Wallet.getBalance(data).then(res => { |
|||
this.activeCoin = res; |
|||
// console.log(res); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.color1{ |
|||
color: #908F94; |
|||
} |
|||
tbody tr:hover{ |
|||
background: #e9e9e9; |
|||
} |
|||
.jump_btn{ |
|||
display: inline-block; |
|||
min-width: 80px; |
|||
height: 35px; |
|||
line-height: 33px; |
|||
text-align: center; |
|||
border: 1px solid #444444; |
|||
border-radius: 50px; |
|||
font-size: 15px; |
|||
padding: 0px 20px; |
|||
font-weight: 400; |
|||
color: #000; |
|||
box-sizing: border-box; |
|||
|
|||
&:hover{ |
|||
cursor: pointer; |
|||
color: #67e2da; |
|||
border: 1px solid #67e2da; |
|||
} |
|||
} |
|||
.jump_btn1{ |
|||
display: inline-block; |
|||
min-width: 80px; |
|||
height: 35px; |
|||
line-height: 33px; |
|||
text-align: center; |
|||
color: #999999; |
|||
border: 1px solid #999999; |
|||
border-radius: 50px; |
|||
font-size: 15px; |
|||
padding: 0px 20px; |
|||
font-weight: 400; |
|||
box-sizing: border-box; |
|||
} |
|||
.tr_box{ |
|||
display: flex; |
|||
margin: 0px 10px; |
|||
line-height: 50px; |
|||
} |
|||
.collapse_box{ |
|||
width: 100%; |
|||
display: flex; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
} |
|||
.collapse_box1{ |
|||
display: flex; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
line-height: 50px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.collapse_box2{ |
|||
display: flex; |
|||
font-size: 15px; |
|||
line-height: 50px; |
|||
font-weight: bold; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.currency_box{ |
|||
display: flex; |
|||
padding-top: 20px; |
|||
align-items: center; |
|||
padding-bottom: 30px; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #bcbcbc; |
|||
} |
|||
.box1{ |
|||
width: 26%; |
|||
padding-left: 5px; |
|||
} |
|||
.box2{ |
|||
width: 25%; |
|||
} |
|||
.box4{ |
|||
width: 20%; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,252 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr class="tr_box"> |
|||
<div class="color1" style="width: 25%;">{{ $t("common.d8") }}</div> |
|||
<div class="color1" style="width: 25%;">{{ $t("common.d9") }}</div> |
|||
<div class="color1" style="width: 25%;text-align: center;">{{ $t("common.d10") }}</div> |
|||
<div class="color1" style="width: 25%;text-align: right;">{{ $t("common.d11") }}</div> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<el-collapse accordion> |
|||
<el-collapse-item v-for="(item,index) in userAdressList" :key="index"> |
|||
<div slot="title" class="collapse_box"> |
|||
<div class="box1">{{item.coin_name}}</div> |
|||
<div class="box2">{{item.rate}}%</div> |
|||
<div style="width: 27%;padding-left: 102px;">{{$t('common.d16')}}</div> |
|||
<div class="box4"></div> |
|||
</div> |
|||
<div class="collapse_box1"> |
|||
<div class="box1"></div> |
|||
<div class="box2">{{item.rate}}%</div> |
|||
<div style="width: 31%;padding-left: 120px;">{{$t('common.d17')}}</div> |
|||
<div class="box4"> |
|||
<div class="jump_btn" data-toggle="modal" data-target="#editAddress" |
|||
@click="Subscription({rate:item.rate,coin_name:item.coin_name,index:1,coin_id:item.coin_id})">{{$t('common.d12')}}</div> |
|||
</div> |
|||
</div> |
|||
<div v-for="(items,indexs) in item.params" :key="indexs" class="collapse_box2"> |
|||
<div class="box1"> </div> |
|||
<div class="box2">{{items.fixed_rate}}%</div> |
|||
<div style="width: 31%;padding-left: 120px;">{{items.day}}{{$t('exchange.day')}}</div> |
|||
<div class="box4"> |
|||
<div class="jump_btn" data-toggle="modal" data-target="#editAddress" |
|||
@click="Subscription1({...items,coin_name:item.coin_name,coin_id:item.coin_id})">{{$t('common.d12')}}</div> |
|||
</div> |
|||
</div> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<div class="modal fade" id="editAddress" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalLabel"> |
|||
{{ action == "add" ? $t("common.d18") : $t("common.d19") }} |
|||
</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form> |
|||
<div class="form-group"> |
|||
<div style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #bcbcbc;padding-bottom: 30px;padding-top: 20px;"> |
|||
<div> |
|||
<div style="font-weight: bold;">{{subscriptionobj.coin_name}}</div> |
|||
<div v-if="subscriptionobj.day" style="display: flex;"> |
|||
<div><img src="@/assets/img/icon/hint.png" width="15" height="15" /></div> |
|||
<div style="width: 300px;margin-left: 10px;">{{$t('common.d20')}}</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div style="font-weight: bold;"> |
|||
<div v-if="subscriptionobj.day">{{subscriptionobj.day}}{{$t('exchange.day')}}</div> |
|||
<div v-else> |
|||
{{$t('common.d17')}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" style="display: flex;justify-content: space-between;"> |
|||
<div style="color: #B4B4B4;font-weight: bold;">{{$t('common.d9')}}</div> |
|||
<div style="display: flex;align-items: center;"> |
|||
<div>{{subscriptionobj.rate}}%</div> |
|||
<div style="display: flex;align-items: center;margin-left: 10px;"><img src="@/assets/img/icon/rise.png" width="18" /></div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="comments" class="col-form-label" style="font-weight: bold;">{{ $t("exchange.amount") }}</label> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="amount" class="form-control" min=0 :placeholder="$t('exchange.enter-total')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">USDT</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<span>{{$t('exchange.balance')}}</span> |
|||
<span>{{activeCoin.usable_balance}} USDT</span> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary rounded-pill" data-dismiss="modal">{{ $t("common.cancelBtn") }}</button> |
|||
<button type="button" class="btn btn-primary rounded-pill" @click="handleUserAddress"> |
|||
{{ $t("common.confirmBtn") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
name: "finances-product", |
|||
props: { |
|||
|
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
created() { |
|||
this.init() |
|||
this.getBalance() |
|||
}, |
|||
data() { |
|||
return { |
|||
userAdressList:[], |
|||
subscriptionobj:{}, |
|||
coin_name:"USDT", |
|||
activeCoin:{}, |
|||
action:null, |
|||
amount:0 |
|||
}; |
|||
}, |
|||
methods: { |
|||
init(){ |
|||
Wallet.activity().then(res => { |
|||
this.userAdressList = res; |
|||
// console.log(this.userAdressList); |
|||
}) |
|||
}, |
|||
Subscription(data){ |
|||
this.subscriptionobj = data; |
|||
this.action = "add"; |
|||
// console.log(this.subscriptionobj); |
|||
}, |
|||
Subscription1(data){ |
|||
data.index = 2; |
|||
data.rate = data.fixed_rate; |
|||
// data.coin_name = 2; |
|||
this.subscriptionobj = data; |
|||
console.log(this.subscriptionobj); |
|||
this.action = "add"; |
|||
}, |
|||
handleUserAddress() { |
|||
const data = { |
|||
amount: this.amount, |
|||
coin_id: this.subscriptionobj.coin_id, |
|||
type: this.subscriptionobj.index, |
|||
day: this.subscriptionobj.day?this.subscriptionobj.day:'' |
|||
} |
|||
Wallet.financialNow(data).then(res => { |
|||
this.$message.success(this.$t("wallet.success")); |
|||
$("#editAddress").modal("hide"); |
|||
this.getBalance() |
|||
this.amount = ''; |
|||
// console.log(res); |
|||
}); |
|||
}, |
|||
getBalance(){ |
|||
let data = { |
|||
account: 4, |
|||
coin_name: this.coin_name |
|||
}; |
|||
Wallet.getBalance(data).then(res => { |
|||
this.activeCoin = res; |
|||
// console.log(res); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.color1{ |
|||
color: #908F94; |
|||
} |
|||
tbody tr:hover{ |
|||
background: #e9e9e9; |
|||
} |
|||
.jump_btn{ |
|||
display: inline-block; |
|||
min-width: 80px; |
|||
height: 35px; |
|||
line-height: 33px; |
|||
text-align: center; |
|||
color: #fff; |
|||
border: 1px solid #444444; |
|||
border-radius: 50px; |
|||
font-size: 15px; |
|||
padding: 0px 20px; |
|||
font-weight: 400; |
|||
color: #000; |
|||
box-sizing: border-box; |
|||
|
|||
&:hover{ |
|||
cursor: pointer; |
|||
color: #67e2da; |
|||
border: 1px solid #67e2da; |
|||
} |
|||
} |
|||
.tr_box{ |
|||
display: flex; |
|||
margin: 0px 10px; |
|||
line-height: 50px; |
|||
} |
|||
.collapse_box{ |
|||
width: 100%; |
|||
display: flex; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
} |
|||
.collapse_box1{ |
|||
display: flex; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
line-height: 50px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.collapse_box2{ |
|||
display: flex; |
|||
font-size: 15px; |
|||
line-height: 50px; |
|||
font-weight: bold; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.box1{ |
|||
width: 26%; |
|||
padding-left: 5px; |
|||
} |
|||
.box2{ |
|||
width: 25%; |
|||
} |
|||
.box4{ |
|||
width: 20%; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<div class="wallet-page"> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3" style="font-weight: bold;">{{$t('common.d1')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="panel-box bg-panel d-flex" style="align-items: center;padding: 80px;"> |
|||
<div style="width: 400px;"> |
|||
<div style="color: #908F94;margin-bottom: 20px;">{{$t('common.d2')}}</div> |
|||
<div> |
|||
<span style="color: #7458A8;font-size: 30px;">{{activeCoin.usable_balance}}</span> |
|||
<span> USDT</span> |
|||
</div> |
|||
<div style="margin-left: 100px;margin-top: 40px;display: flex;align-items: center;"> |
|||
<div style="color: #908F94;">{{$t('wallet.transfer')}}</div> |
|||
<div @click="totransfer"><i class="ion ion-ios-swap hover" style="font-size: 20px;margin-left: 10px;padding-top: 5px;"></i></div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div style="font-size:26px;color:#67E2DA;font-weight: bold;margin-bottom: 24px;">{{$t('common.d3')}}</div> |
|||
<div style="font-size: 18px;">{{$t('common.d4')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<financesBottom></financesBottom> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import financesBottom from "./components/finances-bottom.vue"; |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
components: { |
|||
financesBottom |
|||
}, |
|||
data() { |
|||
return { |
|||
transferRecords: [], |
|||
isCondition: false, // 用于tab切换 默认不条件切换 |
|||
coinName: '', |
|||
activeCoin:{} |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
|
|||
coinName(val, oldVal) { |
|||
// 第一次选择币种 手动添加条件 |
|||
if (val && !oldVal) this.isCondition = true; |
|||
|
|||
// 清空币种时 默认查询所有 |
|||
if (!val && oldVal) this.isCondition = false; |
|||
}, |
|||
|
|||
isCondition(val) { |
|||
// console.log(val) |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
methods: { |
|||
// 过滤查找当前币种的记录 |
|||
seek(item) { |
|||
return !this.isCondition || item.coin_name === this.coinName; |
|||
}, |
|||
|
|||
getTransferRecords() { |
|||
Wallet.transferRecord().then(data => { |
|||
this.transferRecords = data.data; |
|||
}).catch(err => {}); |
|||
}, |
|||
getBalance(){ |
|||
let data = { |
|||
account: 4, |
|||
coin_name: "USDT" |
|||
}; |
|||
Wallet.getBalance(data).then(res => { |
|||
this.activeCoin = res; |
|||
}); |
|||
}, |
|||
totransfer(){ |
|||
this.$router.push('/wallet/transfer') |
|||
} |
|||
}, |
|||
created() { |
|||
this.getTransferRecords(); |
|||
this.getBalance() |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.table { |
|||
tr { |
|||
td { |
|||
cursor: default !important; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue