|
|
@@ -9,21 +9,33 @@
|
|
|
<div class="logout" @click="logout">Sign out</div>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
- <div class="item">
|
|
|
- <div class="logo">
|
|
|
- <img src="" alt="" />
|
|
|
+ <template v-if="pageList.length">
|
|
|
+ <div class="item" v-for="(item, index) in pageList" :key="index">
|
|
|
+ <div class="logo">
|
|
|
+ <img :src="item.nftCardFaceImage" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ <div class="name">{{item.nftProjectName}}</div>
|
|
|
+ <div class="font">Sell <span>{{item.sellCount}}/{{item.totalCount}}</span></div>
|
|
|
+ <div class="font">Earnings <span>{{item.earningAmount}} {{item.currencySymbol}}</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="opt">
|
|
|
+ <template v-if="item.publishStatus === 1">
|
|
|
+ <el-button link type="danger" @click="unpublish(item)">Unpublish</el-button>
|
|
|
+ <el-button link type="primary" @click="view">View</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-button link type="danger" @click="remove(item)">Delete</el-button>
|
|
|
+ <el-button link type="primary" @click="publish(item)">Publish</el-button>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="desc">
|
|
|
- <div class="name">LegalDAO Members</div>
|
|
|
- <div class="font">Sell <span>175/1000</span></div>
|
|
|
- <div class="font">Earnings <span>107.5 USDT</span></div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="empty">
|
|
|
+ <img src="../../static/img/icon-empty.svg" alt="" />
|
|
|
</div>
|
|
|
- <div class="opt">
|
|
|
- <el-button link type="danger">Delete</el-button>
|
|
|
- <el-button link type="primary">Publish</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <el-empty description="description" /> -->
|
|
|
+ </template>
|
|
|
</div>
|
|
|
<div class="add" @click="add">
|
|
|
<img src="../../static/img/header-add.svg" alt="">
|
|
|
@@ -34,10 +46,13 @@
|
|
|
|
|
|
<!-- publish -->
|
|
|
<div class="publish" v-if="publishDialog">
|
|
|
- <div class="msg">Irrevocable after publish</div>
|
|
|
+ <div class="msg">
|
|
|
+ <template v-if="publishType === 1">Irrevocable after publish</template>
|
|
|
+ <template v-else>Do you wish to unlist the NFT collection</template>
|
|
|
+ </div>
|
|
|
<div class="buttons">
|
|
|
- <button>Cancel</button>
|
|
|
- <button class="confirm">Continue</button>
|
|
|
+ <button @click="hidePublishLayer">Cancel</button>
|
|
|
+ <button class="confirm" @click="confirmPublishLayer">Continue</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg" v-if="publishDialog"></div>
|
|
|
@@ -46,22 +61,33 @@
|
|
|
<div class="publish delete" v-if="deleteDialog">
|
|
|
<div class="msg">Once deleted, it cannot be restored</div>
|
|
|
<div class="buttons">
|
|
|
- <button>Cancel</button>
|
|
|
- <button class="confirm">Continue</button>
|
|
|
+ <button @click="hideDeleteLayer">Cancel</button>
|
|
|
+ <button class="confirm" @click="confirmDeleteLayer">Continue</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bg" v-if="deleteDialog"></div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { onMounted, ref } from 'vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import Api from '../../static/http/api';
|
|
|
+import { postRequest } from '../../static/http'
|
|
|
import { getStorage, storageKey, removeStorage } from '../../static/utils/storage'
|
|
|
|
|
|
-const userInfo: any = ref({});
|
|
|
+const userInfo: any = ref({})
|
|
|
+
|
|
|
+const publishType = ref(0)
|
|
|
+const publishItem = ref(null)
|
|
|
const publishDialog = ref(false)
|
|
|
+
|
|
|
+const deleteItem = ref(null)
|
|
|
const deleteDialog = ref(false)
|
|
|
|
|
|
+const pageNum = ref(1)
|
|
|
+const pageSize = 1000
|
|
|
+const pageList = ref([])
|
|
|
+
|
|
|
const logout = () => {
|
|
|
removeStorage(storageKey.userInfo)
|
|
|
location.href = `/`
|
|
|
@@ -71,8 +97,125 @@ const add = () => {
|
|
|
location.href = `/nft/add`
|
|
|
}
|
|
|
|
|
|
+const remove = (item: any) => {
|
|
|
+ deleteItem.value = JSON.parse(JSON.stringify(item));
|
|
|
+ showDeleteLayer()
|
|
|
+}
|
|
|
+
|
|
|
+const publish = (item: any) => {
|
|
|
+ publishType.value = 1;
|
|
|
+ publishItem.value = item;
|
|
|
+ showPublishLayer()
|
|
|
+}
|
|
|
+
|
|
|
+const unpublish = (item: any) => {
|
|
|
+ publishType.value = 2;
|
|
|
+ publishItem.value = item;
|
|
|
+ showPublishLayer()
|
|
|
+}
|
|
|
+
|
|
|
+const view = () => {
|
|
|
+ let userInfo = getStorage(storageKey.userInfo);
|
|
|
+ let nickName = userInfo && userInfo.nickName || '';
|
|
|
+ // open
|
|
|
+ window.open(`https://twitter.com/${nickName}`);
|
|
|
+}
|
|
|
+
|
|
|
+const getList = () => {
|
|
|
+ postRequest(Api.userNftList, {
|
|
|
+ params: {
|
|
|
+ pageNum: pageNum.value,
|
|
|
+ pageSize: pageSize
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let { code, data } = res;
|
|
|
+ if (code === 0) {
|
|
|
+ pageList.value = data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const hideDeleteLayer = () => {
|
|
|
+ deleteDialog.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+const showDeleteLayer = () => {
|
|
|
+ deleteDialog.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+const confirmDeleteLayer = () => {
|
|
|
+ postRequest(Api.userNftDel, {
|
|
|
+ params: {
|
|
|
+ nftProjectId: deleteItem.value.nftProjectId,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let { code, msg } = res;
|
|
|
+ if ( code === 0 ) {
|
|
|
+ // filter
|
|
|
+ pageList.value.some((item, index) => {
|
|
|
+ if (item.nftProjectId === deleteItem.value.nftProjectId) {
|
|
|
+ pageList.value.splice(index, 1);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: 'Delete Success!',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: msg,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ hideDeleteLayer()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const hidePublishLayer = () => {
|
|
|
+ publishDialog.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+const showPublishLayer = () => {
|
|
|
+ publishDialog.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+const confirmPublishLayer = () => {
|
|
|
+ let item = JSON.parse(JSON.stringify(publishItem.value));
|
|
|
+ let status = publishType.value === 1 ? 1 : 0;
|
|
|
+ // request
|
|
|
+ postRequest(Api.userNftSetStatus, {
|
|
|
+ params: {
|
|
|
+ nftProjectId : item.nftProjectId,
|
|
|
+ publishStatus : status
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let { code, msg } = res;
|
|
|
+ if ( code === 0 ) {
|
|
|
+ pageList.value.some((row) => {
|
|
|
+ if (row.nftProjectId === item.nftProjectId) {
|
|
|
+ row.publishStatus = status;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: publishType.value === 1 ? 'Published Successfully!' : 'We have listed your NFT collection!',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ hidePublishLayer()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
userInfo.value = getStorage(storageKey.userInfo);
|
|
|
+ // 获取列表
|
|
|
+ getList()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
@@ -122,6 +265,12 @@ onMounted(() => {
|
|
|
margin: 20px;
|
|
|
height: 360px;
|
|
|
overflow-y: auto;
|
|
|
+ .empty {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
.item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -133,6 +282,7 @@ onMounted(() => {
|
|
|
margin-bottom: unset;
|
|
|
}
|
|
|
.logo {
|
|
|
+ overflow: hidden;
|
|
|
width: 70px;
|
|
|
height: 70px;
|
|
|
margin: 0 24px;
|
