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