添加无反馈信息的时候提示文字

src/containers/Dashboard/CustomerFeedback/CustomerFeedback.vue

@@ -14,19 +14,28 @@
       class="CustomerFeedback-List"
       v-if="show"
       :style="`width:${width}px`"
+      v-loading="loading"
     >
-      <div
-        class="CustomerFeedback-Item"
-        v-for="(item, index) in feedbackList"
-        :key="index"
-      >
-        <span class="CustomerFeedback-ItemNum">{{item.count}}条</span>
-        <span
-          class="CustomerFeedback-ItemName"
-          @click="() => clickHandle(item)"
-          :title="item.areaName"
-        >{{item.areaName}}</span>
-      </div>
+      <template v-if="feedbackList && feedbackList.length">
+        <div
+          class="CustomerFeedback-Item"
+          v-for="(item, index) in feedbackList"
+          :key="index"
+        >
+          <span class="CustomerFeedback-ItemNum">{{item.count}}条</span>
+          <span
+            class="CustomerFeedback-ItemName"
+            @click="() => clickHandle(item)"
+            :title="item.areaName"
+          >{{item.areaName}}</span>
+        </div>
+      </template>
+      <template v-else>
+        <div class="noFeedbackText">
+          没有需要处理的反馈
+        </div>
+      </template>
+
     </div>
   </div>
 </template>
@@ -37,7 +46,11 @@ import { mapGetters, mapActions } from 'vuex';
 export default {
   name: 'CustomerFeedback',
   computed: {
-    ...mapGetters('Dashboard/customerFeedback', ['feedbackList', 'count']),
+    ...mapGetters('Dashboard/customerFeedback', [
+      'feedbackList',
+      'count',
+      'loading',
+    ]),
     ...mapGetters(['feedbackPage']),
   },
   data() {
@@ -100,6 +113,9 @@ export default {
   .CustomerFeedback-List {
     flex: 1;
     overflow-y: auto;
+    .noFeedbackText {
+      padding: 50px 20px;
+    }
   }
   .CustomerFeedback-Item {
     display: flex;

src/containers/Dashboard/CustomerFeedback/CustomerFeedbackStore.js

 import { getFeedbackList } from '@/api/dashboard/dashboard';
 const FETCH_FFEDBACK_LIST = 'FETCH_FFEDBACK_LIST';
+const FETCH_DATA = 'FETCH_DATA';
 
 const state = () => ({
+  loading: false,
   list: [],
   count: 0,
 });
@@ -9,14 +11,22 @@ const state = () => ({
 const getters = {
   feedbackList: state => state.list,
   count: state => state.count,
+  loading: state => state.loading,
 };
 
 const actions = {
   getFeedbackList({ commit }) {
-    return getFeedbackList().then(res => {
-      const { data, count } = res;
-      commit(FETCH_FFEDBACK_LIST, { list: data, count });
-    });
+    commit(FETCH_DATA, true);
+    return getFeedbackList()
+      .then(res => {
+        const { data, count } = res;
+        commit(FETCH_FFEDBACK_LIST, { list: data, count });
+        commit(FETCH_DATA, false);
+      })
+      .catch(err => {
+        console.error(err);
+        commit(FETCH_DATA, false);
+      });
   },
 };
 
@@ -25,6 +35,9 @@ const mutations = {
     state.list = data.list;
     state.count = data.count;
   },
+  [FETCH_DATA](state, fetching) {
+    state.loading = fetching;
+  },
 };
 
 export default {