de-net/src/view/iframe/publish/components/nft-setting.vue

<template>
    <div class="setting">
        <a-radio-group v-model:value="type" name="radioType" @change="changeType">
            <label class="item">
                <div class="sel"><a-radio value="public"></a-radio></div>
                <div class="inp">
                    <img :src=" require('@/assets/svg/icon-post-edit-open.svg') " />
                    <span>Public</span>
                </div>
            </label>
            <label class="item">
                <div class="sel"><a-radio value="nft"></a-radio></div>
                <div class="inp">
                    <img :src=" require('@/assets/svg/icon-post-edit-luck.svg') " />
                    <span>NFT holders only</span>
                </div>
            </label>
        </a-radio-group>
        <div
            v-if="showList"
            ref="nftScroll"
            class="scroll"
            @scroll="getMore">
            <div ref="nftGroupList">
                <a-radio-group v-model:value="nftSelectId" name="radioList" @change="changeList">
                    <label
                        class="item"
                        :key="index"
                        v-for="(item, index) in nftList">
                        <div class="sel2"></div>
                        <div class="sel2"><a-radio :value="item.nftProjectId"></a-radio></div>
                        <div class="inp">
                            <img :src=" item.icon " />
                            <span>{{ item.nftProjectName }}</span>
                        </div>
                    </label>
                </a-radio-group>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, defineEmits, defineExpose } from "vue";
import { ElMessage } from 'element-plus'
import { listPossessNftProject } from "@/http/nft.js";
import { throttle } from "@/uilts/help";

let type = ref('public');
let showList = ref(false);
let nftSelectId = ref('');
let nftList = ref([]);
let pageSize = 100;
let pageNum  = ref(1);
let nftScroll = ref();
let nftGroupList = ref();
let getMoreStatus = ref(true);
let emits = defineEmits(['change']);

const changeType = (e) => {
    if (e.target.value === 'nft' && nftList.value.length === 0) {
        type.value = 'public';
        showList.value = false;
        ElMessage({
            message: `Oops，only NFT holders can choose`,
            type: 'warning',
        })
        emits('change', '');
    } else if (e.target.value === 'nft' && nftList.value.length > 0) {
        showList.value = true;
        emits('change', nftSelectId.value);
    } else if (e.target.value === 'public') {
        showList.value = false;
        emits('change', '');
    }
}
const changeList = (e) => {
    emits('change', e.target.value);
}
const getNftList = () => {
    listPossessNftProject({
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize
        }
    }).then(res => {
        let { code, data } = res;
        if ( code === 0 && data.length > 0 ) {
            if (pageNum.value === 1) {
                nftList.value = data;
                nftSelectId.value = data[0]['nftProjectId'];
            } else {
                nftList.value = [...nftList.value, ...data];
            }
        }

        if (data.length < pageSize) {
            getMoreStatus.value = false
        } else {
            getMoreStatus.value = true
        }
    })
}
const getMore = throttle((e) => {
    let oT = e.target.scrollTop;
    let oH = nftGroupList.value.offsetHeight;
    let sH = nftScroll.value.offsetHeight;

    if ((oT + sH  >= oH - 20) && getMoreStatus.value) {
        pageNum.value++
        getNftList()
    }
}, 700)

onBeforeMount(() => {
    // get list
    getNftList()
})

onMounted(() => {
    emits('change', '');
})


defineExpose({
  nftList
})
</script>

<style scoped lang="scss">
.setting {
    overflow: hidden;
    clear: both;
    height: calc(100% - 30px);
    max-height: 600px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    .item {
        display: flex;
        height: 52px;
        cursor: pointer;
        align-items: center;
        .sel {
            width: 52px;
            text-align: center;
            .ant-radio-wrapper {
                margin-right: 0;
            }
        }
        .sel2 {
            width: 40px;
            text-align: center;
            .ant-radio-wrapper {
                margin-right: 0;
            }
        }
        .inp {
            flex: 1;
            display: flex;
            align-items: center;
            height: 52px;
            background: #FFFFFF;
            box-shadow: inset 0px -1px 0px #EFEFEF;
            img {
                width: 24px;
                height: 24px;
                margin-right: 12px;
                border-radius: 2px;
            }
        }
        &:last-child {
            .inp {
                box-shadow: unset;
            }
        }
    }
    .scroll {
        overflow-y: auto;
        height: calc(100% - 105px);
    }
}

.ant-radio-group {
    display: block;
}
</style>