eta_docs_front/src/views/update/Index.vue

<script setup>
import { onMounted , ref , reactive} from 'vue';
import { useRoute , useRouter} from"vue-router";
import {apiLogMenu,apiLogList} from '@/api/updateLog';

const MenuList = ref([])
const route = useRoute()
const router = useRouter()
let beforeMounted = ref(false)
let logList = ref([])
let activeMenu = ref('')
let listLoading = ref(false)
function getLogList(dateStr=''){
    logList.value=[]
    listLoading.value = true
    apiLogList({
        date_flag:dateStr
    }).then(res=>{
        if(res.code!==200) return 
        logList.value = res.data.map(list=>{
            list.expand = true
            list.list = list.list.map(item=>{
                item.expand = true
                return item
            })
            return list
        })
        listLoading.value = false
    })
}
function getLogMenu(){
    apiLogMenu().then(res=>{
        if(res.code!==200) return 
        MenuList.value = res.data
    })
}
function changeActiveMenu(menu){
    activeMenu.value = menu
    getLogList(menu)
}
function changeExpand(type,index,itemIndex){
    if(type==='list'){
        logList.value[index].expand = !logList.value[index].expand
    }else{
        logList.value[index].list[itemIndex].expand = !logList.value[index].list[itemIndex].expand
    }
}
function goHelpDoc(){
    //获取url里的商家编码,如果有
    //存本地里,跳转帮助文档要用到
    const {bus_code} = route.query
    bus_code&&localStorage.setItem('bus_code',bus_code)
    router.push({
        path:'/help/index',
        query:{
            bus_code:bus_code||''
        }
    })
}
onMounted(()=>{
    getLogMenu()
    getLogList()
    beforeMounted.value = true
})
</script>

<template>
    <div class="update-log-wrap">
        <div class="left side">
            <div class="menu-title" 
                :class="{'active':activeMenu===''}"
                @click="changeActiveMenu('')">
                <strong>更新日志</strong>
            </div>
            <ul class="menu-list">
                <li class="list-item" 
                    v-for="menu in MenuList" :key="menu"
                    :class="{'active':menu===activeMenu}"
                    @click="changeActiveMenu(menu)"
                    >{{menu}}</li>
            </ul>
        </div>
        <div class="right side" v-loading="listLoading">
            <div class="log-list-wrap" v-for="(list,index) in logList" :key="list.date_flag">
                <h2 class="list-title">{{list.date_flag}}
                    <el-icon @click="changeExpand('list',index)"
                        class="icon" :class="{'expand':list.expand}">
                        <ArrowRight />
                    </el-icon>
                    </h2>
                <ul class="list" v-show="list.expand">
                    <li class="list-item" v-for="(item,itemIndex) in list.list" :key="item.version">
                        <div class="title">
                            <span>v{{item.version}} 更新日期：{{item.update_date}}</span>
                            <el-icon @click="changeExpand('item',index,itemIndex)"
                                class="icon" :class="{'expand':item.expand}">
                                <ArrowRight />
                            </el-icon>
                        </div>
                        <div class="content" v-html="item.content" v-show="item.expand"></div>
                    </li>
                </ul>
            </div>
            <div class="nodata" v-if="logList.length===0" style="text-align: center;">
                <img src="~@/assets/img/nodata.png" alt="" style="width: 300px;"/>
                <p>暂无信息</p>
            </div>
        </div>
    </div>
    <!-- 跳转帮助文档的按钮 -->
    <Teleport to=".layout-header-other" v-if="beforeMounted">
        <div class="update-header-btn" @click="goHelpDoc">
            <el-icon color="#FFF">
                <QuestionFilled />
            </el-icon>
            帮助文档</div>
    </Teleport>
</template>

<style scoped lang="scss">
.update-log-wrap{
    width:100%;
    height:calc(100vh - 60px);
    display: flex;
    *{
        box-sizing: border-box;
    }
    .left{
        width:300px;
        border-right: 1px solid #DCDFE6;
        padding:30px;
        overflow-y: auto;
        .menu-title{
            margin-bottom: 20px;
            cursor: pointer;
            &.active{
                color: #366EF4;
            }
        }
        .menu-list{
            .list-item{
                padding:10px;
                position:relative;
                cursor: pointer;
                &:not(:last-child){
                    margin-bottom: 10px;
                }
                &:hover{
                    color: #366EF4;
                }
                &.active{
                    background-color: #F2F6FA;
                    color: #366EF4;
                    border-radius: 4px;
                    overflow: hidden;
                    &::after{
                        content:'';
                        position:absolute;
                        top:0;
                        bottom:0;
                        left:0;
                        width:4px;
                        background-color: #366EF4;
                    }
                }
            }
        }
    }
    .right{
        flex: 1;
        padding:60px;
        user-select: none;
        overflow-y: auto;
        .list-title,.title{
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .icon{
            cursor: pointer;
            vertical-align: middle;
            &.expand{
                transform: rotate(90deg);
            }
        }
        .list-item{
            margin-left: 20px;
            margin-bottom: 30px;
            position: relative;
            &::before,&::after{
                content:'';
                position:absolute;
            }
            &::before{
                width:4px;
                height:4px;
                border-radius: 50%;
                border:3px solid #366EF4;
                top:4px;
                left: -20px;
            }
            &::after{
                width:2px;
                height:100%;
                top:22px;
                left:-16px;
                background-color: #DCDCDC;
            }
        }
        .content{
            opacity: 0.6;
            user-select: text;
        }
    }
}
.update-header-btn{
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    margin-right: 48px;
    .el-icon{
        background-color: black;
        border-radius: 50%;
    }
}
</style>