mall-web-ssr/pages/help/helpList/_id.vue

<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/home'" style="font-size: 14px">帮助中心首页<i class="fa fa-angle-right"></i></a>
              <span>
                <nuxt-link :to="`/help/home`" class="box" style="font-size: 16px"><span>{{helpTitle.item}}</span><i class="fa fa-close"></i></nuxt-link>
              </span>
            </div>
            <!-- 文章列表-->
            <div class="help-center-list">
              <h4>问题知识列表</h4>
              <ul>
                <li v-for="list in helpList">
                  <em></em>
                  <nuxt-link :to="`/help/helpDetail/${list.num}`" v-text="list.title" :title="list.title"></nuxt-link>
                </li>
                <li v-if="helpList.length == 0" style="color: #999;">暂无数据！</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
  import { left, helpHeader } from '~components/help'
  // 升序
  function compare (propertyName) {
    return function (object1, object2) {
      let value1 = object1[propertyName]
      let value2 = object2[propertyName]
      if (value1 > value2) {
        return 1
      } else if (value1 < value2) {
        return -1
      } else {
        return 0
      }
    }
  }
  export default {
    name: 'help',
    data () {
      return {
        helpList: {},
        getFlag: true,
        helpTitle: {}
      }
    },
    components: {
      left,
      helpHeader
    },
    mounted () {
      this.$http.get('/api/help-service/issues', {params: { navId: this.$route.params.id }})
        .then(response => {
          this.helpList = response.data.sort(compare('detno'))
        })
      this.getFlag = false
      let id = this.$route.params.id
      this.$http.get(`/api/help-service/${id}`)
        .then(response => {
          this.helpTitle = response.data
        })
    },
    updated () {
      if (this.getFlag) {
        this.$http.get('/api/help-service/issues', {params: { navId: this.$route.params.id }})
          .then(response => {
            this.helpList = response.data.sort(compare('detno'))
          })
        this.getFlag = false
        let id = this.$route.params.id
        this.$http.get(`/api/help-service/${id}`)
          .then(response => {
            this.helpTitle = response.data
          })
      }
    },
    fetch ({ store, route }) {
      return Promise.all([
//        store.dispatch('loadHelpSnapsho', { parentId: 0 }),
//        store.dispatch('loadHelpList', { navId: route.params.id }),
//        store.dispatch('loadHelpTitle', route.params)
      ])
    },
    computed: {
//      helpTitle () {
//        return this.$store.state.help.title.data
//      }
//      helpList () {
//        return this.$store.state.help.helplist.data.sort(compare('detno'))
//      }
    }
  }
</script>
<style>
  @import '~assets/scss/help.css';
</style>