de-net/src/view/popup/components/head.vue

<template>
    <div class="head" :class="{ 'border': show_state != 'home', 'home': show_state == 'home' }">
        <template v-if="show_state == 'home'">
            <div class="desc">
                <img class="img" :src="user_info.avatarUrl" />
                <font class="name">{{user_info.nickName}}</font>
            </div>
            <div class="logo">
                <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
            </div>
        </template>
        <template v-else>
            <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back" @click="clickBack">
            <div class="title">{{ props.title }}</div>
            <img :src="require('@/assets/svg/icon-back-head-list.svg')"
                v-if="show_list" 
                class="list" 
                @click="clickList" />
            <img :src="require('@/assets/svg/icon-refresh.svg')" alt="" class="refresh" v-if="show_refresh"
                @click="clickRefresh" :class="{ transform_rotate: state.rotate }">
            <img :src="require('@/assets/svg/icon-head-help.svg')" alt="" class="help" v-if="props.show_help"
                @click="clickHelp">
            <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more" v-if="props.show_more"
                @click="state.show_option = true">
            <div class="area-option" v-if="state.show_option" @click="state.show_option = false">
                <div class="option">
                    <div class="item" @click="clickItem('/transactions')">
                        <img :src="require('@/assets/svg/icon-menu.svg')" alt="">
                        <span>Transactions History</span>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
<script setup>
import { getChromeStorage } from "@/uilts/chromeExtension";
import { defineProps, defineEmits, reactive, ref, onMounted } from "vue";
import router from "@/router/popup.js";
import { boolean } from "mathjs";

let props = defineProps({
    title: String,
    show_state: String,
    show_refresh: Boolean,
    show_option: Boolean,
    show_more: Boolean,
    show_help: Boolean,
    back_url: String,
    user_info: Object,
    show_list: Boolean,
    transactionsRouterParams: Object,
})

let state = reactive({
    show_option: ref(props.show_option),
    rotate: false
})

const emit = defineEmits(['on-refresh'])

function clickBack() {
    if (props.back_url) {
        router.replace(props.back_url)
    } else {
        router.back()
    }

}

function clickRefresh() {
    if (state.rotate) {
        return
    }
    state.rotate = true
    emit('on-refresh')
    setTimeout(() => {
        state.rotate = false
    }, 1000)
}

function clickItem(path) {
    let params = props.transactionsRouterParams || {};
    router.push({
        path: path,
        query: {
            params: JSON.stringify(params)
        }
    })
}

function clickHelp() {
    window.open(`https://aboard-cattle-610.notion.site/How-to-withdraw-assets-from-DeNet-to-MetaMask-01c679bb9ff441429e31e8f7c1f67411`)
}

function clickList() {
    let params = props.transactionsRouterParams || {};
    console.log('transactionsRouterParams',params);
    router.push({
        path: '/transactions',
        query: {
            params: JSON.stringify(params)
        }
    })
}

</script>
<style lang="scss" scoped>
.border {
    border-bottom: 1px solid #DBDBDB;
}

.head {
    height: 48px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    overflow: hidden;

    &.home {
        height: 64px;
    }

    .logo {
        display: flex;
        align-items: center;
        img {
            width: 26px;
            height: 26px;
        }
    }

    .desc {
        .img {
            width: 34px;
            height: 34px;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 10px;
        }
        .name {
            display: inline-block;
            width: 200px;
            color: #000000;
            font-size: 16px;
            font-weight: bold;
        }
    }

    .area-option {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 111;

        .option {
            position: absolute;
            top: 43px;
            right: 15px;
            background: #fff;
            filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
            width: 240px;
            border-radius: 15px;
            overflow: hidden;

            .item {
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                cursor: pointer;
                border-top: 1px solid #E9E9E9;

                img {
                    margin-left: 15px;
                    width: 30px;
                    height: 30px;
                    margin-right: 6px;
                }

                span {
                    font-weight: 500;
                    font-size: 14px;
                }
            }

            .item:first-child {
                border-top: 0;
            }

            .item:hover {
                background: #F5F5F5;
            }
        }
    }

    .transform_rotate {
        transform: rotate(360deg);
        transition-duration: 1s;
    }

    img {
        cursor: pointer;
        width: 24px;
        height: 24px;
    }

    .list {
        margin-right: 12px;
    }

    .refresh {
        
    }

    .help {
        margin-left: 20px;
        margin-right: 12px;
    }

    .title {
        padding-left: 16px;
        flex: 1;
        color: #000000;
        font-size: 16px;
        font-weight: 500;
    }
}
</style>