帮助中心

assets/font/iconfont.css

@@ -44,3 +44,4 @@
 
 .icon-arrow-right:before { content: "\e621"; }
 
+.icon-chuyidong:before { content: "\e617"; }

assets/scss/help.css

@@ -0,0 +1,252 @@
+/* main */
+body{
+  background: #f5f5f5;
+}
+#main>.container .left {
+  width: 200px;
+  float: left;
+  background-color: #fff;
+  margin-top: 16px;
+}
+
+#main>.container .right {
+  width: 975px;
+  float: right;
+  font-size: 12px;
+  margin-top: 16px;
+  background: #fff;
+  border: #e8e8e8 1px solid;
+  margin-bottom: 20px;
+}
+.help-list{
+  width: 200px;
+  background: #fff;
+  border: #e8e8e8 1px solid;
+}
+.help-list h2{
+  background: #5078cb;
+  line-height: 34px;
+  height: 34px;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  margin: 0;
+}
+.help-list ul{
+  width: 200px;
+  display: inline-block;
+}
+.help-list li {
+  line-height: 33px;
+  font-size: 14px;
+  color: #333;
+  float: left;
+  width: 100%;
+  padding-left: 10px;
+}
+
+.help-list li a {
+  display: block;
+  padding-left: 15px;
+  text-decoration: none;
+  color: #333;
+  background:url("/images/help/openblack.png") no-repeat left;
+}
+
+.help-list li a:hover{
+  color: #5078cb;
+  cursor: pointer;
+}
+.help-list ul.list-body {
+  /*display: none;*/
+  color: #666;
+}
+
+.help-list ul.list-body.active {
+  display: block;
+}
+.help-list ul.list-body li {
+  float: none;
+  background-image: none;
+  min-height: 26px;
+  line-height: 26px;
+  font-size: 12px;
+}
+
+.help-list ul.list-body li a {
+  padding-left: 15px;
+  display: block;
+  color: rgb(50,50,50);
+  background: none;
+}
+
+.help-list ul.list-body li a:hover {
+  color: #5078cb;
+  cursor: pointer;
+}
+.help-list ul.list-body li a.cur,.help-list ul li a.cur{
+  text-decoration: none;
+  font-size: 14px;
+  background:url("/images/help/openblackR.png") no-repeat left;
+}
+
+/*
+帮助中心中心内容*/
+.help-center{
+  width: 100%;
+  padding-bottom: 20px;
+}
+.help-center .help-head{
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: #dcdcdc 1px dotted;
+}
+.help-center .help-head img{
+  margin-left: 30px;
+  vertical-align: middle;
+}
+.help-center-title{
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  padding-left: 30px;
+  margin-bottom: 10px;
+}
+.help-center-title a{
+  font-size: 16px;
+  color: #646464;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.help-center-title a.box{
+  color: #646464;
+  border: #ccc 1px solid;
+  padding: 1px 10px;
+  margin-right: 8px;
+  line-height: 23px;
+}
+.help-center-title a:hover{
+  color: #5078cb;
+}
+.help-center-title a.box:hover{
+  border: #5078cb 1px solid;
+}
+.help-center-title a.box i{
+  font-size: 8px;
+  font-weight: inherit;
+}
+.help-center-title a i{
+  margin-left: 10px;
+}
+.help-center-home{
+  width: 910px;
+  margin: 0 auto;
+  border: #e8e8e8 1px solid;
+  padding: 0 15px 15px 15px;
+  padding-top: 10px;
+}
+.help-center-home h4{
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  padding-left: 20px;
+  margin: 0;
+  font-weight: bold;
+}
+.help-center-home .row{
+  line-height: 30px;
+  max-width: 400px;
+  margin-left: 18px;
+  margin-bottom: 30px;
+}
+.help-center-home .row em{
+  margin-right: 6px;
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  background: #323232;
+  border-radius: 100%;
+  float: left;
+  position: relative;
+  top: 12px;
+}
+.help-center-home .row div{
+  width: 33.3333%;
+  float: left;
+}
+.help-center-home .row div:hover a{
+  color: #5078cb;
+  text-decoration: underline;
+}
+.help-center-home .row div:hover em{
+  background: #5078cb;
+}
+.help-center-home .row a{
+  font-size: 12px;
+  color: #323232;
+}
+
+.help-center-list,.help-center-details{
+  width: 910px;
+  margin: 0 auto;
+  border: #e8e8e8 1px solid;
+  padding: 0 15px 15px 15px;
+  padding-top: 10px;
+}
+.help-center-list h4{
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  padding-left: 20px;
+  margin: 0;
+}
+.help-center-list ul{
+  width: 100%;
+  margin-left: 20px;
+}
+.help-center-list ul li{
+  display: block;
+  line-height: 25px;
+}
+.help-center-list ul li a{
+  color: #323232;
+  font-size: 14px;
+}
+.help-center-list ul li em{
+  margin-right: 6px;
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  background: #323232;
+  border-radius: 100%;
+  float: left;
+  position: relative;
+  top: 12px;
+}
+.help-center-list ul li:hover a{
+  color: #5078cb;
+  text-decoration: underline;
+}
+.help-center-list ul li:hover em{
+  background: #5078cb;
+}
+.help-center-details{
+  padding: 15px 20px 20px 20px;
+}
+.help-center-details .title {
+  font-size: 16px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+.dot{
+  font-size: 16px;
+  margin-right: 6px;
+  position: relative;
+  top: 2px;
+  margin-left: 2px;
+}
+.help-center-title a.box i{
+  position: relative;
+  top: -2px;
+}

components/default/Header.vue

@@ -37,7 +37,7 @@
             <a class="item" href="http://account.ubtob.com/sso/register">注册</a>
             <nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
           </template>
-          <nuxt-link class="item" to="/help">帮助中心</nuxt-link>
+          <nuxt-link class="item" to="/help/help">帮助中心</nuxt-link>
         </div>
       </div>
     </nav>

components/help/helpHeader.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="user_center">
+    <div class="wrap">
+      <div class="fl">
+        <nuxt-link :to="'/'"><img src="/images/help/logo.png"/></nuxt-link>
+        <!--<span>我的商城<a ng-href="{{homeUrl}}">返回商城首页</a> </span>-->
+      </div>
+      <!--<div class="nav">
+          <ul>
+              <li ng-class="{'active' : active == 'home'}"><a href="#home" class="active">首页</a></li>
+              <li ng-class="{'active' : active == 'message'}" ><a href="#message">消息（0）</a></li>
+              <li ng-class="{'active' : active == 'browsing-history'}" s><a href="#browsing-history">浏览历史</a></li>
+          </ul>
+      </div>-->
+      <!--<div id="mall-search" class="search-right fr" ng-controller="SearchCtrl">
+          <input type="text" ng-model="keyword" ng-change="onChange()" ng-search="search()" ng-focus="onFocus()" ng-blur="onBlur()" ng-keyup="onKeyup()"placeholder="型号/类别/品牌" />
+          <a class="seek" ng-click="search()">搜索</a>
+          <ul class="association" ng-show="associate || associateEnter" ng-mouseenter="onAssociateEnter()" ng-mouseleave="onAssociateLeave()">
+              <li ng-repeat="as in associates" ng-bind="as" ng-class="{'active': $index==selectIndex}"
+                  ng-click="onAssociateClick(as)"></li>
+          </ul>
+      </div>-->
+      <span class="help-title">帮助中心</span>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'helpHeader'
+  }
+</script>
+<style>
+  .user_center {
+    width: 100%;
+    margin: 0px auto;
+    height: 80px;
+    background: #5078cb;
+  }
+
+  .user_center .fl {
+    width: 230px;
+    position: relative;
+  }
+
+  .user_center .fl a img {
+    float: left;
+    margin-top: 15px;
+  }
+
+  .user_center .fl span {
+    font-size: 18px;
+    color: #fff;
+    position: relative;
+    top: 15px;
+    left: 10px;
+  }
+
+  .user_center .fl span a {
+    width: 86px;
+    height: 20px;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 11px;
+    border: #fff 1px solid;
+    border-radius: 10px;
+    line-height: 20px;
+  }
+
+  .user_center .fl span a:hover {
+    background: #d2272d;
+    color: #fff;
+  }
+
+  .user_center .nav {
+    background: none;
+    width: 500px;
+    float: left;
+    margin-left: 20px;
+    line-height: 80px;
+    margin-bottom: 0px;
+  }
+
+  .user_center .nav ul {
+    width: 100%;
+    margin: 0px auto;
+  }
+
+  .user_center .nav ul li {
+    font-size: 18px;
+    width: 120px;
+    float: left;
+    text-align: center;
+    position: relative;
+  }
+
+  .user_center .nav ul li a {
+    color: #fff;
+    height: 30px;
+    display: inline-block;
+    line-height: 30px;
+    font-size: 14px;
+    width: 100%;
+    display: inline-block;
+  }
+  .user_center .wrap{
+    width: 1190px;
+    margin: 0 auto;
+  }
+  .help-title{
+    float: right;
+    line-height: 80px;
+    font-size: 24px;
+    color: #fff;
+    margin-right: 20px;
+  }
+</style>

components/help/left.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="help-list">
+    <h2>帮助中心</h2>
+    <ul class="list-unstyled" style="margin-top: 10px;">
+      <li v-for="nav01 in helps">
+        <a :class="{'cur': nav01.isHide}" @click="toggleNav(nav01)"><span>{{nav01.item}}</span></a>
+        <ul class="list-unstyled list-body" v-if="!nav01.isHide">
+          <li v-for="nav02 in nav01.children">
+            <nuxt-link :to="`/help/helpList/${nav02.id}`"><span v-text="nav02.item"></span></nuxt-link>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'left',
+    data () {
+      return {
+        navShow: { 122: false }
+      }
+    },
+    computed: {
+      helps () {
+        return this.$store.state.help.snapsho.data
+      }
+    },
+    methods: {
+      toggleNav (nav) {
+        nav.isHide = !nav.isHide
+      }
+    }
+  }
+</script>
+<style>
+  .help-list{
+    width: 200px;
+    background: #fff;
+    border: #e8e8e8 1px solid;
+  }
+  .help-list h2{
+    background: #5078cb;
+    line-height: 34px;
+    height: 34px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    margin: 0;
+  }
+  .help-list ul{
+    width: 200px;
+    display: inline-block;
+  }
+  .help-list li {
+    position: relative;
+    line-height: 33px;
+    font-size: 14px;
+    color: #333;
+    float: left;
+    width: 100%;
+    padding-left: 10px;
+  }
+
+  .help-list li a {
+    display: block;
+    padding-left: 15px;
+    text-decoration: none;
+    color: #333;
+  }
+
+  .help-list li a:hover{
+    color: #5078cb;
+    cursor: pointer;
+  }
+  .help-list ul.list-body {
+    /*display: none;*/
+    color: #666;
+  }
+
+  .help-list ul.list-body.active {
+    display: block;
+  }
+  .help-list ul.list-body li {
+    float: none;
+    background-image: none;
+    min-height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+  }
+
+  .help-list ul.list-body li a {
+    padding-left: 15px;
+    display: block;
+    color: rgb(50,50,50);
+    background: none;
+  }
+
+  .help-list ul.list-body li a:hover {
+    color: #5078cb;
+    cursor: pointer;
+  }
+  .help-list ul.list-body li a.cur,.help-list ul li a.cur{
+    text-decoration: none;
+    font-size: 14px;
+  }
+  .help-list .operate-icon {
+    position: absolute;
+    right: 20px;
+    top: 1px;
+  }
+  .help-list li>ul>li>ul>li {
+    padding-left: 30px;
+  }
+</style>

pages/help/help.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <help-header></help-header>
+  <div id="main">
+    <div class="container" style="padding: 0; width: 1190px;">
+      <div style="display: inline-block; width: 100%; margin: 0 auto">
+        <div class="left">
+          <left></left>
+        </div>
+        <div class="right">
+          <div class="help-center">
+            <div class="help-head"><img src="/images/help/help-title.png"></div>
+            <div class="help-center-title">
+              <a style="font-size: 14px" v-bind:href="'/help/help'">帮助中心首页</a>
+            </div>
+            <div class="help-center-home">
+              <div v-for="nav01 in helpNav">
+                <h4 v-text="nav01.item"></h4>
+                <div class="row">
+                  <div v-for="nav02 in nav01.children">
+                    <em></em><nuxt-link :to="`/help/helpList/${nav02.id}`" v-text="nav02.item"></nuxt-link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+  import left from '~components/help/left'
+  import helpHeader from '~components/help/helpHeader'
+  export default {
+    name: 'help',
+    components: {
+      left,
+      helpHeader
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('loadHelpSnapsho', { parentId: 0 })
+      ])
+    },
+    computed: {
+      helpNav () {
+        return this.$store.state.help.snapsho.data
+      }
+    }
+  }
+</script>
+<style>
+  @import '~assets/scss/help.css';
+</style>

pages/help/helpDetail/_id.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <help-header></help-header>
+  <div id="main">
+    <div class="container" style="padding: 0; width: 1190px;">
+      <div style="display: inline-block; width: 100%; margin: 0 auto">
+        <div class="left">
+          <left></left>
+        </div>
+        <div class="right">
+          <div class="help-center">
+            <div class="help-head"><img src="/images/help/help-title.png"></div>
+            <div class="help-center-title">
+              <a v-bind:href="'/help/help'" style="font-size: 14px">帮助中心首页<i class="fa fa-angle-right"></i></a>
+              <span>
+              <nuxt-link :to="`/help/help`" class="box" style="font-size: 16px">
+                <span>{{helpTitle.item}}</span><i class="fa fa-close"></i></nuxt-link>
+                <i class="dot fa fa-angle-right"></i>
+              </span>
+              <nuxt-link :to="`/help/helpList/{$helpDetail.navId}`" class="box" style="font-size: 14px"><span v-text="helpDetail.title"></span><i class="fa fa-close"></i></nuxt-link>
+            </div>
+            <!--文章详情-->
+            <div class="help-center-details" style="color: #000">
+              <div class="ql-container ql-snow" v-html="helpDetail.article"></div>
+              <div v-if="helpDetail.length == 0" style="color: #999;">暂无数据！</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+</div>
+</template>
+<script>
+  import left from '~components/help/left'
+  import helpHeader from '~components/help/helpHeader'
+  export default {
+    name: 'help',
+    components: {
+      left,
+      helpHeader
+    },
+    fetch ({ store, route }) {
+      console.log(route.params)
+      return Promise.all([
+        store.dispatch('loadHelpSnapsho', { parentId: 0 }),
+        store.dispatch('loadHelpDetail', route.params)
+        // store.dispatch('loadHelpTitle', route)
+      ])
+    },
+    computed: {
+      helpTitle () {
+        return this.$store.state.help.title.data
+      },
+      helpDetail () {
+        return this.$store.state.help.detail.data
+      }
+    }
+  }
+</script>
+<style>
+  @import '~assets/scss/help.css';
+  .help-center-details .ql-container img {
+    max-width: 840px;
+  }
+  .ql-container.ql-snow{
+    border: none;
+  }
+  .ql-container.ql-snow p{
+    font-size: 16px;
+  }
+  .ql-container.ql-snow .ql-editor{
+    padding: 0;
+  }
+</style>

store/help.js

@@ -0,0 +1,61 @@
+export const state = () => ({
+  snapsho: {
+    fetching: false,
+    data: []
+  },
+  helplist: {
+    fetching: false,
+    data: []
+  },
+  detail: {
+    fetching: false,
+    data: []
+  },
+  title: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_SNAPSHO (state) {
+    state.snapsho.fetching = true
+  },
+  GET_SNAPSHO_FAILURE (state) {
+    state.snapsho.fetching = false
+  },
+  GET_SNAPSHO_SUCCESS (state, result) {
+    state.snapsho.fetching = false
+    state.snapsho.data = result
+  },
+  REQUEST_HELPLIST (state) {
+    state.helplist.fetching = true
+  },
+  GET_HELPLIST_FAILURE (state) {
+    state.helplist.fetching = false
+  },
+  GET_HELPLIST_SUCCESS (state, result) {
+    state.helplist.fetching = false
+    state.helplist.data = result
+  },
+  REQUEST_DETAIL (state) {
+    state.detail.fetching = true
+  },
+  GET_DETAIL_FAILURE (state) {
+    state.detail.fetching = false
+  },
+  GET_DETAIL_SUCCESS (state, result) {
+    state.detail.fetching = false
+    state.detail.data = result
+  },
+  REQUEST_TITLE (state) {
+    state.title.fetching = true
+  },
+  GET_TITLE_FAILURE (state) {
+    state.title.fetching = false
+  },
+  GET_TITLE_SUCCESS (state, result) {
+    state.title.fetching = false
+    state.title.data = result
+  }
+}

store/index.js

@@ -82,6 +82,57 @@ export const actions = {
         commit('news/GET_SNAPSHOT_FAILURE', err)
       })
   },
+  // 获取帮助中心信息
+  loadHelpSnapsho ({ commit }, params = {}) {
+    commit('help/REQUEST_SNAPSHO')
+    return axios.get('/api/help-service/helps', {params})
+      .then(response => {
+        commit('help/GET_SNAPSHO_SUCCESS', response.data)
+      }, err => {
+        commit('help/GET_SNAPSHO_FAILURE', err)
+      })
+  },
+  // 获取帮助中心二级菜单
+  loadHelpList ({ commit }, params = {}) {
+    commit('help/REQUEST_HELPLIST')
+    return axios.get('/api/help-service/issues', {params})
+      .then(response => {
+        commit('help/GET_HELPLIST_SUCCESS', response.data)
+      }, err => {
+        commit('help/GET_HELPLIST_FAILURE', err)
+      })
+  },
+  // 获取帮助中心名称
+  loadHelpTitle ({ commit }, params = {}) {
+    let id = params.id
+    commit('help/REQUEST_TITLE')
+    return axios.get(`/api/help-service/${id}`, {params})
+      .then(response => {
+        commit('help/GET_TITLE_SUCCESS', response.data)
+        console.log('parent', response.data)
+      }, err => {
+        commit('help/GET_TITLE_FAILURE', err)
+      })
+  },
+  // 获取详情
+  loadHelpDetail ({ commit }, params = {}) {
+    let id = params.id
+    commit('help/REQUEST_DETAIL')
+    return axios.get(`/api/help-service/issues/${id}`, {params})
+      .then(response => {
+        commit('help/GET_DETAIL_SUCCESS', response.data)
+        let id = response.data.navId
+        commit('help/REQUEST_TITLE')
+        return axios.get(`/api/help-service/${id}`)
+          .then(response => {
+            commit('help/GET_TITLE_SUCCESS', response.data)
+          }, err => {
+            commit('help/GET_TITLE_FAILURE', err)
+          })
+      }, err => {
+        commit('help/GET_DETAIL_FAILURE', err)
+      })
+  },
   // 获取快讯页新闻
   loadAllNews ({ commit }, params = {}) {
     commit('newsPage/REQUEST_ALLNEWS')