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 263 additions and 125 deletions
README.md
......@@ -19,4 +19,5 @@ npm run build
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
[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 @@
},
"mescroll.js": {
"version": "1.4.2",
"resolved": "https://registry.npm.taobao.org/mescroll.js/download/mescroll.js-1.4.2.tgz",
"integrity": "sha1-/n1hnEhTsA8m3f1yWz4///0yEm0="
"resolved": "https://registry.npmjs.org/mescroll.js/-/mescroll.js-1.4.2.tgz",
"integrity": "sha512-tZDucS9DXUrIfTGXTY2L7e4mGLIQ8uMqY2GOaQAGrCHQssUADOIM0kcQlRCA6U6ffFPxXV4D+IbhzOy3zVQ1wA=="
},
"methods": {
"version": "1.1.2",
......
src/api/Bill/index.js
......@@ -5,20 +5,27 @@ export default {
// get数据
getPeriod(usermemberId) {
let url = `${urls.getPeriod}`;
url = url.replace('{usermemberId}', usermemberId);
let url = urls.getPeriod(usermemberId);
return AjaxRequest.get(url);
},
getBillSummary(accountId, usermemberId) {
let url = `${urls.getPeriodSummary}`;
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
let url = urls.getBillSummary(accountId, usermemberId);
return AjaxRequest.get(url);
},
getBillHosting(accountId, usermemberId) {
let url = `${urls.getHostingSummary}`;
url = url.replace('{usermemberId}', usermemberId);
url = url.replace('{accountId}', accountId);
let url = urls.getBillHosting(accountId, usermemberId);
return AjaxRequest.get(url);
},
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);
}
};
src/api/Bill/urls.js
var VUE_APP_API_BASEURL = process.env.VUE_APP_API_BASEURL
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'
getPeriod(usermemberId) {
let url = VUE_APP_API_BASEURL + 'bill/account/{usermemberId}/period';
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/2319680/summary
// http://10.10.10.44:8086/api/hrs/bill/account/206484/hosting/2319680/summary
\ No newline at end of file
// 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"
let period = {};
let summary = {};
let hosting = {};
let record = {};
let receiptList = {};
let receiptDetail = {};
const state = { summary, period, hosting };
const state = { summary, period, hosting, record, receiptList, receiptDetail };
const getters = {
getPeriod(state) {
state.period = localStorage.getItem("bill_period");
const temp = localStorage.getItem("bill_period");
if (temp) {
state.period = JSON.parse(temp);
}
return state.period;
},
getSummary(state) {
state.summary = localStorage.getItem("bill_summary");
//state.summary = localStorage.getItem("bill_summary");
return state.summary;
},
getHosting(state) {
state.hosting = localStorage.getItem("bill_hosting");
const temp = localStorage.getItem("bill_hosting");
if (temp) {
state.hosting = JSON.parse(temp);
}
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 = {
[types.CHANGE_BILL_PERIOD](state, period) {
state.period = period;
try {
// localStorage.setItem("bill_period", period);
localStorage.setItem("bill_period", JSON.stringify(period));
} catch (error) { }
},
[types.CHANGE_BILL_SUMMARY](state, summary) {
......@@ -38,7 +68,25 @@ const mutations = {
[types.CHANGE_BILL_HOSTING](state, hosting) {
state.hosting = hosting;
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) { }
},
......@@ -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 @@
const CHANGE_BILL_PERIOD = 'CHANGE_BILL_PERIOD';
const CHANGE_BILL_SUMMARY = 'CHANGE_BILL_SUMMARY';
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 {
CHANGE_BILL_PERIOD,
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 @@
<div class="arrow-l" :class="hideL?'hideDiv':''" @click="chooseMonth('left')">
<img src="../../assets/images/triangle-arrow-l.png" alt />
</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')">
<img src="../../assets/images/triangle-arrow-r.png" alt />
</div>
</div>
<div class="cycle">
<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 class="header_box">
......@@ -53,7 +53,7 @@
</div>
<p>
<span>托收金额</span>
<i></i>
<i>{{data.hosting.amount}}</i>
</p>
</div>
......@@ -171,9 +171,9 @@ export default {
return {
title: "人事服务",
usermemberId: 206484, // 这里需要问，这个值是怎么来的
currentPer: 0,
currentPerIndex: 0,
currentPerId: 0,
period: [{ name: "" }],
data: {
balance: 0,
toBePayAmount: 0,
......@@ -207,21 +207,18 @@ export default {
},
computed: {
hideL() {
if (this.currentPer == 0) {
if (this.currentPerIndex == 0) {
return true;
} else {
return false;
}
},
hideR() {
if (this.currentPer == this.period.length - 1) {
if (this.currentPerIndex == this.period.length - 1) {
return true;
} else {
return false;
}
},
period() {
return [{ name: "" }];
}
},
methods: {
......@@ -252,15 +249,15 @@ export default {
},
chooseMonth(dirct) {
if (dirct === "left") {
if (this.currentPer > 0) {
this.currentPer--;
this.currentPerId = this.period[this.currentPer].id;
if (this.currentPerIndex > 0) {
this.currentPerIndex--;
this.currentPerId = this.period[this.currentPerIndex].id;
}
}
if (dirct === "right") {
if (this.currentPer < this.period.length - 1) {
this.currentPer++;
this.currentPerId = this.period[this.currentPer].id;
if (this.currentPerIndex < this.period.length - 1) {
this.currentPerIndex++;
this.currentPerId = this.period[this.currentPerIndex].id;
}
}
this.loadBillSummaryData(this.currentPerId);
......@@ -270,6 +267,21 @@ export default {
await this.loadBillPeriod(this.usermemberId).then(
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 => {
console.log(err);
......@@ -308,8 +320,8 @@ export default {
},
async mounted() {
await this.loadPeriodData();
await this.loadBillSummaryData(this.period[0].id);
await this.loadBillHostingData(this.period[0].id);
await this.loadBillSummaryData(this.currentPerId);
await this.loadBillHostingData(this.currentPerId);
}
};
</script>
......
src/views/Trusteeship/index.vue
......@@ -23,28 +23,18 @@
<!--人事托管-->
<div class="header_box">
<div class="header_box_title">
<span>社保托管</span>
<i class="title_color">4000.00</i>
<span>{{hosting.social.bizName}}</span>
<i class="title_color">{{hosting.social.amount}}</i>
</div>
<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="title">北京市</div>
<van-icon name="arrow" class="arrow_right" @click="openDetail" />
<div class="title">{{item.cityName}}</div>
<van-icon name="arrow" class="arrow_right" @click="openDetail(item.detail)" />
</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>
<i>{{item.amount}}</i>
</p>
</div>
</div>
......@@ -52,68 +42,18 @@
<!--公积金托管-->
<div class="header_box">
<div class="header_box_title">
<span>公积金托管</span>
<i class="title_color">4000.00</i>
<span>{{hosting.fund.bizName}}</span>
<i class="title_color">{{hosting.fund.amount}}</i>
</div>
<div class="list_contenter">
<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="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" 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 class="title">{{item.cityName}}</div>
<van-icon name="arrow" class="arrow_right" @click="openDetail(item.detail)"/>
</div>
<p>
<span>总备款金额</span>
<i>600.00</i>
<i>{{item.amount}}</i>
</p>
</div>
</div>
......@@ -124,22 +64,22 @@
<van-popup v-model="show" round closeable position="bottom" :style="{ height: '50%' }">
<div class="popup_city">
<div class="popup_city_title">总备款金额</div>
<div class="popup_city_money">2,000.00</div>
<div class="popup_city_money">{{currentDetail.amount}}</div>
<p>
<span>参保城市</span>
<i>北京</i>
<i>{{currentDetail.cityName}}</i>
</p>
<p>
<span>参保月份</span>
<i>2019年11月</i>
<i>{{currentDetail.month}}</i>
</p>
<p>
<span>备款提醒时间</span>
<i>2019-11-25</i>
<i>{{currentDetail.dueDate}}</i>
</p>
<p>
<span>托收人数</span>
<i>10</i>
<i>{{currentDetail.count}}</i>
</p>
</div>
</van-popup>
......@@ -150,6 +90,7 @@
import { Icon, Popup } from "vant";
import { Header } from "@/components";
import { mapGetters } from "vuex";
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
components: {
Header,
......@@ -163,7 +104,45 @@ export default {
currentPer: 0,
currentPerId: 0,
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: {
......@@ -185,14 +164,17 @@ export default {
},
methods: {
getData() {
// console.log("this.getPeriod=", this.getPeriod);
if (this.getPeriod && this.getPeriod.length > 0) {
this.period = this.getPeriod;
}
if (this.getHosting && this.getHosting.length > 0) {
this.hosting = this.getHosting;
if (this.getHosting) {
this.hosting = this.getHosting;
// console.log("this.hosting=", this.hosting);
}
}
},
openDetail() {
openDetail(detail) {
this.currentDetail = detail;
this.show = true;
},
chooseMonth(dirct) {
......@@ -255,7 +237,6 @@ export default {
}
}
.header_box {
height: 206px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
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