dev/dcp-web-gate/src_old/views/helpCenter/helpCenter.vue

<template>
    <div class="box autoBox" style="min-height: 1150px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.HomePage')}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{$t('common.Help')}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin-top: 30px;width: 100%;" class="helpCenter">
            <div style="width: 25%;min-height: 300px;border: 1px solid rgba(228, 228, 228, 1);border-radius: 10px;overflow:hidden;float: left; margin-left: 50px;">
                <!-- <el-collapse v-model="activeName" accordion>
                    <el-collapse-item :title="item.name" :name="index+1" v-for="(item,index) in initData">
                        <div class="management">
                            <div :class="id==i.value?'getClass1':'getClass2'" v-for="(i,j) in item.children"
                                 @click="getItemValue(i)">
                                 {{i.name}}
                                 
                            </div>
                        </div>
                    </el-collapse-item> -->

                <!-- </el-collapse> -->
                <el-tree :data="initData" accordion :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
            <div style="width:65%;min-height:300px;max-height:1150px;border: 1px solid rgba(228, 228, 228, 1);
             border-radius: 10px;float: right; margin-right: 50px;"
            :style="param.businessId==AboutUsID?'':'overflow-y: scroll;overflow-x: hidden;'"
            >
                <div style="width: 100%;text-align: center;color: #666;font-weight: 700;margin-top: 50px;">
                    {{label}}
                </div>
                <div class="content_img" style="width: 98%;margin-left:15px;text-align: left;color: #666;font-size:14px;line-height: 33px;" v-html="content">

                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getHelpColumnTree,getHelpColumnContent} from '@/api/operation/help/helpCenterEntity'

    export default {
        name: 'helpCenter',
        data() {
            return {
                accordion:true,
                activeName: 1,
                id: '1.1',
                label: '',
                initData: [],
                content:'',
                AboutUsID:'',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                param:{
                    pageSize:6,
                    pageNo:1,
                    businessType:'help_center',
                    businessId:'',
                    language:'',
                }
            }
        },
        created() {
            this.toInitData();
        },
        watch: {
            '$i18n.locale'(){
                this.toInitData();
            },
        },
        methods: {
            handleNodeClick(data) {
                if(data.children.length==0){
                    this.getItemValue(data);
                }
            },
            getItemValue(i) {
                this.param.businessId=i.id;
                
                this.param.language =this.$i18n.locale.toUpperCase();
                getHelpColumnContent(this.param).then((result) =>{
                    if(result.data.cmsInformationViews != undefined)
                    {
                        this.label = result.data.cmsInformationViews[0].title;
                        this.content = result.data.cmsInformationViews[0].contentHtml;
                    }else{
                        this.label = '';
                        this.content = '';
                    }
                })
            },
            toInitData: function () {
                var language = this.$i18n.locale.toUpperCase();
                let _this = this;
                getHelpColumnTree(language).then((result) => {
                    if(_this.$i18n.locale.toUpperCase() == language){
                        if(result.data.length != 0 ) {
                            this.initData = result.data;
                            // 获取关于我们的id
                            this.initData.forEach(item=>{
                                if(item.name == '关于我们' || item.name == 'About Us'){
                                    item.children.forEach(i=>{
                                        if(i.name == '关于我们' || i.name == 'About Us'){
                                            this.AboutUsID = i.id;
                                        }
                                    })
                                }
                            })
                            if(_this.$route.query.key){
                                let param={};
                                param.id = _this.$route.query.key;
                                for(var i = 0;i<_this.initData.length;i++){
                                    if(_this.initData[i].children){
                                        _this.initData[i].children.forEach(item =>{
                                            if(item.id==param.id){
                                                _this.activeName = i+1;
                                            }
                                        })
                                    }
                                }
                                this.getItemValue(param);
                            }else{
                                this.getItemValue(this.initData[0].children[0])
                            }

                        }
                    }
                })
            },
           
        }
    }
</script>
<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }

    .crumbs {
        margin-left: 20px;
    }

    body {
        margin: 0;
    }

    .management div {
        line-height: 50px;
        text-indent: 30px;
    }

    .management div:hover {
        color: #ff0000;
        cursor: pointer;
    }

    .helpCenter >>> .el-collapse-item__header {
        text-indent: 20px;
        font-size: 16px;
    }
    .helpCenter >>> .el-collapse-item__content{
        font-size: 14px;
    }
    .getClass1 {
        color: #0050d8
    }

    .getClass2 {
        color: #303133;
    }
    .content_img >>>img {
        width: 100% !important;
    }
    .content_img >>> p {
        margin-right: 15px;
    }
</style>