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"; ...@@ -3,9 +3,8 @@ import urls from "./urls";
import token from "../../store/modules/token" import token from "../../store/modules/token"
const usermemberId = token.state.usermemberId; const usermemberId = token.state.usermemberId;
console.log('userid', usermemberId);
export default { export default {
// get数据 // get数据
getPeriod() { getPeriod() {
let url = urls.getPeriod(usermemberId); let url = urls.getPeriod(usermemberId);
...@@ -20,7 +19,7 @@ export default { ...@@ -20,7 +19,7 @@ export default {
return AjaxRequest.get(url); return AjaxRequest.get(url);
}, },
getRecord(accountId, page, pageSize) { getRecord(accountId, page, pageSize) {
let url = urls.getFlow(usermemberId, accountId, page, pageSize); let url = urls.getFlow(accountId, usermemberId, page, pageSize);
return AjaxRequest.get(url); return AjaxRequest.get(url);
}, },
getReceiptList(accountId) { getReceiptList(accountId) {
......
src/assets/js/SecurityService.js
...@@ -27,14 +27,14 @@ Oidc.Log.level = Oidc.Log.WARN; ...@@ -27,14 +27,14 @@ Oidc.Log.level = Oidc.Log.WARN;
mgr.events.addUserLoaded(function(user) { mgr.events.addUserLoaded(function(user) {
console.log("addUserLoaded"); console.log("addUserLoaded");
let comid = localStorage.getItem("companyId"); let appid = localStorage.getItem("appid");
if (comid != "") { if (appid != "") {
let pms = { let pms = {
client_id: oidc_config.client_id, client_id: oidc_config.client_id,
client_secret: oidc_config.client_secret, client_secret: oidc_config.client_secret,
grant_type: "company", grant_type: "application",
scope: "api.workapps.user api.workapps.org", scope: "workapps.client openid api.workapps.user api.workapps.org api.workapps.open",
comid: comid, app_register_id: appid,
token: user.access_token token: user.access_token
}; };
......
src/router/bill-router.js
...@@ -37,7 +37,7 @@ export default [ ...@@ -37,7 +37,7 @@ export default [
}, },
{ {
path: "/sociallist/socialpayment", path: "/sociallist/socialpayment",
name: "socialpayment", name: "socialdetail",
component: () => import("@/views/Bill/socialpayment.vue"), component: () => import("@/views/Bill/socialpayment.vue"),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
......
src/store/modules/bill.js
...@@ -170,7 +170,7 @@ const actions = { ...@@ -170,7 +170,7 @@ const actions = {
}, },
loadReceiptDetail({ commit }, param) { loadReceiptDetail({ commit }, param) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
api.getReceiptDetail(param.accountId, param.type) api.getReceiptDetail(param.accountId, param.type)
.then(res => { .then(res => {
if (res && res.status) { if (res && res.status) {
receiptDetail = res.data; receiptDetail = res.data;
......
src/store/modules/token.js
let usermemberId = '1822782' let usermemberId = '206484'
const state = { usermemberId } const state = { usermemberId }
......
src/utils/filter.js
...@@ -8,5 +8,13 @@ Vue.filter('periodMoment', (e) => { ...@@ -8,5 +8,13 @@ Vue.filter('periodMoment', (e) => {
else { else {
return ''; return '';
} }
})
}) Vue.filter('y-m-d', (e) => {
\ No newline at end of file if (e) {
return moment(e).format('YYYY-MM-DD')
}
else {
return '';
}
})
src/views/AnnualFee/index.vue
...@@ -7,22 +7,22 @@ ...@@ -7,22 +7,22 @@
<div class="header"> <div class="header">
<div class="content_left"> <div class="content_left">
<div class="title_info">应付总额</div> <div class="title_info">应付总额</div>
<div class="title_money">440.00</div> <div class="title_money">{{data.total}}</div>
</div> </div>
<div class="content_right"> <div class="content_right">
<div class="title_info">待付金额</div> <div class="title_info">待付金额</div>
<div class="title_money">200.00</div> <div class="title_money">{{data.waitPay}}</div>
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="list"> <div class="list" v-for="(item,index) in data.list" :key="index">
<div class="list_title"> <div class="list_title">
<div class="title">2020.01-2020.12</div> <div class="title">{{item.vipTerm|vipTermFilter}}</div>
<div class="list_title_money">-500.00</div> <div class="list_title_money">{{item.totalAmount}}</div>
</div> </div>
<p> <p>
<span>扣费截止日期2019-11-20</span> <span>扣费截止日期{{item.dueDate|y-m-d}}</span>
<i class="no_bill">未扣费</i> <i class="no_bill">{{item.status}}</i>
</p> </p>
</div> </div>
</div> </div>
...@@ -31,8 +31,10 @@ ...@@ -31,8 +31,10 @@
</template> </template>
<script> <script>
import { Icon } from "vant"; import { Icon } from "vant";
import { Header } from "@/components"; import { Header } from "@/components";
import { mapGetters } from "vuex";
import dayjs from "dayjs";
export default { export default {
components: { components: {
Header, Header,
...@@ -40,16 +42,52 @@ export default { ...@@ -40,16 +42,52 @@ export default {
}, },
data() { data() {
return { 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: { methods: {
getData() {
const temp = this.getReceiptList;
if (temp && temp != "undefined" && temp.vip && temp.vip != "undefined") {
this.data = temp.vip;
}
},
navLeftArrowClick() { navLeftArrowClick() {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
mounted() { mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
} }
}; };
</script> </script>
......
src/views/Bill/index.vue
...@@ -180,39 +180,27 @@ export default { ...@@ -180,39 +180,27 @@ export default {
hosting: {}, hosting: {},
socical: { socical: {
total: 0, total: 0,
waitPay: 0, waitPay: 0
paid: 0,
list: {}
}, },
fund: { fund: {
total: 0, total: 0,
waitPay: 0, waitPay: 0
paid: 0,
list: {}
}, },
tax: { tax: {
total: 0, total: 0,
waitPay: 0, waitPay: 0
paid: 0,
list: {}
}, },
service: { service: {
total: 0, total: 0,
waitPay: 0, waitPay: 0
paid: 0,
list: {}
}, },
annual: { annual: {
total: 0, total: 0,
waitPay: 0, waitPay: 0
paid: 0,
list: {}
}, },
other: { other: {
total: 0, total: 0,
waitPay: 0, waitPay: 0
paid: 0,
list: {}
} }
} }
}; };
...@@ -332,6 +320,7 @@ export default { ...@@ -332,6 +320,7 @@ export default {
await this.loadBillPeriod().then( await this.loadBillPeriod().then(
data => { data => {
this.period = data; this.period = data;
flag = true; flag = true;
this.initMonth(); this.initMonth();
}, },
...@@ -389,7 +378,8 @@ export default { ...@@ -389,7 +378,8 @@ export default {
}, },
initMonth() { initMonth() {
const localPerIndex = this.getCurPerIndex; const localPerIndex = this.getCurPerIndex;
if (localPerIndex) {
if (localPerIndex && localPerIndex != "undefined") {
this.currentPerIndex = localPerIndex; this.currentPerIndex = localPerIndex;
this.currentPerId = this.period[localPerIndex].id; this.currentPerId = this.period[localPerIndex].id;
this.currentPerName = this.period[localPerIndex].name; this.currentPerName = this.period[localPerIndex].name;
......
src/views/Bill/record.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="header"> <div class="header">
<HeaderW :title="title" /> <HeaderW :title="title" />
</div> </div>
<div class="container-wrap"> <div class="container-wrap" id="container-wrap">
<!--公积金扣费--> <!--公积金扣费-->
<div class="list"> <div class="list">
<div class="title"> <div class="title">
...@@ -14,73 +14,108 @@ ...@@ -14,73 +14,108 @@
<span>11-20 12:20</span> <span>11-20 12:20</span>
</p> </p>
</div> </div>
<!--五险扣费--> <mescroll-vue
<div class="list"> ref="mescroll"
<div class="title"> :up="mescrollUp"
<div class="title_info">五险扣费</div> @init="mescrollInit"
<i>-160.00</i> class="scrollView"
</div> ></mescroll-vue>
<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>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Icon } from "vant"; 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 { export default {
components: { components: {
HeaderW, HeaderW,
[Icon.name]: Icon [Icon.name]: Icon,
MescrollVue
}, },
data() { data() {
return { return {
title: "11月资金记录", title: "11月资金记录",
data:{ data: {
test:'' 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: { methods: {
...mapActions(["loadRecord"]),
onClickLeft() { onClickLeft() {
console.log(1); console.log(1);
}, },
navLeftArrowClick() { navLeftArrowClick() {
this.$router.go(-1); 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() { mounted() {
...@@ -90,7 +125,13 @@ export default { ...@@ -90,7 +125,13 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mescroll {
position: fixed;
padding-bottom: 1rem;
top: 2px;
bottom: 0;
height: auto;
}
.container-wrap { .container-wrap {
padding: 0 16px; padding: 0 16px;
.list { .list {
......
src/views/Bill/sociallist.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
<div class="box"> <div class="box">
<div class="list" v-for="(item,index) in data.list" :key="index"> <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> <div class="title">{{item.groupName}}</div>
<van-icon name="arrow" class="arrow_right" /> <van-icon name="arrow" class="arrow_right" />
</div> </div>
...@@ -61,11 +61,18 @@ export default { ...@@ -61,11 +61,18 @@ export default {
}, },
methods: { methods: {
...mapActions(["loadReceiptDetail"]), ...mapActions(["loadReceiptDetail"]),
toPage() { toNextPage(index) {
this.$router.push({ if (this.type != "service") {
name: "socialpayment", this.$router.push({
param: { type: this.type, currentPerId: this.currentPerId } name: "socialdetail",
}); query: { index }
});
} else {
this.$router.push({
name: "servicefee_detail",
query: { index }
});
}
}, },
getData() { getData() {
this.loadReceiptDetail({ this.loadReceiptDetail({
......
src/views/Bill/socialpayment.vue
...@@ -7,36 +7,23 @@ ...@@ -7,36 +7,23 @@
<div class="header"> <div class="header">
<div class="content_left"> <div class="content_left">
<div class="title_info">应付总额</div> <div class="title_info">应付总额</div>
<div class="title_money">440.00</div> <div class="title_money">{{data.payment}}</div>
</div> </div>
<div class="content_right"> <div class="content_right">
<div class="title_info">待付金额</div> <div class="title_info">待付金额</div>
<div class="title_money">200.00</div> <div class="title_money">{{data.waitPayment}}</div>
</div> </div>
</div> </div>
<div class="box mt0"> <div class="box mt0" v-for="(item,index) in data.list" :key="index">
<label class="label_time">截止扣费日期 11-20</label> <label class="label_time">截止扣费日期 {{item.dueDate|transDate}}</label>
<div class="list"> <div class="list" v-for="(ele,index) in item.list" :key="index">
<div class="list_title"> <div class="list_title">
<div class="title">武天依</div> <div class="title">{{ele.employeeName}}</div>
<div class="list_title_money">500.00</div> <div class="list_title_money">{{ele.dueAmount}}</div>
</div> </div>
<p> <p>
<span>城市</span> <span>{{ele.cityName}}</span>
<i class="no_bill">未扣费</i> <i class="no_bill">{{ele.statusDesc}}</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>
</p> </p>
</div> </div>
</div> </div>
...@@ -48,6 +35,7 @@ ...@@ -48,6 +35,7 @@
import { Header } from "@/components"; import { Header } from "@/components";
import { Icon } from "vant"; import { Icon } from "vant";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import dayjs from "dayjs";
export default { export default {
components: { components: {
Header, Header,
...@@ -55,22 +43,48 @@ export default { ...@@ -55,22 +43,48 @@ export default {
}, },
data() { data() {
return { return {
title: "11月社保代理", title: "",
data: {} 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: { computed: {
...mapGetters(["getReceiptDetail"]) ...mapGetters(["getReceiptDetail", "getBeginDate"])
}, },
methods: { 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() { navLeftArrowClick() {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
mounted() { mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.data = this.getReceiptDetail; this.getData();
console.log("data=", JSON.stringify(this.data));
} }
}; };
</script> </script>
......
src/views/Other/detail.vue
...@@ -5,25 +5,15 @@ ...@@ -5,25 +5,15 @@
</div> </div>
<div class="container-wrap"> <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">
<div class="title_info">服务费</div> <div class="title_info">{{item.orderName}}</div>
<i>160.00</i> <i>{{item.dueAmount}}</i>
</div> </div>
<p> <p>
<span>截止扣费日期2019-12-20</span> <span>截止扣费日期{{item.dueDate}}</span>
<i>已扣费</i> <i v-if="item.status=='未扣费'" class="buleColor">{{item.status}}</i>
</p> <i v-else>{{item.status}}</i>
</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>
</p> </p>
</div> </div>
</div> </div>
...@@ -31,7 +21,7 @@ ...@@ -31,7 +21,7 @@
</template> </template>
<script> <script>
import { Icon } from "vant"; import { Icon } from "vant";
import { Header } from "@/components"; import { Header } from "@/components";
export default { export default {
components: { components: {
...@@ -40,16 +30,32 @@ export default { ...@@ -40,16 +30,32 @@ export default {
}, },
data() { data() {
return { return {
title: "滤芯春的社保卡补办" title: "",
data: {
productName: "",
details: [
{
dueAmount: 0,
dueDate: "",
orderName: "",
status: ""
}
]
}
}; };
}, },
methods: { methods: {
getData() {
this.title = this.$route.query.productName;
this.data.details = this.$route.query.details;
},
navLeftArrowClick() { navLeftArrowClick() {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
mounted() { mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
} }
}; };
</script> </script>
...@@ -57,6 +63,9 @@ export default { ...@@ -57,6 +63,9 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.container-wrap { .container-wrap {
padding: 0 16px; padding: 0 16px;
.buleColor {
color: #077aec;
}
.list { .list {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #ececee; border-bottom: 1px solid #ececee;
......
src/views/Other/index.vue
...@@ -7,40 +7,26 @@ ...@@ -7,40 +7,26 @@
<div class="header"> <div class="header">
<div class="content_left"> <div class="content_left">
<div class="title_info">应付总额</div> <div class="title_info">应付总额</div>
<div class="title_money">440.00</div> <div class="title_money">{{data.total}}</div>
</div> </div>
<div class="content_right"> <div class="content_right">
<div class="title_info">待付金额</div> <div class="title_info">待付金额</div>
<div class="title_money">200.00</div> <div class="title_money">{{data.waitPay}}</div>
</div> </div>
</div> </div>
<div class="box"> <div class="box">
<div class="list"> <div class="list" v-for="(item,index) in data.list" :key="index">
<div class="list_title" @click="toPage(1)"> <div class="list_title" @click="toPage(index)">
<div class="title">吕春新的社保卡补办</div> <div class="title">{{item.productName}}</div>
<van-icon name="arrow" class="arrow_right" /> <van-icon name="arrow" class="arrow_right" />
</div> </div>
<p> <p>
<span>应付金额</span> <span>应付金额</span>
<i>600.00</i> <i>{{item.totalAmount}}</i>
</p> </p>
<p> <p>
<span>待付金额</span> <span>待付金额</span>
<i>600.00</i> <i>{{item.waitPayAmount}}</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>
</p> </p>
</div> </div>
</div> </div>
...@@ -49,8 +35,10 @@ ...@@ -49,8 +35,10 @@
</template> </template>
<script> <script>
import { Icon } from "vant"; import { Icon } from "vant";
import { Header } from "@/components"; import { Header } from "@/components";
import { mapGetters } from "vuex";
import dayjs from "dayjs";
export default { export default {
components: { components: {
Header, Header,
...@@ -58,15 +46,60 @@ export default { ...@@ -58,15 +46,60 @@ export default {
}, },
data() { data() {
return { 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: { methods: {
toPage(flag) { toPage(index) {
switch (flag) { if (this.data.list.length > index) {
case 1: let details = this.data.list[index].details;
this.$router.push({ name: "otherdetail" }); let productName = this.data.list[index].productName;
break; 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() { navLeftArrowClick() {
...@@ -75,6 +108,7 @@ export default { ...@@ -75,6 +108,7 @@ export default {
}, },
mounted() { mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick); this.globalNavLeftArrowClick(this.navLeftArrowClick);
this.getData();
} }
}; };
</script> </script>
...@@ -110,13 +144,13 @@ export default { ...@@ -110,13 +144,13 @@ export default {
} }
} }
.box { .box {
padding: 0 16px; padding: 0 16px;
.list { .list {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE; border-bottom: 1px solid #ececee;
padding: 16px 0; padding: 16px 0;
&:last-child{ &:last-child {
border-bottom: 0; border-bottom: 0;
} }
.list_title { .list_title {
display: flex; display: flex;
......
src/views/ServiceFee/detail.vue
...@@ -7,43 +7,38 @@ ...@@ -7,43 +7,38 @@
<div class="header"> <div class="header">
<div class="content_left"> <div class="content_left">
<div class="title_info">应付总额</div> <div class="title_info">应付总额</div>
<div class="title_money">440.00</div> <div class="title_money">{{data.payment}}</div>
</div> </div>
<div class="content_right"> <div class="content_right">
<div class="title_info">待付金额</div> <div class="title_info">待付金额</div>
<div class="title_money">200.00</div> <div class="title_money">{{data.waitPayment}}</div>
</div> </div>
</div> </div>
<div class="box"> <div class="box mt0" v-for="(item,index) in data.list" :key="index">
<div class="list"> <div class="box-due">
<div class="list_title"> <label class="label_time">截止扣费日期 {{item.dueDate|transDate}}</label>
<div class="title">2019年11月北京服务费</div> <span class="font-blue status">{{item.statusDesc}}</span>
<div class="list_title_money">100.00</div>
</div>
<p>
<span>应付金额</span>
<i>600.00</i>
</p>
</div> </div>
<div class="list">
<div class="list" v-for="(ele,index) in item.list" :key="index">
<div class="list_title"> <div class="list_title">
<div class="title">2019年11月天津服务费</div> <div class="title">{{ele.employeeName}}</div>
<div class="list_title_money">100.00</div> <div class="list_title_money">{{ele.dueAmount}}</div>
</div> </div>
<p> <p>
<span>应付金额</span> <span>{{ele.cityName}}</span>
<i>600.00</i> <i class>{{ele.desc}}</i>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Icon } from "vant"; import { Icon } from "vant";
import { Header } from "@/components"; import { Header } from "@/components";
import dayjs from "dayjs";
export default { export default {
components: { components: {
Header, Header,
...@@ -51,9 +46,42 @@ export default { ...@@ -51,9 +46,42 @@ export default {
}, },
data() { data() {
return { 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: { methods: {
navLeftArrowClick() { navLeftArrowClick() {
this.$router.go(-1); this.$router.go(-1);
...@@ -67,6 +95,9 @@ export default { ...@@ -67,6 +95,9 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.contener { .contener {
.font-blue {
color: #007aec;
}
.header { .header {
height: 98px; height: 98px;
padding: 0 16px; padding: 0 16px;
...@@ -96,14 +127,28 @@ export default { ...@@ -96,14 +127,28 @@ export default {
} }
} }
.box { .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 { .list {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE; border-bottom: 1px solid #ececee;
padding: 16px 0; padding: 16px 0;
&:last-child{ &:last-child {
border-bottom: 0; border-bottom: 0;
} }
.list_title { .list_title {
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/Trusteeship/index.vue
...@@ -192,7 +192,7 @@ export default { ...@@ -192,7 +192,7 @@ export default {
this.currentPerId = this.period[this.currentPer].id; this.currentPerId = this.period[this.currentPer].id;
} }
} }
this.savePeriodIndex(this.currentPerIndex); this.savePeriodIndex(this.currentPer);
this.loadBillHostingData(this.currentPerId); this.loadBillHostingData(this.currentPerId);
}, },
async loadBillHostingData(accountId) { 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