Commit 823b6666 authored by chenqikuai's avatar chenqikuai

加载

parent ba481047
<template> <template>
<syTable height="100%" :data="passList" :columns="columns" v-if="passList.length > 0"> <syTable
height="100%"
:data="passList"
:columns="columns"
v-if="passList.length > 0"
show-overflow-tooltip
>
<template #name="props"> <template #name="props">
<div <div
class="cursor-pointer text-center overflow-hidden overflow-ellipsis" class="cursor-pointer text-center overflow-hidden overflow-ellipsis"
...@@ -84,14 +90,16 @@ export default defineComponent({ ...@@ -84,14 +90,16 @@ export default defineComponent({
{ {
label: "通证名称", label: "通证名称",
headerAlign: 'center', headerAlign: 'center',
width: '180', minWidth: '180',
slotName: 'name', slotName: 'name',
showOverflowTooltip: true,
prop: "name", prop: "name",
}, },
{ {
label: "通证标识", label: "通证标识",
headerAlign: 'center', headerAlign: 'center',
width: '180', minWidth: '180',
showOverflowTooltip: true,
slotName: 'identifier', slotName: 'identifier',
prop: "identifier", prop: "identifier",
}, },
...@@ -99,18 +107,21 @@ export default defineComponent({ ...@@ -99,18 +107,21 @@ export default defineComponent({
label: "发行数量", label: "发行数量",
headerAlign: 'center', headerAlign: 'center',
slotName: 'amount', slotName: 'amount',
showOverflowTooltip: true,
prop: "amount", prop: "amount",
}, },
{ {
label: "剩余数量", label: "剩余数量",
headerAlign: 'center', headerAlign: 'center',
slotName: 'balance', slotName: 'balance',
showOverflowTooltip: true,
prop: "balance", prop: "balance",
}, },
{ {
label: "发行时间", label: "发行时间",
width: '150', minWidth: '150',
headerAlign: 'center', headerAlign: 'center',
showOverflowTooltip: true,
slotName: 'create_time', slotName: 'create_time',
prop: "create_time", prop: "create_time",
}, },
...@@ -118,6 +129,7 @@ export default defineComponent({ ...@@ -118,6 +129,7 @@ export default defineComponent({
label: "发行状态", label: "发行状态",
headerAlign: 'center', headerAlign: 'center',
slotName: 'status', slotName: 'status',
showOverflowTooltip: true,
prop: "status", prop: "status",
}, },
{ {
...@@ -135,7 +147,26 @@ export default defineComponent({ ...@@ -135,7 +147,26 @@ export default defineComponent({
return window.innerHeight - 145; return window.innerHeight - 145;
} }
}, },
mounted() {
this.addListener()
},
beforeUnmount(){
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = null;
},
methods: { methods: {
addListener() {
this.$nextTick(() => {
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = debounce((event: Event) => {
const target = event.target as HTMLDivElement;
if (target.offsetHeight + target.scrollTop >= target.scrollHeight) {
console.log('bottom')
this.next()
}
}, 500, false)
})
},
formatTime, formatTime,
toProve(item: any) { toProve(item: any) {
window.open(`${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.id}&evm_tx_hash=${item.tx_hash}&from=client`); window.open(`${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.id}&evm_tx_hash=${item.tx_hash}&from=client`);
...@@ -163,16 +194,7 @@ export default defineComponent({ ...@@ -163,16 +194,7 @@ export default defineComponent({
watch: { watch: {
passList(newV) { passList(newV) {
if (newV.length > 0) { if (newV.length > 0) {
this.$nextTick(() => {
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = debounce((event: Event) => {
const target = event.target as HTMLDivElement;
if (target.offsetHeight + target.scrollTop >= target.scrollHeight) {
console.log('bottom')
this.next()
}
}, 500, false)
})
} }
} }
} }
......
...@@ -2,7 +2,13 @@ ...@@ -2,7 +2,13 @@
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<Search v-model:query="query"></Search> <Search v-model:query="query"></Search>
<div class="flex-grow overflow-hidden list-table"> <div class="flex-grow overflow-hidden list-table">
<pass-list-table :pass-list="passList" @nextPage="nextPage" @update="updateSinglePass" /> <div class="h-full" v-if="loading" ref="loading"></div>
<pass-list-table
v-if="!loading"
:pass-list="passList"
@nextPage="nextPage"
@update="updateSinglePass"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -13,6 +19,9 @@ import { GO_URLS, syButton } from "cqk-sy-ui"; ...@@ -13,6 +19,9 @@ import { GO_URLS, syButton } from "cqk-sy-ui";
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import Search from "./Search.vue" import Search from "./Search.vue"
import PassListTable from "./PassListTable.vue"; import PassListTable from "./PassListTable.vue";
import { ElLoading } from "element-plus";
type iService = ReturnType<typeof ElLoading.service>
export default defineComponent({ export default defineComponent({
components: { components: {
...@@ -31,18 +40,25 @@ export default defineComponent({ ...@@ -31,18 +40,25 @@ export default defineComponent({
page: 1, page: 1,
page_size: 50, page_size: 50,
passList: [] as any, // 查询到的通证列表 passList: [] as any, // 查询到的通证列表
total: 0 total: 0,
loading: true,
} }
}, },
mounted() { async mounted() {
this.getList(true); this.loading = true;
let service = null as unknown as iService;
this.$nextTick(() => {
service = ElLoading.service({
target: this.$refs.loading as HTMLElement
})
})
await this.getList(true);
this.loading = false;
service.close();
}, },
watch: { watch: {
query: { query() {
handler() { this.getList(true)
this.getList(true);
},
deep: true
} }
}, },
methods: { methods: {
......
<template> <template>
<syTable height="100%" :data="transferList" :columns="columns" v-if="transferList.length > 0"> <syTable
height="100%"
:data="transferList"
:columns="columns"
v-if="transferList.length > 0"
show-overflow-tooltip
>
<template #pass_name="props"> <template #pass_name="props">
<div <div
class="text-center overflow-hidden overflow-ellipsis" class="text-center overflow-hidden overflow-ellipsis"
...@@ -56,16 +62,7 @@ export default defineComponent({ ...@@ -56,16 +62,7 @@ export default defineComponent({
watch: { watch: {
transferList(newV) { transferList(newV) {
if (newV.length > 0) { if (newV.length > 0) {
this.$nextTick(() => {
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = debounce((event: Event) => {
const target = event.target as HTMLDivElement;
if (target.offsetHeight + target.scrollTop >= target.scrollHeight) {
console.log('bottom')
this.next()
}
}, 500, false)
})
} }
} }
}, },
...@@ -77,45 +74,51 @@ export default defineComponent({ ...@@ -77,45 +74,51 @@ export default defineComponent({
prop: "pass_name", prop: "pass_name",
slotName: 'pass_name', slotName: 'pass_name',
headerAlign: 'center', headerAlign: 'center',
width: '100', showOverflowTooltip: true,
minWidth: '100',
}, },
{ {
label: "通证标识", label: "通证标识",
prop: "identifier", prop: "identifier",
slotName: 'identifier', slotName: 'identifier',
showOverflowTooltip: true,
headerAlign: 'center', headerAlign: 'center',
minWidth: '120',
}, },
{ {
label: "划转地址", label: "划转地址",
prop: "to", prop: "to",
slotName: 'to', slotName: 'to',
showOverflowTooltip: true,
headerAlign: 'center', headerAlign: 'center',
width: '300', minWidth: '300',
}, },
{ {
label: "划转数量", label: "划转数量",
prop: "amount", prop: "amount",
slotName: 'amount', slotName: 'amount',
showOverflowTooltip: true,
headerAlign: 'center', headerAlign: 'center',
width: '100', minWidth: '100',
}, },
{ {
label: "划转时间", label: "划转时间",
prop: "create_time", prop: "create_time",
showOverflowTooltip: true,
slotName: 'create_time', slotName: 'create_time',
headerAlign: 'center', headerAlign: 'center',
width: '180', minWidth: '180',
}, },
{ {
label: "划转状态", label: "划转状态",
prop: "status", prop: "status",
slotName: 'status', slotName: 'status',
headerAlign: 'center', headerAlign: 'center',
width: '100', minWidth: '100',
} }
], ],
passShow: false, // 显示转账弹窗 passShow: false, // 显示转账弹窗
curItem: {} curItem: {},
} }
}, },
computed: { computed: {
...@@ -123,7 +126,26 @@ export default defineComponent({ ...@@ -123,7 +126,26 @@ export default defineComponent({
return window.innerHeight - 145; return window.innerHeight - 145;
} }
}, },
mounted() {
this.addScrollListener();
},
beforeUnmount() {
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = null;
},
methods: { methods: {
addScrollListener() {
this.$nextTick(() => {
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = debounce((event: Event) => {
const target = event.target as HTMLDivElement;
if (target.offsetHeight + target.scrollTop >= target.scrollHeight) {
console.log('bottom')
this.next()
}
}, 500, false)
})
},
formatTime, formatTime,
toProve(item: any) { toProve(item: any) {
window.open(`${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`); window.open(`${globalState.urlList.chain_browser_url}/trace_token?goods_id=${item.pass_id}&evm_tx_hash=${item.pass_hash}&from=client`);
......
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<search v-model:query="query" search-placeholder="搜索通证标识"></search> <search v-model:query="query" search-placeholder="搜索通证标识"></search>
<div class="flex-grow overflow-hidden list-table"> <div class="flex-grow overflow-hidden list-table">
<transfer-record-list @nextPage="nextPage" :transfer-list="transferList" /> <div class="h-full" v-if="loading" ref="loading"></div>
<transfer-record-list
v-if="!loading"
@nextPage="nextPage"
:transfer-list="transferList"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -13,6 +18,10 @@ import SearchVue from "../PassList/Search.vue"; ...@@ -13,6 +18,10 @@ import SearchVue from "../PassList/Search.vue";
import TransferRecordList from "./TransferRecordList.vue"; import TransferRecordList from "./TransferRecordList.vue";
import { GO_URLS } from "cqk-sy-ui" import { GO_URLS } from "cqk-sy-ui"
import { $ajax } from "@/service"; import { $ajax } from "@/service";
import { ElLoading } from "element-plus";
type iService = ReturnType<typeof ElLoading.service>
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
...@@ -25,22 +34,28 @@ export default defineComponent({ ...@@ -25,22 +34,28 @@ export default defineComponent({
page: 1, page: 1,
page_size: 50, page_size: 50,
transferList: [], // 查询到的通证列表 transferList: [], // 查询到的通证列表
total: 0 total: 0,
loading: true,
} }
}, },
components: { components: {
Search: SearchVue, Search: SearchVue,
TransferRecordList TransferRecordList
}, },
mounted() { async mounted() {
this.getList(true); let service = null as unknown as iService;
this.$nextTick(() => {
service = ElLoading.service({
target: this.$refs.loading as HTMLElement
})
})
await this.getList(true);
this.loading = false;
service.close();
}, },
watch: { watch: {
query: { query() {
handler() { this.getList(true);
this.getList(true);
},
deep: true
} }
}, },
methods: { methods: {
......
import { get, personVerify, smsPerson } from "@/service/Api.service"; import { smsPerson } from "@/service/Api.service";
import { iFormItem } from "cqk-sy-ui/sy/components/BusinessForm/types"; import { iFormItem } from "cqk-sy-ui/sy/components/BusinessForm/types";
import { ElLoading, ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const checkIdNumber = (rule: any, value: any, callback: any) => { const checkIdNumber = (rule: any, value: any, callback: any) => {
const checkReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; const checkReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment