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="u('SY')"
                    alt="">
                <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" :src="u('SYXZ')"
                    alt="">
            </div>
            <div class="tab-li">
                <img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
                    :src="u('SP')" alt="">
                <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
                    alt="">
            </div>

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

            </div>
            <div class="tab-li">
                <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
                    :src="u('CW')" alt="">
                <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('CWXZ')"
                    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="u('FH')" 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="u('SH')" alt="">
                <img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    :src="u('SHXZ')" alt="">
            </div>
        </div>
        <div class="right">
            <datePicker v-if="route.path != '/storeLogin'"></datePicker>
            <div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
                    :src="u('DW')" alt=""> {{ area }}
            </div>
            <areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;"></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="u('GJ')"
                    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 MapLoader from "@/view/utils/position.js"
import { areaObj } from "@/store/index.js"
import datePicker from "@/components/datePicker.vue"
const areaStore = areaObj()
let area = ref('')
let userinfo = JSON.parse(localStorage.getItem('TRADE_USER'))
let role = ref(userinfo.role)
const u = (name) => {
    return `/static/index/${name}.png`
}
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 backUrl = ref('/')
// alert(zz3)

watch(
    () => route.path,
    (value, oldValue) => {
        if (value == '/index') {
            showFn(0)
            area.value = '龙马潭区'
        }
        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 = () => {
    //@ts-ignore
    // window.open("about:blank", "_top").close()

    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;
}
onMounted(() => {
    setInterval(updateTime, 1000)
    MapLoader().then(res => {
        area.value = res.addressComponent.district
    })


})
</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>