Skip to content

hrs_app_h5 / bill

Go to a project
Commit 64c35a12 by 展昭
Options

整理代码

parent 1766903a
Inline Side-by-side
Showing with 195 additions and 77 deletions
src/components/Header.vue
......@@ -28,22 +28,21 @@ export default {
</script>
<style scoped>
.iosStyle {
padding-top: 20px;
}
.header-warp {
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1100;
background-color: #ffffff;
}
.header /deep/ .van-nav-bar .van-nav-bar__title {
background: #0978e7;
color:#fff;
font-size: 18px;
}
.van-hairline--bottom::after {
border: 0 !important;
}
.van-nav-bar__title {
font-size: 18px;
}
.header /deep/ .van-nav-bar .van-icon {
color: #fff !important;
font-size: 16px !important;
......
src/main.js
......@@ -10,6 +10,8 @@ Vue.prototype.globalNavLeftArrowClick = function (callback) {
document.getElementsByClassName("van-nav-bar__left")[0].onclick = function () {
callback();
};
};
new Vue({
......
src/router/bill-router.js
......@@ -94,7 +94,7 @@ export default [
},
{
path: "/other/detail",
name: "detail",
name: "otherdetail",
component: () => import("@/views/Other/detail.vue"),
meta: {
requiresAuth: true,
......
src/views/AnnualFee/index.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
<Header :title="title" />
</div>
<div class="contener">
<div class="header">
......@@ -31,10 +31,11 @@
</template>
<script>
import { NavBar, Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
export default {
components: {
[NavBar.name]: NavBar,
Header,
[Icon.name]: Icon
},
data() {
......@@ -43,9 +44,12 @@ export default {
};
},
methods: {
onClickLeft() {
console.log(1);
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......
src/views/Bill/index.vue
......@@ -33,7 +33,7 @@
<div class="box">
<!--人事托管-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(3)">
<div class="title">人事托管</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -46,7 +46,7 @@
<div class="list_contenter">
<!--社保代理-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(4)">
<div class="title">社保代理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -61,7 +61,7 @@
</div>
<!--公积金代理-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(4)">
<div class="title">公积金代理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -76,7 +76,7 @@
</div>
<!--个税代理-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(4)">
<div class="title">个税代理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -91,7 +91,7 @@
</div>
<!--服务费-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(5)">
<div class="title">服务费</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -106,7 +106,7 @@
</div>
<!--会员年费-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(6)">
<div class="title">会员年费</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -121,7 +121,7 @@
</div>
<!--其他事务办理-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(7)">
<div class="title">其他事务办理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -158,8 +158,27 @@ export default {
console.log(1);
},
toPage(flag) {
if (flag === 2) {
this.$router.push({ name: "billrecord" });
switch (flag) {
case 1: // 充值
break;
case 2: // 资金记录
this.$router.push({ name: "billrecord" });
break;
case 3: // 人事托管
this.$router.push({ name: "trusteeship" });
break;
case 4: // 社保/公积金/个税
this.$router.push({ name: "sociallist" });
break;
case 5: // 服务费
this.$router.push({ name: "servicefee" });
break;
case 6: // 会员年费
this.$router.push({ name: "annualfee" });
break;
case 7: // 其他服务办理
this.$router.push({ name: "other" });
break;
}
}
}
......@@ -167,7 +186,6 @@ export default {
</script>
<style lang="less" scoped>
.contener {
.header {
height: 136px;
......
src/views/Bill/sociallist.vue
......@@ -17,7 +17,7 @@
<div class="box">
<!--社保代缴-->
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(1)">
<div class="title">社保代缴</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -108,7 +108,21 @@ export default {
title: "11月社保代理"
};
},
methods: {}
methods: {
toPage(flag) {
switch (flag) {
case 1:
this.$router.push({ name: "socialpayment" });
break;
}
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......
src/views/Bill/socialpayment.vue
......@@ -20,7 +20,6 @@
<div class="list_title">
<div class="title">武天依</div>
<div class="list_title_money">500.00</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>城市</span>
......@@ -34,7 +33,6 @@
<div class="list_title">
<div class="title">武天依</div>
<div class="list_title_money">500.00</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>城市</span>
......@@ -59,7 +57,14 @@ export default {
title: "11月社保代理"
};
},
methods: {}
methods: {
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......
src/views/Other/detail.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
<Header :title="title" />
</div>
<div class="container">
<div class="container-wrap">
<!--服务费-->
<div class="list">
<div class="title">
......@@ -31,27 +31,31 @@
</template>
<script>
import { NavBar, Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
export default {
components: {
[NavBar.name]: NavBar,
Header,
[Icon.name]: Icon
},
data() {
return {
title: "11月资金记录"
title: "滤芯春的社保卡补办"
};
},
methods: {
onClickLeft() {
console.log(1);
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
<style lang="less" scoped>
.container {
.container-wrap {
padding: 0 16px;
.list {
padding: 16px 0;
......
src/views/Other/index.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
<Header :title="title" />
</div>
<div class="contener">
<div class="header">
......@@ -16,7 +16,7 @@
</div>
<div class="box">
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(1)">
<div class="title">吕春新的社保卡补办</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -49,10 +49,11 @@
</template>
<script>
import { NavBar, Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
export default {
components: {
[NavBar.name]: NavBar,
Header,
[Icon.name]: Icon
},
data() {
......@@ -61,9 +62,19 @@ export default {
};
},
methods: {
onClickLeft() {
console.log(1);
toPage(flag) {
switch (flag) {
case 1:
this.$router.push({ name: "otherdetail" });
break;
}
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......
src/views/ServiceFee/detail.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
<Header :title="title" />
</div>
<div class="contener">
<div class="header">
......@@ -35,16 +35,18 @@
<i>600.00</i>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
export default {
components: {
[NavBar.name]: NavBar,
Header,
[Icon.name]: Icon
},
data() {
......@@ -53,9 +55,12 @@ export default {
};
},
methods: {
onClickLeft() {
console.log(1);
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......
src/views/ServiceFee/index.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
<Header :title="title" />
</div>
<div class="contener">
<div class="header">
......@@ -16,7 +16,7 @@
</div>
<div class="box">
<div class="list">
<div class="list_title">
<div class="list_title" @click="toPage(1)">
<div class="title">2019年11月北京服务费</div>
<van-icon name="arrow" class="arrow_right" />
</div>
......@@ -49,10 +49,11 @@
</template>
<script>
import { NavBar, Icon } from "vant";
import { Icon } from "vant";
import { Header } from "@/components";
export default {
components: {
[NavBar.name]: NavBar,
Header,
[Icon.name]: Icon
},
data() {
......@@ -61,9 +62,19 @@ export default {
};
},
methods: {
onClickLeft() {
console.log(1);
toPage(flag) {
switch (flag) {
case 1:
this.$router.push({ name: "servicefee_detail" });
break;
}
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......@@ -99,13 +110,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/Trusteeship/index.vue
<template>
<div>
<div class="container">
<div class="header">
<van-nav-bar title="人事托管" left-arrow @click-left="onClickLeft" />
<Header :title="title"/>
</div>
<div class="contener">
<div class="header">
<div class="header_date_time">123</div>
<!--社保托管-->
<!--人事托管-->
<div class="header_box">
<div class="header_box_title">
<span>社保托管</span>
......@@ -16,7 +16,7 @@
<div class="list">
<div class="list_title">
<div class="title">北京市</div>
<van-icon name="arrow" class="arrow_right" @click="cityInfo" />
<van-icon name="arrow" class="arrow_right" @click="openDetail" />
</div>
<p>
<span>总备款金额</span>
......@@ -62,6 +62,47 @@
<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>
</div>
</div>
......@@ -93,25 +134,33 @@
</template>
<script>
import { NavBar, Icon, Popup } from "vant";
import { Icon, Popup } from "vant";
import {Header} from '@/components'
export default {
components: {
[NavBar.name]: NavBar,
Header,
[Icon.name]: Icon,
[Popup.name]: Popup
},
data() {
return {
show: false
show: false,
title:'人事托管'
};
},
methods: {
onClickLeft() {
console.log(1);
},
cityInfo() {
openDetail() {
this.show = true;
},
navLeftArrowClick() {
this.$router.go(-1);
}
},
mounted() {
this.globalNavLeftArrowClick(this.navLeftArrowClick);
}
};
</script>
......@@ -121,12 +170,8 @@ export default {
.header {
height: 136px;
padding: 0 16px;
border-top: 1px solid rgba(15, 130, 245, 1);
background: linear-gradient(
135deg,
rgba(15, 130, 245, 1) 0%,
rgba(6, 115, 223, 1) 100%
);
border-top: 1px solid #0978e7;
background: #0978e7;
.header_date_time {
height: 75px;
}
......
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