|
|
@@ -1,112 +1,438 @@
|
|
|
<template>
|
|
|
- <div class="">
|
|
|
- <el-row style="margin: 0 0 48px 0">
|
|
|
- <el-col :span="2">
|
|
|
- <div class="">
|
|
|
- <div class="totalCount-number">{{ this.totalCount }}</div>
|
|
|
- <div class="totalCount-text">地址数量</div>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="app-container-head">
|
|
|
+ <div class="app-container-head-left">
|
|
|
+ <div class="app-container-head-left-item">
|
|
|
+ <div class="app-container-head-left-item-count">
|
|
|
+ {{ head.all }}
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-left-item-name">
|
|
|
+ 所有
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
+ <div class="app-container-head-left-divider"/>
|
|
|
+ <div class="app-container-head-left-item">
|
|
|
+ <div class="app-container-head-left-item-count">
|
|
|
+ {{ head.bulk }}
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-left-item-name">
|
|
|
+ 批处理账户
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-left-divider"/>
|
|
|
+ <div class="app-container-head-left-item">
|
|
|
+ <div class="app-container-head-left-item-count">
|
|
|
+ {{ head.boutique }}
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-left-item-name">
|
|
|
+ 精品账户
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-right">
|
|
|
+ <div class="app-container-head-right-button1">
|
|
|
+ <img src="../../assets/address/vertical_align_bottom.svg" alt="vertical_align_bottom">
|
|
|
+ 导出
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-right-button1">
|
|
|
+ <img src="../../assets/address/upload.svg" alt="upload">
|
|
|
+ 导入
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-right-button2">
|
|
|
+ <img src="../../assets/address/eyeglasses.svg" alt="eyeglasses">
|
|
|
+ 观察地址
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table">
|
|
|
+ <div class="app-container-table-title">
|
|
|
+ <div class="app-container-table-title-left">
|
|
|
+ 地址列表
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table-title-right">
|
|
|
+ 总计数量: {{table.totalNumber}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table-select">
|
|
|
+ <div @click="table.walletNameGroupIndex = index" v-for="(item,index) in table.walletNameGroup" :class="index === table.walletNameGroupIndex ? 'app-container-table-select-item-active' : 'app-container-table-select-item'">
|
|
|
+ {{item}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table-screening">
|
|
|
+ <div class="app-container-table-screening-item">
|
|
|
+ 时间
|
|
|
+ <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table-screening-item">
|
|
|
+ Gas消耗
|
|
|
+ <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table-main">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ label="账户地址"
|
|
|
+ width="490">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="accountAddress">
|
|
|
+ <div class="img">
|
|
|
|
|
|
- <el-col :span="3" :offset="15">
|
|
|
- <el-button type="primary" class="btn-add" @click="generateAddress">
|
|
|
- 批量生成地址
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3">
|
|
|
- <el-button type="primary" class="btn-add" @click="downloadAddress">
|
|
|
- 批量下载地址
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="walletName">
|
|
|
+ 钱包名称
|
|
|
+ </div>
|
|
|
+ <div class="walletAddress">
|
|
|
+ 0x00581a605...ca48ddebe60b2a4ca4da
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="Gas消耗/USDT"
|
|
|
+ width="410">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="gas">
|
|
|
+ 783239.22
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="type"
|
|
|
+ width="255">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="type">
|
|
|
+ <div class="bulk" v-if="table.walletNameGroupIndex !== 0">
|
|
|
+ <img src="../../assets/address/precision_manufacturing.svg" alt="precision_manufacturing">
|
|
|
+ 批量3
|
|
|
+ </div>
|
|
|
+ <div class="boutique" v-if="table.walletNameGroupIndex === 0">
|
|
|
+ <img src="../../assets/address/award_star.svg" alt="award_star">
|
|
|
+ 精品号
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="最后操作时间"
|
|
|
+ width="180">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="lastTime">
|
|
|
+ 19点20分
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="right">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="view">
|
|
|
+ 查看
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <div class="block-title">地址列表</div>
|
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
- <el-table-column prop="address" label="地址账号" width="420">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- {{row.groupName}} <span style="margin-left:10px"></span> {{row.address}}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- <el-table-column prop="groupName" label="地址组"> </el-table-column> -->
|
|
|
- <el-table-column prop="" label="gas消耗"> </el-table-column>
|
|
|
- <el-table-column prop="" label="地址余额"> </el-table-column>
|
|
|
- <el-table-column prop="addressType" label="地址类型">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-tag v-if="row.addressType === 1" type="info">批量号</el-tag>
|
|
|
- <el-tag v-else>精品号</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="createTime" label="创建时间"> </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page.sync="page"
|
|
|
- :page-sizes="[10, 15, 25, 35]"
|
|
|
- :page-size.sync="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="totalCount"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- <SaveOrUpdate ref="SaveOrUpdate" />
|
|
|
- <download ref="download"></download>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
-import { pageAddress, batchAddress } from "@/api/adress";
|
|
|
-import SaveOrUpdate from "./SaveOrUpdate.vue";
|
|
|
-import Download from "./download.vue";
|
|
|
export default {
|
|
|
- components: { SaveOrUpdate, Download },
|
|
|
data() {
|
|
|
return {
|
|
|
- url: process.env.VUE_APP_BASE_API,
|
|
|
- address: {
|
|
|
- password: undefined,
|
|
|
- groupName: undefined,
|
|
|
- numWallet: undefined,
|
|
|
+ head: {
|
|
|
+ all:85,
|
|
|
+ bulk:85,
|
|
|
+ boutique:85
|
|
|
},
|
|
|
- tableData: [],
|
|
|
- page: 1,
|
|
|
- pageSize: 10,
|
|
|
- totalCount: 0,
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getAddresses();
|
|
|
+ table:{
|
|
|
+ totalNumber:22222,
|
|
|
+ walletNameGroup:['精品号','钱包组名称','钱包组名称'],
|
|
|
+ walletNameGroupIndex:0,
|
|
|
+ },
|
|
|
+ tableData: [{
|
|
|
+ projectName:'Zk',
|
|
|
+ totalNumber:5,
|
|
|
+ completedNumber:2,
|
|
|
+ status:0,
|
|
|
+ gas:1,
|
|
|
+ officialWebsite:"https://nytimes.com",
|
|
|
+ startTime:'16/08/2013',
|
|
|
+ endTime:'16/08/2013'
|
|
|
+ }, {
|
|
|
+ projectName:'LayerZero',
|
|
|
+ totalNumber:4,
|
|
|
+ completedNumber:1,
|
|
|
+ status:1,
|
|
|
+ gas:23,
|
|
|
+ officialWebsite:"https://nytimes.com",
|
|
|
+ startTime:'16/08/2013',
|
|
|
+ endTime:'16/08/2013'
|
|
|
+ }, {
|
|
|
+ projectName:'StarkNet',
|
|
|
+ totalNumber:1,
|
|
|
+ completedNumber:0,
|
|
|
+ status:2,
|
|
|
+ gas:23,
|
|
|
+ officialWebsite:"https://nytimes.com",
|
|
|
+ startTime:'16/08/2013',
|
|
|
+ endTime:'16/08/2013'
|
|
|
+ }, {
|
|
|
+ projectName:'Sei',
|
|
|
+ totalNumber:3,
|
|
|
+ completedNumber:2,
|
|
|
+ status:3,
|
|
|
+ gas:23,
|
|
|
+ officialWebsite:"https://nytimes.com",
|
|
|
+ startTime:'16/08/2013',
|
|
|
+ endTime:'16/08/2013'
|
|
|
+ }]
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- generateAddress() {
|
|
|
- this.$refs.SaveOrUpdate.addressModal = true;
|
|
|
- this.$refs.SaveOrUpdate.resetField();
|
|
|
- this.$refs.SaveOrUpdate.resetUserForm();
|
|
|
- },
|
|
|
- downloadAddress() {
|
|
|
- this.$refs.download.downloadModal = true;
|
|
|
- this.$refs.download.resetField();
|
|
|
- this.$refs.download.resetUserForm();
|
|
|
- },
|
|
|
- getAddresses() {
|
|
|
- pageAddress({
|
|
|
- page: this.page,
|
|
|
- pageSize: this.pageSize,
|
|
|
- }).then((res) => {
|
|
|
- this.tableData = res.records;
|
|
|
- this.totalCount = res.total;
|
|
|
- });
|
|
|
- },
|
|
|
|
|
|
- handleSizeChange(val) {
|
|
|
- this.pageSize = val;
|
|
|
- this.page = 1;
|
|
|
- this.getAddresses();
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.page = val;
|
|
|
- this.getAddresses();
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {},
|
|
|
-};
|
|
|
-</script>
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container{
|
|
|
+ .app-container-head{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .app-container-head-left{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap:60px;
|
|
|
+ .app-container-head-left-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:8px;
|
|
|
+ .app-container-head-left-item-count{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .app-container-head-left-item-name{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #8e8f91;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-container-head-left-divider{
|
|
|
+ width: 1px;
|
|
|
+ height: 50px;
|
|
|
+ border-right:1px solid #e4e6ea;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-container-head-right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:24px;
|
|
|
+ .app-container-head-right-button1{
|
|
|
+ width: 148px;
|
|
|
+ height: 52px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ background: #f9fbff;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980ff;
|
|
|
+ border: 1px solid #2980FF;
|
|
|
+ }
|
|
|
+ .app-container-head-right-button2{
|
|
|
+ width: 148px;
|
|
|
+ height: 52px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ background: #4A76FF;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-container-table{
|
|
|
+ margin-top: 80px;
|
|
|
+ .app-container-table-title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .app-container-table-title-left{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .app-container-table-title-right{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #898a8c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-container-table-select{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:56px;
|
|
|
+ border-bottom: 4px solid #f2f4f7;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 28px;
|
|
|
+ .app-container-table-select-item{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #ABABAB;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin-bottom: -4px;
|
|
|
+ border-bottom: 4px solid #f2f4f7;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .app-container-table-select-item-active{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2980FF;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin-bottom: -4px;
|
|
|
+ border-bottom: 4px solid #2980FF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-container-table-screening{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:100px;
|
|
|
+ padding: 20px 0;
|
|
|
+ margin: 40px 0;
|
|
|
+ border-top: 1px solid #f5f5f5;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ .app-container-table-screening-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:6px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #4d4d4e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-container-table-main {
|
|
|
+ .accountAddress{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:12px;
|
|
|
+ margin-left: 14px;
|
|
|
+ .img{
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ background: black;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .walletName{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .walletAddress{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gas{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2980FF;
|
|
|
+ }
|
|
|
+ .type{
|
|
|
+ .bulk{
|
|
|
+ width: fit-content;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap:4px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: #edf2ff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .boutique {
|
|
|
+ width: fit-content;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap:4px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 30px;
|
|
|
+ background: #222222;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #F2C94C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .lastTime{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #898a8c;
|
|
|
+ }
|
|
|
+ .view{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #2980FF;
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-table__body{
|
|
|
+ -webkit-border-vertical-spacing: 20px;
|
|
|
+ background: #f9fbff;
|
|
|
+}
|
|
|
+::v-deep .el-table__row{
|
|
|
+ border-radius: 10px;
|
|
|
+ background: white;
|
|
|
+ height: 58px;
|
|
|
+}
|
|
|
+::v-deep .el-table__row>td{
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+::v-deep .el-table th.is-leaf{
|
|
|
+ border: none;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #4d4d4e ;
|
|
|
+}
|
|
|
+::v-deep .el-table::before{
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
million
