udxcms 1.0.8 → 1.0.10

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

@@ -1,540 +0,0 @@
-<!-- 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

@@ -1,119 +0,0 @@
-<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>