Skip to content

hrs_app_h5 / bill

Go to a project
Commit f4501d4c by 展昭
Options

修改代码

parents de523db9 6e1737d1
Inline Side-by-side
Showing with 757 additions and 2 deletions
src/assets/css/index.css
......@@ -5,4 +5,8 @@
}
i{
font-style: normal;
}
/*未扣费*/
.no_bill{
color: #077AEC;
}
\ No newline at end of file
src/router/bill-router.js
......@@ -44,5 +44,52 @@ export default [
title: "社保/公积金/个税列表 "
}
},
//服务费
{
path: "/servicefee",
name: "servicefee",
component: () => import("@/views/ServiceFee/index.vue"),
meta: {
requiresAuth: true,
title: "服务费 "
}
},
{
path: "/servicefee/detail",
name: "servicefee_detail",
component: () => import("@/views/ServiceFee/detail.vue"),
meta: {
requiresAuth: true,
title: "服务费详情 "
}
},
//会员年费
{
path: "/annualfee",
name: "annualfee",
component: () => import("@/views/AnnualFee/index.vue"),
meta: {
requiresAuth: true,
title: "会员年费 "
}
},
//其他服务
{
path: "/other",
name: "other",
component: () => import("@/views/Other/index.vue"),
meta: {
requiresAuth: true,
title: "其他事务办理 "
}
},
{
path: "/other/detail",
name: "detail",
component: () => import("@/views/Other/detail.vue"),
meta: {
requiresAuth: true,
title: "其他事务办理详情 "
}
}
]
\ No newline at end of file
src/views/AnnualFee/index.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div>
<div class="contener">
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
</div>
</div>
<div class="box">
<div class="list">
<div class="list_title">
<div class="title">2020.01-2020.12</div>
<div class="list_title_money">-500.00</div>
</div>
<p>
<span>扣费截止日期2019-11-20</span>
<i class="no_bill">未扣费</i>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
data() {
return {
title: "会员年费"
};
},
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang="less" scoped>
.contener {
.header {
height: 98px;
padding: 0 16px;
background: #0978e7;
.content_left {
width: 50%;
float: left;
}
.content_right {
width: 50%;
float: left;
}
.title_info {
height: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 20px;
margin-top: 20px;
}
.title_money {
height: 30px;
font-size: 24px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 30px;
margin-top: 8px;
}
}
.box {
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ececee;
padding: 16px 0;
&:last-child {
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
.title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
}
.list_title_money {
margin-left: auto;
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
}
.arrow_right {
margin-left: auto;
color: #e4e4e6;
}
}
p {
display: flex;
align-items: center;
margin-top: 6px;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
i {
font-style: normal;
margin-left: auto;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Other/detail.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div>
<div class="container">
<!--服务费-->
<div class="list">
<div class="title">
<div class="title_info">服务费</div>
<i>160.00</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>
</p>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
data() {
return {
title: "11月资金记录"
};
},
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang="less" scoped>
.container {
padding: 0 16px;
.list {
padding: 16px 0;
border-bottom: 1px solid #ececee;
&:last-child {
border: 0;
}
.title {
display: flex;
align-items: center;
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
i {
margin-left: auto;
}
}
p {
display: flex;
align-items: center;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
margin-top: 6px;
i {
margin-left: auto;
}
}
}
}
</style>
\ No newline at end of file
src/views/Other/index.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div>
<div class="contener">
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
</div>
</div>
<div class="box">
<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>
</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>
</div>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
data() {
return {
title: "其他事务办理"
};
},
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang="less" scoped>
.contener {
.header {
height: 98px;
padding: 0 16px;
background: #0978e7;
.content_left {
width: 50%;
float: left;
}
.content_right {
width: 50%;
float: left;
}
.title_info {
height: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 20px;
margin-top: 20px;
}
.title_money {
height: 30px;
font-size: 24px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 30px;
margin-top: 8px;
}
}
.box {
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE;
padding: 16px 0;
&:last-child{
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
.title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
}
.arrow_right {
margin-left: auto;
color: #e4e4e6;
}
}
p {
display: flex;
align-items: center;
margin-top: 6px;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
i {
font-style: normal;
margin-left: auto;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/ServiceFee/detail.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div>
<div class="contener">
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</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>
<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>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
data() {
return {
title: "服务费详情"
};
},
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang="less" scoped>
.contener {
.header {
height: 98px;
padding: 0 16px;
background: #0978e7;
.content_left {
width: 50%;
float: left;
}
.content_right {
width: 50%;
float: left;
}
.title_info {
height: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 20px;
margin-top: 20px;
}
.title_money {
height: 30px;
font-size: 24px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 30px;
margin-top: 8px;
}
}
.box {
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE;
padding: 16px 0;
&:last-child{
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
.title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
}
.list_title_money {
margin-left: auto;
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
}
.arrow_right {
margin-left: auto;
color: #e4e4e6;
}
}
p {
display: flex;
align-items: center;
margin-top: 6px;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
i {
font-style: normal;
margin-left: auto;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/ServiceFee/index.vue 0 → 100644
<template>
<div>
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
</div>
<div class="contener">
<div class="header">
<div class="content_left">
<div class="title_info">应付总额</div>
<div class="title_money">440.00</div>
</div>
<div class="content_right">
<div class="title_info">待付金额</div>
<div class="title_money">200.00</div>
</div>
</div>
<div class="box">
<div class="list">
<div class="list_title">
<div class="title">2019年11月北京服务费</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>
</div>
<div class="list">
<div class="list_title">
<div class="title">2019年11月天津服务费</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>
</div>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon
},
data() {
return {
title: "服务费"
};
},
methods: {
onClickLeft() {
console.log(1);
}
}
};
</script>
<style lang="less" scoped>
.contener {
.header {
height: 98px;
padding: 0 16px;
background: #0978e7;
.content_left {
width: 50%;
float: left;
}
.content_right {
width: 50%;
float: left;
}
.title_info {
height: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 1);
line-height: 20px;
margin-top: 20px;
}
.title_money {
height: 30px;
font-size: 24px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 30px;
margin-top: 8px;
}
}
.box {
padding: 0 16px;
.list {
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid #ECECEE;
padding: 16px 0;
&:last-child{
border-bottom: 0;
}
.list_title {
display: flex;
align-items: center;
.title {
height: 22px;
font-size: 16px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 22px;
}
.arrow_right {
margin-left: auto;
color: #e4e4e6;
}
}
p {
display: flex;
align-items: center;
margin-top: 6px;
height: 18px;
font-size: 13px;
color: rgba(149, 152, 158, 1);
line-height: 18px;
i {
font-style: normal;
margin-left: auto;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Trusteeship/index.vue
......@@ -67,7 +67,28 @@
</div>
</div>
<!--弹出层-->
<van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">内容</van-popup>
<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>
<p>
<span>参保城市</span>
<i>北京</i>
</p>
<p>
<span>参保月份</span>
<i>2019年11月</i>
</p>
<p>
<span>备款提醒时间</span>
<i>2019-11-25</i>
</p>
<p>
<span>托收人数</span>
<i>10</i>
</p>
</div>
</van-popup>
</div>
</template>
......@@ -180,4 +201,39 @@ export default {
}
}
}
.popup_city {
padding: 0 30px;
.popup_city_title {
height: 22px;
font-size: 16px;
color: rgba(61, 64, 71, 1);
line-height: 22px;
text-align: center;
margin-top: 52px;
}
.popup_city_money {
height: 40px;
font-size: 32px;
font-weight: 500;
color: rgba(61, 64, 71, 1);
line-height: 40px;
margin: 14px 0 50px;
text-align: center;
}
p {
height: 30px;
line-height: 30px;
font-size: 14px;
display: flex;
align-items: center;
span {
color: rgba(94, 96, 102, 1);
}
i {
color: rgba(61, 64, 71, 1);
margin-left: auto;
text-align: right;
}
}
}
</style>
\ No newline at end of file
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