Commit 823b6666 authored by chenqikuai's avatar chenqikuai

加载

parent ba481047
<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">
<div
class="cursor-pointer text-center overflow-hidden overflow-ellipsis"
......@@ -84,14 +90,16 @@ export default defineComponent({
{
label: "通证名称",
headerAlign: 'center',
width: '180',
minWidth: '180',
slotName: 'name',
showOverflowTooltip: true,
prop: "name",
},
{
label: "通证标识",
headerAlign: 'center',
width: '180',
minWidth: '180',
showOverflowTooltip: true,
slotName: 'identifier',
prop: "identifier",
},
......@@ -99,18 +107,21 @@ export default defineComponent({
label: "发行数量",
headerAlign: 'center',
slotName: 'amount',
showOverflowTooltip: true,
prop: "amount",
},
{
label: "剩余数量",
headerAlign: 'center',
slotName: 'balance',
showOverflowTooltip: true,
prop: "balance",
},
{
label: "发行时间",
width: '150',
minWidth: '150',
headerAlign: 'center',
showOverflowTooltip: true,
slotName: 'create_time',
prop: "create_time",
},
......@@ -118,6 +129,7 @@ export default defineComponent({
label: "发行状态",
headerAlign: 'center',
slotName: 'status',
showOverflowTooltip: true,
prop: "status",
},
{
......@@ -135,7 +147,26 @@ export default defineComponent({
return window.innerHeight - 145;
}
},
mounted() {
this.addListener()
},
beforeUnmount(){
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = null;
},
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,
toProve(item: any) {
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({
watch: {
passList(newV) {
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 @@
<div class="h-full flex flex-col">
<Search v-model:query="query"></Search>
<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>
</template>
......@@ -13,6 +19,9 @@ import { GO_URLS, syButton } from "cqk-sy-ui";
import { defineComponent } from "vue";
import Search from "./Search.vue"
import PassListTable from "./PassListTable.vue";
import { ElLoading } from "element-plus";
type iService = ReturnType<typeof ElLoading.service>
export default defineComponent({
components: {
......@@ -31,18 +40,25 @@ export default defineComponent({
page: 1,
page_size: 50,
passList: [] as any, // 查询到的通证列表
total: 0
total: 0,
loading: true,
}
},
mounted() {
this.getList(true);
async mounted() {
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: {
query: {
handler() {
this.getList(true);
},
deep: true
query() {
this.getList(true)
}
},
methods: {
......
<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">
<div
class="text-center overflow-hidden overflow-ellipsis"
......@@ -56,16 +62,7 @@ export default defineComponent({
watch: {
transferList(newV) {
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({
prop: "pass_name",
slotName: 'pass_name',
headerAlign: 'center',
width: '100',
showOverflowTooltip: true,
minWidth: '100',
},
{
label: "通证标识",
prop: "identifier",
slotName: 'identifier',
showOverflowTooltip: true,
headerAlign: 'center',
minWidth: '120',
},
{
label: "划转地址",
prop: "to",
slotName: 'to',
showOverflowTooltip: true,
headerAlign: 'center',
width: '300',
minWidth: '300',
},
{
label: "划转数量",
prop: "amount",
slotName: 'amount',
showOverflowTooltip: true,
headerAlign: 'center',
width: '100',
minWidth: '100',
},
{
label: "划转时间",
prop: "create_time",
showOverflowTooltip: true,
slotName: 'create_time',
headerAlign: 'center',
width: '180',
minWidth: '180',
},
{
label: "划转状态",
prop: "status",
slotName: 'status',
headerAlign: 'center',
width: '100',
minWidth: '100',
}
],
passShow: false, // 显示转账弹窗
curItem: {}
curItem: {},
}
},
computed: {
......@@ -123,7 +126,26 @@ export default defineComponent({
return window.innerHeight - 145;
}
},
mounted() {
this.addScrollListener();
},
beforeUnmount() {
const wrap = document.querySelector('.el-scrollbar__wrap') as HTMLDivElement
wrap.onscroll = null;
},
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,
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`);
......
......@@ -2,7 +2,12 @@
<div class="h-full flex flex-col">
<search v-model:query="query" search-placeholder="搜索通证标识"></search>
<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>
</template>
......@@ -13,6 +18,10 @@ import SearchVue from "../PassList/Search.vue";
import TransferRecordList from "./TransferRecordList.vue";
import { GO_URLS } from "cqk-sy-ui"
import { $ajax } from "@/service";
import { ElLoading } from "element-plus";
type iService = ReturnType<typeof ElLoading.service>
export default defineComponent({
data() {
return {
......@@ -25,22 +34,28 @@ export default defineComponent({
page: 1,
page_size: 50,
transferList: [], // 查询到的通证列表
total: 0
total: 0,
loading: true,
}
},
components: {
Search: SearchVue,
TransferRecordList
},
mounted() {
this.getList(true);
async mounted() {
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: {
query: {
handler() {
query() {
this.getList(true);
},
deep: true
}
},
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 { ElLoading, ElMessage } from "element-plus";
import { ElMessage } from "element-plus";
const checkIdNumber = (rule: any, value: any, callback: any) => {
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