|
|
@@ -0,0 +1,426 @@
|
|
|
+<template>
|
|
|
+ <div class="assets" @scroll="handleScroll">
|
|
|
+ <div class="head">
|
|
|
+ <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
|
|
|
+ <span>{{ $t('lang227') }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pd">
|
|
|
+ <div class="top_box">
|
|
|
+ <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
|
|
|
+ <template #reference>
|
|
|
+ <div class="btn" type="primary">{{ action.text }}</div>
|
|
|
+ </template>
|
|
|
+ </van-popover>
|
|
|
+ <van-field v-model="areaId" :placeholder="$t('lang228')" class="input" right-icon="search" @click-right-icon="search" />
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <!-- <div class="total_box">
|
|
|
+ <div>
|
|
|
+ <span class="text">{{ $t('lang112') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="f-sa">
|
|
|
+ <div class="item">
|
|
|
+ <span class="total">{{ Math.floor(totalReward * 100) / 100 || 0 }}</span>
|
|
|
+ <span>{{ $t('lang174') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="buy buy1" @click="navigation('recharge')">
|
|
|
+ <van-button class="buy_btn" type="primary">
|
|
|
+ <van-icon name="pending-payment" size="18" />
|
|
|
+ {{ $t('lang138') }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ <div class="buy" @click="navigation('withdraw')">
|
|
|
+ <van-button class="buy_btn" type="primary">
|
|
|
+ <van-icon name="paid" size="18" />
|
|
|
+ {{ $t('lang113') }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="bare" v-if="total <= 0">
|
|
|
+ <span>{{ $t('lang60') }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="container">
|
|
|
+ <!-- <div class="navbar">
|
|
|
+ <span
|
|
|
+ v-for="(item, index) in navList"
|
|
|
+ :key="index"
|
|
|
+ @click="changeNav(item, index)"
|
|
|
+ :style="{ color: navIndex == index ? '#000' : '', 'border-bottom': navIndex == index ? '1px solid #000' : '' }"
|
|
|
+ >{{ item.key }}</span
|
|
|
+ >
|
|
|
+ </div> -->
|
|
|
+ <div class="list">
|
|
|
+ <div v-for="(item, index) in list" :key="index" class="li">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box_item">
|
|
|
+ <div class="f-c">
|
|
|
+ <span class="num">{{ item.address_id }}</span>
|
|
|
+ <span class="amount">
|
|
|
+ {{
|
|
|
+ statusList.filter((it, idx) => {
|
|
|
+ return item.status == it.status && it.type_id == item.type_id;
|
|
|
+ })[0]?.text || ''
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="f-c">
|
|
|
+ <span class="key ellipsis">{{ item.name }}</span>
|
|
|
+ <span class="key">{{ dateFormatFn(item.create_time) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { homeApi } from '@/api/index';
|
|
|
+import { dateFormat } from '@/utils/formatTool.js';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 1,
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ total: 1,
|
|
|
+ nickname: '',
|
|
|
+ assets: 0,
|
|
|
+ list: [],
|
|
|
+ navIndex: 0,
|
|
|
+ navList: [
|
|
|
+ // {
|
|
|
+ // key: this.$t('lang115'),
|
|
|
+ // value: 0,
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ key: this.$t('lang114'),
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ nft_list: [],
|
|
|
+ statusList: [],
|
|
|
+ totalReward: 0,
|
|
|
+ showPopover: false,
|
|
|
+ // 通过 actions 属性来定义菜单选项
|
|
|
+ actions: [],
|
|
|
+ action: { text: this.$t('lang201'), type_id: -1, status: -1 },
|
|
|
+ areaId: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getOperateLog();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //返回上一页
|
|
|
+ back() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ dateFormatFn(date) {
|
|
|
+ return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
|
|
|
+ },
|
|
|
+ navigation(name) {
|
|
|
+ this.$router.push({ name });
|
|
|
+ },
|
|
|
+ changeNav(item, index) {
|
|
|
+ this.navIndex = index;
|
|
|
+ },
|
|
|
+ dateFormatFn(date) {
|
|
|
+ return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
|
|
|
+ },
|
|
|
+ handleScroll(event) {
|
|
|
+ const container = event.target;
|
|
|
+ const scrollTop = container.scrollTop; // 滚动距离
|
|
|
+ const scrollHeight = container.scrollHeight; // 内容总高度
|
|
|
+ const clientHeight = container.clientHeight; // 可视区域高度
|
|
|
+ // 判断是否滑动到底部
|
|
|
+ if (scrollTop + clientHeight >= scrollHeight - 10) {
|
|
|
+ if (this.page != -1) {
|
|
|
+ this.page++; // 页数加 1
|
|
|
+ this.getOperateLog(); // 触发加载更多
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelect(action) {
|
|
|
+ console.log(action);
|
|
|
+ this.action = action;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.page = 1;
|
|
|
+ this.list = []; // 重置列表数据
|
|
|
+ this.getOperateLog(); // 触发重新获取列表数据
|
|
|
+ },
|
|
|
+ getOperateLog() {
|
|
|
+ let params = {
|
|
|
+ page: this.page,
|
|
|
+ type_id: this.action.type_id,
|
|
|
+ status: this.action.status,
|
|
|
+ area_id: this.areaId,
|
|
|
+ };
|
|
|
+ homeApi.getOperateLog(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.actions = [];
|
|
|
+ this.statusList = res.data.statusList;
|
|
|
+ this.actions = this.statusList.map(action => {
|
|
|
+ return {
|
|
|
+ type_id: action.type_id,
|
|
|
+ status: action.status,
|
|
|
+ text: action.text,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.actions.unshift({ text: this.$t('lang201'), type_id: -1, status: -1 });
|
|
|
+ console.log(this.actions);
|
|
|
+
|
|
|
+ if (this.list.length >= res.data.data.total) {
|
|
|
+ this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
+ } else {
|
|
|
+ this.list = [...this.list, ...res.data.data.data];
|
|
|
+ if (this.list.length >= res.data.data.total) {
|
|
|
+ this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.head {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgba(#000, 0.8);
|
|
|
+ letter-spacing: 1.5px;
|
|
|
+ font-weight: 550;
|
|
|
+ background: #fff;
|
|
|
+ padding: 14px 0;
|
|
|
+ z-index: 99;
|
|
|
+ .arrow_img {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ width: 10px;
|
|
|
+ height: 16px;
|
|
|
+ // transform: translate(0, -50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+.f-sb {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-c {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-sa {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.f-sb-n {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.f-col {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.assets {
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 50px 0 0;
|
|
|
+ // background-color: #fafbfc;
|
|
|
+ .top {
|
|
|
+ color: #000;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin: 0 6px;
|
|
|
+ }
|
|
|
+ .top_box {
|
|
|
+ padding: 16px 16px 6px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .input {
|
|
|
+ width: calc(100% - 90px);
|
|
|
+ border: 1px solid #29b286;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ ::v-deep .van-field__control {
|
|
|
+ padding: 3px 12px;
|
|
|
+ }
|
|
|
+ ::v-deep .van-icon-search {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #29b286;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 14px;
|
|
|
+ color: #000;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ span {
|
|
|
+ color: #aaaaaa;
|
|
|
+ width: 50%;
|
|
|
+ margin: 0 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: 1px solid #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ color: #ffffff;
|
|
|
+ height: 30px;
|
|
|
+ width: 86px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #29b286;
|
|
|
+ border: none;
|
|
|
+ // padding: 0 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ .total_box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ height: 180px;
|
|
|
+ padding: 30px 0 60px;
|
|
|
+ background: linear-gradient(to right, #1ab986, #25d7bb);
|
|
|
+ .f-sa {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .total {
|
|
|
+ font-size: 28px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16px 0 6px;
|
|
|
+ color: rgba(#fff, 1);
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(#fff, 1);
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ color: rgba(#fff, 0.8);
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .buy {
|
|
|
+ position: absolute;
|
|
|
+ right: 14px;
|
|
|
+ bottom: 14px;
|
|
|
+
|
|
|
+ &_btn {
|
|
|
+ color: #29b286;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: none;
|
|
|
+ padding: 0 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-radius: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buy1 {
|
|
|
+ left: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bare {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 60px 14px;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ position: relative;
|
|
|
+ margin: 14px 14px 0;
|
|
|
+ border-radius: 14px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ margin-top: 16px;
|
|
|
+ margin: 16px 6px;
|
|
|
+ .li {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ padding: 14px 0;
|
|
|
+ border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);
|
|
|
+
|
|
|
+ .box {
|
|
|
+ padding-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ &_item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .key {
|
|
|
+ color: #aaa;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+ .amount {
|
|
|
+ color: #29b286;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ssm {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .van-popover__action {
|
|
|
+ border-bottom: 0.5px solid rgba(190, 190, 190, 0.55) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ellipsis {
|
|
|
+ overflow: hidden; /* 确保超出容器的文本被裁剪 */
|
|
|
+ white-space: nowrap; /* 确保文本在一行内显示 */
|
|
|
+ text-overflow: ellipsis; /* 使用省略号表示文本超出 */
|
|
|
+ max-width: 60%;
|
|
|
+}
|
|
|
+</style>
|
xiaomei