de-net/src/view/iframe/publish-tips/publish-tips.vue

<template>
    <div class="publish-tips-wrapper">
        <div class="top">
            <img src="@/assets/svg/icon-bells.svg" class="icon-bells">
            <div class="text-wrapper" v-show="type == 'Giveaway'">
                <div>
                    Do not delete the
                </div>
                <div>
                    <span>#DeNet </span>and<span> 
                    <template v-if="publishData.postType == PostType.giveaway">
                        Giveaway
                    </template>
                    <template v-else-if="publishData.postType == PostType.postEditor">
                        Tool Box
                    </template> link</span>
                    otherwise the 
                    <template v-if="publishData.postType == PostType.giveaway">
                        giveaway
                    </template>
                    <template v-else-if="publishData.postType == PostType.postEditor">
                        Tool Box
                    </template> will not be available
                </div>
            </div>
            <div class="text-wrapper" v-show="type == 'NFT'">
                <div>
                    Do not delete the
                </div>
                <div>
                    <span>#DNFT </span>and<span> NFT Group Link</span>
                    otherwise the NFT Post will not be aviilble
                </div>
            </div>
        </div>
        <div class="copy-btn" :data-clipboard-text="strContent" @click="copyToken">Copy giveaways link</div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { message } from 'ant-design-vue';
import { getChromeStorage } from '@/uilts/chromeExtension.js'
import { getQueryString } from '@/uilts/help.js';
import { PostType } from '@/types';

let ClipboardJS = require('clipboard');

let strContent = ref('');
let publishData = ref({});
let type = ref('Giveaway');

const copyToken = () => {
    var clipboard = new ClipboardJS('.copy-btn');
    clipboard.on('success', function (e) {
        message.success('copy success');
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
}

const setSrcContent = async () => {
    let data = await getChromeStorage('publishData');
    strContent.value = data.copyContent;
    publishData.value = data;
}


onMounted(() => {
    setSrcContent();
    let type = getQueryString('type') || ''
    if (type == 'nft') {
        type.value = 'nft'
    }
})

</script>

<style  lang="scss">
body {
    overflow-y: hidden;
}

.publish-tips-wrapper {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 15px;
    margin-top: 88px;

    .top {
        display: flex;

        .icon-bells {
            width: 30px;
            height: 30px;
            margin-right: 8px;
        }

        .text-wrapper {
            font-weight: 500;
            font-size: 14px;
            line-height: 17px;

            span {
                color: red;
            }
        }
    }

    .copy-btn {
        margin-top: 20px;
        background: rgba(56, 154, 255, 0.01);
        border: 1px solid #000000;
        border-radius: 100px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 33px;
        cursor: pointer;
    }
}
</style>