udxcms 1.0.1

package/dist/components/cmsComponents/help/Index.vue

@@ -0,0 +1,540 @@
+<!-- help & support -->
+<template>
+    <div class="help-and-support">
+        <div class="menu-container">
+            <div class="common-problem">{{$t('cms_help_fqa')}}</div>
+            <div class="list-content">
+                <div v-for="(firstItem, firstIndex) in navList" :key="'index_1'+firstIndex" class="item-func">
+                    <a :name="firstItem.name" :id="firstItem.name"></a>
+                    <div :id="firstItem.id" class="first-function-title">
+                        <div class="person-icon">
+                            <img :src="firstItem.icon" alt="">
+                        </div>
+                        <div class="title">{{firstItem.title}}</div>
+                    </div>
+                    <div :id="firstItemArticle.id" class="article-text first-func-article-text" v-for="(firstItemArticle, firstItemArticleIndex) in firstItem.content" :key="'index_1_'+firstItemArticleIndex" @click="checkDetail(firstItem, firstItemArticle, firstItem)">
+                        <div>{{firstItemArticle.title}}</div>
+                    </div>
+                    <div :class="['second-container', secIndex !== 0 && 'second-container-content']" v-for="(secItem, secIndex) in firstItem.children" :key="'index_2'+secIndex">
+                        <div :id="secItem.id" class="second-function-title">{{secItem.title}}</div>
+                        <div :id="secItemArticle.id" class="article-text" v-for="(secItemArticle, secItemArticleIndex) in secItem.content" :key="'index_2_'+secItemArticleIndex" @click="checkDetail(secItem, secItemArticle, firstItem)">
+                            <div>{{secItemArticle.title}}</div>
+                        </div>
+                        <div class="third-container" v-for="(thirdItem, thirdIndex) in secItem.children" :key="'index_3'+thirdIndex">
+                            <div :id="thirdItem.id" @click="expendLastList(thirdItem)">
+                                <div :class="['expend-arrow', thirdItem.isExpand && 'arrow-isExpand']">
+                                    <img v-show="!thirdItem.isExpand" :src="require('../../../assets/h5/helpSupport/expand_arrow.svg')" alt="">
+                                    <img class="expand-arrow-default" v-show="thirdItem.isExpand" :src="require('../../../assets/h5/helpSupport/expand_arrow_active.svg')" alt="">
+                                </div>
+                                <div :class="['third-function-title', thirdItem.isExpand && 'third-function-expand-title']">{{thirdItem.title}}</div>
+                            </div>
+                            <div :class="['third-content', thirdItem.isExpand && 'third-content-expand']">
+                                <div class="article-text" v-for="(thirdItemArticle, thirdItemArticleIndex) in thirdItem.content" :key="'index_3_'+thirdItemArticleIndex" @click="checkDetail(thirdItem, thirdItemArticle, firstItem)">
+                                    <div>{{thirdItemArticle.title}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="nav-container">
+            <div :class="navFixedStatus && 'nav-content'" :style="{'top': navToTop + 'px'}">
+                <div v-for="(firstItem, firstIndex) in navList" :key="'index_1'+firstIndex" class="item-nav">
+                    <div :class="['vertical-content', firstIndex === 0 && 'first-vertical-content', firstIndex === list.length - 1 && 'last-vertical-content']">
+                        <div :class="['first-nav-title', firstItem.id === currentNav.id && 'first-nav-title-active']" @click="changeNav(firstItem, firstItem)">{{firstItem.title}}</div>
+                        <div :class="['second-container', firstItem.isExpand && 'second-container-expand']" v-for="(secItem, secIndex) in firstItem.children" :key="'index_2'+secIndex">
+                            <div :class="['second-nav-title', secItem.id === currentNav.id && 'second-nav-title-active']" @click="changeNav(secItem, firstItem)">{{secItem.title}}</div>
+                            <div class="third-container" v-for="(thirdItem, thirdIndex) in secItem.children" :key="'index_3'+thirdIndex">
+                                <div :class="['third-nav-title', thirdItem.id === currentNav.id && 'third-nav-title-active']"  @click="changeNav(thirdItem, firstItem, thirdItem)">{{thirdItem.title}}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import _ from 'lodash';
+
+function getScrollTop() {
+    var scrollTop = 0;
+    if(document.documentElement && document.documentElement.scrollTop) {
+        scrollTop = document.documentElement.scrollTop;
+    } else if(document.body) {
+        scrollTop = document.body.scrollTop;
+    }
+    return scrollTop;
+}
+
+export default {
+    name: 'HelpAndSupport',
+    props: {
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            treeData: [],
+            navList: [],
+            currentNav: {},
+            currentRootId: '',
+            // scrollFn: null,
+            navFixedStatus: false,
+            navToTop: 0
+        };
+    },
+
+    components: {},
+
+    computed: mapState({
+        lang: (state) => state.language,
+    }),
+
+    mounted() {
+        window.addEventListener('scroll', this.scrollFn)
+    },
+
+    methods: {
+        scrollFn() {
+            const scrollTop = getScrollTop();
+            if (scrollTop > 150) {
+                this.navFixedStatus = true;
+                this.navToTop = scrollTop - 80
+            } else {
+                this.navFixedStatus = false;
+                this.navToTop = 0;
+            }
+        },
+        expendLastList(data) {
+            const { isExpand } = data;
+            this.$set(data, 'isExpand', !isExpand)
+        },
+
+        /**
+         * 查看文章详情
+         */
+        checkDetail(parent, itemContent, rootNav) {
+            const classification = parent.name;
+            const name = itemContent.name;
+            const { id } = rootNav;
+            if (classification && name) {
+                if (parent.id !== rootNav.id && Object.keys(parent).indexOf('isExpand') > -1) {
+                     const query = {
+                        rootId: id,
+                        expandId: parent.id
+                    }
+                    sessionStorage.setItem('helpExpandNode', JSON.stringify(query));
+                }
+                const path = `/help/${classification}/articles/${name}`
+                this.$router.push(path);
+            }
+        },
+        changeNav(navData, rootNav, lastNode = null) {
+            this.currentNav = navData;
+            this.treeData = [rootNav];
+            const { id } = rootNav;
+            const helpExpandNode = {
+                rootId: id
+            }
+            sessionStorage.setItem('helpExpandNode', JSON.stringify(helpExpandNode));
+
+            _.forEach(this.navList, (item) => {
+                item.isExpand = item.id === id;
+            })
+            if (id !== Number(this.currentRootId)) {
+                this.currentRootId = id;
+                this.setDefaultExpand();
+            } else {
+                if (lastNode) {
+                    this.$set(lastNode, 'isExpand', true);
+                }
+            }
+            const domId = navData.id;
+            const dom = document.getElementById(domId);
+            // console.log('navData', navData, dom)
+            if (dom) {
+                window.scrollTo({
+                    top: dom.offsetTop - 80,
+                    behavior: "smooth",
+                });
+                // dom.scrollIntoView();
+            }
+        },
+        setDefaultExpand() {
+            _.forEach(this.treeData, (firstItem) => {
+                if (firstItem.children && firstItem.children.length !== 0) {
+                    _.forEach(firstItem.children, (secItem) => {
+                        if (secItem.children && secItem.children.length !== 0) {
+                            _.forEach(secItem.children, (thirdItem, thirdIndex) => {
+                                thirdItem.isExpand = thirdIndex === 0;
+                            })
+                        }
+                    })
+                }
+            })
+        }
+    },
+    watch: {
+        list: {
+            handler(val) {
+                // const { rootId, expandId } = this.$route.query;
+                const value = _.cloneDeep(val);
+                const helpExpandNode = sessionStorage.getItem('helpExpandNode');
+                if (helpExpandNode) {
+                    try{
+                        const { rootId, expandId } = JSON.parse(helpExpandNode);
+                        const _nav = _.find(value, (o) => o.id === Number(rootId));
+                        if (_nav) {
+                            if (expandId) {
+                                _.forEach(_nav.children, (firstItem) => {
+                                    _.forEach(firstItem.children, (secItem) => {
+                                        secItem.isExpand = secItem.id === Number(expandId);
+                                    })
+                                })
+                                const dom = document.getElementById(expandId);
+                                if (dom) {
+                                    dom.scrollIntoView();
+                                }
+                            }
+                            this.currentNav = _nav;
+                            this.treeData = [_nav];
+                            this.currentRootId = rootId;
+                        }
+                    } catch (err) {
+                        console.error(err)
+                    }
+                } else {
+                    if (!_.isEmpty(value)) {
+                        this.currentNav = value && value[0];
+                        this.treeData = value && [value[0]];
+                        if (this.treeData.length === 0) return;
+                        this.currentRootId = this.treeData[0].id;
+                        // this.$router.push({path: '/help', query: {rootId: this.currentRootId}});
+                    }
+                }
+                if (!_.isEmpty(value)) {
+                    _.forEach(value, (item) => {
+                        item.isExpand = false
+                        if (item.id === this.treeData[0].id) {
+                            item.isExpand = true;
+                        }
+                    })
+                    this.navList = value;
+                }
+            },
+            immediate: true,
+            deep: true
+        }
+    },
+    beforeDestroy() {
+        window.removeEventListener('scroll', this.scrollFn);
+    }
+};
+
+</script>
+<style lang='less' scoped>
+.theme-dark{
+    .help-and-support{
+        .nav-container .first-nav-title::before{
+            background-color: var(--app-bg-color);
+            border: 1px solid rgba(237, 240, 242, 0.2);
+
+        }
+        .vertical-content::before {
+            background-color: rgba(237, 240, 242, 0.2);
+        }
+    }
+}
+</style>
+
+
+<style lang='less' scoped>
+// @import url('./index.less');
+.help-and-support{
+    display: flex;
+    .menu-container{
+        flex: 1;
+    }
+    .common-problem {
+        margin-bottom: 28px;
+        font-size: 24px;
+        line-height: 36px;
+        color: var(--text-color);
+        font-family: FontMedium;
+    }
+    .list-content{
+        .item-func:not(:last-child){
+            margin-bottom: 28px;
+        }
+        .article-text{
+            padding: 8px 13px;
+            position: relative;
+            color: var(--text-color-four);
+            font-size: 14px;
+            line-height: 20px;
+            font-family: Font;
+            cursor: pointer;
+            &::before{
+                content: '';
+                display: block;
+                width: 5px;
+                height: 5px;
+                position: absolute;
+                left: 0;
+                top: 17px;
+                border-radius: 3px;
+                background: #D8DCE1;
+            }
+            >div{
+                line-height: 22px;
+            }
+        }
+        .first-function-title {
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            .person-icon {
+                margin-right: 8px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 36px;
+                height: 36px;
+                border-radius: 18px;
+                background-color: var(--highlight-bg-color);
+                overflow: hidden;
+                > img {
+                    width: 36px;
+                    height: 36px;
+                }
+            }
+            .title {
+                font-size: 17px;
+                line-height: 26px;
+                color: var(--text-color);
+                font-family: FontMedium;
+            }
+        }
+        .second-container-content{
+            margin-top: 12px;
+        }
+        .second-function-title {
+            padding: 12px 0;
+            font-size: 16px;
+            line-height: 16px;
+            color: var(--text-color);
+            font-family: FontMedium;
+        }
+        .third-container{
+            > div:first-child {
+                padding: 8px 0;
+                display: flex;
+                align-items: center;
+            }
+            .expend-arrow {
+                margin-right: 10px;
+                width: 10px;
+                height: 10px;
+                transition: transform 0.36s;
+                display: flex;
+                align-items: center;
+                >img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .expand-arrow-default{
+                transform: rotate(-90deg);
+            }
+            .arrow-isExpand {
+                transform: rotate(90deg);
+            }
+        }
+        .third-function-title{
+            cursor: pointer;
+            color: var(--text-color);
+            font-family: FontMedium;
+        }
+        .third-function-expand-title{
+            color: var(--primary-color);
+        }
+        .third-content{
+            height: 0;
+            overflow: hidden;
+        }
+        .third-content-expand{
+            height: auto;
+        }
+    }
+    .nav-container{
+        display: none;
+    }
+}
+@media screen and (min-width: 768px) {
+    .help-and-support{
+        .menu-container{
+            margin-right: 30px;
+        }
+        .common-problem {
+            margin-bottom: 32px;
+            font-size: 40px;
+            line-height: 60px;
+        }
+        .list-content{
+            .first-function-title {
+                .person-icon{
+                    margin-right: 12px;
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 24px;
+                    > img {
+                        width: 48px;
+                        height: 48px;
+                    }
+                }
+                .title {
+                    font-size: 24px;
+                    line-height: 24px;
+                    color: var(--text-color);
+                }
+            }
+            .second-container {
+				padding-left: 80px;
+			}
+            .second-container-content{
+                margin-top: 28px;
+            }
+            .article-text{
+                font-size: 15px;
+                line-height: 22px;
+            }
+            .first-func-article-text{
+                margin-left: 80px;
+            }
+            .second-function-title{
+                font-size: 18px;
+                line-height: 18px;
+            }
+            .third-function-title{
+                font-size: 15px;
+                line-height: 22px;
+            }
+            .third-function-title:hover,
+            .article-text:hover{
+                color: var(--primary-color);
+                text-decoration: underline;
+            }
+        }
+        .vertical-content{position: relative;}
+        .vertical-content::before{
+            content: '';
+            display: block;
+            position: absolute;
+            width: 1px;
+            height: 100%;
+            left: 8px;
+            top: 0;
+            background-color: #DEDEDF;
+        }
+        .first-vertical-content::before{
+            top: 12px;
+        }
+        .last-vertical-content::before{
+            top: 0;
+        }
+        .nav-container{
+            padding: 12px;
+            display: block;
+            width: 240px;
+            max-height: 100%;
+            overflow: auto;
+            .nav-content{
+                position: sticky;
+                right: 0;
+                top: 80px;
+            }
+            .first-nav-title{
+                padding: 12px 26px;
+                color: var(--text-color);
+                font-size: 14px;
+                line-height: 16px;
+                position: relative;
+                cursor: pointer;
+                font-family: Font;
+                &::before{
+                    content: '';
+                    display: block;
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 8px;
+                    background-color: #fff;
+                    border: 1px solid #DEDEDF;
+                    position: absolute;
+                    left: 0;
+                    top: calc(50% - 8px);
+                }
+            }
+            .first-nav-title-active{
+                color: var(--primary-color);
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 4px;
+                    background-color: var(--primary-color);
+                    position: absolute;
+                    left: 4px;
+                    top: calc(50% - 4px);
+                }
+            }
+            .second-nav-title,
+            .third-nav-title{
+                padding: 8px 0 8px 26px;
+                color: var(--text-color-four);
+                font-size: 12px;
+                line-height: 14px;
+                cursor: pointer;
+                font-family: Font;
+            }
+            .third-nav-title{
+                padding: 8px 0 8px 42px;
+            }
+            .second-nav-title-active,
+            .third-nav-title-active{
+                position: relative;
+                color: var(--primary-color);
+                 &::before{
+                    content: '';
+                    display: block;
+                    width: 5px;
+                    height: 5px;
+                    position: absolute;
+                    left: 6px;
+                    top: 13px;
+                    border-radius: 3px;
+                    background: var(--primary-bg-color);
+                }
+            }
+            .first-nav-title:hover,
+            .second-nav-title:hover,
+            .third-nav-title:hover{
+                color: var(--primary-color);
+                text-decoration: underline;
+            }
+            .second-container{
+                display: none;
+            }
+            .second-container-expand{
+                display: block;
+            }
+        }
+    }
+}
+</style>

package/dist/components/cmsComponents/help/detail.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="detail-article">
+        <div class="article-title">{{articleTitle}}</div>
+        <div class="update-time">{{updateTime}}</div>
+        <div class="article-img" v-if="articleImg && articleImg !== ''">
+            <img :src="articleImg" alt="">
+        </div>
+        <div class="main-article cms_detail" v-html="detailArticle"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DetailArticle',
+    props: {
+        // 文章标题
+        articleTitle: {
+            type: String,
+            default: ''
+        },
+        // 更新时间
+        updateTime: {
+            type: String,
+            default: ''
+        },
+        // 文章详情
+        detailArticle: {
+            type: String,
+            default: ''
+        },
+        articleImg: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+        };
+    },
+
+    components: {},
+
+    computed: {},
+
+    mounted() {},
+
+    methods: {}
+};
+
+</script>
+<style lang='less' scoped>
+// @import url('./index.less');
+// @import url('../../../assets/css/cms_detail.less');
+.detail-article {
+    width: 100%;
+    .article-title {
+        padding: 16px 18px 8px 18px;
+        color: var(--text-color);
+        font-size: 28px;
+        line-height: 42px;
+        text-align: center;
+        font-family: FontMedium;
+    }
+
+    .update-time {
+        margin-bottom: 40px;
+        padding-bottom: 8px;
+        font-size: 14px;
+        // font-family: Font;
+        color: var(--text-color-four);
+        line-height: 32px;
+        border-bottom: 1px solid var(--border-color-base);
+        text-align: center;
+        font-family: Font;
+    }
+    .article-img{
+        margin-bottom: 32px;
+        width: 100%;
+        max-width: 1000px;
+        >img{
+            width: 100%;
+            border-radius: 8px;
+        }
+    }
+    .cms_detail{
+        padding: 0;
+    }
+    /deep/ div {
+        width: 100%;
+        overflow-y: auto;
+    }
+
+    /deep/ img {
+        width: 100%;
+    }
+}
+@media screen and (min-width: 768px) {
+    .detail-article {
+        padding: 0 20px;
+        .article-title {
+            padding-bottom: 20px;
+            font-size: 40px;
+            line-height: 48px;
+        }
+        .update-time{
+            border: none
+        }
+        .main-article{
+            margin: auto;
+            max-width: 800px;
+        }
+    }
+}
+@media screen and (min-width: 1200px) {
+    .detail-article {
+        padding: 0 30px;
+    }
+}
+</style>