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