<template>
|
<!-- 账变记录 -->
|
<div class="accountChange">
|
<assets-head :title="$t('账变记录')" />
|
<div class="asset-list">
|
<van-list
|
v-model="loading"
|
:loading-text="$t('加载中...')"
|
:finished="finished"
|
:finished-text="list.length ? $t('已经全部加载完毕') : ''"
|
@load="onLoad"
|
:offset="130"
|
class="px-16"
|
>
|
<div class="list" v-for="(item, index) in list" :key="index">
|
<div class="list-h">
|
<span>{{ item.wallettype }}</span>
|
</div>
|
<div class="kline"></div>
|
<div class="list-item">
|
<div class="list-b">
|
<div>{{ $t("时间") }}</div>
|
<div class="list-value">
|
{{ formatDate(item.createTime) }}
|
</div>
|
</div>
|
<div class="list-b">
|
<div>{{ $t("类型") }}</div>
|
<div class="list-value">{{ category[item.category] }}</div>
|
</div>
|
<div class="list-b">
|
<div>{{ $t("到账数量") }}</div>
|
<div class="list-value">{{ item.amount | toFixed }}</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</div>
|
<!-- <van-tabs ref="tabs" v-model="active" swipeable @change="onChange" sticky>
|
<van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
|
<van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
|
:finished-text="list.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" class="px-16">
|
<div class="flex justify-between items-center record-list" v-for="(item, index) in list" :key="index">
|
<div class="flex items-center">
|
<img :src="require(`@/assets/image/assets-center/${item.amount > 0 ? 'in' : 'out'}.png`)"
|
class="w-44 h-44 mr-20" />
|
<div>
|
<div class="font-32 textColor">{{ category[item.category] }}</div>
|
<div class="text-grey font-26 mt-14">{{ orderTypes[item.content_type] }}</div>
|
</div>
|
</div>
|
<div>
|
<div class="font-32 text-right" :class="item.amount > 0 ? 'text-green' : 'text-red'">{{
|
item.amount |
|
toFixed }} {{ item.wallettype.toUpperCase() }}</div>
|
<div class="text-grey font-28 mt-14">{{ item.createTimeStr }}</div>
|
</div>
|
</div>
|
<div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!list.length && !loading">
|
<img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
|
<p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
|
</div>
|
</van-list>
|
</van-tab>
|
</van-tabs> -->
|
<!-- <div class="flex justify-between pl-30 pr-30 mtb30">
|
<div class="select-view">
|
<div class="flex item-center justify-center select-box text-center" @click="selectBtn">
|
<div class="font-30">{{ title }}</div>
|
<div class="select-icon">
|
<img src="../../assets/image/assets-center/select-icon.png" class="w-20 h-10 ml-10"/>
|
</div>
|
</div>
|
<div class="option-box" v-show="isShow">
|
<div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title || $t('请选择账户类型') }}</div>
|
</div>
|
</div>
|
<button class="search-btn btnMain text-white font-28 rounded-4" @click="onSumbit">{{ $t('查询') }}</button>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import { _fundRecord } from "@/API/fund.api";
|
import { List } from "vant";
|
import assetsHead from "@/components/assets-head";
|
import { Tab, Tabs } from "vant";
|
export default {
|
name: "accountChange",
|
data() {
|
return {
|
active: "",
|
page: 1,
|
loading: false, // 当loading为true时，转圈圈
|
finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
|
noData: false, // 如果没有数据，显示暂无数据
|
// loading:false, // 下拉的加载图案
|
isShow: false,
|
title: this.$t("选择账户类型"),
|
selectData: [
|
{ title: this.$t("全部"), type: "" },
|
{ title: this.$t("法币交易"), type: "coin" },
|
{ title: this.$t("合约交易"), type: "contract" },
|
{ title: this.$t("币币交易"), type: "exchange" },
|
],
|
type: "", //选中类型
|
list: [
|
// { order_no:'11111', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:1000,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
|
// { order_no:'22222', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:-200,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
|
// { order_no:'3333333', category:this.$t('合约交易'),content_type:this.$t('永续合约平仓'),amount:1000,wallettype:'USDT',createTimeStr:'2022-07-16 22:23:04'},
|
],
|
};
|
},
|
created() {
|
this.onChange();
|
},
|
mounted() {
|
// setTimeout(() => {
|
// this.$refs.tabs.resize();
|
// }, 500);
|
},
|
components: {
|
assetsHead,
|
[List.name]: List,
|
[Tabs.name]: Tabs,
|
[Tab.name]: Tab,
|
},
|
computed: {
|
orderTypes() {
|
return {
|
withdraw: this.$t("提币"),
|
recharge: this.$t("充币"),
|
contract_close: this.$t("永续合约平仓"),
|
contract_open: this.$t("永续合约建仓"),
|
contract_cancel: this.$t("永续合约撤单"),
|
fee: this.$t("手续费"),
|
exchange_open: this.$t("币币买入"),
|
exchange_close: this.$t("币币卖出"),
|
exchange_cancel: this.$t("币币撤单"),
|
finance: this.$t("理财"),
|
finance_profit: this.$t("理财收益"),
|
finance_recom_profit: this.$t("理财推广收益"),
|
miner_buy: this.$t("锁仓矿机"),
|
miner_recom_profit: this.$t("矿机推广收益"),
|
miner_profit: this.$t("矿机收益"),
|
miner_back: this.$t("矿机赎回"),
|
fund_close: this.$t("赎回"),
|
fund_open: this.$t("购买"),
|
otc_sell: this.$t("otc卖币"),
|
otc_buy: this.$t("otc买币"),
|
otc_cancel: this.$t("otc订单取消"),
|
loan_frozen: this.$t("冻结"),
|
loan_thaw: this.$t("解冻"),
|
loan_closeout: this.$t("强平"),
|
loan_add: this.$t("借款"),
|
loan_repay: this.$t("还款"),
|
finance_buy: this.$t("购买"),
|
finance_back: this.$t("赎回"),
|
delivery_contract_open: this.$t("交割合约建仓"),
|
delivery_contract_close: this.$t("交割合约平仓"),
|
follow_up_fee: this.$t("跟单手续费"),
|
exchange_lever_close: this.$t("全仓杠杆平仓"),
|
exchange_lever_open: this.$t("全仓杠杆建仓"),
|
exchange_lever_interest: this.$t("全仓杠杆利息"),
|
c2c_sell: this.$t("c2c卖币"),
|
c2c_buy: this.$t("c2c买币"),
|
};
|
},
|
category() {
|
return {
|
coin: this.$t("法币交易"),
|
contract: this.$t("合约交易"),
|
exchange: this.$t("币币交易"),
|
finance: this.$t("理财"),
|
miner: this.$t("矿机"),
|
otc: this.$t("otc"),
|
loan: this.$t("质押借币"),
|
c2c: "C2C",
|
};
|
},
|
},
|
filters: {
|
toFixed(val) {
|
return (val / 1).toFixed(4);
|
},
|
|
|
},
|
methods: {
|
formatDate(val) {
|
// 转换为本地时间
|
const localTime = new Date(val).toLocaleString('de-DE');
|
|
// 使用正则去除年份部分
|
return localTime.replace(/\d{4}-\d{2}-\d{2}, /, '');
|
},
|
onChange(e) {
|
this.list = [];
|
this.finished = false;
|
this.page = 1;
|
this.type = e || "";
|
this.loading = true;
|
if (this.loading) {
|
this.fetchData();
|
}
|
},
|
onLoad() {
|
this.fetchData();
|
},
|
fetchData() {
|
// 获取数据
|
_fundRecord(this.type, this.page).then((data) => {
|
this.list = [...this.list, ...data];
|
// console.log(logs)
|
this.loading = false;
|
if (data.length < 20) {
|
this.finished = true;
|
} else {
|
this.page++;
|
}
|
});
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
selectBtn() {
|
this.isShow = !this.isShow;
|
},
|
selectItem(item) {
|
this.title = item.title;
|
this.type = item.type;
|
this.isShow = false;
|
},
|
onSumbit() {
|
// 查询
|
this.page = 1;
|
this.finished = false;
|
this.list = [];
|
this.fetchData();
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.accountChange {
|
width: 100%;
|
box-sizing: border-box;
|
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
}
|
|
::v-deep .van-tab--active .van-tab__text {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-tab__text {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
}
|
|
// select样式
|
.select-view {
|
position: relative;
|
width: 320px;
|
}
|
|
.select-box {
|
width: 100%;
|
height: 70px;
|
line-height: 70px;
|
|
@include themify() {
|
background-color: themed("input_background");
|
}
|
|
cursor: pointer;
|
}
|
|
.option-box {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 90px;
|
width: 100%;
|
|
@include themify() {
|
background: themed("grey_bg");
|
}
|
|
text-align: center;
|
|
@include themify() {
|
box-shadow: 0px 0px 3px 3px themed("grey_bg");
|
}
|
|
border-radius: 4px;
|
|
@include themify() {
|
color: themed("text_color3");
|
}
|
|
z-index: 10;
|
}
|
|
.option-box > div {
|
padding: 30px 0;
|
}
|
|
.option-box > div:hover {
|
// background-color:#F5F5F5;
|
}
|
|
// 按钮
|
.search-btn {
|
width: 140px;
|
height: 55px;
|
line-height: 55px;
|
text-align: center;
|
border: none;
|
outline: none;
|
}
|
|
.record-list {
|
padding: 38px 30px;
|
|
@include themify() {
|
border-bottom: 1px solid themed("cont_background");
|
}
|
}
|
|
.mt12 {
|
margin-top: 12px;
|
}
|
|
.dividing-line {
|
height: 10px;
|
|
@include themify() {
|
background-color: themed("divi_line");
|
}
|
}
|
|
.mtb30 {
|
margin: 30px 0;
|
}
|
|
.select-icon {
|
position: relative;
|
bottom: 8px;
|
}
|
|
.accountChange {
|
::v-deep .van-tab__text {
|
font-size: 30px !important;
|
}
|
}
|
|
.asset-list {
|
width: 100%;
|
@include themify() {
|
color: themed("text_color1");
|
}
|
.list {
|
background: #212121;
|
box-sizing: border-box;
|
margin-bottom: 2.3rem;
|
padding: 2.3rem;
|
border-radius: 2.3rem;
|
position: relative;
|
}
|
.list-h {
|
display: flex;
|
align-items: center;
|
margin-bottom: 2rem;
|
span {
|
font-size: 2.2rem;
|
font-weight: 600;
|
color: #fff;
|
}
|
}
|
.list-item {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 2.3rem;
|
.list-b {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-bottom: 1.4rem;
|
font-size: 1.6rem;
|
width: 21rem;
|
padding-right: 1.4rem;
|
margin-right: 1.4rem;
|
box-sizing: border-box;
|
.list-value {
|
width: 100%;
|
color: #fff;
|
font-size: 2rem;
|
font-weight: 600;
|
line-height: 1.5;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
.kline {
|
width: 100%;
|
height: 1px;
|
background: rgba(60, 58, 58, 0.6);
|
}
|
</style>
|
