add Nft Mint

This commit is contained in:
hujiabin 2022-07-22 19:31:14 +08:00
parent 1f5f9cd6bc
commit 82b8ace836
10 changed files with 393 additions and 41 deletions

View File

@ -47,23 +47,22 @@ instance.interceptors.response.use(
return Promise.reject(error)
}
)
export default instance
export const Request = (method,Url:string,params? : object | any) =>
instance({
url: Url,
method: method,
params: params
})
// export const Http_getNonce = (params) =>
// instance({
// url: 'http://127.0.0.1:8000/api/get-nonce',
// method: 'get',
// params: params
// })
//
// export const Http_login = (data) =>
// instance({
// url: 'http://127.0.0.1:8000/api/metamask-login',
// method: 'post',
// params: data
// })
export function ExcelExport (Url,param?:object) {
return axios({
url: scheme + "//" + apiHost + '/api/'+Url,
method: 'post',
params: param,
responseType: 'blob',
headers:{
Authorization : "Bearer " + store.state.token
}
})
}

View File

@ -8,10 +8,15 @@ export default class Url {
static readonly LOGOUT : string = "logout";
static readonly HOME : string = "home";
// TODO 菜单
static readonly MENUS : string = "menu";
static readonly DELETE_MENU : string = "menu/%d";
static readonly SHOW_MENU : string = "menu/%d";
static readonly UPDATE_MENU : string = "menu/%d";
// static readonly MENUS : string = "menu";
// static readonly DELETE_MENU : string = "menu/%d";
// static readonly SHOW_MENU : string = "menu/%d";
// static readonly UPDATE_MENU : string = "menu/%d";
static readonly NFT : string = "nft";
static readonly NFT_SHOW : string = "nft/show";
static readonly MINT : string = "mint";
static readonly EXPORTS : string = "exports";
}

View File

@ -21,6 +21,36 @@ export default class HomeParent extends AdminParent {
this.loading = false;
}
public convertRes2Blob (response,filename) {
const fileName = filename+'.xlsx'
// 将二进制流转为blob
const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IEwindow.navigator.msSaveBlob以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI(fileName))
} else {
// 创建新的URL并指向File对象或者Blob对象的地址
const blobURL = window.URL.createObjectURL(blob)
// 创建a标签用于跳转至下载链接
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', decodeURI(fileName))
// 兼容某些浏览器不支持HTML5的download属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
// 挂载a标签
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
// 释放blob URL地址
window.URL.revokeObjectURL(blobURL)
}
}

View File

@ -9,6 +9,8 @@ import HomeParent from "@/views/home/Common/HomeParent";
import CustomPage from "@/components/page.vue";
import SvgIcon from '@/components/SvgIcon.vue'
import { TableColumn } from "view-design"
import { Request } from "@/utils/Request";
import Url from "@/utils/Url";
@Component({
@ -18,19 +20,19 @@ import { TableColumn } from "view-design"
})
export default class Home extends HomeParent {
name : string = 'home'
public noDataText = '没有数据的提示语'
public noDataText = "没有数据"
public List :any = []
public columns: TableColumn[] = [{
width: 80,
key: 'id',
align: 'center',
}, {
title: "名称",
title: "name",
key: "name"
}, {
title: "TAPD",
title: "tapd_id",
key: "tapd_id"
}, {
},{
title: "操作",
slot: "operation"
}]
@ -39,11 +41,13 @@ export default class Home extends HomeParent {
public search: { page: number, size: number , keywords? : string } = {
page: 1, size: 10 , keywords : ""
}
public searchEvent(){
}
public created() {
// this._getData()
// this._getScriptLog()
// this._getProductLog()
this.List = [
{id:1,name:'tom',tapd_id:10086},
{id:2,name:'jam',tapd_id:10086},
@ -51,13 +55,23 @@ export default class Home extends HomeParent {
{id:4,name:'som',tapd_id:10086},
]
}
@Watch("search.page")
private _onPageChange(): void {
this._getData()
}
@Watch("search.size")
private _onPageSizeChange(): void {
this.search.page = 1;
this._getData()
}
private _getData():void{
private async _getData(){
const res = await Request('get',Url.MINT,this.search)
this.List = res.data.data
this.total = res.data.total
console.log(res)
}

View File

@ -32,16 +32,16 @@ export default class Layout extends HomeParent {
this._getMyMenu()
}
// @Watch("$route", {immediate: true, deep: true})
// private _watchRoute(route: Route): void {
// this.routes.length = 0;
// route.matched.forEach((item: RouteRecord) => {
// let ret: BreadItem = this.$router.resolve({name: item.name, params: route.params});
// ret.name = item.meta.title;
// this.routes.push(ret);
// // console.log(ret);
// });
// }
@Watch("$route", {immediate: true, deep: true})
private _watchRoute(route: Route): void {
this.routes.length = 0;
route.matched.forEach((item: RouteRecord) => {
let ret: BreadItem = this.$router.resolve({name: item.name, params: route.params});
ret.name = item.meta.title;
this.routes.push(ret);
// console.log(ret);
});
}
public get isLogin() {
@ -99,9 +99,9 @@ export default class Layout extends HomeParent {
{id:3,name:'用户权限',url:'/user/node',children:[]},
{id:4,name:'用户菜单',url:'/user/menu',children:[]},
]},
{id:5,name:'表格',url:'/table',children:[
{id:6,name:'普通表格',url:'/table/base',children:[]},
{id:7,name:'复杂表格',url:'/table/complex',children:[]},
{id:5,name:'metamask',url:'/table',children:[
{id:6,name:'nft',url:'/nft',children:[]},
{id:7,name:'mint',url:'/mint',children:[]},
]}
]
}

View File

@ -0,0 +1,114 @@
import { Component, Mixins, Vue, Watch } from 'vue-property-decorator'
import {
State,
Getter,
Action,
Mutation
} from "vuex-class";
import HomeParent from "@/views/home/Common/HomeParent";
import CustomPage from "@/components/page.vue";
import { TableColumn } from "view-design"
import { Request,ExcelExport } from "@/utils/Request";
import Url from "@/utils/Url";
export interface timeInterface {
start:string,
end:string
}
export interface keyWordsInterface {
account ?: string,
unikey ?: string,
time ?: timeInterface[],
}
@Component({
components : {
CustomPage
}
})
export default class Mint extends HomeParent {
name : string = 'mint'
public List :any = []
public columns: TableColumn[] = [{
title: "unikey",
key: "unikey"
},{
title: "account",
key: "account"
}, {
title: "prepare_number",
key: "bc_mint_prepare_block_number"
}, {
title: "success_number",
key: "bc_mint_success_block_number"
}, {
title: "txhash",
key: "bc_mint_txhash"
}, {
title: "tokenid",
key: "bc_mint_tokenid"
}, {
title: "create_time",
key: "createtime"
},
]
public total: number = 0;
public search: { page: number, size: number ,status:number,account?:string,unikey?:string,time?:any} = {
page: 1, size: 10 , status:0
}
public created() {
this._getData()
}
public cutRadio(){
return [
{id:1,text:'挂起'},
{id:2,text:'完成'},
{id:3,text:'忽略'},
{id:0,text:'全部'}
]
}
public radioState(){
this._getData()
}
public searchEvent(){
this._getData()
}
public exportEvent(){
ExcelExport(Url.EXPORTS,{name:'mint'}).then(res=>{
this.convertRes2Blob(res,'mint')
})
}
public changeTime(time){
this.search.time = time
}
@Watch("search.page")
private _onPageChange(): void {
this._getData()
}
@Watch("search.size")
private _onPageSizeChange(): void {
this.search.page = 1;
this._getData()
}
private async _getData(){
const res = await Request('get',Url.MINT,this.search)
this.List = res.data.data
this.total = res.data.total
}
}

View File

@ -0,0 +1,23 @@
<template>
<div>
<div class="space-x-5 my-2 h-11">
<Input v-model="search.account" class="w-80 " clearable placeholder="请输入account"></Input>
<Input v-model="search.unikey" class="w-80 " clearable placeholder="请输入unikey"></Input>
<template>
<DatePicker v-model="search.time" type="daterange" split-panels placeholder="选择日期" @on-change="changeTime" class="w-80 "></DatePicker>
</template>
<Button type="primary" icon="ios-search-outline" :loading="loading" @click="searchEvent">搜索</Button>
<Button type="success" :loading="loading" @click="exportEvent">导出Excel</Button>
<Radio-group v-model="search.status" type="button" button-style="solid" @on-change="radioState" style="float: right">
<template v-for="item in cutRadio()" >
<Radio :label="item.id">{{item.text}}</Radio>
</template>
</Radio-group>
</div>
<custom-page :data-list="List" :page.sync="search.page" :page-size.sync="search.size"
:total="total" row-key="id" :columns="columns" >
</custom-page>
</div>
</template>
<script src="./mint.ts"></script>

View File

@ -0,0 +1,110 @@
import {Component, Mixins, Vue, Watch} from 'vue-property-decorator'
import {
State,
Getter,
Action,
Mutation
} from "vuex-class";
import HomeParent from "@/views/home/Common/HomeParent";
import CustomPage from "@/components/page.vue";
import SvgIcon from '@/components/SvgIcon.vue'
import {TableColumn} from "view-design"
import {ExcelExport, Request} from "@/utils/Request";
import Url from "@/utils/Url";
@Component({
components: {
SvgIcon, CustomPage
}
})
export default class Nft extends HomeParent {
name: string = 'nft'
public List: any = []
public columns: TableColumn[] = [{
title: "token_id",
key: 'token_id',
}, {
title: "creator",
key: "creator_address"
}, {
title: "owner",
key: "owner_address"
},{
title: "type",
key: "token_type",
width:80
},{
title: "state",
key: "token_state",
width:80
}, {
title: "item",
key: "item_id"
}, {
title: "confirm_count",
key: "confirm_count",
},{
title: "confirm_number",
key: "confirm_block_number"
}, {
title: "create_time",
key: "createtime"
}, {
title: "操作",
width:120,
slot: "operation"
}
]
public showNftDialog:boolean = false;
public nftDetail:any='';
public total: number = 0;
public search: { page: number, size: number, token_id?: string,creator?: string ,owner?:string,time?:any} = {
page: 1, size: 10
}
public created() {
this._getData()
}
public searchEvent(){
this._getData()
}
public exportEvent(){
ExcelExport(Url.EXPORTS,{name:'nft'}).then(res=>{
this.convertRes2Blob(res,'nft')
})
}
public changeTime(time){
this.search.time = time
}
@Watch("search.page")
private _onPageChange(): void {
this._getData()
}
@Watch("search.size")
private _onPageSizeChange(): void {
this.search.page = 1;
this._getData()
}
public async showNft(idx){
this.showNftDialog = true;
const res = await Request('get', Url.NFT_SHOW, {idx})
this.nftDetail = res.data
}
private async _getData() {
const res = await Request('get', Url.NFT, this.search)
this.List = res.data.data
this.total = res.data.total
}
}

View File

@ -0,0 +1,47 @@
<template>
<div>
<div class="space-x-5 my-2 h-11">
<Input v-model="search.token_id" class="w-80 " clearable placeholder="请输入token_id"></Input>
<Input v-model="search.creator" class="w-80 " clearable placeholder="请输入creator"></Input>
<Input v-model="search.owner" class="w-80 " clearable placeholder="请输入owner"></Input>
<template>
<DatePicker v-model="search.time" type="daterange" split-panels placeholder="选择日期" @on-change="changeTime" class="w-80 "></DatePicker>
</template>
<Button type="primary" icon="ios-search-outline" @click="searchEvent" :loading="loading">搜索</Button>
<Button type="success" :loading="loading" @click="exportEvent">导出Excel</Button>
</div>
<custom-page :data-list="List" :page.sync="search.page" :page-size.sync="search.size"
:total="total" row-key="id" :columns="columns">
<template slot="operation" slot-scope="{row}">
<div class="space-x-2">
<Button type="success" @click="showNft(row.idx)">查看</Button>
</div>
</template>
</custom-page>
<Modal v-model="showNftDialog" title="Nft详情" width="70%" >
<div style="max-height:500px;overflow: auto">
<div v-for="(item,index) in nftDetail">
<div v-if="Array.isArray(item)" style="padding: 10px 0 5px 0;">
<div style="font-size: 20px;font-weight:bold">{{index}}</div>
<div v-for="value in item" style="font-size: 18px;border-bottom: 1px solid #cccccc;padding: 10px 0 5px 0;">
<div v-for="(v,k) in value" style="margin-left: 130px;">
<p><span style="font-weight:bold">{{k}} :</span> {{ v }}</p>
</div>
</div>
</div>
<div v-else style="padding: 10px 0 5px 0;">
<span style="font-size: 20px;font-weight:bold">{{index}}</span>
<span style="font-size: 20px;">{{item}}</span>
<hr>
</div>
</div>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
<script src="./nft.ts"></script>

View File

@ -12,6 +12,16 @@ const routers: RouteConfig[] = [{
name: 'home',
meta: {title: "dashboard", isMenu: false},
component: () => import(/* webpackChunkName: "home-home" */ '@/views/home/pages/home/home.vue'),
},{
path: "nft",
name: 'nft',
meta: {title: "nft", isMenu: false},
component: () => import(/* webpackChunkName: "home-home" */ '@/views/home/pages/nft/nft.vue'),
},{
path: "mint",
name: 'mint',
meta: {title: "mint", isMenu: false},
component: () => import(/* webpackChunkName: "home-home" */ '@/views/home/pages/mint/mint.vue'),
}]
}, {
path: "/login",