fini-ui/src/views/login/modelComponents/Drawer.vue

<template>
    
        <div class="wrapddd">
        <div class="imgWrap22222">
            <img src="@/assets/1x/1x/source8.png" alt="menu">
            <h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ store.$state.locale == 1 ?
                data.title.split(";")[0] : data.title.split(";")[1] }}
            </h4>
        </div>
        <div class="nav">
            <li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
                <img src="@/assets/1x/source10.png" alt="menu">
                <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
            </li>
            <li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
                <img src="@/assets/1x/source5.png" alt="menu">
                <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
            </li>
            <li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
                <!-- <div class="ipoWrap">
                    <div>
                     
                    </div>

                </div> -->
                <img src="@/assets/1x/source2.png" alt="menu">
                <span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>


            </li>
            <li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
                <img src="@/assets/1x/source6.png" alt="menu">
                <span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
               
            </li>
           
            <li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
                <div class="ipoWrap">
                    <div class="icon">
                        <img src="@/assets/1x/1x/source6.png" alt="menu">
                        <span>{{ $t(i18n.global.t('home.Languages')) }}</span>
                    </div>
                    <div class="arrow" :style="{
                        transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
                    }
                        ">
                        <img src="@/assets/1x/source14.png" alt="">
                    </div>
                </div>
                <div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
            <li @click="handleLang1">English</li>
            <li @click="handleLang2">繁體中文</li>
            <li @click="handleLang3">简体中文</li>
        </div>
        </li>

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

<script lang="ts">
export default {
    name: "drawer",
};
</script>

<script lang="ts" setup>
import { inject } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
//import calendar from '@/views/IpoCalendar/index.vue'
import { ElMessageBox } from 'element-plus'
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date())
const calendar = ref()
const handleDrawer = (done: () => void) => {
  done();
}
//const Eventdata = ref([])
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
}

const dayTime = ref()
const getcalendar = async () => {
    const res = await getDate()
    dayTime.value = (res as any).data
    console.log(dayTime.value);
}
const showMounth = (date: any) => {
    const arr = date.split(" ")
    if (arr.length == 3) {
        return arr[2]
    } else if (arr.length == 4) {
        return arr[2] + " " + arr[3]
    }
}

const drawer2 = ref(false)
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
  done()
}
//const drawer1 = ref(false)
const setState = (number: number) => {
    store.setMobileActiveShow(number)
    if (number == 1) {
        proxy.$router.push("/home")

    }
    if (number == 2) {
        proxy.$router.push("/dashboard")
    }
    if (number == 3) {
        proxy.$router.push("/IPO")
       
    }
    if (number == 4) {
        proxy.$router.push("/IPOcalendar")
        store.setMobileActiveShow(1)
      // emit('childfn', !drawer1)
      // emit('childfn', !drawer)
      // drawer1.value = true
     
      // console.log(drawer1.value);
       
    }
    setTimeout(() => {
        handleOnDrwaer(false)
    })
}
//console.log(drawer1.value);

const dialogVisible = ref(true)
const route = useRouter()
const store = ipoStore()
const showalanguge = ref(false)
//const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])
//let emit1 = defineEmits(['childfn1'])
const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function

const props = defineProps({
    drawer: Boolean,
    drawer1:Boolean
})
const data = ref()
onMounted(
    () => {
        // data.value = JSON.parse(localStorage.getItem('itemData') as string)
        const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
        data.value = obj
        //  console.log(data.value);
        // text();
    }
)
let drawer = props.drawer

let drawer1 = props.drawer1
//console.log(props);

const state = ref(1)
// const drawer = ref(true)

const setState2 = (number: number) => {
    store.setMobileActiveShow(number)
    showalanguge.value = !showalanguge.value
}
const handleLang1 = () => {

    if (proxy.$i18n.locale = 'en') {
        proxy.$i18n.locale = 'en'
    }
    store.setLocale(1)
    emit('childfn', !drawer)
    // IpoReflash()
}
const handleLang2 = () => {
    if (proxy.$i18n.locale = 'zhCt') {
        proxy.$i18n.locale = 'zhCt'
        // IpoReflash()

    }
    store.setLocale(2)
    emit('childfn', !drawer)
    /// IpoReflash()
}
const handleLang3 = () => {
    if (proxy.$i18n.locale = 'zhCn') {
        proxy.$i18n.locale = 'zhCn'
    }
    store.setLocale(3)
    emit('childfn', !drawer)
    // IpoReflash()
}

</script>

<style lang="scss" scoped>
.wrapddd {
    width: 80vw;
    transform: translateX(-20px);
    display: flex;
    flex-direction: column;

    .imgWrap22222 {
        margin-top: 20px;
        width: fit-content;
        height: 20px;
        margin-left: 15px;
        display: flex;
        justify-content: center;
        align-items: center;

        // background-color: black;
        img {
            width: 25px;
            height: 20px;
        }

        h4 {
            font-size: 18px;
            margin-left: 10px;
            color: #fff;
            font-weight: 400;
        }
    }

    .nav {
        height: fit-content;
        margin-top: 20px;
        width: 100%;

        >li {
            display: flex;
            align-items: center;
            justify-self: center;
            min-height: 50px;
            padding-left: 15px;
            margin-top: 10px;
            background-color: #B4C0C7;

            &.active {
                background-color: #fff
            }

            img {
                width: 22px;
                height: 22px;
                // background-color: red;
            }

            span {
                margin-left: 25px;
                font-size: 20px;
                font-weight: 700;
                color: #1C3F56;
                display: block;
                line-height: 50px;
                padding-top: 6px;
            }
        }

        .IPO {
            flex-direction: column;
            justify-content: center;
            height: fit-content;

            .lang {
                margin-left: -90px;
                color: #1C3F56;
                font-size: 18px;

                >li {
                    line-height: 24px;
                }
            }

            .report {
                margin-left: -120px;

                span {
                    margin-right: 10px;
                }
            }

            .ipoWrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;


                .icon {
                    min-height: 50px;
                    display: flex;
                    align-items: center;
                    justify-self: center;

                    img {
                        width: 22px;
                        height: 22px;
                    }

                    span {
                        margin-left: 25px;
                        font-size: 20px;
                        font-weight: 700;
                        color: #1C3F56;
                        display: block;
                        line-height: 50px;
                        padding: 0;
                        vertical-align: bottom;
                    }
                }

                .arrow {
                    width: 12px;
                    height: 19px;
                    margin-right: 14px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }


            span {
                display: inline-block;
                // transform: translateY(-3px);
            }


        }
    }

}

</style>
<style>
/* .el-drawer__body{
    padding: 0 
} */
</style>