使用过滤器

components/common/common-swiper-item.vue

@@ -11,11 +11,11 @@
         </span>
       </div>
       <div class="ratio">
-        <span>{{(percentData.certificateRate * 100).toFixed(1)}}%</span>
+        <span>{{percentData.certificateRate | fixedNum}}%</span>
       </div>
       <div class="statics">
-        <span>已获证人数 {{percentData.finishCount}}</span>
-        <span>应参与人数 {{percentData.doctorCount}}</span>
+        <span>已获证人数 {{percentData.finishCount | formatNum}}</span>
+        <span>应参与人数 {{percentData.doctorCount | formatNum}}</span>
       </div>
     </article>
     <article v-show="isSingleOrg" class="middle-org">
@@ -26,11 +26,11 @@
         </span>
       </div>
       <div class="ratio">
-        <span>{{(percentData.doctorRate * 100).toFixed(1)}}%</span>
+        <span>{{percentData.doctorRate | fixedNum}}%</span>
       </div>
       <div class="statics">
-        <span class="grey">已参与人数 {{percentData.joinCount}}</span>
-        <span class="grey">应参与人数 {{percentData.doctorCount}}</span>
+        <span class="grey">已参与人数 {{percentData.joinCount | formatNum}}</span>
+        <span class="grey">应参与人数 {{percentData.doctorCount | formatNum}}</span>
       </div>
     </article>
     <article v-show="!isSingleOrg"  class="mini">
@@ -38,23 +38,23 @@
         <div class="wrapper">
           <span>
             <div class="desc">人员参与率</div>
-            <div class="ratio">{{(percentData.doctorRate * 100).toFixed(1)}}%</div>
+            <div class="ratio">{{percentData.doctorRate | fixedNum}}%</div>
           </span>
           <img src="../../assets/images/tips-2.png" />
         </div>
-        <span class="desc-num">已参与人数 {{percentData.joinCount}}</span>
-        <span class="desc-num">应参与人数 {{percentData.doctorCount}}</span>
+        <span class="desc-num">已参与人数 {{percentData.joinCount | formatNum}}</span>
+        <span class="desc-num">应参与人数 {{percentData.doctorCount | formatNum}}</span>
       </div>
       <div class="item">
         <div class="wrapper">
           <span>
             <div class="desc">机构参与率</div>
-            <div class="ratio">{{(percentData.hospitalRate * 100).toFixed(1)}}%</div>
+            <div class="ratio">{{percentData.hospitalRate | fixedNum)}}%</div>
           </span>
           <img src="../../assets/images/tips-3.png" />
         </div>
-        <span class="desc-num">已参与机构数 {{percentData.hospitalJoinCount}}</span>
-        <span class="desc-num">应参与机构数 {{percentData.hospitalCount}}</span>
+        <span class="desc-num">已参与机构数 {{percentData.hospitalJoinCount | formatNum}}</span>
+        <span class="desc-num">应参与机构数 {{percentData.hospitalCount | formatNum}}</span>
       </div>
     </article>
   </section>
@@ -94,6 +94,18 @@ export default {
       deep: true
     }
   },
+  filters: {
+    formatNum(num) {
+      var str = (num || 0) + '' ;
+      return str.split("").reverse().reduce((prev, next, index) => {
+        return ((index % 3) ? next : (next + ',')) + prev;
+      })   
+    },
+    fixedNum(num, fixed = 1) {
+      if(!num) return 0;
+      return (num * 100).toFixed(fixed)
+    }
+  },
   methods: {
     tipsClick() {
       this.$emit('tipsClick')

nuxt.config.js

@@ -47,7 +47,7 @@ module.exports = {
   plugins: [
     { 
       src: '~/plugins/vue-inject', 
-      ssr: false
+      ssr: true
     }
   ],
   /*

pages/index.vue

@@ -217,6 +217,7 @@ export default {
       allData: {},
       projectId: "",
       token:
+        "4F17C83E6D44456CB873B489BDC1380A" ||
         "A7F0A8A4BB5C4EC4B78E71261B753C9C" ||
         "4281940A6A0C49F69F06BBC9E83DA90D" ||
         "A62E9F92365547A29724F21F29BED4F6" ||
@@ -356,8 +357,8 @@ export default {
           this.projectInfo = res.data;
           getProvinceList(params).then(res => {
             if (res.code === "000000") {
-              this.queryGDParams.regionId = res.data.list[0].id;
-              this.CNTParams.regionId = res.data.list[0].id;
+              this.queryGDParams.regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
+              this.CNTParams.regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
               this.setProvinceList(res.data.list);
               this.getHospitalsCNT(this.CNTParams);
             }
@@ -486,7 +487,9 @@ export default {
       this.CNTParams.regionId = selData.regionId;
       this.getHospitalsCNT(this.CNTParams);
       this.isShowArea = false;
-      this.areaName = selData.townName || selData.countyName || selData.cityName || selData.provinceName
+      if(selData.townName || selData.countyName || selData.cityName || selData.provinceName) {
+        this.areaName = selData.townName || selData.countyName || selData.cityName || selData.provinceName
+      }
       console.log(selData)
       // this. = hospitalNames[0] || this.orgName
       // this.getGeneralData(this.queryGDParams);

plugins/vue-inject.js

@@ -5,7 +5,14 @@ import { DropdownMenu, DropdownItem } from 'vant';
 import { Toast } from 'vant';
 // import picaArea from 'pica-area'
 // Vue.use(picaArea)
-Vue.use(Toast)
+Vue.use(Toast);
+
+// Vue.filter('formatNum',function(num, arg1, arg2){
+//   var str = num + '';
+//   return str.split("").reverse().reduce((prev, next, index) => {
+//     return ((index % 3) ? next : (next + ',')) + prev;
+//   })
+// })
 
 import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
 let vConsole = new VConsole() // 初始化