feat: 合约交易改造 — 杠杆默认10X+USDC金额下单
This commit is contained in:
testadmin
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="tab-header">
|
||||
<span :class="[{'active':status == 1}]" @click="tabClick(1)">{{$t('lever.tdin')}}</span>
|
||||
<span :class="[{'active':status == 0}]" @click="tabClick(0)">{{$t('lever.listin')}}</span>
|
||||
<!-- <span :class="[{'active':status == 2}]" @click="tabClick(2)">平仓中</span> -->
|
||||
<span :class="[{'active':status == 3}]" @click="tabClick(3)">{{$t('lever.closed')}}</span>
|
||||
<span :class="[{'active':status == 4}]" @click="tabClick(4)">{{$t('lever.revoked')}}</span>
|
||||
</div>
|
||||
|
||||
<ul class="list_head ft14">
|
||||
<li class="flex">
|
||||
<span class="width2">{{$t('lever.type')}}</span>
|
||||
<span class="width1" v-if="status == 0 || status == 4">{{$t('lever.entrustPrice')}}</span>
|
||||
<span class="width1" v-else>{{$t('lever.openPrice')}}</span>
|
||||
<span class="width1">{{$t('lever.nowPrice')}}</span>
|
||||
<span class="width1">{{$t('lever.styPrice')}}</span>
|
||||
<span class="width1">{{$t('lever.stsPrice')}}</span>
|
||||
<span class="width1">{{$t('lever.bail')}}</span>
|
||||
<span class="width1">{{$t('lever.canBail')}}</span>
|
||||
<span class="width2">{{$t('lever.openTime')}}</span>
|
||||
<span class="width2" v-if="status == 3">{{$t('lever.closeTime')}}</span>
|
||||
<span class="width1">{{$t('lever.rate')}}</span>
|
||||
<span class="width1">{{$t('lever.nightFee')}}</span>
|
||||
<span class="width1">{{$t('lever.loss')}}</span>
|
||||
<!-- <span class="width1">{{$t('fat.status')}}</span> -->
|
||||
<span class="width1" v-if="status == 0 || status == 1">{{$t('td.do')}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list_content ft12">
|
||||
<li v-for="(item,index) in list_content" :key="index" class="flex alcenter center">
|
||||
<span
|
||||
class="width2"
|
||||
>{{item.type == 1? $t('td.buyin'):$t('td.sellout')}} {{item.symbol}} x{{item.share}}(No.{{item.id}})</span>
|
||||
<span
|
||||
class="width1"
|
||||
v-if="status == 0 || status == 4"
|
||||
>{{item.origin_price || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1" v-else>{{item.price || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1">{{item.update_price || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1">{{item.target_profit_price || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1">{{item.stop_loss_price || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1">{{item.origin_caution_money || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1">{{item.caution_money || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width2">{{item.transaction_time}}</span>
|
||||
<span class="width2" v-if="status == 3">{{item.handle_time}}</span>
|
||||
<span class="width1">{{item.trade_fee || '0.00' | numFilters(4)}}</span>
|
||||
<span class="width1">{{item.overnight_money || '0.00' | numFilters(4)}}</span>
|
||||
<span
|
||||
class="width1"
|
||||
:class="item.profits > 0?'greenColor':'redColor'"
|
||||
>{{item.profits || '0.00' | numFilters(4)}}</span>
|
||||
<!-- <span class="width1">{{item.status_name}}</span> -->
|
||||
<div class="width1 btns tr" v-if="status == 0 || status == 1">
|
||||
<button type="button" v-if="status == 0" @click="cannelOrder(item.id)">{{$t('lever.revoke')}}</button>
|
||||
<button type="button" v-if="status == 1" @click="closePosition(item.id)">{{$t('lever.ping')}}</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <div class="mores" @click="load_more">
|
||||
<img v-if="list_content.length == 0" src="../../assets/images/nodata.png" alt>
|
||||
<span>{{more}}</span>
|
||||
</div>-->
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
class="mores"
|
||||
v-if="total>10"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
//components: { indexHeader, indexFooter },
|
||||
filters: {
|
||||
numFilters: function (value) {
|
||||
if (!value) {
|
||||
return '0.0000'
|
||||
}
|
||||
// value = toString()
|
||||
return value.slice(0) + ' '
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
legal_id: "",
|
||||
currency_id: "",
|
||||
list_content: [],
|
||||
page: 1,
|
||||
more: "加载更多",
|
||||
status: 1,
|
||||
flag: true,
|
||||
total: "",
|
||||
skins: localStorage.getItem("skin") || "days"
|
||||
};
|
||||
},
|
||||
created() {
|
||||
let that = this;
|
||||
// that.legal_id = localStorage.getItem("legal_id");
|
||||
// that.currency_id = localStorage.getItem("currency_id");
|
||||
that.init();
|
||||
if (that.status == 0 || that.status == 1) {
|
||||
that.polling();
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
document
|
||||
.querySelector("html")
|
||||
.setAttribute("style", "background-color:#f7f7f7;");
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.querySelector("html").removeAttribute("style");
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let that = this;
|
||||
that.more = that.$t('lever.loading');
|
||||
if (that.flag) {
|
||||
var i = layer.load();
|
||||
this.$http({
|
||||
url: "/api/" + "lever/my_trade",
|
||||
method: "post",
|
||||
data: {
|
||||
status: that.status,
|
||||
legal_id: that.legal_id,
|
||||
currency_id: that.currency_id,
|
||||
page: that.page
|
||||
},
|
||||
headers: { Authorization: localStorage.getItem("token") }
|
||||
})
|
||||
.then(res => {
|
||||
layer.close(i);
|
||||
that.flag = true;
|
||||
if (res.data.type == "ok") {
|
||||
that.more = that.$t('td.more');
|
||||
// if (that.page == 1) {
|
||||
that.list_content = res.data.message.message.data;
|
||||
that.total = res.data.message.message.total;
|
||||
} else {
|
||||
// layer.msg(res.data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 轮询数据
|
||||
polling() {
|
||||
let that = this;
|
||||
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||
that.$socket.on("lever_trade", msg => {
|
||||
if (msg.type == "lever_trade") {
|
||||
if (that.status == 0) {
|
||||
var datas = JSON.parse(msg.trades_entrust);
|
||||
that.list_content = datas;
|
||||
} else if (that.status == 1) {
|
||||
let datas = JSON.parse(msg.trades_all);
|
||||
that.list_content = datas;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// // 加载更多
|
||||
// load_more() {
|
||||
// this.page++;
|
||||
// this.init();
|
||||
// that.flag = false;
|
||||
// },
|
||||
// 分页
|
||||
handleCurrentChange(val) {
|
||||
var that = this;
|
||||
that.page = val;
|
||||
that.init();
|
||||
},
|
||||
// 状态切换
|
||||
tabClick(type) {
|
||||
let that = this;
|
||||
that.status = type;
|
||||
that.list_content = [];
|
||||
that.page = 1;
|
||||
that.init();
|
||||
that.flag = false;
|
||||
if (type == 0 || type == 1) {
|
||||
that.polling();
|
||||
}
|
||||
},
|
||||
// 平仓
|
||||
closePosition(ids) {
|
||||
let that = this;
|
||||
this.$alert(that.$t('lever.sureping'), "", {
|
||||
confirmButtonText: that.$t('cuy.confirm'),
|
||||
customClass: "modalConfirm",
|
||||
confirmButtonClass: "confirmBtn",
|
||||
closeOnClickModal: true,
|
||||
callback: action => {
|
||||
if (action == "confirm") {
|
||||
that
|
||||
.$http({
|
||||
url: "/api/" + "lever/close",
|
||||
method: "post",
|
||||
data: {
|
||||
id: ids
|
||||
},
|
||||
headers: { Authorization: localStorage.getItem("token") }
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data.type == "ok") {
|
||||
layer.msg(res.data.message);
|
||||
setTimeout(function() {
|
||||
location.reload();
|
||||
}, 1000);
|
||||
} else {
|
||||
layer.msg(res.data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// layer.confirm("确定平仓？", function() {
|
||||
// var i = layer.load();
|
||||
// that
|
||||
// .$http({
|
||||
// url: "/api/" + "lever/close",
|
||||
// method: "post",
|
||||
// data: {
|
||||
// id: ids
|
||||
// },
|
||||
// headers: { Authorization: localStorage.getItem("token") }
|
||||
// })
|
||||
// .then(res => {
|
||||
// layer.close(i);
|
||||
// if (res.data.type == "ok") {
|
||||
// layer.msg(res.data.message);
|
||||
// setTimeout(function() {
|
||||
// that.tabClick(that.status);
|
||||
// }, 200);
|
||||
// } else {
|
||||
// layer.msg(res.data.message);
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// layer.close(i);
|
||||
// console.log(error);
|
||||
// });
|
||||
// });
|
||||
},
|
||||
// 撤单
|
||||
cannelOrder(ids) {
|
||||
let that = this;
|
||||
this.$alert(that.$t('lever.revokeOrder'), "", {
|
||||
confirmButtonText: that.$t('cuy.confirm'),
|
||||
customClass: "modalConfirm",
|
||||
confirmButtonClass: "confirmBtn",
|
||||
closeOnClickModal: true,
|
||||
callback: action => {
|
||||
if (action == "confirm") {
|
||||
that
|
||||
.$http({
|
||||
url: "/api/" + "lever/cancel",
|
||||
method: "post",
|
||||
data: {
|
||||
id: ids
|
||||
},
|
||||
headers: { Authorization: localStorage.getItem("token") }
|
||||
})
|
||||
.then(res => {
|
||||
layer.close(i);
|
||||
if (res.data.type == "ok") {
|
||||
layer.msg(res.data.message);
|
||||
setTimeout(function() {
|
||||
that.tabClick(that.status);
|
||||
}, 200);
|
||||
} else {
|
||||
layer.msg(res.data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
layer.close(i);
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// layer.confirm("确定撤消订单吗？", function() {
|
||||
// var i = layer.load();
|
||||
// that
|
||||
// .$http({
|
||||
// url: "/api/" + "lever/cancel",
|
||||
// method: "post",
|
||||
// data: {
|
||||
// id: ids
|
||||
// },
|
||||
// headers: { Authorization: localStorage.getItem("token") }
|
||||
// })
|
||||
// .then(res => {
|
||||
// layer.close(i);
|
||||
// if (res.data.type == "ok") {
|
||||
// layer.msg(res.data.message);
|
||||
// setTimeout(function() {
|
||||
// that.tabClick(that.status);
|
||||
// }, 200);
|
||||
// } else {
|
||||
// layer.msg(res.data.message);
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// layer.close(i);
|
||||
// console.log(error);
|
||||
// });
|
||||
// });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.wrap {
|
||||
min-height: 500px;
|
||||
background: #181b2a;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
padding: 90px 50px 30px 50px;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
margin-bottom: 30px;
|
||||
color: #c7cce6;
|
||||
}
|
||||
|
||||
.tab-header span {
|
||||
padding-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding: 8px 0;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
ul li span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul li div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul li div span {
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
background-color: #638bd4;
|
||||
cursor: pointer;
|
||||
min-height: 33px;
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list_head {
|
||||
color: #637085;
|
||||
border-bottom: 1px solid #2e333c;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #cc4951;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #0d8551;
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mores {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mores img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 30px auto 0;
|
||||
}
|
||||
|
||||
.mores span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.width1 {
|
||||
width: 9%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.width2 {
|
||||
width: 13%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.width3 {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loss-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #c7cce6;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 500px;
|
||||
background-color: #262a42;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.loss-modal-header {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loss-modal-header p {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loss-madal-content {
|
||||
margin: 0 15px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.loss-madal-content div {
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.loss-madal-content div p {
|
||||
display: inline-block;
|
||||
border: 1px solid #2e333c;
|
||||
border-radius: 3px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loss-madal-content p span {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.loss-madal-content input {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-left: 1px solid #2e333c;
|
||||
border-right: 1px solid #2e333c;
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
top: -8px;
|
||||
color: #c7cce6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.modal-btn button {
|
||||
width: 50%;
|
||||
line-height: 50px;
|
||||
border: none;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #9db5c7;
|
||||
}
|
||||
|
||||
.modal-btn button:last-child {
|
||||
border-left: 1px solid #2e333c;
|
||||
background: #689cf1;
|
||||
}
|
||||
|
||||
.total-pro button {
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
background-color: #638bd4;
|
||||
cursor: pointer;
|
||||
min-height: 33px;
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stopModal {
|
||||
margin: 20px 15px;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.stopModal span {
|
||||
padding: 6px 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stopall {
|
||||
border: 1px solid #638bd4;
|
||||
color: #638bd4;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.alls {
|
||||
color: #fff;
|
||||
background-color: #638bd4;
|
||||
}
|
||||
|
||||
.stopbuy {
|
||||
border: 1px solid #0d8551;
|
||||
color: #0d8551;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.buys {
|
||||
color: #fff;
|
||||
background-color: #0d8551;
|
||||
}
|
||||
|
||||
.stopsell {
|
||||
border: 1px solid #cc4951;
|
||||
color: #cc4951;
|
||||
}
|
||||
|
||||
.sells {
|
||||
color: #fff;
|
||||
background-color: #cc4951;
|
||||
}
|
||||
|
||||
.stop-modal-btns {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.stop-modal-btns button {
|
||||
width: 50%;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
background-color: #9db5c7;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stop-modal-btns button:last-child {
|
||||
background-color: #689cf1;
|
||||
}
|
||||
|
||||
.btns button {
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
background-color: #638bd4;
|
||||
cursor: pointer;
|
||||
min-height: 33px;
|
||||
min-width: 80px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
}
|
||||
.alcenter span{
|
||||
color: #c7cce6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--// WEBPACK FOOTER // // src/view/lever/leverList.vue-->
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div id="lever-record">
|
||||
<div class="title">
|
||||
<span class="fl">USDC</span>
|
||||
<span class="fr" @click="$router.go(-1)">{{$t('back')}}</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-title flex">
|
||||
<span>{{$t('number')}}</span>
|
||||
<span>{{$t('account.record')}}</span>
|
||||
<span>{{$t('time')}}</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(item,index) in log" :key="index">
|
||||
<span>{{item.value}}</span>
|
||||
<span>{{item.info}}</span>
|
||||
<span>{{item.created_time}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div @click="getLog" class="loadmore">{{$t('more')}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
log: [],
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLog();
|
||||
},
|
||||
methods: {
|
||||
getLog:function() {
|
||||
var id = this.$route.query.id;
|
||||
var token = window.localStorage.getItem("token");
|
||||
this.$http({
|
||||
url: "/api/wallet/legal_log",
|
||||
method: "post",
|
||||
headers: { Authorization: token },
|
||||
data: {
|
||||
type: "lever",
|
||||
currency: id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.type == "ok") {
|
||||
let msg = res.data.message;
|
||||
if (msg.list.length) {
|
||||
this.log.concat(msg.list);
|
||||
this.page += 1;
|
||||
} else {
|
||||
layer.msg(this.$t('nomore'));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
#lever-record {
|
||||
width: 75rem;
|
||||
margin: 0 auto;
|
||||
color: #c7cce6;
|
||||
.title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 30px;
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: #181b2a;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
min-height: 900px;
|
||||
padding: 0 30px;
|
||||
background: #181b2a;
|
||||
}
|
||||
.list-title,
|
||||
li {
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
li {
|
||||
border-top: 1px solid #202a4a;
|
||||
}
|
||||
.loadmore {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
// WEBPACK FOOTER //
|
||||
// src/view/lever/leverRecord.vue
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="entrust">
|
||||
<div class="title fColor1 topshadow">
|
||||
<div class="tab_title">
|
||||
<span>{{$t('lever.nowentrust')}}</span>
|
||||
</div>
|
||||
<div class="tab_title fr ft12">
|
||||
<span v-for="(way,index) in wayList" :class="{'active': index == isChoosed}" @click="wayChoose(index,way.url)">{{way.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="list-title fColor2 ft12 clear">
|
||||
<li class="fl w20">{{$t('time')}}</li>
|
||||
<li class="fl w10">{{$t('center.pairs')}}</li>
|
||||
<li class="fl w8">{{$t('center.direction')}}</li>
|
||||
<li class="fl w8">{{$t('number')}}</li>
|
||||
<li class="fl w8">{{$t('price')}}</li>
|
||||
<li class="fl w8">{{$t('center.contran')}}</li>
|
||||
<li class="fl w8">{{$t('lever.notdeal')}}</li>
|
||||
<li class="fl w10">{{$t('center.dealtotal')}}</li>
|
||||
<li class="fl w8 tr">{{$t('do')}}</li>
|
||||
</ul>
|
||||
<div class="containers scroll" v-if="inList.length>0">
|
||||
<ul class="list-item fColor1 ft12">
|
||||
<li v-for="(item,index) in inList" class="clear">
|
||||
<span class="fl w20">{{item.create_time}}</span>
|
||||
<span class="fl w10">{{item.currency_name}}/{{item.legal_name}}</span>
|
||||
<span class="fl w8">{{type=='in'?$t('center.inbuy'):$t('center.outsell')}}</span>
|
||||
<span class="fl w8">{{item.total_number}}</span>
|
||||
<span class="fl w8">{{item.price}}</span>
|
||||
<span class="fl w8">{{item.complete_number}}</span>
|
||||
<span class="fl w8">{{item.number}}</span>
|
||||
<span class="fl w10">{{item.total_money}}</span>
|
||||
<span class="fl w8 tr curPer ceilColor" @click="revoke(index,item.id)">{{$t('revoke')}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="getmore tc fColor1 ft14 mt10 curPer pdb20" @click="getMore" v-if="!loading && inList.length>8">{{more}}</div>
|
||||
<div class="tc pdb20" v-if="loading">
|
||||
<img src="@/assets/images/loading.gif" alt="" class="lodw20">
|
||||
<p class="ft12 baseColor">{{$t('loading')}}...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_data tc" v-if="inList.length<=0 && !loading">
|
||||
<img src="@/assets/images/nodata.png" alt="">
|
||||
<p class="fColor2 ft18">{{$t('nodata')}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"entrust",
|
||||
data (){
|
||||
return{
|
||||
isshow:false,
|
||||
address:'',
|
||||
isChoosed:0,
|
||||
isUrl:0,
|
||||
page:1,
|
||||
url:"transaction_in",
|
||||
type:'in',
|
||||
more:this.$t('more'),
|
||||
loading:false,
|
||||
urlList:[{title:this.$t('lever.nowentrust')}],
|
||||
wayList:[{title:this.$t('center.inbuy'),url:"transaction_in"},{title:this.$t('center.outsell'),url:"transaction_out"}],
|
||||
inList:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.token = localStorage.getItem('token') || '';
|
||||
},
|
||||
methods:{
|
||||
// 类型切换
|
||||
wayChoose(index,url){
|
||||
var that=this;
|
||||
// if(index ==2){
|
||||
// that.isshow = true;
|
||||
// }else{
|
||||
// that.isshow = false;
|
||||
// that.getData();
|
||||
// }
|
||||
// console.log(url)
|
||||
that.inList='';
|
||||
that.page=1;
|
||||
that.url = url;
|
||||
// console.log(that.url)
|
||||
if(url=='transaction_in'){
|
||||
that.type="in";
|
||||
}else if(url == 'transaction_out'){
|
||||
that.type="out";
|
||||
}else{
|
||||
that.type="all";
|
||||
}
|
||||
that.getData();
|
||||
that.more=this.$t('more');
|
||||
that.isChoosed=index;
|
||||
|
||||
},
|
||||
// 加载更多
|
||||
getMore(){
|
||||
this.page = ++this.page;
|
||||
this.getData();
|
||||
},
|
||||
// 撤销
|
||||
revoke(indexs,id){
|
||||
var that =this;
|
||||
var id = id;
|
||||
var indexs = indexs;
|
||||
var type = that.type;
|
||||
layer.open({
|
||||
content: this.$t('revokeOrder')
|
||||
,btn: [this.$t('confirm'), this.$t('legal.ceil')]
|
||||
,yes: function(index){
|
||||
var i=layer.load();
|
||||
that.$http({
|
||||
url: '/api/' + 'transaction_del',
|
||||
method:'post',
|
||||
data:{
|
||||
id:id,
|
||||
type:type
|
||||
},
|
||||
headers: {'Authorization': that.token}
|
||||
}).then(res=>{
|
||||
// console.log(res)
|
||||
layer.close(i)
|
||||
if(res.data.type =='ok'){
|
||||
that.inList.splice(indexs,1);
|
||||
// eventBus.$emit('tocel','celbuy');
|
||||
layer.msg(res.data.message)
|
||||
}else{
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
getData(){
|
||||
var that = this;
|
||||
var url = that.url;
|
||||
var page = that.page;
|
||||
that.loading = true;
|
||||
this.$http({
|
||||
url: '/api/' + url,
|
||||
method:'post',
|
||||
data:{page:page},
|
||||
headers: {'Authorization': that.token}
|
||||
}).then(res=>{
|
||||
// console.log(res)
|
||||
that.loading=false;
|
||||
// console.log(url)
|
||||
if(res.data.type == 'ok'){
|
||||
// console.log(res.data.message.list)
|
||||
var list=res.data.message.list;
|
||||
if(that.page==1){
|
||||
that.inList=list;
|
||||
}else{
|
||||
if(list.length<=0){
|
||||
that.more=that.$t('td.nomore')+'...';
|
||||
return;
|
||||
}else{
|
||||
that.inList=that.inList.concat(list)
|
||||
}
|
||||
}
|
||||
}else{
|
||||
// layer.msg(res.message);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
mounted(){
|
||||
var that = this;
|
||||
eventBus.$on('buyTrade', function (data) {
|
||||
if(data){
|
||||
that.getData();
|
||||
}
|
||||
});
|
||||
that.getData();
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.title{height: 48px;line-height: 46px;padding: 0 40px 0 30px;background-color: #181b2a;}
|
||||
.tab_title{display: inline-block;line-height: 46px;height: 46px;}
|
||||
.tab_title span{cursor: pointer;}
|
||||
.tab_title span:not(:last-child) {margin-right: 40px;}
|
||||
.content{padding: 0 40px 0 30px;height: 300px;}
|
||||
.list-title{line-height: 40px; border-bottom: 1px solid #303b4b;height: 40px;}
|
||||
.no_data{padding: 50px 0;}
|
||||
.containers{height: 260px;overflow: auto;}
|
||||
.list-item li{line-height: 30px;}
|
||||
.list-item li span{display: inline-block;float: left;}
|
||||
.list-item li span:nth-child(3){color:#cc4951;}
|
||||
.list-item li:hover{background-color: #2b3648}
|
||||
.list-item li span.green{color: #55a067}
|
||||
.pdb20{padding-bottom: 20px;}
|
||||
.containers span{
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// WEBPACK FOOTER //
|
||||
// src/view/lever/lever_entrust.vue
|
||||
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="exchange" style="height:100%;width:100%;overflow:auto">
|
||||
<!-- <div class="title fColor1">交易所</div> -->
|
||||
<div class="content fColor1" style="padding: 1.5rem;">
|
||||
<!-- <div class="new_price">
|
||||
<span class="ft14">{{ $t('exchange.handicap') }}</span>
|
||||
</div> -->
|
||||
<div class="sas">
|
||||
<div class="s-itx" :class="{siAs:sasIndex==index}" v-for="(item,index) in 3" @click="dwd(index)">
|
||||
<img :src="require(`../../assets/p${index+1}.png`)" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exchange_title ft12 clear tc" v-if="false">
|
||||
<!-- <span>{{ $t('exchange.direction') }}</span> -->
|
||||
<span style="text-align: left;">{{ $t('exchange.price') }}(USDC)</span>
|
||||
<span>{{ $t('exchange.number') }}({{currency_name}})</span>
|
||||
<span style="text-align: right;">{{$t('zjde82')}} (USDC)</span>
|
||||
</div>
|
||||
|
||||
<ul class="list-item ft12 tc">
|
||||
<div v-if="sasIndex==0 || sasIndex==1">
|
||||
<li class="curPer" v-for="(out,index) in outlist" :key="out.id" @click="price(out.price)"
|
||||
v-show="sasIndex==0?(index<10):true ">
|
||||
<!-- <span class="red">{{ $t('exchange.sellout') }} {{ outlist.length - index }}</span> -->
|
||||
<!-- <span style="text-align: left; color: #00f0ff;">{{ out[0] | tofixedFour2 }}</span> -->
|
||||
<span>{{ out[1] | tofixedFour }}</span>
|
||||
<span style="text-align: right;color: #00f0ff;">{{ out[0] | tofixedFour }}</span>
|
||||
|
||||
<!-- <span class="info-shadow selli" :style="{width:(out[1]/sellMaxValue-0)*100+'%'}"></span> -->
|
||||
</li>
|
||||
</div>
|
||||
<div class="line green">
|
||||
{{ newData|tofixedN(6) }}
|
||||
|
||||
<!-- <span
|
||||
style="font-size: 12px; color:#a7a7a7;"> USDC</span> -->
|
||||
</div>
|
||||
|
||||
<div v-if="sasIndex==0 || sasIndex==2">
|
||||
<li class="curPer" v-for="(buy,index) in inlist" :key="index" @click="price(buy.price)"
|
||||
v-show="sasIndex==2?true:(index<10) ">
|
||||
<!-- <span class="green">{{ $t('exchange.buyin') }} {{ index + 1 }}</span> -->
|
||||
<!-- <span style="text-align: left;color: #FF4834;">{{ buy[0] | tofixedFour2 }}</span> -->
|
||||
<span>{{ buy[1] | tofixedFour }}</span>
|
||||
<span style="text-align: right;color: #FF4834;">{{ buy[0] | tofixedFour }}</span>
|
||||
<!-- <span class="info-shadow" :style="{width:(buy[1]/inMaxValue-0)*100+'%'}"></span> -->
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let nameb = ''
|
||||
export default {
|
||||
name: "exchange",
|
||||
data() {
|
||||
return {
|
||||
outlist: [],
|
||||
inlist: [],
|
||||
load: 1,
|
||||
newData: 0,
|
||||
rmbRate: '6',
|
||||
currency_name: "",
|
||||
legal_name: "",
|
||||
currency_id: "",
|
||||
legal_id: "",
|
||||
sellMaxValue: 0,
|
||||
inMaxValue: 0,
|
||||
sasIndex: 0,
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
rmbRate: val => {
|
||||
eventBus.$emit('receiveRate', val);
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
tofixed: function(val) {
|
||||
val = Number(val);
|
||||
return val.toFixed(2);
|
||||
},
|
||||
tofixedFour(val) {
|
||||
val = Number(val);
|
||||
// let n = 4
|
||||
// if(nameb=='SHIB'){
|
||||
// n = 8
|
||||
// }
|
||||
return val.toFixed(4);
|
||||
},
|
||||
tofixedFour2(val) {
|
||||
val = Number(val);
|
||||
let n = 4
|
||||
if (nameb == 'SHIB') {
|
||||
n = 8
|
||||
} else if (nameb == 'PYPLC') {
|
||||
n = 8
|
||||
}
|
||||
return val.toFixed(n);
|
||||
},
|
||||
tofixedN: function(val, n) {
|
||||
val = Number(val);
|
||||
return val.toFixed(n);
|
||||
},
|
||||
},
|
||||
mounted: function() {
|
||||
var that = this;
|
||||
},
|
||||
created: function() {
|
||||
let that = this;
|
||||
let local_lid = window.localStorage.getItem("lever_l_id"),
|
||||
local_cid = window.localStorage.getItem("lever_c_id");
|
||||
that.legal_id = localStorage.getItem("legal_id");
|
||||
that.currency_id = localStorage.getItem("currency_id");
|
||||
that.legal_name = localStorage.getItem("legal_name");
|
||||
that.currency_name = localStorage.getItem("currency_name");
|
||||
nameb = that.currency_name
|
||||
that.buy_sell(that.legal_id, that.currency_id);
|
||||
that.connect(that.legal_id, that.currency_id);
|
||||
// that.upPrice(that.legal_id, that.currency_id);
|
||||
|
||||
},
|
||||
methods: {
|
||||
dwd(index) {
|
||||
this.sasIndex = index
|
||||
},
|
||||
price(price) {
|
||||
eventBus.$emit("toPrice", price);
|
||||
},
|
||||
// 第一次默认最新价数据
|
||||
buy_sell(legals_id, currencys_id) {
|
||||
let that = this;
|
||||
this.$http({
|
||||
url: "/api/" + "lever/deal",
|
||||
method: "post",
|
||||
data: {
|
||||
legal_id: legals_id,
|
||||
currency_id: currencys_id
|
||||
},
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token")
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.type == "ok") {
|
||||
that.inlist = res.data.message.lever_transaction.in;
|
||||
that.outlist = res.data.message.lever_transaction.out;
|
||||
that.newData = res.data.message.last_price;
|
||||
that.rmbRate = res.data.message.ExRAte;
|
||||
window.localStorage.setItem('lastPrice', that.newData);
|
||||
that.buyInfo.buyPrice = 0;
|
||||
that.buyInfo.buyNum = 0;
|
||||
that.connect(
|
||||
legals_id,
|
||||
currencys_id
|
||||
);
|
||||
} else if (res.data.type == "999") {
|
||||
this.$router.push("/components/login");
|
||||
} else {
|
||||
layer.msg(res.data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// console.log(error)
|
||||
});
|
||||
},
|
||||
|
||||
connect(legal_id, currency_id) {
|
||||
|
||||
var that = this;
|
||||
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||
that.sockets.subscribe("market_depth", msg => {
|
||||
if (msg.type == "market_depth") {
|
||||
//组件间传值
|
||||
let newPrice = {
|
||||
newprice: msg.last_price,
|
||||
newup: msg.proportion,
|
||||
istoken: msg.token,
|
||||
yesprice: msg.yesterday,
|
||||
toprice: msg.today
|
||||
};
|
||||
// setTimeout(() => {
|
||||
// eventBus.$emit("toNew01", newPrice);
|
||||
// }, 1000);
|
||||
// console.log(msg);
|
||||
let inData = msg.bids;
|
||||
// .reverse()
|
||||
let outData = msg.asks;
|
||||
if (msg.currency_id == currency_id && msg.legal_id == legal_id) {
|
||||
|
||||
|
||||
|
||||
|
||||
let [inlist, outList] = [inData, outData];
|
||||
|
||||
let [max, max1] = [0, 0];
|
||||
for (let i in inData) {
|
||||
inlist[i].price = inlist[i][0];
|
||||
inlist[i].number = inlist[i][1];
|
||||
max = inlist[i].number > max ? inlist[i].number : max;
|
||||
|
||||
}
|
||||
|
||||
that.inMaxValue = max;
|
||||
|
||||
that.inlist = inlist;
|
||||
|
||||
for (let i in outList) {
|
||||
outList[i].price = outList[i][0];
|
||||
outList[i].number = outList[i][1];
|
||||
max1 = outList[i].number > max1 ? outList[i].number : max;
|
||||
that.sellMaxValue = outList[i].number;
|
||||
|
||||
}
|
||||
that.sellMaxValue = max1;
|
||||
that.outlist = outList;
|
||||
}
|
||||
}
|
||||
});
|
||||
// new_kline
|
||||
that.sockets.subscribe('kline', msg => {
|
||||
if (msg.type == 'kline' && msg.period == '1min') {
|
||||
|
||||
// console.log('kline',msg.symbol,localStorage.getItem('symbol'))
|
||||
// var symbols = $('.trade-name').text();
|
||||
|
||||
if (msg.symbol == localStorage.getItem('symbol')) {
|
||||
// console.log(msg.symbol , msg)
|
||||
|
||||
// console.log(localStorage.getItem('symbol'),msg.close)
|
||||
that.newData = msg.close;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
that.sockets.subscribe('market_depth', msg => {
|
||||
if (msg.symbol == localStorage.getItem('symbol')) {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
// 更新最新价
|
||||
upPrice(legal_id, currency_id) {
|
||||
console.log('upPrice')
|
||||
var that = this;
|
||||
that.$socket.emit("login", localStorage.getItem("user_id"));
|
||||
that.$socket.on("kline", msg => {
|
||||
if (msg.type == "kline" && msg.period == '1min') {
|
||||
if (msg.currency_id == currency_id && msg.legal_id == legal_id) {
|
||||
that.newData = msg.close;
|
||||
window.localStorage.setItem('lastPrice', that.newData);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 10px 0 30px;
|
||||
// background-color: #181b2a;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.exchange {
|
||||
width: 230px;
|
||||
// background: #181d25;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.new_price {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #303b4b;
|
||||
padding: 0 0 0 20px;
|
||||
color: #00a4d8;
|
||||
}
|
||||
|
||||
.exchange_title {
|
||||
// line-height: 25px;
|
||||
position: relative;
|
||||
color: #637085;
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 0.875rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-item li {
|
||||
// line-height: 25px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.info-shadow {
|
||||
height: 100%;
|
||||
background: rgba(53, 182, 90, .3);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.info-shadow.selli {
|
||||
height: 100%;
|
||||
background: rgba(255, 73, 74, .3);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item li span,
|
||||
.exchange_title span {
|
||||
// width: 33.3%;
|
||||
width: 50%;
|
||||
display: block;
|
||||
text-align: left;
|
||||
float: left;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #00f0ff !important;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #FF4834;
|
||||
}
|
||||
|
||||
// .list-item li:hover {
|
||||
// background-color: #2b3648;
|
||||
// }
|
||||
|
||||
.line {
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
// padding-left: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.curPer {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 14px;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
|
||||
.day {
|
||||
.exchange_title {
|
||||
color: #7e7e7e;
|
||||
}
|
||||
}
|
||||
|
||||
.sas {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.s-itx {
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sas img {
|
||||
width: 2rem;
|
||||
height: 2.15rem;
|
||||
|
||||
}
|
||||
|
||||
.siAs img {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.exchange_title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.curPer {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="entrust">
|
||||
<div class="title fColor1 topshadow">
|
||||
<div class="tab_title">
|
||||
<span>{{$t('lever.hisentrust')}}</span>
|
||||
</div>
|
||||
<!-- <div class="tab_title fr ft12">
|
||||
<span v-for="(way,index) in wayList" :class="{'active': index == isChoosed}" @click="wayChoose(index,way.url)">{{way.title}}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="list-title fColor2 ft12 clear">
|
||||
<li class="fl w20">{{$t('time')}}</li>
|
||||
<li class="fl w10">{{$t('center.pairs')}}</li>
|
||||
<li class="fl w8">{{$t('number')}}</li>
|
||||
<li class="fl w10">{{$t('price')}}</li>
|
||||
<li class="fl w8">{{$t('center.dealtotal')}}</li>
|
||||
<li class="fl w10">{{$t('center.tprice')}}</li>
|
||||
<li class="fl w10">{{$t('status')}}</li>
|
||||
<li class="fl w10">{{$t('rate')}}</li>
|
||||
<li class="fl w8 tr">{{$t('center.direction')}}</li>
|
||||
</ul>
|
||||
<div class="containers scroll" v-if="comList.length>0">
|
||||
<ul class="list-item fColor1 ft12">
|
||||
<li v-for="item in comList" class="clear">
|
||||
<span class="fl w20">{{item.time}}</span>
|
||||
<span class="fl w10">{{item.currency_name}}/{{item.legal_name}}</span>
|
||||
<span class="fl w8">{{item.number}}</span>
|
||||
<span class="fl w10">{{item.price}}</span>
|
||||
<span class="fl w8">{{(item.price * item.number) | numFilter}}</span>
|
||||
<span class="fl w10">{{item.price}}</span>
|
||||
<span class="fl w10">{{$t('dealed')}}</span>
|
||||
<span class="fl w10">{{item.type=='in'? item.in_fee:item.out_fee}}</span>
|
||||
<span class="fl w8 tr" :class="item.type=='out'?'redColor':''">{{item.type=='in'?$t('center.inbuy'):$t('center.outsell')}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="getmore tc fColor1 ft14 mt10 curPer pdb20" @click="getMore" v-if="!loading && comList.length>8">{{more}}</div>
|
||||
<div class="tc pdb20" v-if="loading">
|
||||
<img src="@/assets/images/loading.gif" alt="" class="lodw20">
|
||||
<p class="ft12 baseColor">{{$t('loading')}}...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_data tc" v-if="comList.length<=0 && !loading">
|
||||
<img src="@/assets/images/nodata.png" alt="">
|
||||
<p class="fColor2 ft18">{{$t('nodata')}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"hisentrust",
|
||||
data (){
|
||||
return{
|
||||
address:'',
|
||||
isChoosed:0,
|
||||
isUrl:0,
|
||||
page:1,
|
||||
url:"transaction_in",
|
||||
type:'in',
|
||||
more:this.$t('more'),
|
||||
loading:false,
|
||||
wayList:[{title:this.$t('center.inbuy'),url:"transaction_in"},{title:this.$t('center.outsell'),url:"transaction_out"},{title:this.$t('center.all'),url:"transaction_all"}],
|
||||
comList:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.token = localStorage.getItem('token') || '';
|
||||
},
|
||||
wacth(){
|
||||
eventBus.$on('buyTrade', function (data) {
|
||||
if(data){
|
||||
that.getData();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
// 类型切换
|
||||
wayChoose(index,url){
|
||||
var that=this;
|
||||
that.comList='';
|
||||
that.page=1;
|
||||
that.url = url;
|
||||
if(url=='transaction_in'){
|
||||
that.type="in";
|
||||
}else{
|
||||
that.type="out";
|
||||
}
|
||||
that.more=that.$t('more');
|
||||
that.isChoosed=index;
|
||||
that.getData();
|
||||
},
|
||||
// 加载更多
|
||||
getMore(){
|
||||
this.page = ++this.page;
|
||||
this.getData();
|
||||
},
|
||||
getData(){
|
||||
var that = this;
|
||||
var page = that.page;
|
||||
that.loading = true;
|
||||
this.$http({
|
||||
url: '/api/' + 'transaction_complete',
|
||||
method:'post',
|
||||
data:{page:page},
|
||||
headers: {'Authorization': that.token}
|
||||
}).then(res=>{
|
||||
// console.log(res)
|
||||
that.loading=false;
|
||||
if(res.data.type == 'ok'){
|
||||
// console.log(res.data.message.list)
|
||||
var list=res.data.message.list;
|
||||
if(that.page==1){
|
||||
that.comList=list;
|
||||
}else{
|
||||
if(list.length<=0){
|
||||
that.more=$t('td.nomore')+'...';
|
||||
return;
|
||||
}else{
|
||||
that.comList=that.comList.concat(list)
|
||||
}
|
||||
}
|
||||
}else{
|
||||
// layer.msg(res.message);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
var that = this;
|
||||
eventBus.$on('buyTrade', function (data) {
|
||||
if(data){
|
||||
that.getData();
|
||||
}
|
||||
});
|
||||
that.getData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.title{height: 48px;line-height: 46px;padding: 0 40px 0 30px;background-color: #181b2a;}
|
||||
.tab_title{display: inline-block;line-height: 46px;height: 46px;}
|
||||
.tab_title span{cursor: pointer;}
|
||||
.tab_title span:not(:last-child) {margin-right: 40px;}
|
||||
.content{padding: 0 40px 0 30px;height: 300px;}
|
||||
.list-title{line-height: 40px; border-bottom: 1px solid #303b4b;height: 40px;}
|
||||
.no_data{padding: 50px 0;}
|
||||
.containers{height: 260px;overflow: auto;}
|
||||
.list-item li{line-height: 30px;}
|
||||
.list-item li span{display: inline-block;float: left;height: 30px;}
|
||||
/* .list-item li span:nth-child(3){color:#cc4951;} */
|
||||
.list-item li:hover{background-color: #2b3648}
|
||||
.list-item li span.green{color: #55a067}
|
||||
.pdb20{padding-bottom: 20px;}
|
||||
.containers span{
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// WEBPACK FOOTER //
|
||||
// src/view/lever/lever_hisentrust.vue
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="market" >
|
||||
<div class="m_title clear fColor1">
|
||||
<span class="fff fl">{{$t('market.market')}}</span>
|
||||
<div class="m_search fr">
|
||||
<input type="text" class="fColor1">
|
||||
<img src="../../assets/images/search.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="m_filter">
|
||||
<div class="tabtitle fColor1 ft14 curPer flex around">
|
||||
<!-- <span class="active">JNB</span> -->
|
||||
|
||||
<!-- <span class="active">USDC</span>
|
||||
<span>JNB</span>
|
||||
<span>JNB</span> -->
|
||||
<span v-for="(tab,index) in tabList " :key="index" :class="index==index1?'active':''" @click="changeType(index,tab.name,tab.id)">{{tab.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coin-title clear">
|
||||
<div>
|
||||
<span>{{$t('market.currency')}}</span>
|
||||
<img src="../../assets/images/select0.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<span>{{$t('market.lastprice')}}</span>
|
||||
<img src="../../assets/images/select0.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<span>{{$t('market.change')}}</span>
|
||||
<img src="../../assets/images/select0.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<ul class="coin-wrap scroll">
|
||||
<!-- <li>
|
||||
<span v-for="item in newData">{{item}}</span>
|
||||
</li> -->
|
||||
<li class="currency_p" v-for="(market,index) in marketList " :key="index" v-show="index1 == index" >
|
||||
<p v-for="(itm,idx) in market" :key="itm.id" :class="idx==index2?'active_p':''" :data-id='itm.id' :data-index='idx' @click="quota_shift(idx,itm.id,itm.name)">
|
||||
<span>{{itm.name}}</span>
|
||||
<span :data-name='tabList[index].name+"/"+itm.name'>${{itm.last_price}}</span>
|
||||
<span :class="{'green':itm.proportion>=0}">{{itm.proportion>=0?('+'+(itm.proportion-0).toFixed(2)):(itm.proportion-0).toFixed(2)}}%</span>
|
||||
</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "market",
|
||||
data (){
|
||||
return{
|
||||
ids:0,
|
||||
isShow:0,
|
||||
tabList:[],
|
||||
marketList:[],
|
||||
newData:['MTS', "$0.076128",'-1.11%'],
|
||||
legal_index:this.$route.params.legal_index,
|
||||
currency_index:this.$route.params.currency_index,
|
||||
tradeDatas:'',
|
||||
index2:0,
|
||||
index1:0,
|
||||
legal_id:window.localStorage.getItem('legal_id'),
|
||||
currency_id:window.localStorage.getItem('currency_id'),
|
||||
selectedId:''
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
if(window.localStorage.getItem('index02')&&window.localStorage.getItem('index01')){
|
||||
this.index2= window.localStorage.getItem('index02');
|
||||
this.index1=window.localStorage.getItem('index01')
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
var that =this;
|
||||
eventBus.$on('toNew01', function (data) {
|
||||
if(data){
|
||||
var newprice=data.newprice;
|
||||
var cname=data.istoken;
|
||||
var newup=data.newup;
|
||||
if(newup>=0){
|
||||
newup="+"+Number(newup*100).toFixed(2)+'%';
|
||||
$("span[data-name='"+cname+"']").next().css('color','#55a067')
|
||||
}else{
|
||||
newup=newup+'%';
|
||||
$("span[data-name='"+cname+"']").next().css('color','#cc4951')
|
||||
}
|
||||
$("span[data-name='"+cname+"']").html('$'+newprice).next().html(newup);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
methods:{
|
||||
changeType(index,currency,currency_id){
|
||||
this.index1=index;
|
||||
this.index2=null;
|
||||
$('.currency_p p').removeClass('active_p')
|
||||
this.isShow=index;
|
||||
this.ids = 'a';
|
||||
this.currency_name = currency;
|
||||
this.currency_id = currency_id;
|
||||
},
|
||||
getSymbols(callback){
|
||||
if(this.address.length<=0){
|
||||
return false;
|
||||
}
|
||||
this.$http({
|
||||
url:'/api/'+'wallet/list?user_id='+this.address||'',
|
||||
type:'GET'
|
||||
}).then(res=>{
|
||||
// console.log(res)
|
||||
if(res.data.type=='ok'){
|
||||
this.accountInfo=res.data.message;
|
||||
this.dataList=res.data.message.list;
|
||||
// console.log(this.dataList)
|
||||
callback && callback();
|
||||
}else{
|
||||
// console.log(123)
|
||||
// alert(res.message)
|
||||
}
|
||||
}).catch(error=>{
|
||||
return error
|
||||
})
|
||||
},
|
||||
init(){
|
||||
// var index=layer.load();
|
||||
this.address = localStorage.getItem('address') || '';
|
||||
this.$http({
|
||||
url: '/api/'+'quotation_new',
|
||||
method:'post',
|
||||
headers: {'Authorization': localStorage.getItem('token')},
|
||||
}).then(res=>{
|
||||
// layer.close(index);
|
||||
// console.log(res)
|
||||
if(res.data.type=="ok"){
|
||||
this.getSymbols(()=>{
|
||||
this.marketList=res.data.message.coin_list;
|
||||
// console.log(res.data.message.coin_list)
|
||||
for(var i in this.dataList){
|
||||
for(var j in this.marketList){
|
||||
if(this.dataList[i].name == this.marketList[j].symbol){
|
||||
// console.log(1)
|
||||
this.marketList[j].type=this.marketList[j].type||1
|
||||
}else{
|
||||
this.marketList[j].type=this.marketList[j].type||0
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}else{
|
||||
// layer.msg(res.data.message)
|
||||
}
|
||||
|
||||
}).catch(error=>{
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
},
|
||||
//币种切换
|
||||
quota_shift(idx,id,legal_name){
|
||||
window.localStorage.setItem('index01',this.index1);
|
||||
window.localStorage.setItem('index02',idx);
|
||||
this.ids = idx;
|
||||
var tradeDatas = {
|
||||
currency_id:this.currency_id,
|
||||
legal_id:id,
|
||||
currency_name:this.currency_name,
|
||||
leg_name:legal_name
|
||||
}
|
||||
window.localStorage.setItem('lever_legal_id',id);
|
||||
window.localStorage.setItem('lever_currency_id',this.currency_id);
|
||||
window.localStorage.setItem('lever_legal_name',legal_name);
|
||||
window.localStorage.setItem('lever_currency_name',this.currency_name);
|
||||
location.reload()
|
||||
},
|
||||
//socket连接封装
|
||||
socket(token) {
|
||||
let that = this;
|
||||
$.ajax({
|
||||
url: _API + "user/info",
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
async: true,
|
||||
beforeSend: function beforeSend(request) {
|
||||
request.setRequestHeader("Authorization", token);
|
||||
},
|
||||
success: function success(data) {
|
||||
if (data.type == 'ok') {
|
||||
var socket = io(socket_api);
|
||||
socket.on('connect', function(datas) {
|
||||
socket.emit('login', data.message.id);
|
||||
// 后端推送来消息时
|
||||
socket.on('daymarket', function(msg) {
|
||||
if (msg.type == 'daymarket') {
|
||||
if (that.selectId && (that.selectId == msg.legal_id)) {
|
||||
// now_price
|
||||
let lists = that.detailList.quotation;
|
||||
for(i in lists){
|
||||
if(lists[i].currency_id == msg.currency_id){
|
||||
that.detailList.quotation[i].volume=msg.volume;
|
||||
that.detailList.quotation[i].now_price=msg.now_price;
|
||||
that.detailList.quotation[i].change=msg.change;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.m_title{height: 55px;padding: 15px 30px;line-height: 25px;}
|
||||
.m_search input{border-radius: 3px;background: transparent;border: 1px solid #52688c;line-height: 25px;}
|
||||
/* .m_search{position: absolute;width: 146px;right: 20px;top: -4px;height: 26px;border-radius: 3px;padding: 4px 8px 4px 0;} */
|
||||
/* .m_search input{position: absolute;left: 0;top: 10px;z-index: 2;width: 100%;padding: 5px 40px 5px 8px;height: 26px;border-radius: 3px;background: transparent;border: 1px solid #52688c;} */
|
||||
.m_search img{width: 16px;height: 15px;position: absolute;right: 35px;top: 20px;z-index: 123;}
|
||||
.m_filter{padding: 10px 0 15px;}
|
||||
.tabtitle span {text-align: center;padding: 0 10px;}
|
||||
.coin-title div{width: 33.3%;height: 36px;line-height: 36px;background-color: #181b2a;text-align: center;float: left;color: #637085;font-size:12px;}
|
||||
.coin-title img{vertical-align: middle;margin-top: -3px;}
|
||||
.line{width: 90%;margin: 0px auto;border-bottom: 1px solid rgb(48, 59, 75);}
|
||||
.coin-wrap{height: 395px;overflow: auto;background-color: #181b2a;}
|
||||
.coin-wrap li{height: 30px;line-height: 30px;cursor: pointer;font-size: 12px;color: #cdd6e4;}
|
||||
.coin-wrap li span{display: block;width: 33%;float: left;text-align: center;}
|
||||
.coin-wrap li span:last-child{color: #cc4951;}
|
||||
.coin-wrap li:nth-child(odd){background-color: #181b2a;}
|
||||
.coin-wrap li span.green{color: #55a067;}
|
||||
.coin-wrap li p{
|
||||
overflow: hidden;
|
||||
}
|
||||
.active_p{
|
||||
background-color: #2b3648;
|
||||
}
|
||||
.coin-wrap li p:hover{background-color: #2b3648;}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
// WEBPACK FOOTER //
|
||||
// src/view/lever/lever_market.vue
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="notice">
|
||||
<!-- <indexHeader></indexHeader> -->
|
||||
<div class="account-wrap">
|
||||
<div class="account" style="width:auto">
|
||||
<div>
|
||||
<div class="back-nav fColor1 ft20 clear" style="padding:0 20px"> {{$t('notice')}}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="account-content">
|
||||
<div class="tc hide" style="padding-top: 150px;">
|
||||
<img src="../../assets/images/nodata.png" alt="">
|
||||
<p class="fColor2 ft18">{{$t('nodata')}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="noticeList">
|
||||
<li class="clear curPer" v-for="item in newList" :key="item.id">
|
||||
<div class="" @click="goDetail(item.id)">
|
||||
<div class="">{{item.title}}</div>
|
||||
<span class="fr">{{item.update_time}}</span>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tc" style="padding:15px">
|
||||
<!-- <div class="fColor1 ft14 mt10" @click="getMore">{{more}}</div> -->
|
||||
<!-- <div>
|
||||
<img src="@/assets/images/loading.gif" alt="" class="lodw20">
|
||||
<p class="ft12 baseColor">{{$t('loading')}}...</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import indexHeader from "@/view/indexHeader";
|
||||
export default {
|
||||
name: "noticeList",
|
||||
components: { indexHeader },
|
||||
data() {
|
||||
return {
|
||||
more: this.$t('more')+"...",
|
||||
newList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.$http({
|
||||
// url: '/api/' + "news/list",
|
||||
// method: "get",
|
||||
// data: {}
|
||||
// })
|
||||
// .then(res => {
|
||||
// res = res.data;
|
||||
// if (res.type === "ok") {
|
||||
// console.log(res.message.list)
|
||||
// this.newList = res.message.list;
|
||||
// } else {
|
||||
// layer.msg(res.message);
|
||||
// }
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.log(error);
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
getNotice(){
|
||||
this.$http({
|
||||
url:'/api/' + 'news/list',
|
||||
method:'post',
|
||||
}).then(res => {
|
||||
// console.log(res);
|
||||
this.newList=res.data.message.list
|
||||
|
||||
})
|
||||
},
|
||||
goBefore() {
|
||||
this.$router.back(-1);
|
||||
},
|
||||
getMore() {
|
||||
},
|
||||
goDetail(id) {
|
||||
var id = id;
|
||||
this.$router.push({
|
||||
name: "noticeDetail",
|
||||
query: { id: id }
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
var that = this;
|
||||
that.getNotice();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
.account-wrap {
|
||||
// background: url(../assets/images/account_center_bg.jpg) no-repeat;
|
||||
// background-size: cover;
|
||||
.account {
|
||||
// width: 1500px;
|
||||
margin: 0 auto;
|
||||
// padding-top: 30px;
|
||||
overflow: hidden;
|
||||
// min-height: 880px;
|
||||
padding-top: 0;
|
||||
.back-nav {
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.nav-after {
|
||||
display: block;
|
||||
height: 10px;
|
||||
background-color: #262a42;
|
||||
}
|
||||
.account-content {
|
||||
width: 100%;
|
||||
min-height: 450px;
|
||||
background-color: #181b2a;
|
||||
ul {
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
li {
|
||||
border-bottom: 1px dashed #303b4b;
|
||||
height: 72px;
|
||||
padding: 10px 0 7px;
|
||||
color: #cdd6e4;
|
||||
font-size: 12px;
|
||||
> div {
|
||||
> div {
|
||||
height: 36px;
|
||||
line-height: 18px;
|
||||
}
|
||||
span{
|
||||
color: #61688a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
// WEBPACK FOOTER //
|
||||
// src/view/lever/lever_noticeList.vue
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="detail">
|
||||
<div class="title fColor1 topshadow">
|
||||
<div class="inblock">
|
||||
<a class="curPer" onclick="javascript:history.back(-1);"><span>{{ $t('back') }}</span></a>
|
||||
</div>
|
||||
<div class="inblock fr">
|
||||
<!-- <span class="all" @click="links">合约持仓</span>-->
|
||||
<span class="all" @click="all">{{ $t('lever.all') }}</span>
|
||||
<span class="all" @click="recordList">{{ $t('lever.tdrecord') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="list-title fColor2 ft12 clear">
|
||||
<li class="fl w12">{{ $t('time') }}</li>
|
||||
<li class="fl w12">{{ $t('price') }}</li>
|
||||
<li class="fl w8">{{ $t('home.volume') }}</li>
|
||||
</ul>
|
||||
<div class="containers scroll" v-if="deList.length>0">
|
||||
<ul v-for="(itm,index) in deList" :key="index" class="list-item fColor1 ft12">
|
||||
<li class="clear">
|
||||
<span class="fl w12">{{ itm.time }}</span>
|
||||
<span class="fl w12">{{ itm.price | tofixedFour }}</span>
|
||||
<span class="fl w8">{{ itm.number | tofixed }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="no_data tc" v-if="deList.length<=0">
|
||||
<img src="../../assets/images/nodata.png" alt="">
|
||||
<p class="fColor2 ft18">{{ $t('nodata') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "leverTransaction",
|
||||
data() {
|
||||
return {
|
||||
address: '',
|
||||
isChoosed: 2,
|
||||
new: false,
|
||||
wayList: [this.$t('center.inbuy'), this.$t('center.outsell'), this.$t('center.all')],
|
||||
deList: [],
|
||||
legal_id: '',
|
||||
currency_id: ''
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numFilters: function (value) {
|
||||
if (!value) return ''
|
||||
value = value.toString()
|
||||
return value.slice(0) + ' '
|
||||
}
|
||||
,
|
||||
tofixed: function (val) {
|
||||
val = Number(val);
|
||||
return val.toFixed(2);
|
||||
},
|
||||
tofixedFour: function (val) {
|
||||
val = Number(val);
|
||||
return val.toFixed(4);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.address = localStorage.getItem('address') || '';
|
||||
this.legal_id = localStorage.getItem('legal_id');
|
||||
this.currency_id = localStorage.getItem('currency_id');
|
||||
var that = this;
|
||||
that.complete(this.legal_id, this.currency_id);
|
||||
eventBus.$on('to_leverExchange', function (data) {
|
||||
if (data) {
|
||||
that.complete(localStorage.getItem('legal_id'), localStorage.getItem('currency_id'));
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
wayChoosed(index) {
|
||||
this.isChoosed = index;
|
||||
},
|
||||
//我的交易记录
|
||||
complete(legals_id, currencys_id) {
|
||||
this.$http({
|
||||
url: '/api/' + 'lever/deal',
|
||||
method: 'post',
|
||||
data: {
|
||||
legal_id: legals_id,
|
||||
currency_id: currencys_id
|
||||
},
|
||||
headers: {'Authorization': localStorage.getItem('token')},
|
||||
}).then(res => {
|
||||
// layer.close(i);
|
||||
if (res.data.type == "ok") {
|
||||
this.deList = res.data.message.my_transaction;
|
||||
// this.connect();
|
||||
} else {
|
||||
// layer.msg(res.data.message)
|
||||
}
|
||||
}).catch(error => {
|
||||
// console.log(error)
|
||||
})
|
||||
},
|
||||
|
||||
all() {
|
||||
this.$router.push({name: 'allTransaction'})
|
||||
},
|
||||
// 合约持仓
|
||||
links() {
|
||||
this.$router.push({name: 'leverTransactions'})
|
||||
},
|
||||
// 跳转交易记录
|
||||
recordList() {
|
||||
this.$router.push({name: 'leverList'})
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
var that = this;
|
||||
|
||||
eventBus.$on('buyTrade', function (data) {
|
||||
// that.connect();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wrap{
|
||||
background: #181d25;
|
||||
}
|
||||
.detail {
|
||||
min-height: 500px;
|
||||
background: #000000;
|
||||
width: 75rem;
|
||||
margin: 0px auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #cc4951;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
background-color: #181b2a;
|
||||
}
|
||||
|
||||
.tab_title {
|
||||
display: inline-block;
|
||||
line-height: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.tab_title span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab_title span:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
//padding: 0 40px 0 30px;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #303b4b;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.list-title li {
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no_data {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.containers {
|
||||
height: 260px;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-item li {
|
||||
line-height: 45px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-item li span {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-item li:hover {
|
||||
cursor: pointer;
|
||||
background-color: #181d25
|
||||
}
|
||||
|
||||
.list-item li span.green {
|
||||
color: #55a067
|
||||
}
|
||||
|
||||
.all {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #00a4d8;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div id="lever-record">
|
||||
<div class="title">
|
||||
<span class="fl">USDC</span>
|
||||
<span class="fr" @click="$router.go(-1)">{{$t('back')}}</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-title flex">
|
||||
<span>{{$t('c2c.type')}}</span>
|
||||
<span>{{$t('number')}}</span>
|
||||
<span>{{$t('time')}}</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="(item,index) in log" :key="index">
|
||||
<span>{{item.type}}</span>
|
||||
<span>{{item.number || '0.00' | toFixeds}}</span>
|
||||
<span>{{item.add_time}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
log: [],
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLog();
|
||||
},
|
||||
filters: {
|
||||
toFixeds: function(value) {
|
||||
value = Number(value);
|
||||
return value.toFixed(2);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLog:function() {
|
||||
let that = this;
|
||||
var token = window.localStorage.getItem("token");
|
||||
this.$http({
|
||||
url: "/api/wallet/hzhistory",
|
||||
method: "post",
|
||||
headers: { Authorization: token },
|
||||
data: {
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.type == "ok") {
|
||||
let msg = res.data.data;
|
||||
that.log = msg;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
#lever-record {
|
||||
width: 75rem;
|
||||
margin: 0 auto;
|
||||
color: #c7cce6;
|
||||
.title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 30px;
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
border-radius: 3px;
|
||||
background-color: #181b2a;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
min-height: 900px;
|
||||
padding: 0 30px;
|
||||
background: #181b2a;
|
||||
}
|
||||
.list-title,
|
||||
li {
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
li {
|
||||
border-top: 1px solid #202a4a;
|
||||
}
|
||||
.loadmore {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
// WEBPACK FOOTER //
|
||||
// src/view/lever/transferRecord.vue
|
||||
Reference in New Issue
Block a user