de-net/src/view/iframe/publish/components/customized-reward-edit.vue

<template>
    <div class="customized-reward-edit">
        <div class="wrap">
            <div class="header">
                <img  
                    :src="require('@/assets/svg/icon-close.svg')"
                    class="icon-close"
                    @click="cancel" />
            </div>
            <div class="title">Enter Reward Name</div>
            <input
                class="prize-name-input" 
                v-model="customizedReward"
                maxlength="30"
                placeholder="Enter Reward Name"
                @input="onInput"/>
            <div class="btns">
                <div class="remove" :class="isUseFul && isCheckedCustom ? 'use-ful' : ''" @click="remove" >Remove</div>
                <div class="confirm" :class="isUseFul ? 'use-ful' : ''" @click="submit" >Confirm</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, computed, defineEmits } from "vue";
import { RewardType } from "@/types";

const props = defineProps({
    customizedReward: {
        type: String,
        default: ""
    },
    rewardType: {
        type: Number,
        default: RewardType.money
    }
});

let customizedReward = ref(props.customizedReward);

const emits = defineEmits(['removeReward', 'submitReward', 'closeRewardPopup']);

let isUseFul = computed(() => customizedReward.value.length > 0);

let isCheckedCustom = computed(() => props.rewardType === RewardType.custom);

const onInput = (e) => {
    customizedReward.value = e.target.value;
}

const cancel = () => {
    emits('closeRewardPopup');
}

const submit = () => {
    isUseFul.value && emits('submitReward', customizedReward.value);
}

const remove = () => {
    if(!isUseFul.value || !isCheckedCustom.value) {
        return
    }
    customizedReward.value = '';
    emits('removeReward');
}
</script>

<style lang="scss" scoped>
.customized-reward-edit {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.6);
    z-index: 1000000;

    .wrap {
        width: 630px;
        height: 270px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #FFFFFF;
        border-radius: 20px;
        padding: 0 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .header {
            height: 48px;
            padding: 12px 14px;
            position: relative;
        }

        .header::after{
            content: "";
            position: absolute;
            width: 200%;
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: #D1D9DD;
            transform: scale(0.5);
            transform-origin: 0;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            line-height: 55px;
            height: 55px;
            margin:2px 20px 0;
            letter-spacing: 0.3px;
            
        }
        .prize-name-input {
            height: 49px;
            background: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 100px;
            margin: 0 20px;
            padding: 0 20px;
        }
        .btns {
            display: flex;
            padding: 45px 20px 0;
            justify-content: space-between;

            div {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 170px;
                height: 51px;
                background: rgba(225, 225, 225, 0.01);
                border: 1px solid #CECECE;
                border-radius: 51px;
                color: #cecece;
            }
            .confirm {
                background-color: #E1E1E1;
                color: #fff;
            }

            .use-ful{
                &.remove {
                    border: 1px solid #FF0A0A;
                    color: #FF0A0A;
                }

                &.confirm {
                    background: #1D9BF0;
                }
            }
        }
    }
}
</style>