udxcms 1.0.3 → 1.0.5

package/dist/views/customService/help/index.vue

@@ -0,0 +1,145 @@
+<!-- Help & Support -->
+<template>
+    <div class="help">
+        <Header class="visible-pc" :showMiddleInfo="true" />
+        <OtherNav class="visible-h5" bottom="10">{{
+            $t("cms_help_bread_title")
+        }}</OtherNav>
+        <div v-if="!loading" class="content">
+            <!-- <HelpNav class="nav"/> -->
+            <PowxBread :list="bread" class="nav"></PowxBread>
+            <HelpSupport :list="list"/>
+        </div>
+        <div v-else class="loading-wrap">
+            <site-loading></site-loading>
+        </div>
+        <!-- TODO:Footer改为后端配置，全局统一 -->
+        <Footer v-if='!version' class="footer" type="fixed" />
+        <!-- 2mr统一新的页脚 -->
+        <footer-wrap v-else/>
+    </div>
+</template>
+
+<script>
+import HelpSupport from '../../../components/cmsComponents/help/Index.vue'
+import conf from "../../../config/index";
+import { loadImportScript, isPhone} from "../../../utils/index";
+import { mapState } from "vuex";
+import HelpNav from './nav.vue';
+import _ from 'lodash';
+
+export default {
+    name: 'HelpPage',
+    data() {
+        return {
+            list: [], // help list data
+            isPhone: isPhone(),
+            bread: [
+				{
+					path: "/help",
+					name: this.$t("cms_help_bread_title"),
+				},
+			],
+            loading: true
+        };
+    },
+
+    components: {
+        HelpSupport,
+        HelpNav
+    },
+
+    computed: {
+        lang() {
+            return this.$store.state.language
+        },
+        version() {
+			return this.$store.state.siteConfig.footerMsgVersion || ''
+		}
+    },
+
+    mounted() {
+        this.getListData();
+    },
+
+    methods: {
+        /**
+         * 获取help树结构
+         */
+        getListData() {
+            const hostName = window.mainHostname
+            const url = `${conf.sitePath}${hostName}/${this.lang}/help/all/classify_tree.js`
+            loadImportScript(url, null, 'message')
+                .then((res) => {
+                    _.forEach(res, (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;
+                                    })
+                                }
+                            })
+                        }
+                    })
+                    this.list = res;
+                    this.loading = false;
+                    // 滚动到锚点
+                    this.$nextTick(() => {
+                        this.goAnchor();
+                    })
+                })
+                .catch((err) => {
+                    console.error(err);
+                    this.loading = false;
+                });
+        },
+        goAnchor() {
+            const hash = this.$route.hash;
+
+            if (hash) {
+                const el = document.querySelector(hash);
+                window.scrollTo({
+                    top: el.offsetTop - 80,
+                    behavior: "smooth",
+                });
+            }
+        }
+    }
+};
+
+</script>
+<style lang='less' scoped>
+.help{
+    display: flex;
+    flex-direction: column;
+    .content{
+        padding: 0 20px;
+        max-width: 1190px;
+        flex: 1;
+        .nav{
+            border-bottom: 1px solid var(--border-color-base);
+        }
+    }
+    .loading-wrap {
+        flex: auto;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+@media screen and (min-width: 768px) {
+    .help{
+        min-height: 100vh;
+        .content{
+            margin: 0 auto 60px;
+            width: 100%;
+            .nav{
+                margin-bottom: 32px;
+            }
+        }
+    }
+}
+@media screen and (min-width: 1200px) {}
+</style>

package/dist/views/customService/help/nav.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="help-nav">
+        <div class="module-title" @click="goBackToHelp">{{moduleTitle}}</div>
+        <div v-if="classificationName !== ''">&gt;</div>
+        <div v-if="classificationName !== ''">{{classificationName}}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'HelpNav',
+    props: {
+        classificationName: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            moduleTitle: this.$t("cms_help_bread_title"),
+        };
+    },
+
+    components: {},
+
+    computed: {},
+
+    mounted() {},
+
+    methods: {
+        goBackToHelp() {
+            if (this.classificationName === '') return;
+            const { rootId, expandId } = this.$route.query;
+            const query = {
+                rootId
+            }
+            if (expandId) {
+                Object.assign(query, {expandId});
+            }
+            this.$router.push({path: '/help', query});
+        }
+    }
+};
+
+</script>
+<style lang='less' scoped>
+.help-nav{
+    padding: 16px 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color-base);
+    color: #3D5066;
+    font-family: Font;
+    >div{
+        line-height: 24px;
+        font-size: 16px;
+    }
+    .module-title{
+        cursor: pointer;
+    }
+    >div:nth-child(2) {
+        margin: 0 4px;
+        position: relative;
+        top: 2px;
+    }
+}
+</style>

package/dist/views/customService/recruit.vue

@@ -0,0 +1,133 @@
+<!-- 文章详情 -->
+<template>
+    <div class="help-detail">
+        <Header class="visible-pc" :showMiddleInfo="true" />
+        <OtherNav class="visible-h5" bottom="10">{{
+            $t("cms_help_bread_title")
+        }}</OtherNav>
+        <div v-if="!loading" class="content">
+            <!-- <HelpNav class="nav" :classificationName="classificationName"/> -->
+            <PowxBread :list="bread" class="nav"></PowxBread>
+            <HelpDetail :articleTitle="articleTitle" :updateTime="updateTime" :detailArticle="detailArticle" :articleImg="articleImg"/>
+        </div>
+        <div v-else class="loading-wrap">
+            <site-loading></site-loading>
+        </div>
+        <Footer/>
+    </div>
+</template>
+
+<script>
+import HelpDetail from '../../components/cmsComponents/help/detail.vue'
+import conf from "../../config/index";
+import { loadImportScript } from "../../utils/index";
+import { mapState } from "vuex";
+import HelpNav from './help/index.vue';
+
+export default {
+    name: 'HelpDetailPage',
+    data() {
+        return {
+            loading: true,
+            bread: [
+				{
+					path: "/help",
+					name: this.$t("cms_recruit_bread_title"),
+				},
+			],
+            classificationName: '',
+            name: '', // 文章对应cdn文件名称Recruit
+            classification: '', // 分类
+            articleTitle: '', // 文章标题
+            updateTime: '', // 更新时间
+            detailArticle: '', // 文章详情
+            articleImg: ''
+        };
+    },
+
+    components: {
+        HelpDetail,
+        HelpNav
+    },
+
+    computed: mapState({
+        lang: (state) => state.language,
+    }),
+
+    created() {
+        const { name } = this.$route.params;
+        this.classification = 'recruit'
+        this.name = name
+    },
+    mounted() {
+        this.getDetail();
+    },
+
+    methods: {
+        /**
+         * 获取文章详情
+         */
+        getDetail() {
+            const hostName = window.mainHostname
+            const url = `${conf.sitePath}${hostName}/${this.lang}/announcement/${this.classification}/${this.name}.js`
+            loadImportScript(url, null, 'message')
+                .then((res) => {
+                    const { title, description, update_time, type_title, image_url } = res;
+                    const date = new Date(update_time);
+                    const year = date.getFullYear();
+                    const month = date.getMonth() + 1;
+                    const day = date.getDate();
+                    this.articleTitle = title;
+                    this.updateTime = `${month}/${day}/${year}`;
+                    this.detailArticle = description;
+                    this.classificationName = type_title;
+                    this.bread.push({
+                        name: type_title
+                    })
+                    // this.articleImg = 'https://d1qu701gfywrk1.cloudfront.net/2021/10/27/bcde1058-2eb3-492a-8513-7009b60a7e24.png';
+                    this.articleImg = image_url;
+                    this.loading = false;
+                })
+                .catch((err) => {
+                    console.error(err);
+                    this.loading = false;
+                });
+        }
+    }
+};
+
+</script>
+<style lang='less' scoped>
+.help-detail{
+    display: flex;
+    flex-direction: column;
+    .content{
+        padding: 0 20px;
+        max-width: 1100px;
+        flex: 1;
+        .nav{
+            border-bottom: 1px solid var(--border-color-base);
+        }
+    }
+    .loading-wrap {
+        flex: auto;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+@media screen and (min-width: 768px) {
+    .help-detail{
+        min-height: 100vh;
+        .content{
+            margin: 0 auto 40px;
+            width: 100%;
+            .nav{
+                margin-bottom: 32px;
+            }
+        }
+    }
+}
+</style>
+

package/dist/views/customService/sdk.vue

@@ -0,0 +1,126 @@
+<!-- sdk  -->
+<template>
+  <div class="page-sdk">
+    <div class="visible-pc">
+      <Header :showMiddleInfo="true" />
+    </div>
+    <div class="visible-h5">
+      <Top class="top" />
+    </div>
+    <div class="wiki-container">
+      <div class="wiki-article" v-if="list.length">
+        <SDK :list="list" :initPath="initPath"></SDK>
+      </div>
+
+      <!-- loading -->
+      <div v-else class="loading-wrap">
+        <site-loading></site-loading>
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+import SDK from "../../components/cmsComponents/sdk/index.vue";
+import conf from "../../config/index";
+import { loadImportScript, isPhone } from "../../utils/index";
+import { mapState } from "vuex";
+
+export default {
+  name: "WikiPage",
+  data() {
+    return {
+      // color: window.themeColor || "var(--primary-color)",
+      list: [], // help list data
+      navList: [{ name: this.$t("cms_help_bread_title") }],
+      // article: {},
+      isPhone: isPhone(),
+      // initName: [],
+      initPath: "",
+      // nextPageList: [{ show: false }, { show: false }],
+    };
+  },
+
+  components: {
+    SDK,
+  },
+
+  computed: mapState({
+    lang: (state) => state.language,
+  }),
+
+  created() {
+    console.log('this.$route', this.$route)
+    this.getListData();
+  },
+
+  methods: {
+    /**
+     * 获取wiki树结构
+     */
+    getListData() {
+      const hostName = window.mainHostname;
+      const url = `${conf.sitePath}${hostName}/${this.lang}/sdk/all/classify_tree.js`;
+      loadImportScript(url, null, "message")
+        .then((res) => {
+          console.log("res", res);
+          this.list = res.filter((v) => {
+            return v.content && v.content.length > 0;
+          });
+
+        })
+        .catch(() => false);
+    },
+    /**
+     * 获取文章
+     * */
+    getArticle(path) {
+      const hostName = window.mainHostname;
+      const url = `${conf.sitePath}${hostName}/${this.lang}/sdk/${path}.js`;
+      this.article = {};
+      loadImportScript(url, null, "message")
+        .then((res) => {
+          console.log("article res", res);
+          this.article = res;
+        })
+        .catch(() => false);
+    },
+  },
+};
+</script>
+<style lang='less' scoped>
+.page-sdk {
+  // background: #000;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  // padding-top: 70px;
+
+  .wiki-container {
+    // min-height: 100vh;
+    flex: auto;
+    display: flex;
+  }
+  .wiki-article{
+    flex: auto;
+  }
+  .content {
+    margin-bottom: 70px;
+  }
+  .nav-bread {
+    // width: 1100px;
+    margin: 70px auto 40px;
+  }
+  .loading-wrap {
+    flex: auto;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+</style>