tradeScreen/src/components/header.vue

<template>
    <div class="headers">
        <div class="logo">
        </div>
        <div class="tab" v-if="role != 1">
            <div class="tab-li">
                <img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;"
                    src="/static/index/SY.png" alt="">
                <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;"
                    src="/static/index/SYXZ.png" alt="">
            </div>
            <div class="tab-li">
                <img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
                    src="/static/index/SP.png" alt="">
                <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    src="/static/index/SPXZ.png" alt="">
            </div>

            <div class="tab-li">
                <img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
                    src="/static/index/SH.png" alt="">
                <img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    src="/static/index/SHXZ.png" alt="">
            </div>
            <div class="tab-li">
                <img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;"
                    src="/static/index/DD.png" alt="">
                <img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    src="/static/index/DDXZ.png" alt="">

            </div>
            <div class="tab-li">
                <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
                    src="/static/index/CW.png" alt="">
                <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    src="/static/index/CWXZ.png" alt="">

            </div>
            <div class="tab-li" v-if="route.path == '/storeLogin'" @click="router.replace('/Businesses')">
                <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
                    src="/static/index/FH.png" alt="">

            </div>
        </div>
        <div class="tab" v-else>

            <div class="tab-li">
                <img @click="showFn(2, '/storeLogin')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
                    src="/static/index/SH.png" alt="">
                <img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    src="/static/index/SHXZ.png" alt="">
            </div>
        </div>
        <div class="right">
            <datePicker></datePicker>
            <div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
                    src="/static/index/DW.png" alt=""> {{ areaStore.area.name||"泸县" }}
            </div>
            <areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;" :key="areaStore.area.areaCode">
            </areaList>


            <div class="right-line">
                <span>
                </span>
                <span></span>
            </div>
            <div class="rigth-li" id="time">15:33:26</div>
            <div class="right-line"> <span></span>
                <span></span>
            </div>
            <div class="rigth-li" id="days">2023-11-28</div>
            <div class="right-line">
                <span></span>
                <span></span>
            </div>
            <div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
                    src="/static/index/GJ.png" alt=""></div>
            <div class="right-line">
                <span></span>
                <span></span>
            </div>

        </div>
    </div>
</template>




<script  setup>
import { ref, reactive, onMounted, watch } from "vue"
import areaList from "./areaList.vue";
import { useRouter, useRoute } from 'vue-router'
import { areaObj } from "@/store/index.js"
import datePicker from "@/components/datePicker.vue"

import { globalEventBus } from '@/common/eventBus'







const areaStore = areaObj()
let area = ref(areaStore.area.name || '')
let userinfo = JSON.parse(localStorage.getItem('TRADE_USER'))
let role = ref(userinfo.role)

const router = useRouter()
const route = useRoute()
// 标题
const show = reactive([false, true, true, true, true])

const showFn = (index, src) => {
    show.forEach((item, i) => {
        show[i] = true
    })
    show[index] = !show[index]
    if (src) {

        if (areaStore.area.streetCode && src == '/') {


            router.push("/townDetail?code=510524102")
            return
        }
        router.replace(src)

    }
}



const changeArea = (name, code) => {
    areaStore.changeArea({
        areaCode: code,
        streetCode: null,
        name,
    })




    // router.go(0)

    router.replace('/')
    console.log(areaStore.area.name)


}



watch(
    () => route.path,
    (value, oldValue) => {



        if (value == '/index') {
            showFn(0)
            area.value = areaStore.area.name || '泸县'
        }
        if (value == '/townDetail') {
            showFn(0)
        }
        if (value == '/commodity') {
            showFn(1)
        }
        if (value == '/Businesses' || value == '/storeLogin') {
            showFn(2)
        }

        if (value == '/order') {
            showFn(3)
        }
        if (value == '/finance') {
            showFn(4)
        }
        if (value == '/finance') {
            showFn(4)
        }

    }, {
    deep: true,
    immediate: true
}

)

const choseAreaFn = () => {

    if (role.value == 2) {
        choseArea.value = true

    }



}

// 选额镇
const choseArea = ref(false)
// 关闭
const offAreaList = (name) => {
    choseArea.value = false

   



    // area.value = name
}
const out = () => {
    localStorage.removeItem('TRADE_USER')
    router.replace('/login')
}
const updateTime = () => {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();


    var years = date.getFullYear()
    var month = date.getMonth()
    var days = date.getDate()
    // alert(days)

    // 添加前导零
    hours = (hours < 10 ? "0" : "") + hours;
    minutes = (minutes < 10 ? "0" : "") + minutes;
    seconds = (seconds < 10 ? "0" : "") + seconds;

    var currentTime = hours + ":" + minutes + ":" + seconds;
    var currentDays = years + '-' + (month >= 10 ? month + 1 : "0" + (month + 1)) + "-" + (days >= 10 ? days : "0" + days)
    // alert(days)

    // 将时间显示在指定的DOM元素中
    document.getElementById("time").innerHTML = currentTime;
    document.getElementById("days").innerHTML = currentDays;
}
const SCREEN_TYPE=JSON.parse(localStorage.getItem('SCREEN_TYPE'))
onMounted(() => {
    setInterval(updateTime, 1000)
    localStorage.setItem("SCREEN_TYPE",JSON.stringify(route.query)||''  )

})




globalEventBus.on('compheader1', data => {
    showFn(0, '/')


    if (SCREEN_TYPE.type == 'r') {
        showFn(0, '/')
    }
})

globalEventBus.on('compheader2', data => {
    showFn(1, '/commodity')

    if (SCREEN_TYPE.type == 'r'){
        showFn(1, '/commodity')
    }
})

globalEventBus.on('compheader3', data => {
    showFn(2, '/Businesses')

    if (SCREEN_TYPE.type == 'r'){
        showFn(2, '/Businesses')

    }

})
globalEventBus.on('compheader4', data => {

    showFn(3, '/order')


    if (SCREEN_TYPE.type == 'r'){
        showFn(3, '/order')
    }

})


globalEventBus.on('compheader5', data => {
    showFn(4, '/finance')


    if (SCREEN_TYPE.type == 'r'){
        showFn(4, '/finance')
    }


})

globalEventBus.on('choserArea', data => {
    changeArea(data.name, data.code)




})
</script>




<style lang="scss" >
.popperClass {
    // background-color: red;
    color: red;
    border: none;
}

.headers {
    display: flex;
    color: #B0C7D1;
    height: 6vh;
    align-items: center;
    justify-content: space-between;
    background-image: url('/static/index/LOGO.png');
    background-color: #000C14;

    background-size: cover;

    .logo {
        width: 20vw;
        // margin-right: 30px;
        height: 40px;
        align-items: center;
    }

    .tab {
        display: flex;
        align-items: center;
        margin-left: 120px;
        width: auto;
        height: 100%;
        // background-color: white;

        .tab-li {
            width: 8vw;
            border-left: 1px solid #4AB9D0;
            text-align: center;
            cursor: pointer;
            height: 1.5vh;
            position: relative;
            // background-color: red;

            .tab-img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: (translate(-50%, -50%));

            }
        }
    }

    .right {
        display: flex;
        font-size: 15px;
        margin-right: 30px;
        position: relative;
        align-items: center;

        .address {
            left: 1vw;
            top: 18px;
            position: absolute;
            width: 8vw;
            height: 18vh;
            background-color: #001E32;
            color: #C7DBE3;
            z-index: 9999;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 5px;

            .address-li {
                padding: 2px 5px;
                cursor: pointer;

                border-bottom: 0.1px solid #0E293C;
            }
        }

        .address::-webkit-scrollbar {
            width: 10px;
            background-color: #153041;
        }

        .address::-webkit-scrollbar-track {
            background-color: #153041;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #4AB9D0;
            border-radius: 5px;
        }

        .rigth-li {
            height: 15px;
            line-height: 15px;
            padding: 0 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .right-line {
            width: 1px;
            height: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
                width: 1px;
                height: 7px;
                background-color: #4BB9D0;

            }
        }
    }
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>