测试提交

.env.development

 VUE_APP_OIDC_CONFIG = '{ "authority": "http://106.120.107.150:5000", "client_id": "teamix-team-manager-web-pc", "client_secret": "123456", "redirect_uri": "http://localhost:8080/callback.html", "response_type": "id_token token", "scope": "workapps.client api.workapps.user api.workapps.org api.workapps.open openid","post_logout_redirect_uri":"http://localhost:8080", "silent_redirect_uri": "http://localhost:8080/silent-renew-oidc.html", "automaticSilentRenew": true,"accessTokenExpiringNotificationTime":60,"filterProtocolClaims":true,"loadUserInfo":true }'
 
-VUE_APP_API_BASEURL = 'http://10.10.10.44:8086/api/hrs/bill/account/206484/period'
+VUE_APP_API_BASEURL = 'http://10.10.10.44:8086/api/hrs/'
+
+VUE_APP_PUBLIC_DIR='/'

package-lock.json

@@ -3820,6 +3820,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.8.24",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.24.tgz",
+      "integrity": "sha512-bImQZbBv86zcOWOq6fLg7r4aqMx8fScdmykA7cSh+gH1Yh8AM0Dbw0gHYrsOrza6oBBnkK+/OaR+UAa9UsMrDw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
@@ -7273,6 +7278,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

package.json

@@ -10,8 +10,10 @@
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.4",
+    "dayjs": "^1.8.24",
     "lib-flexible": "^0.3.2",
     "mescroll.js": "^1.4.2",
+    "moment": "^2.24.0",
     "oidc-client": "^1.10.1",
     "postcss-px2rem": "^0.3.0",
     "vant": "^2.6.0",

src/api/Bill/index.js

@@ -4,19 +4,9 @@ import urls from "./urls";
 export default {
 
     // get数据
-    async getData(comid, id, name) {
-        const url = `${urls.host}/${comid}/${urls.getData}/departments`
-        const params = { 'param1': id, 'param2': name };
-        return AjaxRequest.get(url, params);
-    },
-    async getMonth(comid, deptid, name) {
-        const url = `${urls.host}/${comid}/${urls.getMonth}/departments`
-        const params = { 'param1': deptid, 'param2': name };
-        return AjaxRequest.get(url, params);
-    },
-    async getCycle(comid, deptid, name) {
-        const url = `${urls.host}/${comid}/${urls.getCycle}/departments`
-        const params = { 'param1': deptid, 'param2': name };
-        return AjaxRequest.get(url, params);
-    },
+     getPeriod(usermemberId) {
+        let url = `${urls.getPeriod}`;
+        url=url.replace('{usermemberId}',usermemberId);
+        return  AjaxRequest.get(url);
+    }
 };

src/api/Bill/urls.js

+var VUE_APP_API_BASEURL = process.env.VUE_APP_API_BASEURL
 export default {
-  host: "/host",
-  getData: '/getdata',
-  getMonth: '/getmonth',
-  getCycle: '/getcycle'
-};
\ No newline at end of file
+
+  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'
+};
+
+// http://10.10.10.44:8086/api/hrs/bill/account/206484/period
+// http://10.10.10.44:8086/api/hrs/bill/account/206484/period/2319680/summary
+// http://10.10.10.44:8086/api/hrs/bill/account/206484/hosting/2319680/summary
\ No newline at end of file

src/main.js

@@ -4,16 +4,17 @@ import router from './router'
 import store from './store'
 import 'lib-flexible/flexible'
 import './assets/css/index.css'
+import './utils/filter'
+
 Vue.config.productionTip = false
 
 Vue.prototype.globalNavLeftArrowClick = function (callback) {
   document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
     callback();
   };
-
-
 };
 
+
 new Vue({
   router,
   store,

src/store/modules/bill.js

@@ -3,9 +3,9 @@ import api from "../../api/Bill"
 
 let month4choose = "";
 let cycle = "";
-let data = {};
+let period = {};
 
-const state = { month4choose, cycle, data };
+const state = { month4choose, cycle, period };
 
 const getters = {
     getMonth4choose(state) {
@@ -14,8 +14,8 @@ const getters = {
     getCycle(state) {
         return state.cycle;
     },
-    getData(state) {
-        return state.data;
+    getPeriod(state) {
+        return state.period;
     }
 };
 
@@ -41,26 +41,20 @@ const mutations = {
 };
 
 const actions = {
-    async loadBillMonth({ commit }, comid, id, name) {
-        return await api.getMonth(comid, id, name)
-            .then(res => {
-                month4choose = res.data.month4choose;
-                commit(types.CHANGE_BILL_MONTH, month4choose);
-            });
-    },
-    async loadBillCycle({ commit }, comid, id, name) {
-        return await api.getCycle(comid, id, name)
-            .then(res => {
-                cycle = res.data.cycle;
-                commit(types.CHANGE_BILL_CYCLE, cycle);
-            });
-    },
-    async loadBillData({ commit }, comid, id, name) {
-        return await api.getData(comid, id, name)
-            .then(res => {
-                data = res.data;
-                commit(types.CHANGE_BILL_DATA, data);
-            });
+    loadBillPeriod({ commit }, usermemberId) {
+        return new Promise((resolve, reject) => {
+            api.getPeriod(usermemberId)
+                .then(res => {
+                    if (res && res.status) {
+                        period = res.data;
+                        commit(types.CHANGE_BILL_DATA, period);
+                        resolve(period);
+                    }
+                    else {
+                        reject(res.message)
+                    }
+                });
+        })
 
     }
 };

src/utils/filter.js

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

src/views/Bill/index.vue

@@ -7,17 +7,17 @@
       <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>
         <div class="header_box">
@@ -159,7 +159,7 @@ import { Icon } from "vant";
 import { TabHeader } from "@/components";
 import * as utils from "../../utils/common";
 import { mapGetters, mapActions } from "vuex";
-import api from "../../api/Bill";
+import dayjs from "dayjs";
 
 export default {
   components: {
@@ -169,8 +169,10 @@ export default {
   data() {
     return {
       title: "人事服务",
-      month4choose: "",
-      cycle: "",
+      usermemberId: 206484, // 这里需要问，这个值是怎么来的
+      currentPer: 0,
+      currentPerId: 0,
+      period: [{ name: "" }],
       data: {
         balance: 0,
         toBePayAmount: 0,
@@ -203,10 +205,24 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["getMonth4choose", "getCycle", "getData"])
+    ...mapGetters(["getPeriod"]),
+    hideL() {
+      if (this.currentPer == 0) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    hideR() {
+      if (this.currentPer == this.period.length - 1) {
+        return true;
+      } else {
+        return false;
+      }
+    }
   },
   methods: {
-    ...mapActions(["loadBillMonth", "loadBillCycle", "loadBillData"]),
+    ...mapActions(["loadBillPeriod"]),
     toPage(flag) {
       switch (flag) {
         case 1: // 充值
@@ -233,18 +249,33 @@ export default {
     },
     chooseMonth(dirct) {
       if (dirct === "left") {
-        console.log("-----");
+        if (this.currentPer > 0) {
+          this.currentPer--;
+          this.currentPerId = this.period[this.currentPer].id;
+        }
       }
       if (dirct === "right") {
-        console.log("+++++++");
+        if (this.currentPer < this.period.length - 1) {
+          this.currentPer++;
+          this.currentPerId = this.period[this.currentPer].id;
+        }
       }
     },
-     getperiod() {
-       api.getData(1, 1, "a").then(res => {
-        console.log(res.data);
-        this.data.balance=res.data.balance;
-      });
+    async getperiodData() {
+      await this.loadBillPeriod(this.usermemberId).then(
+        data => {
+          this.period = data;
+          console.log('data=',data);
+          
+        },
+        err => {
+          console.log(err);
+        }
+      );
     }
+  },
+  async mounted() {
+    await this.getperiodData();
   }
 };
 </script>
@@ -273,6 +304,9 @@ export default {
           widows: 16px;
           height: 16px;
         }
+        .hideDiv {
+          visibility: hidden;
+        }
       }
       .cycle {
         color: #8ec9fd;