de-net/src/view/iframe/publish/components/giveaway-poster.vue

<template>
    <div class="show">
        <div class="row">
            <img class="tagImg" :src=" require('@/assets/svg/poster-befor.svg') " />
            <div class="l">
                <div :style="{'zoom': reviewCanvasParams.zoomL}">
                    <custom-card-horizontal-cover
                        :data="{
                            totalCount: baseFormData.totalCount,
                            amountValue: baseFormData.amountValue,
                            tokenSymbol: currentCurrencyInfo.tokenSymbol,
                            currencyIconUrl: currentCurrencyInfo.iconPath,
                            type: baseFormData.type,
                            validityDuration: baseFormData.validityDuration,
                            customPosterUrl: customPosterInfo && customPosterInfo.before && customPosterInfo.before.imagePath || '',
                            userInfo: {
                                nickName: userInfo.name,
                                avatarUrl: userInfo.avatarUrl
                            },
                            rewardType: baseFormData.rewardType,
                            customizedReward: baseFormData.customizedReward
                        }"
                        :showBottom="false">
                    </custom-card-horizontal-cover>
                </div>
            </div>
            <div class="r">
                <div class="desc"><span>1080*567</span> JPG, PNG</div>
                <div
                    class="box"
                    data-type="1"
                    @drop="dragImg"
                    @dragenter="dragEnter"
                    @dragover="dragEnter"
                    @dragleave="dragLeave">
                    <span class="drag">Drag Image Here</span>
                    <div class="upload">
                        <input
                            class="file"
                            type="file"
                            data-type="1"
                            @change="fileChange"
                            accept="image/png,image/jpg,image/jpeg" />
                        <span>Browse</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <img class="tagImg" :src=" require('@/assets/svg/poster-after.svg') " />
            <div class="t">
                <div
                    :style="{
                        'zoom': reviewCanvasParams.zoomT,
                        'position': 'absolute',
                        'width': '350px',
                    }">
                    <custom-card-cover
                        :data="{
                            totalCount: baseFormData.totalCount,
                            amountValue: baseFormData.amountValue,
                            tokenSymbol: currentCurrencyInfo.tokenSymbol,
                            currencyIconUrl: currentCurrencyInfo.iconPath,
                            type: baseFormData.type,
                            validityDuration: baseFormData.validityDuration,
                            customPosterUrl: customPosterInfo && customPosterInfo.after && customPosterInfo.after.imagePath || '',
                            userInfo: {
                                nickName: userInfo.name,
                                avatarUrl: userInfo.avatarUrl
                            },
                            rewardType: baseFormData.rewardType,
                            customizedReward: baseFormData.customizedReward
                        }">
                    </custom-card-cover>
                </div>
            </div>
            <div class="r">
                <div class="desc"><span>1080*1080</span> JPG, PNG</div>
                <div
                    class="box"
                    data-type="2"
                    @drop="dragImg"
                    @dragenter="dragEnter"
                    @dragover="dragEnter"
                    @dragleave="dragLeave">
                    <span class="drag">Drag Image Here</span>
                    <div class="upload">
                        <input
                            class="file"
                            type="file"
                            data-type="2"
                            @change="fileChange"
                            accept="image/png,image/jpg,image/jpeg" />
                        <span>Browse</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <button class="confirm" @click="confirmAction">Confirm</button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, defineEmits, defineProps, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import customCardCover from '@/view/components/custom-card-cover.vue'
import customCardHorizontalCover from '@/view/components/custom-card-horizontal-cover.vue'
import { getChromeStorage } from "@/uilts/chromeExtension"
import { getUser } from "@/http/publishApi"

const userInfo = ref({});
const emits = defineEmits(['selectImage', 'confirmData']);
const reviewCanvasParams = reactive({
    zoomL: 1,
    zoomT: 1
});

defineProps({
    baseFormData: {
        type: Object,
        default: () => {
            return {
            }
        }
    },
    currentCurrencyInfo: {
        type: Object,
        default: () => {
            return {
            }
        }
    },
    customPosterInfo: {
        type: Object,
        default: () => {
            return {
            }
        }
    }
})

const getUserInfo = (cb) => {
    getChromeStorage('userInfo', (res) => {
        if(res) {
            userInfo.value = res;
        }
        cb && cb(res);
    })
}

const getUserName = (screenName) => {
    getUser({
        params:{
            screenName
        }
    }).then(res => {
        console.log(res);
        if(res.code == 0) {
            userInfo.value.name = res.data.name || ''
        }
    });
}

const fileChange = (e) => {
    if (e && e.target) {
        let file = e.target.files[0]
        let type = e.target.dataset && e.target.dataset.type || '';
        cropImage(file, type)
        e.target.value = '';
    }
}

const dragImg = (e) => {
    e.preventDefault();
    e.target.classList.remove('light');

    // upload
    if (e && e.dataTransfer) {
        let file = e.dataTransfer.files[0];
        let type = e.target.dataset && e.target.dataset.type || '';
        // 格式判断
        if (['image/png', 'image/jpg', 'image/jpeg'].indexOf(String(file.type).toLowerCase()) == -1) {
            message.warning(`This format is not currently supported`);
        } else {
            cropImage(file, type)
        }
    }
}
const dragEnter = (e) => {
    e.preventDefault();
    e.target.classList.add('light')
}
const dragLeave = (e) => {
    e.preventDefault();
    e.target.classList.remove('light')
}

const cropImage = (file, type) => {
    emits('selectImage', {
        file: URL.createObjectURL(file),
        type,
    })
}

const calcPreviewCanvasParams = () => {
    nextTick(() => {
        let lH = document.querySelector('div.row').offsetHeight;
        reviewCanvasParams.zoomL = (lH - 100) / 266;
        reviewCanvasParams.zoomT = (lH - 20) / 500;
    });
}

const confirmAction = () => {
    emits('confirmData')
}

onMounted(() => {
    calcPreviewCanvasParams();
    getUserInfo((res) => {
        if(res) {
            getUserName(res.nickName);
        }
    });
    window.addEventListener('resize',function () {
        calcPreviewCanvasParams();
    })
})
</script>

<style lang="scss" scoped>
.show {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .row {
        position: relative;
        height: calc(50% - 40px);
        padding: 0 75px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        &:nth-child(2) {
            border-top: 1px solid #ececec;
        }
        .tagImg {
            position: absolute;
            top: 0;
            left: 0;
            width: 177px;
            height: 32px;
        }
        .l {
            display: flex;
            width: 50%;
            align-items: center;
            justify-content: center;
            height: calc(100% - 100px);
        }
        .t {
            display: flex;
            width: 50%;
            align-items: center;
            justify-content: center;
            height: calc(100% - 20px);
        }
        .r {
            width: 50%;
            margin-left: 63px;
            height: calc(100% - 100px);
            .desc {
                height: 33px;
                font-size: 16px;
                font-weight: 600;
                span {
                    color: #1D9BF0;
                }
            }
            .box {
                height: calc(100% - 33px);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                border: 1px dashed #B4B4B4;

                &.light {
                    border: 1px dashed #ff0000;
                }
                .drag {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #AEAEAE;
                    font-size: 15px;
                    font-weight: 500;
                    height: calc(100% - 76px);
                }
                .upload {
                    user-select: none;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: calc(100% - 32px);
                    height: 44px;
                    margin: 0 16px;
                    font-size: 15px;
                    color: #1D9BF0;
                    border-radius: 22px;
                    background-color: rgba($color: #1D9BF0, $alpha: .1);
                    .file {
                        position: absolute;
                        z-index: 2;
                        opacity: 0;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    .footer {
        display: flex;
        align-items: center;
        justify-content: right;
        height: 80px;
        text-align: right;
        padding-right: 30px;
        border-top: 1px solid #ececec;
        .confirm {
            cursor: pointer;
            border: 0;
            width: 200px;
            height: 50px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            border-radius: 25px;
            background: #1D9BF0;
        }
    }
}

:deep() .card-wrapper {
    top: unset;
    left: unset;
}
</style>