Skip to content

hrs_app_h5 / bill

Go to a project
Commit 4c46ab49 by 展昭
Options

bill service & bill store

parent 483ebc7e
Inline Side-by-side
Showing with 260 additions and 120 deletions
README.md
...@@ -20,3 +20,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/). ...@@ -20,3 +20,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
### api swagger ### api swagger
[api swagger](http://10.10.10.44:8086/swagger-ui.html#/) [api swagger](http://10.10.10.44:8086/swagger-ui.html#/)
usermemberId 206484
\ No newline at end of file
package-lock.json
...@@ -7056,8 +7056,8 @@ ...@@ -7056,8 +7056,8 @@
}, },
"mescroll.js": { "mescroll.js": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npm.taobao.org/mescroll.js/download/mescroll.js-1.4.2.tgz", "resolved": "https://registry.npmjs.org/mescroll.js/-/mescroll.js-1.4.2.tgz",
"integrity": "sha1-/n1hnEhTsA8m3f1yWz4///0yEm0=" "integrity": "sha512-tZDucS9DXUrIfTGXTY2L7e4mGLIQ8uMqY2GOaQAGrCHQssUADOIM0kcQlRCA6U6ffFPxXV4D+IbhzOy3zVQ1wA=="
}, },
"methods": { "methods": {
"version": "1.1.2", "version": "1.1.2",
......
src/api/Bill/index.js
...@@ -5,20 +5,27 @@ export default { ...@@ -5,20 +5,27 @@ export default {
// get数据 // get数据
getPeriod(usermemberId) { getPeriod(usermemberId) {
let url = `${urls.getPeriod}`; let url = urls.getPeriod(usermemberId);
url = url.replace('{usermemberId}', usermemberId);
return AjaxRequest.get(url); return AjaxRequest.get(url);
}, },
getBillSummary(accountId, usermemberId) { getBillSummary(accountId, usermemberId) {
let url = `${urls.getPeriodSummary}`; let url = urls.getBillSummary(accountId, usermemberId);
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
return AjaxRequest.get(url); return AjaxRequest.get(url);
}, },
getBillHosting(accountId, usermemberId) { getBillHosting(accountId, usermemberId) {
let url = `${urls.getHostingSummary}`; let url = urls.getBillHosting(accountId, usermemberId);
url = url.replace('{usermemberId}', usermemberId); return AjaxRequest.get(url);
url = url.replace('{accountId}', accountId); },
getRecord(accountId, usermemberId, page, pageSize) {
let url = urls.getFlow(usermemberId, accountId, page, pageSize);
return AjaxRequest.get(url);
},
getReceiptList(accountId, usermemberId){
let url = urls.getReceiptList(accountId, usermemberId);
return AjaxRequest.get(url);
},
getReceiptDetail(accountId, usermemberId,type){
let url = urls.getReceiptDetail(accountId, usermemberId,type);
return AjaxRequest.get(url); 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(usermemberId) {
getPeriodSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/summary', let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period';
getHostingSummary: VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/hosting/{accountId}/summary' url = url.replace('{usermemberId}', usermemberId);
return url;
},
getBillSummary(accountId, usermemberId) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/summary';
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
return url;
},
getBillHosting(accountId, usermemberId) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/hosting/{accountId}/summary'
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
return url;
},
getFlow(accountId, usermemberId, page, pageSize) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/flow?page={page}&pageSize={pageSize}';
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
url = url.replace('{page}', page);
url = url.replace('{pageSize}', pageSize);
return url;
},
getReceiptList(accountId, usermemberId) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/receipt/list'
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
return url;
},
getReceiptDetail(accountId, usermemberId, type) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period/{accountId}/receipt/{type}/detail'
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
url = url.replace('{type}', type);
return url;
}
}; };
// http://10.10.10.44:8086/api/hrs/bill/account/206484/period // 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/period/2319680/summary
// http://10.10.10.44:8086/api/hrs/bill/account/206484/hosting/2319680/summary // http://10.10.10.44:8086/api/hrs/bill/account/206484/hosting/2319680/summary
// http://10.10.10.44:8086/api/hrs/bill/account/206484/period/2319680/flow?page=1&pageSize=10
// http://10.10.10.44:8086/api/hrs/bill/account/206484/period/2319680/receipt/list
// http://10.10.10.44:8086/api/hrs/bill/account/{usermemberId}/period/{accountId}/receipt/{type}/detail
\ No newline at end of file
src/store/modules/bill.js
...@@ -4,21 +4,51 @@ import api from "../../api/Bill" ...@@ -4,21 +4,51 @@ import api from "../../api/Bill"
let period = {}; let period = {};
let summary = {}; let summary = {};
let hosting = {}; let hosting = {};
let record = {};
let receiptList = {};
let receiptDetail = {};
const state = { summary, period, hosting }; const state = { summary, period, hosting, record, receiptList, receiptDetail };
const getters = { const getters = {
getPeriod(state) { getPeriod(state) {
state.period = localStorage.getItem("bill_period"); const temp = localStorage.getItem("bill_period");
if (temp) {
state.period = JSON.parse(temp);
}
return state.period; return state.period;
}, },
getSummary(state) { getSummary(state) {
state.summary = localStorage.getItem("bill_summary"); //state.summary = localStorage.getItem("bill_summary");
return state.summary; return state.summary;
}, },
getHosting(state) { getHosting(state) {
state.hosting = localStorage.getItem("bill_hosting"); const temp = localStorage.getItem("bill_hosting");
if (temp) {
state.hosting = JSON.parse(temp);
}
return state.hosting; return state.hosting;
},
getRecord(state) {
const temp = localStorage.getItem('record');
if (temp) {
state.record = JSON.parse(temp);
}
return state.record;
},
getReceiptList(state) {
const temp = localStorage.getItem('receiptDetail');
if (temp) {
state.receiptDetail = JSON.parse(temp);
}
return state.receiptDetail;
},
getReceiptList(state) {
const temp = localStorage.getItem('receiptList');
if (temp) {
state.receiptList = JSON.parse(temp);
}
return state.receiptList;
} }
}; };
...@@ -26,7 +56,7 @@ const mutations = { ...@@ -26,7 +56,7 @@ const mutations = {
[types.CHANGE_BILL_PERIOD](state, period) { [types.CHANGE_BILL_PERIOD](state, period) {
state.period = period; state.period = period;
try { try {
// localStorage.setItem("bill_period", period); localStorage.setItem("bill_period", JSON.stringify(period));
} catch (error) { } } catch (error) { }
}, },
[types.CHANGE_BILL_SUMMARY](state, summary) { [types.CHANGE_BILL_SUMMARY](state, summary) {
...@@ -38,7 +68,25 @@ const mutations = { ...@@ -38,7 +68,25 @@ const mutations = {
[types.CHANGE_BILL_HOSTING](state, hosting) { [types.CHANGE_BILL_HOSTING](state, hosting) {
state.hosting = hosting; state.hosting = hosting;
try { try {
localStorage.setItem("bill_hosting", hosting); localStorage.setItem("bill_hosting", JSON.stringify(hosting));
} catch (error) { }
},
[types.CHANGE_RECORD](state, record) {
state.record = record;
try {
//localStorage.setItem("record", JSON.stringify(record));
} catch (error) { }
},
[types.CHANGE_RECEIPT_LIST](state, receiptList) {
state.receiptList = receiptList;
try {
//localStorage.setItem("receiptList", JSON.stringify(receiptList));
} catch (error) { }
},
[types.CHANGE_RECEIPT_DETAIL](state, receiptDetail) {
state.receiptDetail = receiptDetail;
try {
//localStorage.setItem("receiptDetail", JSON.stringify(receiptDetail));
} catch (error) { } } catch (error) { }
}, },
...@@ -89,6 +137,51 @@ const actions = { ...@@ -89,6 +137,51 @@ const actions = {
} }
}); });
}); });
},
loadRecord({ commit }, param) {
return new Promise((resolve, reject) => {
api.getRecord(param.accountId, param.usermemberId, param.page, param.pagesize)
.then(res => {
if (res && res.status) {
record = res.data;
commit(types.CHANGE_RECORD, record);
resolve(record);
}
else {
reject(res.message)
}
});
});
},
loadReceiptList({ commit }, param) {
return new Promise((resolve, reject) => {
api.getReceiptList(param.accountId, param.usermemberId)
.then(res => {
if (res && res.status) {
receiptList = res.data;
commit(types.CHANGE_RECEIPT_LIST, receiptList);
resolve(receiptList);
}
else {
reject(res.message)
}
});
});
},
loadReceiptDetail({ commit }, param) {
return new Promise((resolve, reject) => {
api.getReceiptDetail(param.accountId, param.usermemberId, param.type)
.then(res => {
if (res && res.status) {
receiptDetail = res.data;
commit(types.CHANGE_RECEIPT_DETAIL, receiptDetail);
resolve(receiptDetail);
}
else {
reject(res.message)
}
});
});
} }
}; };
......
src/store/types.js
...@@ -2,9 +2,15 @@ ...@@ -2,9 +2,15 @@
const CHANGE_BILL_PERIOD = 'CHANGE_BILL_PERIOD'; const CHANGE_BILL_PERIOD = 'CHANGE_BILL_PERIOD';
const CHANGE_BILL_SUMMARY = 'CHANGE_BILL_SUMMARY'; const CHANGE_BILL_SUMMARY = 'CHANGE_BILL_SUMMARY';
const CHANGE_BILL_HOSTING = 'CHANGE_BILL_HOSTING'; const CHANGE_BILL_HOSTING = 'CHANGE_BILL_HOSTING';
const CHANGE_RECORD = 'CHANGE_RECORD';
const CHANGE_RECEIPT_LIST = 'CHANGE_RECEIPT_LIST';
const CHANGE_RECEIPT_DETAIL = 'CHANGE_RECEIPT_DETAIL';
export default { export default {
CHANGE_BILL_PERIOD, CHANGE_BILL_PERIOD,
CHANGE_BILL_SUMMARY, CHANGE_BILL_SUMMARY,
CHANGE_BILL_HOSTING CHANGE_BILL_HOSTING,
CHANGE_RECORD,
CHANGE_RECEIPT_LIST,
CHANGE_RECEIPT_DETAIL
} }
src/views/Bill/index.vue
...@@ -10,14 +10,14 @@ ...@@ -10,14 +10,14 @@
<div class="arrow-l" :class="hideL?'hideDiv':''" @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">{{period[currentPer].name}}</div> <div class="month">{{period[currentPerIndex].name}}</div>
<div class="arrow-r" :class="hideR?'hideDiv':''" @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>{{period[currentPer].beginDate | periodMoment}}-{{period[currentPer].endDate | periodMoment}}</span> <span>{{period[currentPerIndex].beginDate | periodMoment}}-{{period[currentPerIndex].endDate | periodMoment}}</span>
</div> </div>
</div> </div>
<div class="header_box"> <div class="header_box">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</div> </div>
<p> <p>
<span>托收金额</span> <span>托收金额</span>
<i></i> <i>{{data.hosting.amount}}</i>
</p> </p>
</div> </div>
...@@ -171,9 +171,9 @@ export default { ...@@ -171,9 +171,9 @@ export default {
return { return {
title: "人事服务", title: "人事服务",
usermemberId: 206484, // 这里需要问，这个值是怎么来的 usermemberId: 206484, // 这里需要问，这个值是怎么来的
currentPer: 0, currentPerIndex: 0,
currentPerId: 0, currentPerId: 0,
period: [{ name: "" }],
data: { data: {
balance: 0, balance: 0,
toBePayAmount: 0, toBePayAmount: 0,
...@@ -207,21 +207,18 @@ export default { ...@@ -207,21 +207,18 @@ export default {
}, },
computed: { computed: {
hideL() { hideL() {
if (this.currentPer == 0) { if (this.currentPerIndex == 0) {
return true; return true;
} else { } else {
return false; return false;
} }
}, },
hideR() { hideR() {
if (this.currentPer == this.period.length - 1) { if (this.currentPerIndex == this.period.length - 1) {
return true; return true;
} else { } else {
return false; return false;
} }
},
period() {
return [{ name: "" }];
} }
}, },
methods: { methods: {
...@@ -252,15 +249,15 @@ export default { ...@@ -252,15 +249,15 @@ export default {
}, },
chooseMonth(dirct) { chooseMonth(dirct) {
if (dirct === "left") { if (dirct === "left") {
if (this.currentPer > 0) { if (this.currentPerIndex > 0) {
this.currentPer--; this.currentPerIndex--;
this.currentPerId = this.period[this.currentPer].id; this.currentPerId = this.period[this.currentPerIndex].id;
} }
} }
if (dirct === "right") { if (dirct === "right") {
if (this.currentPer < this.period.length - 1) { if (this.currentPerIndex < this.period.length - 1) {
this.currentPer++; this.currentPerIndex++;
this.currentPerId = this.period[this.currentPer].id; this.currentPerId = this.period[this.currentPerIndex].id;
} }
} }
this.loadBillSummaryData(this.currentPerId); this.loadBillSummaryData(this.currentPerId);
...@@ -270,6 +267,21 @@ export default { ...@@ -270,6 +267,21 @@ export default {
await this.loadBillPeriod(this.usermemberId).then( await this.loadBillPeriod(this.usermemberId).then(
data => { data => {
this.period = data; this.period = data;
const nowDate=dayjs().format('YYYY年MM月账户');
for (let index = 0; index < this.period.length; index++) {
const element = this.period[index];
console.log(element.name);
console.log(nowDate);
console.log("element.name.indexOf('2020年04月账户') > -1=",element.name.indexOf('2020年04月账户') > -1);
if (element.name.indexOf('2020年04月账户') > -1) {
this.currentPerIndex = index;
this.currentPerId = element.id;
break;
}
}
}, },
err => { err => {
console.log(err); console.log(err);
...@@ -308,8 +320,8 @@ export default { ...@@ -308,8 +320,8 @@ export default {
}, },
async mounted() { async mounted() {
await this.loadPeriodData(); await this.loadPeriodData();
await this.loadBillSummaryData(this.period[0].id); await this.loadBillSummaryData(this.currentPerId);
await this.loadBillHostingData(this.period[0].id); await this.loadBillHostingData(this.currentPerId);
} }
}; };
</script> </script>
......
src/views/Trusteeship/index.vue
...@@ -23,28 +23,18 @@ ...@@ -23,28 +23,18 @@
<!--人事托管--> <!--人事托管-->
<div class="header_box"> <div class="header_box">
<div class="header_box_title"> <div class="header_box_title">
<span>社保托管</span> <span>{{hosting.social.bizName}}</span>
<i class="title_color">4000.00</i> <i class="title_color">{{hosting.social.amount}}</i>
</div> </div>
<div class="list_contenter"> <div class="list_contenter">
<div class="list"> <div class="list" v-for="(item,index) in hosting.social.list" :key="index">
<div class="list_title"> <div class="list_title">
<div class="title">北京市</div> <div class="title">{{item.cityName}}</div>
<van-icon name="arrow" class="arrow_right" @click="openDetail" /> <van-icon name="arrow" class="arrow_right" @click="openDetail(item.detail)" />
</div> </div>
<p> <p>
<span>总备款金额</span> <span>总备款金额</span>
<i>600.00</i> <i>{{item.amount}}</i>
</p>
</div>
<div class="list">
<div class="list_title">
<div class="title">天津市</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
</p> </p>
</div> </div>
</div> </div>
...@@ -52,68 +42,18 @@ ...@@ -52,68 +42,18 @@
<!--公积金托管--> <!--公积金托管-->
<div class="header_box"> <div class="header_box">
<div class="header_box_title"> <div class="header_box_title">
<span>公积金托管</span> <span>{{hosting.fund.bizName}}</span>
<i class="title_color">4000.00</i> <i class="title_color">{{hosting.fund.amount}}</i>
</div> </div>
<div class="list_contenter"> <div class="list_contenter">
<div class="list"> <div class="list" v-for="(item,index) in hosting.fund.list" :key="index">
<div class="list_title">
<div class="title">北京市</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
</p>
</div>
<div class="list">
<div class="list_title">
<div class="title">天津市</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
</p>
</div>
<div class="list">
<div class="list_title">
<div class="title">天津市</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
</p>
</div>
<div class="list">
<div class="list_title">
<div class="title">天津市</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
</p>
</div>
<div class="list">
<div class="list_title"> <div class="list_title">
<div class="title">天津市</div> <div class="title">{{item.cityName}}</div>
<van-icon name="arrow" class="arrow_right" /> <van-icon name="arrow" class="arrow_right" @click="openDetail(item.detail)"/>
</div> </div>
<p> <p>
<span>总备款金额</span> <span>总备款金额</span>
<i>600.00</i> <i>{{item.amount}}</i>
</p>
</div>
<div class="list">
<div class="list_title">
<div class="title">天津市</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
</p> </p>
</div> </div>
</div> </div>
...@@ -124,22 +64,22 @@ ...@@ -124,22 +64,22 @@
<van-popup v-model="show" round closeable position="bottom" :style="{ height: '50%' }"> <van-popup v-model="show" round closeable position="bottom" :style="{ height: '50%' }">
<div class="popup_city"> <div class="popup_city">
<div class="popup_city_title">总备款金额</div> <div class="popup_city_title">总备款金额</div>
<div class="popup_city_money">2,000.00</div> <div class="popup_city_money">{{currentDetail.amount}}</div>
<p> <p>
<span>参保城市</span> <span>参保城市</span>
<i>北京</i> <i>{{currentDetail.cityName}}</i>
</p> </p>
<p> <p>
<span>参保月份</span> <span>参保月份</span>
<i>2019年11月</i> <i>{{currentDetail.month}}</i>
</p> </p>
<p> <p>
<span>备款提醒时间</span> <span>备款提醒时间</span>
<i>2019-11-25</i> <i>{{currentDetail.dueDate}}</i>
</p> </p>
<p> <p>
<span>托收人数</span> <span>托收人数</span>
<i>10</i> <i>{{currentDetail.count}}</i>
</p> </p>
</div> </div>
</van-popup> </van-popup>
...@@ -150,6 +90,7 @@ ...@@ -150,6 +90,7 @@
import { Icon, Popup } from "vant"; import { Icon, Popup } from "vant";
import { Header } from "@/components"; import { Header } from "@/components";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import MescrollVue from "mescroll.js/mescroll.vue";
export default { export default {
components: { components: {
Header, Header,
...@@ -163,7 +104,45 @@ export default { ...@@ -163,7 +104,45 @@ export default {
currentPer: 0, currentPer: 0,
currentPerId: 0, currentPerId: 0,
period: [{ name: "" }], period: [{ name: "" }],
hosting: {} hosting: {
social: {
bizName: "",
amount: 0,
list: {
cityName: "",
amount: 0,
detail: {
amount: "0",
cityName: "",
month: "",
dueDate: "",
count: "0"
}
}
},
fund: {
bizName: "",
amount: 0,
list: {
cityName: "",
amount: 0,
detail: {
amount: "0",
cityName: "",
month: "",
dueDate: "",
count: "0"
}
}
}
},
currentDetail: {
amount: "0",
cityName: "",
month: "",
dueDate: "",
count: "0"
}
}; };
}, },
computed: { computed: {
...@@ -185,14 +164,17 @@ export default { ...@@ -185,14 +164,17 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
// console.log("this.getPeriod=", this.getPeriod);
if (this.getPeriod && this.getPeriod.length > 0) { if (this.getPeriod && this.getPeriod.length > 0) {
this.period = this.getPeriod; this.period = this.getPeriod;
} if (this.getHosting) {
if (this.getHosting && this.getHosting.length > 0) {
this.hosting = this.getHosting; this.hosting = this.getHosting;
// console.log("this.hosting=", this.hosting);
}
} }
}, },
openDetail() { openDetail(detail) {
this.currentDetail = detail;
this.show = true; this.show = true;
}, },
chooseMonth(dirct) { chooseMonth(dirct) {
...@@ -255,7 +237,6 @@ export default { ...@@ -255,7 +237,6 @@ export default {
} }
} }
.header_box { .header_box {
height: 206px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
......
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