翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/page/accountChange/index.vue

@@ -1,8 +1,42 @@
<template>
    <!-- 账变记录 -->
    <div class="accountChange">
        <assets-head :title="$t('账变记录')" />
        <van-tabs ref="tabs" v-model="active" swipeable @change="onChange" sticky>
  <!-- 账变记录 -->
  <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">
                {{ item.createTimeStr | formatDate }}
              </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">
@@ -28,8 +62,8 @@
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
        <!-- <div class="flex justify-between pl-30 pr-30 mtb30">
        </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>
@@ -43,277 +77,340 @@
            </div>
             <button class="search-btn btnMain text-white font-28 rounded-4" @click="onSumbit">{{ $t('查询') }}</button>
        </div> -->
    </div>
  </div>
</template>

<script>
import { _fundRecord } from '@/API/fund.api'
import { List } from 'vant'
import { _fundRecord } from "@/API/fund.api";
import { List } from "vant";
import assetsHead from "@/components/assets-head";
import { Tab, Tabs } from 'vant';
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'},
            ]
  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);
    },
    formatDate(val) {
      if (!val) return "";
      // 去掉年份部分，保留月份、日期和时间
      return val.replace(/^\d{4}-/, "");
    },
  },
  methods: {
    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++;
        }
      });
    },
    mounted() {
        setTimeout(() => {
            this.$refs.tabs.resize();
        }, 500)
    onClickLeft() {
      this.$router.go(-1);
    },
    components: {
        assetsHead,
        [List.name]: List,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab
    selectBtn() {
      this.isShow = !this.isShow;
    },
    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'
            }
        }
    selectItem(item) {
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    filters: {
        toFixed(val) {
            return (val / 1).toFixed(5)
        }
    onSumbit() {
      // 查询
      this.page = 1;
      this.finished = false;
      this.list = [];
      this.fetchData();
    },
    methods: {
        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;
  width: 100%;
  box-sizing: border-box;

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("tab_background");
        }
  ::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--active .van-tab__text {
    @include themify() {
      color: themed("text_color");
    }
  }

    ::v-deep .van-tab__text {
        @include themify() {
            color: themed("text_color1");
        }
  ::v-deep .van-tab__text {
    @include themify() {
      color: themed("text_color1");
    }
  }
}



// select样式
.select-view {
    position: relative;
    width: 320px;
  position: relative;
  width: 320px;
}

.select-box {
    width: 100%;
    height: 70px;
    line-height: 70px;
  width: 100%;
  height: 70px;
  line-height: 70px;

    @include themify() {
        background-color: themed("input_background");
    }
  @include themify() {
    background-color: themed("input_background");
  }

    cursor: pointer;
  cursor: pointer;
}

.option-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;

    @include themify() {
        background: themed("grey_bg");
    }
  @include themify() {
    background: themed("grey_bg");
  }

    text-align: center;
  text-align: center;

    @include themify() {
        box-shadow: 0px 0px 3px 3px themed("grey_bg");
    }
  @include themify() {
    box-shadow: 0px 0px 3px 3px themed("grey_bg");
  }

    border-radius: 4px;
  border-radius: 4px;

    @include themify() {
        color: themed("text_color3");
    }
  @include themify() {
    color: themed("text_color3");
  }

    z-index: 10;
  z-index: 10;
}

.option-box>div {
    padding: 30px 0;
.option-box > div {
  padding: 30px 0;
}

.option-box>div:hover {
    // background-color:#F5F5F5;
.option-box > div:hover {
  // background-color:#F5F5F5;
}

// 按钮
.search-btn {
    width: 140px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border: none;
    outline: none;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: none;
  outline: none;
}

.record-list {
    padding: 38px 30px;
  padding: 38px 30px;

    @include themify() {
        border-bottom: 1px solid themed("cont_background");
    }
  @include themify() {
    border-bottom: 1px solid themed("cont_background");
  }
}

.mt12 {
    margin-top: 12px;
  margin-top: 12px;
}

.dividing-line {
    height: 10px;
  height: 10px;

    @include themify() {
        background-color: themed("divi_line");
    }

  @include themify() {
    background-color: themed("divi_line");
  }
}

.mtb30 {
    margin: 30px 0;
  margin: 30px 0;
}

.select-icon {
    position: relative;
    bottom: 8px;
  position: relative;
  bottom: 8px;
}

.accountChange {
    ::v-deep .van-tab__text {
        font-size: 30px !important;
  ::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>