Skip to content

hrs_app_h5 / bill

Go to a project
Commit d353a23c by 展昭
Options

update

parent 5e317728
Inline Side-by-side
Showing with 190 additions and 60 deletions
README.md
# qqxb-person-service # qqxb-person-service
## Project setup ## Project setup
``` ```js
npm install npm install
``` ```
...@@ -17,3 +17,6 @@ npm run build ...@@ -17,3 +17,6 @@ npm run build
### Customize configuration ### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/). 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"; ...@@ -4,9 +4,21 @@ import urls from "./urls";
export default { export default {
// get数据 // get数据
getPeriod(usermemberId) { getPeriod(usermemberId) {
let url = `${urls.getPeriod}`; let url = `${urls.getPeriod}`;
url=url.replace('{usermemberId}',usermemberId); url = url.replace('{usermemberId}', usermemberId);
return AjaxRequest.get(url); 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 var VUE_APP_API_BASEURL = process.env.VUE_APP_API_BASEURL
export default {
export default {
getPeriod: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period', getPeriod: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period',
getPeriodSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/summary', getPeriodSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/summary',
getHostingSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/hosting/{accountId}/summary' getHostingSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/hosting/{accountId}/summary'
......
src/store/modules/bill.js
import types from "../types"; import types from "../types";
import api from "../../api/Bill" import api from "../../api/Bill"
let month4choose = "";
let cycle = "";
let period = {}; let period = {};
let summary = {};
let hosting = {};
const state = { month4choose, cycle, period }; const state = { summary, period, hosting };
const getters = { const getters = {
getMonth4choose(state) {
return state.month4choose;
},
getCycle(state) {
return state.cycle;
},
getPeriod(state) { getPeriod(state) {
state.period = localStorage.getItem("bill_period");
return state.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 = { const mutations = {
[types.CHANGE_BILL_DATA](state, data) { [types.CHANGE_BILL_PERIOD](state, period) {
state.data = data; state.period = period;
try { try {
// localStorage.setItem("bill_data", data); // localStorage.setItem("bill_period", period);
} catch (error) { } } catch (error) { }
}, },
[types.CHANGE_BILL_MONTH](state, month4choose) { [types.CHANGE_BILL_SUMMARY](state, summary) {
state.month4choose = month4choose; state.summary = summary;
try { try {
// localStorage.setItem("bill_month", month4choose); // localStorage.setItem("bill_summary", summary);
} catch (error) { } } catch (error) { }
}, },
[types.CHANGE_BILL_CYCLE](state, cycle) { [types.CHANGE_BILL_HOSTING](state, hosting) {
state.cycle = cycle; state.hosting = hosting;
try { try {
// localStorage.setItem("bill_cycle", cycle); localStorage.setItem("bill_hosting", hosting);
} catch (error) { } } catch (error) { }
} },
}; };
const actions = { const actions = {
...@@ -47,15 +51,44 @@ const actions = { ...@@ -47,15 +51,44 @@ const actions = {
.then(res => { .then(res => {
if (res && res.status) { if (res && res.status) {
period = res.data; period = res.data;
commit(types.CHANGE_BILL_DATA, period); commit(types.CHANGE_BILL_PERIOD, period);
resolve(period); resolve(period);
} }
else { else {
reject(res.message) 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' const CHANGE_BILL_PERIOD = 'CHANGE_BILL_PERIOD';
const CHANGE_BILL_SUMMARY = 'CHANGE_BILL_SUMMARY';
export default{ const CHANGE_BILL_HOSTING = 'CHANGE_BILL_HOSTING';
CHANGE_BILL_DATA export default {
CHANGE_BILL_PERIOD,
CHANGE_BILL_SUMMARY,
CHANGE_BILL_HOSTING
} }
src/utils/filter.js
import moment from 'moment' import moment from 'moment'
import Vue from 'vue' import Vue from 'vue'
Vue.filter('periodMoment',(e)=>{ Vue.filter('periodMoment', (e) => {
return moment(e).format('MM.DD') 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 @@ ...@@ -53,7 +53,7 @@
</div> </div>
<p> <p>
<span>托收金额</span> <span>托收金额</span>
<i>{{data.hosting}}</i> <i></i>
</p> </p>
</div> </div>
...@@ -155,6 +155,7 @@ ...@@ -155,6 +155,7 @@
</template> </template>
<script> <script>
//TODO: 根据当前时间显示日期
import { Icon } from "vant"; import { Icon } from "vant";
import { TabHeader } from "@/components"; import { TabHeader } from "@/components";
import * as utils from "../../utils/common"; import * as utils from "../../utils/common";
...@@ -172,11 +173,11 @@ export default { ...@@ -172,11 +173,11 @@ export default {
usermemberId: 206484, // 这里需要问，这个值是怎么来的 usermemberId: 206484, // 这里需要问，这个值是怎么来的
currentPer: 0, currentPer: 0,
currentPerId: 0, currentPerId: 0,
period: [{ name: "" }],
data: { data: {
balance: 0, balance: 0,
toBePayAmount: 0, toBePayAmount: 0,
hosting: 0, hosting: {},
socical: { socical: {
toPayAmount: 0, toPayAmount: 0,
toBePayAmount: 0 toBePayAmount: 0
...@@ -205,7 +206,6 @@ export default { ...@@ -205,7 +206,6 @@ export default {
}; };
}, },
computed: { computed: {
...mapGetters(["getPeriod"]),
hideL() { hideL() {
if (this.currentPer == 0) { if (this.currentPer == 0) {
return true; return true;
...@@ -219,10 +219,13 @@ export default { ...@@ -219,10 +219,13 @@ export default {
} else { } else {
return false; return false;
} }
},
period() {
return [{ name: "" }];
} }
}, },
methods: { methods: {
...mapActions(["loadBillPeriod"]), ...mapActions(["loadBillPeriod", "loadBillSummary", "loadBillHosting"]),
toPage(flag) { toPage(flag) {
switch (flag) { switch (flag) {
case 1: // 充值 case 1: // 充值
...@@ -260,13 +263,42 @@ export default { ...@@ -260,13 +263,42 @@ export default {
this.currentPerId = this.period[this.currentPer].id; 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( await this.loadBillPeriod(this.usermemberId).then(
data => { data => {
this.period = 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 => { err => {
console.log(err); console.log(err);
...@@ -275,7 +307,9 @@ export default { ...@@ -275,7 +307,9 @@ export default {
} }
}, },
async mounted() { async mounted() {
await this.getperiodData(); await this.loadPeriodData();
await this.loadBillSummaryData(this.period[0].id);
await this.loadBillHostingData(this.period[0].id);
} }
}; };
</script> </script>
......
src/views/Trusteeship/index.vue
<template> <template>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<Header :title="title"/> <Header :title="title" />
</div> </div>
<div class="contener"> <div class="contener">
<div class="header"> <div class="header">
<div class="header_date_time"> <div class="header_date_time">
<div class="choose-month"> <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 /> <img src="../../assets/images/triangle-arrow-l.png" alt />
</div> </div>
<div class="month">{{month4choose}}</div> <div class="month">{{period[currentPer].name}}</div>
<div class="arrow-r" @click="chooseMonth('right')"> <div class="arrow-r" :class="hideR?'hideDiv':''" @click="chooseMonth('right')">
<img src="../../assets/images/triangle-arrow-r.png" alt /> <img src="../../assets/images/triangle-arrow-r.png" alt />
</div> </div>
</div> </div>
<div class="cycle"> <div class="cycle">
<span>入账周期：</span> <span>入账周期：</span>
<span>{{cycle}}</span> <span>{{period[currentPer].beginDate | periodMoment}}-{{period[currentPer].endDate | periodMoment}}</span>
</div> </div>
</div> </div>
<!--人事托管--> <!--人事托管-->
...@@ -116,7 +116,6 @@ ...@@ -116,7 +116,6 @@
<i>600.00</i> <i>600.00</i>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -149,7 +148,8 @@ ...@@ -149,7 +148,8 @@
<script> <script>
import { Icon, Popup } from "vant"; import { Icon, Popup } from "vant";
import {Header} from '@/components' import { Header } from "@/components";
import { mapGetters } from "vuex";
export default { export default {
components: { components: {
Header, Header,
...@@ -159,22 +159,54 @@ export default { ...@@ -159,22 +159,54 @@ export default {
data() { data() {
return { return {
show: false, show: false,
title:'人事托管', title: "人事托管",
month4choose: "2019年11月", currentPer: 0,
cycle: "11.01-11.30" 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: { 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() { openDetail() {
this.show = true; this.show = true;
}, },
chooseMonth(dirct){ chooseMonth(dirct) {
if(dirct==='left'){ if (dirct === "left") {
console.log('-----'); if (this.currentPer > 0) {
this.currentPer--;
this.currentPerId = this.period[this.currentPer].id;
}
} }
if(dirct==='right'){ if (dirct === "right") {
console.log('+++++++'); if (this.currentPer < this.period.length - 1) {
this.currentPer++;
this.currentPerId = this.period[this.currentPer].id;
}
} }
}, },
navLeftArrowClick() { navLeftArrowClick() {
...@@ -183,6 +215,7 @@ export default { ...@@ -183,6 +215,7 @@ export default {
}, },
mounted() { mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
} }
}; };
</script> </script>
...@@ -206,11 +239,15 @@ export default { ...@@ -206,11 +239,15 @@ export default {
.choose-month { .choose-month {
display: grid; display: grid;
grid-template-columns: 5% 90% 5%; grid-template-columns: 5% 90% 5%;
justify-items:center; justify-items: center;
.arrow-l,.arrow_right{ .arrow-l,
.arrow_right {
widows: 16px; widows: 16px;
height: 16px; height: 16px;
} }
.hideDiv {
visibility: hidden;
}
} }
.cycle { .cycle {
color: #8ec9fd; color: #8ec9fd;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment