update

README.md

 # qqxb-person-service
 
 ## Project setup
-```
+```js
 npm install
 ```
 
@@ -17,3 +17,6 @@ npm run build
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### api swagger
+[api swagger](http://10.10.10.44:8086/swagger-ui.html#/)
\ No newline at end of file

src/api/Bill/index.js

@@ -4,9 +4,21 @@ import urls from "./urls";
 export default {
 
     // get数据
-     getPeriod(usermemberId) {
+    getPeriod(usermemberId) {
         let url = `${urls.getPeriod}`;
-        url=url.replace('{usermemberId}',usermemberId);
-        return  AjaxRequest.get(url);
+        url = url.replace('{usermemberId}', usermemberId);
+        return AjaxRequest.get(url);
+    },
+    getBillSummary(accountId, usermemberId) {
+        let url = `${urls.getPeriodSummary}`;
+        url = url.replace('{usermemberId}', usermemberId);
+        url = url.replace('{accountId}', accountId);
+        return AjaxRequest.get(url);
+    },
+    getBillHosting(accountId, usermemberId) {
+        let url = `${urls.getHostingSummary}`;
+        url = url.replace('{usermemberId}', usermemberId);
+        url = url.replace('{accountId}', accountId);
+        return AjaxRequest.get(url);
     }
 };

src/api/Bill/urls.js

 var VUE_APP_API_BASEURL = process.env.VUE_APP_API_BASEURL
-export default {
 
+export default {
   getPeriod: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period',
   getPeriodSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/summary',
   getHostingSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/hosting/{accountId}/summary'

src/store/modules/bill.js

 import types from "../types";
 import api from "../../api/Bill"
 
-let month4choose = "";
-let cycle = "";
 let period = {};
+let summary = {};
+let hosting = {};
 
-const state = { month4choose, cycle, period };
+const state = { summary, period, hosting };
 
 const getters = {
-    getMonth4choose(state) {
-        return state.month4choose;
-    },
-    getCycle(state) {
-        return state.cycle;
-    },
     getPeriod(state) {
+        state.period = localStorage.getItem("bill_period");
         return state.period;
+    },
+    getSummary(state) {
+        state.summary = localStorage.getItem("bill_summary");
+        return state.summary;
+    },
+    getHosting(state) {
+        state.hosting = localStorage.getItem("bill_hosting");
+        return state.hosting;
     }
 };
 
 const mutations = {
-    [types.CHANGE_BILL_DATA](state, data) {
-        state.data = data;
+    [types.CHANGE_BILL_PERIOD](state, period) {
+        state.period = period;
         try {
-            // localStorage.setItem("bill_data", data);
+            // localStorage.setItem("bill_period", period);
         } catch (error) { }
     },
-    [types.CHANGE_BILL_MONTH](state, month4choose) {
-        state.month4choose = month4choose;
+    [types.CHANGE_BILL_SUMMARY](state, summary) {
+        state.summary = summary;
         try {
-            // localStorage.setItem("bill_month", month4choose);
+            // localStorage.setItem("bill_summary", summary);
         } catch (error) { }
     },
-    [types.CHANGE_BILL_CYCLE](state, cycle) {
-        state.cycle = cycle;
+    [types.CHANGE_BILL_HOSTING](state, hosting) {
+        state.hosting = hosting;
         try {
-            // localStorage.setItem("bill_cycle", cycle);
+            localStorage.setItem("bill_hosting", hosting);
         } catch (error) { }
-    }
+    },
+
 };
 
 const actions = {
@@ -47,15 +51,44 @@ const actions = {
                 .then(res => {
                     if (res && res.status) {
                         period = res.data;
-                        commit(types.CHANGE_BILL_DATA, period);
+                        commit(types.CHANGE_BILL_PERIOD, period);
                         resolve(period);
                     }
                     else {
                         reject(res.message)
                     }
                 });
-        })
-
+        });
+    },
+    loadBillSummary({ commit }, param) {
+        return new Promise((resolve, reject) => {
+            api.getBillSummary(param.accountId, param.usermemberId)
+                .then(res => {
+                    if (res && res.status) {
+                        summary = res.data;
+                        commit(types.CHANGE_BILL_SUMMARY, summary);
+                        resolve(summary);
+                    }
+                    else {
+                        reject(res.message)
+                    }
+                });
+        });
+    },
+    loadBillHosting({ commit }, param) {
+        return new Promise((resolve, reject) => {
+            api.getBillHosting(param.accountId, param.usermemberId)
+                .then(res => {
+                    if (res && res.status) {
+                        hosting = res.data;
+                        commit(types.CHANGE_BILL_HOSTING, hosting);
+                        resolve(hosting);
+                    }
+                    else {
+                        reject(res.message)
+                    }
+                });
+        });
     }
 };
 

src/store/types.js

 //定义类型常量，默认全部大写义类型常量，默认全部大写
-const CHANGE_BILL_DATA='CHANGE_BILL_DATA'
-
-export default{
-    CHANGE_BILL_DATA
+const CHANGE_BILL_PERIOD = 'CHANGE_BILL_PERIOD';
+const CHANGE_BILL_SUMMARY = 'CHANGE_BILL_SUMMARY';
+const CHANGE_BILL_HOSTING = 'CHANGE_BILL_HOSTING';
+export default {
+    CHANGE_BILL_PERIOD,
+    CHANGE_BILL_SUMMARY,
+    CHANGE_BILL_HOSTING
 }
 

src/utils/filter.js

 import moment from 'moment'
 import Vue from 'vue'
 
-Vue.filter('periodMoment',(e)=>{
-    return moment(e).format('MM.DD')
+Vue.filter('periodMoment', (e) => {
+    if (e) {
+        return moment(e).format('MM.DD')
+    }
+    else {
+        return '';
+    }
+
 })
\ No newline at end of file

src/views/Bill/index.vue

@@ -53,7 +53,7 @@
           </div>
           <p>
             <span>托收金额</span>
-            <i>{{data.hosting}}</i>
+            <i></i>
           </p>
         </div>
 
@@ -155,6 +155,7 @@
 </template>
 
 <script>
+//TODO: 根据当前时间显示日期
 import { Icon } from "vant";
 import { TabHeader } from "@/components";
 import * as utils from "../../utils/common";
@@ -172,11 +173,11 @@ export default {
       usermemberId: 206484, // 这里需要问，这个值是怎么来的
       currentPer: 0,
       currentPerId: 0,
-      period: [{ name: "" }],
+
       data: {
         balance: 0,
         toBePayAmount: 0,
-        hosting: 0,
+        hosting: {},
         socical: {
           toPayAmount: 0,
           toBePayAmount: 0
@@ -205,7 +206,6 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["getPeriod"]),
     hideL() {
       if (this.currentPer == 0) {
         return true;
@@ -219,10 +219,13 @@ export default {
       } else {
         return false;
       }
+    },
+    period() {
+      return [{ name: "" }];
     }
   },
   methods: {
-    ...mapActions(["loadBillPeriod"]),
+    ...mapActions(["loadBillPeriod", "loadBillSummary", "loadBillHosting"]),
     toPage(flag) {
       switch (flag) {
         case 1: // 充值
@@ -260,13 +263,42 @@ export default {
           this.currentPerId = this.period[this.currentPer].id;
         }
       }
+      this.loadBillSummaryData(this.currentPerId);
+      this.loadBillHostingData(this.currentPerId);
     },
-    async getperiodData() {
+    async loadPeriodData() {
       await this.loadBillPeriod(this.usermemberId).then(
         data => {
           this.period = data;
-          console.log('data=',data);
-          
+        },
+        err => {
+          console.log(err);
+        }
+      );
+    },
+    async loadBillSummaryData(accountId) {
+      let param = {
+        accountId,
+        usermemberId: this.usermemberId
+      };
+      await this.loadBillSummary(param).then(
+        data => {
+          this.data.balance = data.balance;
+          this.data.toBePayAmount = data.waitPay;
+        },
+        err => {
+          console.log(err);
+        }
+      );
+    },
+    async loadBillHostingData(accountId) {
+      let param = {
+        accountId,
+        usermemberId: this.usermemberId
+      };
+      await this.loadBillHosting(param).then(
+        data => {
+          this.data.hosting = data;
         },
         err => {
           console.log(err);
@@ -275,7 +307,9 @@ export default {
     }
   },
   async mounted() {
-    await this.getperiodData();
+    await this.loadPeriodData();
+    await this.loadBillSummaryData(this.period[0].id);
+    await this.loadBillHostingData(this.period[0].id);
   }
 };
 </script>

src/views/Trusteeship/index.vue

 <template>
   <div class="container">
     <div class="header">
-      <Header :title="title"/>
+      <Header :title="title" />
     </div>
     <div class="contener">
       <div class="header">
         <div class="header_date_time">
           <div class="choose-month">
-            <div class="arrow-l" @click="chooseMonth('left')">
+            <div class="arrow-l" :class="hideL?'hideDiv':''" @click="chooseMonth('left')">
               <img src="../../assets/images/triangle-arrow-l.png" alt />
             </div>
-            <div class="month">{{month4choose}}</div>
-            <div class="arrow-r"  @click="chooseMonth('right')">
+            <div class="month">{{period[currentPer].name}}</div>
+            <div class="arrow-r" :class="hideR?'hideDiv':''" @click="chooseMonth('right')">
               <img src="../../assets/images/triangle-arrow-r.png" alt />
             </div>
           </div>
           <div class="cycle">
             <span>入账周期：</span>
-            <span>{{cycle}}</span>
+            <span>{{period[currentPer].beginDate | periodMoment}}-{{period[currentPer].endDate | periodMoment}}</span>
           </div>
         </div>
         <!--人事托管-->
@@ -116,7 +116,6 @@
                 <i>600.00</i>
               </p>
             </div>
-
           </div>
         </div>
       </div>
@@ -149,7 +148,8 @@
 
 <script>
 import { Icon, Popup } from "vant";
-import {Header} from '@/components'
+import { Header } from "@/components";
+import { mapGetters } from "vuex";
 export default {
   components: {
     Header,
@@ -159,22 +159,54 @@ export default {
   data() {
     return {
       show: false,
-      title:'人事托管',
-      month4choose: "2019年11月",
-      cycle: "11.01-11.30"
+      title: "人事托管",
+      currentPer: 0,
+      currentPerId: 0,
+      period: [{ name: "" }],
+      hosting: {}
     };
   },
+  computed: {
+    ...mapGetters(["getPeriod", "getHosting"]),
+    hideL() {
+      if (this.currentPer == 0) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    hideR() {
+      if (this.currentPer == this.period.length - 1) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
   methods: {
-
+    getData() {
+      if (this.getPeriod && this.getPeriod.length > 0) {
+        this.period = this.getPeriod;
+      }
+      if (this.getHosting && this.getHosting.length > 0) {
+        this.hosting = this.getHosting;
+      }
+    },
     openDetail() {
       this.show = true;
     },
-    chooseMonth(dirct){
-      if(dirct==='left'){
-        console.log('-----');
+    chooseMonth(dirct) {
+      if (dirct === "left") {
+        if (this.currentPer > 0) {
+          this.currentPer--;
+          this.currentPerId = this.period[this.currentPer].id;
+        }
       }
-      if(dirct==='right'){
-        console.log('+++++++');
+      if (dirct === "right") {
+        if (this.currentPer < this.period.length - 1) {
+          this.currentPer++;
+          this.currentPerId = this.period[this.currentPer].id;
+        }
       }
     },
     navLeftArrowClick() {
@@ -183,6 +215,7 @@ export default {
   },
   mounted() {
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
+    this.getData();
   }
 };
 </script>
@@ -206,11 +239,15 @@ export default {
       .choose-month {
         display: grid;
         grid-template-columns: 5% 90% 5%;
-        justify-items:center;
-        .arrow-l,.arrow_right{
+        justify-items: center;
+        .arrow-l,
+        .arrow_right {
           widows: 16px;
           height: 16px;
         }
+        .hideDiv {
+          visibility: hidden;
+        }
       }
       .cycle {
         color: #8ec9fd;