Skip to content

hrs_app_h5 / bill

Go to a project
Commit d6b9155d by 展昭
Options

对接数据

parent dd8fef32
Inline Side-by-side
Showing with 380 additions and 196 deletions
src/api/Bill/index.js
......@@ -3,9 +3,8 @@ import urls from "./urls";
import token from "../../store/modules/token"
const usermemberId = token.state.usermemberId;
console.log('userid', usermemberId);
export default {
export default {
// get数据
getPeriod() {
let url = urls.getPeriod(usermemberId);
......@@ -20,7 +19,7 @@ export default {
return AjaxRequest.get(url);
},
getRecord(accountId, page, pageSize) {
let url = urls.getFlow(usermemberId, accountId, page, pageSize);
let url = urls.getFlow(accountId, usermemberId, page, pageSize);
return AjaxRequest.get(url);
},
getReceiptList(accountId) {
......
src/assets/js/SecurityService.js
......@@ -27,14 +27,14 @@ Oidc.Log.level = Oidc.Log.WARN;
mgr.events.addUserLoaded(function(user) {
console.log("addUserLoaded");
let comid = localStorage.getItem("companyId");
if (comid != "") {
let appid = localStorage.getItem("appid");
if (appid != "") {
let pms = {
client_id: oidc_config.client_id,
client_secret: oidc_config.client_secret,
grant_type: "company",
scope: "api.workapps.user api.workapps.org",
comid: comid,
grant_type: "application",
scope: "workapps.client openid api.workapps.user api.workapps.org api.workapps.open",
app_register_id: appid,
token: user.access_token
};
......
src/router/bill-router.js
......@@ -37,7 +37,7 @@ export default [
},
{
path: "/sociallist/socialpayment",
name: "socialpayment",
name: "socialdetail",
component: () => import("@/views/Bill/socialpayment.vue"),
meta: {
requiresAuth: true,
......
src/store/modules/bill.js
......@@ -170,7 +170,7 @@ const actions = {
},
loadReceiptDetail({ commit }, param) {
return new Promise((resolve, reject) => {
api.getReceiptDetail(param.accountId, param.type)
api.getReceiptDetail(param.accountId, param.type)
.then(res => {
if (res && res.status) {
receiptDetail = res.data;
......
src/store/modules/token.js
let usermemberId = '1822782'
let usermemberId = '206484'
const state = { usermemberId }
......
src/utils/filter.js
......@@ -8,5 +8,13 @@ Vue.filter('periodMoment', (e) => {
else {
return '';
}
})
})
\ No newline at end of file
Vue.filter('y-m-d', (e) => {
if (e) {
return moment(e).format('YYYY-MM-DD')
}
else {
return '';
}
})
src/views/AnnualFee/index.vue
......@@ -7,22 +7,22 @@
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
<div class="title_money">{{data.total}}</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
<div class="title_money">{{data.waitPay}}</div>
</div>
</div>
<div class="box">
<div class="list">
<div class="list" v-for="(item,index) in data.list" :key="index">
<div class="list_title">
<div class="title">2020.01-2020.12</div>
<div class="list_title_money">-500.00</div>
<div class="title">{{item.vipTerm|vipTermFilter}}</div>
<div class="list_title_money">{{item.totalAmount}}</div>
</div>
<p>
<span>扣费截止日期2019-11-20</span>
<i class="no_bill">未扣费</i>
<span>扣费截止日期{{item.dueDate|y-m-d}}</span>
<i class="no_bill">{{item.status}}</i>
</p>
</div>
</div>
......@@ -31,8 +31,10 @@
</template>
<script>
import { Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
import { mapGetters } from "vuex";
import dayjs from "dayjs";
export default {
components: {
Header,
......@@ -40,16 +42,52 @@ export default {
},
data() {
return {
title: "会员年费"
title: "会员年费",
data: {
total: 0,
waitPay: 0,
list: [
{
totalAmount: 0,
vipTerm: "",
dueDate: "",
status: 0
}
]
}
};
},
computed: {
...mapGetters(["getReceiptList"])
},
filters: {
vipTermFilter(value) {
if (!value) return "";
value = value.toString();
if (value.indexOf("至") > -1) {
let a = value.split("至")[0].trim();
let b = value.split("至")[1].trim();
if (a && a != "undefined" && b && b != "undefined") {
value = dayjs(a).format("YYYY.MM") + "-" + dayjs(b).format("YYYY.MM");
}
}
return value;
}
},
methods: {
getData() {
const temp = this.getReceiptList;
if (temp && temp != "undefined" && temp.vip && temp.vip != "undefined") {
this.data = temp.vip;
}
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
}
};
</script>
......
src/views/Bill/index.vue
......@@ -180,39 +180,27 @@ export default {
hosting: {},
socical: {
total: 0,
waitPay: 0,
paid: 0,
list: {}
waitPay: 0
},
fund: {
total: 0,
waitPay: 0,
paid: 0,
list: {}
waitPay: 0
},
tax: {
total: 0,
waitPay: 0,
paid: 0,
list: {}
waitPay: 0
},
service: {
total: 0,
waitPay: 0,
paid: 0,
list: {}
waitPay: 0
},
annual: {
total: 0,
waitPay: 0,
paid: 0,
list: {}
waitPay: 0
},
other: {
total: 0,
waitPay: 0,
paid: 0,
list: {}
waitPay: 0
}
}
};
......@@ -332,6 +320,7 @@ export default {
await this.loadBillPeriod().then(
data => {
this.period = data;
flag = true;
this.initMonth();
},
......@@ -389,7 +378,8 @@ export default {
},
initMonth() {
const localPerIndex = this.getCurPerIndex;
if (localPerIndex) {
if (localPerIndex && localPerIndex != "undefined") {
this.currentPerIndex = localPerIndex;
this.currentPerId = this.period[localPerIndex].id;
this.currentPerName = this.period[localPerIndex].name;
......
src/views/Bill/record.vue
......@@ -3,7 +3,7 @@
<div class="header">
<HeaderW :title="title" />
</div>
<div class="container-wrap">
<div class="container-wrap" id="container-wrap">
<!--公积金扣费-->
<div class="list">
<div class="title">
......@@ -14,73 +14,108 @@
<span>11-20 12:20</span>
</p>
</div>
<!--五险扣费-->
<div class="list">
<div class="title">
<div class="title_info">五险扣费</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--账单扣费-->
<div class="list">
<div class="title">
<div class="title_info">账单扣费</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--转入到人事代理账户-->
<div class="list">
<div class="title">
<div class="title_info">转入到人事代理账户</div>
<i>-160.00</i>
</div>
<p>
<span>11-20 12:20</span>
</p>
</div>
<!--企业会员费-->
<div class="list">
<div class="title">
<div class="title_info">企业会员费</div>
<i>-160.00</i>
</div>
<p>
<span>{{test}}</span>
</p>
</div>
<mescroll-vue
ref="mescroll"
:up="mescrollUp"
@init="mescrollInit"
class="scrollView"
></mescroll-vue>
</div>
</div>
</template>
<script>
import { Icon } from "vant";
import {HeaderW} from "@/components"
import { HeaderW } from "@/components";
import MescrollVue from "mescroll.js/mescroll.vue";
import { mapActions } from "vuex";
export default {
components: {
HeaderW,
[Icon.name]: Icon
[Icon.name]: Icon,
MescrollVue
},
data() {
return {
title: "11月资金记录",
data:{
test:''
}
data: {
index: 1,
size: 10,
length: 15,
list: [
{
feeType: "五险扣费",
dateTime: "2020-04-20 09:36:24",
amount: "-703.42"
},
{
feeType: "账单扣费",
dateTime: "2020-04-17 19:35:21",
amount: "-20.00"
}
]
},
mescroll: null, // mescroll实例对象
mescrollUp: {
// 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
noMoreSize: 25, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
toTop: {
//回到顶部按钮
src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
},
htmlContent:
'<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "container-wrap", //父布局的id (1.3.5版本支持传入dom元素)
icon: "../../../assets/images/data-empty.png", //图标,默认null,支持网络图
tip: "暂无内容" //提示
},
htmlLoading:
'<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
htmlNodata: '<p class="upwarp-nodata">-- END --</p>' //无数据的布局
},
articleList: [] // 列表数据
};
},
methods: {
...mapActions(["loadRecord"]),
onClickLeft() {
console.log(1);
},
navLeftArrowClick() {
this.$router.go(-1);
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
upCallback(page, mescroll) {
this.loadRecord({
accountId: "2319680",
page: page.num.toString(),
pagesize: "10"
}).then(
resdata => {
console.log('resdata=',JSON.stringify(resdata));
let data = page.num == 1 ? [] : this.articleList;
data.push(...resdata.list);
this.articleList = data;
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(resdata.list.length);
});
},
err => {
console.log(err);
}
);
}
},
mounted() {
......@@ -90,7 +125,13 @@ export default {
</script>
<style lang="less" scoped>
.mescroll {
position: fixed;
padding-bottom: 1rem;
top: 2px;
bottom: 0;
height: auto;
}
.container-wrap {
padding: 0 16px;
.list {
......
src/views/Bill/sociallist.vue
......@@ -16,7 +16,7 @@
</div>
<div class="box">
<div class="list" v-for="(item,index) in data.list" :key="index">
<div class="list_title" @click="toPage(index)">
<div class="list_title" @click="toNextPage(index)">
<div class="title">{{item.groupName}}</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -61,11 +61,18 @@ export default {
},
methods: {
...mapActions(["loadReceiptDetail"]),
toPage() {
this.$router.push({
name: "socialpayment",
param: { type: this.type, currentPerId: this.currentPerId }
});
toNextPage(index) {
if (this.type != "service") {
this.$router.push({
name: "socialdetail",
query: { index }
});
} else {
this.$router.push({
name: "servicefee_detail",
query: { index }
});
}
},
getData() {
this.loadReceiptDetail({
......
src/views/Bill/socialpayment.vue
......@@ -7,36 +7,23 @@
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
<div class="title_money">{{data.payment}}</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
<div class="title_money">{{data.waitPayment}}</div>
</div>
</div>
<div class="box mt0">
<label class="label_time">截止扣费日期 11-20</label>
<div class="list">
<div class="box mt0" v-for="(item,index) in data.list" :key="index">
<label class="label_time">截止扣费日期 {{item.dueDate|transDate}}</label>
<div class="list" v-for="(ele,index) in item.list" :key="index">
<div class="list_title">
<div class="title">武天依</div>
<div class="list_title_money">500.00</div>
<div class="title">{{ele.employeeName}}</div>
<div class="list_title_money">{{ele.dueAmount}}</div>
</div>
<p>
<span>城市</span>
<i class="no_bill">未扣费</i>
</p>
</div>
</div>
<div class="box">
<label class="label_time">截止扣费日期 11-20</label>
<div class="list">
<div class="list_title">
<div class="title">武天依</div>
<div class="list_title_money">500.00</div>
</div>
<p>
<span>城市</span>
<i class="no_bill">未扣费</i>
<span>{{ele.cityName}}</span>
<i class="no_bill">{{ele.statusDesc}}</i>
</p>
</div>
</div>
......@@ -48,6 +35,7 @@
import { Header } from "@/components";
import { Icon } from "vant";
import { mapGetters } from "vuex";
import dayjs from "dayjs";
export default {
components: {
Header,
......@@ -55,22 +43,48 @@ export default {
},
data() {
return {
title: "11月社保代理",
title: "",
data: {}
};
},
filters: {
transDate(value) {
if (!value) return "";
value = value.toString();
return dayjs(value).format("MM-DD");
},
transCity(value) {
if (!value) return "";
value = value.toString();
if (value.indexOf("--") > -1) {
value = value.replace("--", " ");
}
return value;
}
},
computed: {
...mapGetters(["getReceiptDetail"])
...mapGetters(["getReceiptDetail", "getBeginDate"])
},
methods: {
getData() {
const index = this.$route.query.index;
if (
this.getReceiptDetail &&
JSON.stringify(this.getReceiptDetail) != {} &&
this.getReceiptDetail.list &&
this.getReceiptDetail.list.length > index
) {
this.data = this.getReceiptDetail.list[index];
this.title = this.data.groupName;
}
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.data = this.getReceiptDetail;
console.log("data=", JSON.stringify(this.data));
this.getData();
}
};
</script>
......
src/views/Other/detail.vue
......@@ -5,25 +5,15 @@
</div>
<div class="container-wrap">
<!--服务费-->
<div class="list">
<div class="list" v-for="(item,index) in data.details" :key="index">
<div class="title">
<div class="title_info">服务费</div>
<i>160.00</i>
<div class="title_info">{{item.orderName}}</div>
<i>{{item.dueAmount}}</i>
</div>
<p>
<span>截止扣费日期2019-12-20</span>
<i>已扣费</i>
</p>
</div>
<!--工本费-->
<div class="list">
<div class="title">
<div class="title_info">工本费</div>
<i>460.00</i>
</div>
<p>
<span>截止扣费日期2019-12-22</span>
<i class="no_bill">未扣费</i>
<span>截止扣费日期{{item.dueDate}}</span>
<i v-if="item.status=='未扣费'" class="buleColor">{{item.status}}</i>
<i v-else>{{item.status}}</i>
</p>
</div>
</div>
......@@ -31,7 +21,7 @@
</template>
<script>
import { Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
export default {
components: {
......@@ -40,16 +30,32 @@ export default {
},
data() {
return {
title: "滤芯春的社保卡补办"
title: "",
data: {
productName: "",
details: [
{
dueAmount: 0,
dueDate: "",
orderName: "",
status: ""
}
]
}
};
},
methods: {
getData() {
this.title = this.$route.query.productName;
this.data.details = this.$route.query.details;
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
}
};
</script>
......@@ -57,6 +63,9 @@ export default {
<style lang="less" scoped>
.container-wrap {
padding: 0 16px;
.buleColor {
color: #077aec;
}
.list {
padding: 16px 0;
border-bottom: 1px solid #ececee;
......
src/views/Other/index.vue
......@@ -7,40 +7,26 @@
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
<div class="title_money">{{data.total}}</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
<div class="title_money">{{data.waitPay}}</div>
</div>
</div>
<div class="box">
<div class="list">
<div class="list_title" @click="toPage(1)">
<div class="title">吕春新的社保卡补办</div>
<div class="list" v-for="(item,index) in data.list" :key="index">
<div class="list_title" @click="toPage(index)">
<div class="title">{{item.productName}}</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
<i>{{item.totalAmount}}</i>
</p>
<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>
<p>
<span>待付金额</span>
<i>600.00</i>
<i>{{item.waitPayAmount}}</i>
</p>
</div>
</div>
......@@ -49,8 +35,10 @@
</template>
<script>
import { Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
import { mapGetters } from "vuex";
import dayjs from "dayjs";
export default {
components: {
Header,
......@@ -58,15 +46,60 @@ export default {
},
data() {
return {
title: "其他事务办理"
title: "其他事务办理",
data: {
total: 0,
waitPay: 0,
list: [
{
productName: "",
totalAmount: 0,
waitPayAmount: 0,
details: [
{
dueAmount: 0,
dueDate: "",
orderName: "",
status: ""
}
]
}
]
}
};
},
computed: {
...mapGetters(["getReceiptList", "getBeginDate"])
},
methods: {
toPage(flag) {
switch (flag) {
case 1:
this.$router.push({ name: "otherdetail" });
break;
toPage(index) {
if (this.data.list.length > index) {
let details = this.data.list[index].details;
let productName = this.data.list[index].productName;
this.$router.push({
name: "otherdetail",
query: { productName, details }
});
} else {
console.log(
"this.data.list.length > index=",
this.data.list.length > index
);
}
},
getData() {
const temp = this.getReceiptList;
if (
temp &&
temp != "undefined" &&
temp.general &&
temp.general != "undefined"
) {
this.data = temp.general;
}
const benginDate = this.getBeginDate;
if (benginDate && benginDate != "undefined") {
this.title = dayjs(benginDate).format("M") + "月" + this.title;
}
},
navLeftArrowClick() {
......@@ -75,6 +108,7 @@ export default {
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
}
};
</script>
......@@ -110,13 +144,13 @@ export default {
}
}
.box {
padding: 0 16px;
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE;
border-bottom: 1px solid #ececee;
padding: 16px 0;
&:last-child{
border-bottom: 0;
&:last-child {
border-bottom: 0;
}
.list_title {
display: flex;
......
src/views/ServiceFee/detail.vue
......@@ -7,43 +7,38 @@
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
<div class="title_money">{{data.payment}}</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
<div class="title_money">{{data.waitPayment}}</div>
</div>
</div>
<div class="box">
<div class="list">
<div class="list_title">
<div class="title">2019年11月北京服务费</div>
<div class="list_title_money">100.00</div>
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
<div class="box mt0" v-for="(item,index) in data.list" :key="index">
<div class="box-due">
<label class="label_time">截止扣费日期 {{item.dueDate|transDate}}</label>
<span class="font-blue status">{{item.statusDesc}}</span>
</div>
<div class="list">
<div class="list" v-for="(ele,index) in item.list" :key="index">
<div class="list_title">
<div class="title">2019年11月天津服务费</div>
<div class="list_title_money">100.00</div>
<div class="title">{{ele.employeeName}}</div>
<div class="list_title_money">{{ele.dueAmount}}</div>
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
<span>{{ele.cityName}}</span>
<i class>{{ele.desc}}</i>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
import dayjs from "dayjs";
export default {
components: {
Header,
......@@ -51,9 +46,42 @@ export default {
},
data() {
return {
title: "服务费详情"
title: "服务费详情",
data: {
payment: 500.0,
waitPayment: 9999.0,
list: [
{
dueDate: "2020-11-20",
statusDesc: "未扣费",
list: [
{
employeeName: "杨俊",
dueAmount: 100.0,
cityName: "北京市 北京市",
desc: "社保/公积金"
}
]
}
]
}
};
},
filters: {
transDate(value) {
if (!value) return "";
value = value.toString();
return dayjs(value).format("MM-DD");
},
transCity(value) {
if (!value) return "";
value = value.toString();
if (value.indexOf("--") > -1) {
value = value.replace("--", " ");
}
return value;
}
},
methods: {
navLeftArrowClick() {
this.$router.go(-1);
......@@ -67,6 +95,9 @@ export default {
<style lang="less" scoped>
.contener {
.font-blue {
color: #007aec;
}
.header {
height: 98px;
padding: 0 16px;
......@@ -96,14 +127,28 @@ export default {
}
}
.box {
padding: 0 16px;
padding: 0 16px;
.box-due {
width: 100%;
display: grid;
grid-template-columns: 150px 70px;
grid-template-rows: 52px;
font-size: 14px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ececee;
.status {
justify-self: right;
}
}
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE;
border-bottom: 1px solid #ececee;
padding: 16px 0;
&:last-child{
border-bottom: 0;
&:last-child {
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
......
src/views/Trusteeship/index.vue
......@@ -192,7 +192,7 @@ export default {
this.currentPerId = this.period[this.currentPer].id;
}
}
this.savePeriodIndex(this.currentPerIndex);
this.savePeriodIndex(this.currentPer);
this.loadBillHostingData(this.currentPerId);
},
async loadBillHostingData(accountId) {
......
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