Skip to content

M
mongo-ui
Commit c2e6e4c5 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

feat: 添加保单详情

parent 434cd87c
Show whitespace changes
Inline Side-by-side
Showing with 288 additions and 57 deletions
src/components/Tabbar.vue
View file @ c2e6e4c5
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
<script> <script>
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
const route = ["/goods", "/user"];
const tabbarData = [ const tabbarData = [
{ {
name: "产品", name: "产品",
...@@ -51,15 +50,18 @@ export default { ...@@ -51,15 +50,18 @@ export default {
...mapState(["activeIdx"]) ...mapState(["activeIdx"])
}, },
created() { created() {
if (this.$route.path !== route[this.activeIdx] && route.includes(this.$route.path)) { if (
this.setActiveIdx(route.indexOf(this.$route.path)); this.$route.path !== tabbarData[this.activeIdx].path &&
tabbarData.some(route => route.path === this.$route.path)
) {
this.setActiveIdx(tabbarData.findIndex(route => route.path === this.$route.path));
} }
}, },
methods: { methods: {
...mapMutations(["setActiveIdx"]), ...mapMutations(["setActiveIdx"]),
oninput(idx) { oninput(idx) {
this.setActiveIdx(idx); this.setActiveIdx(idx);
this.$router.replace(route[idx]); this.$router.replace(tabbarData[idx].path);
} }
} }
}; };
......
src/router/index.js
View file @ c2e6e4c5
...@@ -44,6 +44,11 @@ const routes = [ ...@@ -44,6 +44,11 @@ const routes = [
name: "Detail", name: "Detail",
component: () => import("../views/Policy/Detail/index.vue") component: () => import("../views/Policy/Detail/index.vue")
}, },
{
path: "/payment-record",
name: "PaymentRecord",
component: () => import("../views/PaymentRecord/index.vue")
},
{ {
path: "/introduction", path: "/introduction",
name: "Introduction", name: "Introduction",
......
src/style/index.less
View file @ c2e6e4c5
@import "reset.less"; @import "reset.less";
@import "var.less"; @import "var.less";
@import "mixins.less"; @import "mixins.less";
html,body { html,body,#app {
height: 100%; height: 100%;
} }
body { body {
......
src/views/PaymentRecord/index.less 0 → 100644
View file @ c2e6e4c5
@import "../../style/index.less";
.payment-record {
&:after {
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
}
box-sizing: border-box;
background: #FFFFFF;
padding: 36px 20px 67px;
height: 100%;
&-status {
margin-bottom: 1px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
}
&-desc {
margin-bottom: 28px;
font-size: 12px;
font-weight: 400;
color: #F65D5D;
line-height: 17px;
}
&-term {
position: relative;
z-index: 0;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 88px;
background: #FFC842;
border-radius: 22px 4px 22px 4px;
&:after {
position: absolute;
top: 23px;
z-index: -1;
width: 100%;
height: 78px;
content: '';
background:rgba(255,219,38,1);
border-radius:32px 8px 32px 8px;
opacity:0.35;
filter:blur(17px);
}
.Pr-term-item {
display: flex;
flex-direction: column;
align-items: center;
span:first-child {
margin-bottom: 1px;
font-size: 20px;
font-weight: 600;
color: #333333;
line-height: 28px;
}
span:last-child {
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 17px;
}
}
}
&-detail {
.Pr-detail-title {
margin-top: 21px;
padding: 17px 0;
display: flex;
justify-content: space-between;
align-items: center;
span:first-child {
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
span:last-child {
font-size: 18px;
font-weight: 600;
color: #999999;
line-height: 24px;
}
}
.Pr-detail-content {
display: flex;
flex-direction: column;
justify-content: center;
height: 81px;
border-top: 1px solid #E3E5E8;
.Prd-content-amount {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 600;
color: #242629;
line-height: 24px;
margin-bottom: 2px;
}
.Prd-content-time {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 24px;
}
}
}
}
\ No newline at end of file
src/views/PaymentRecord/index.vue 0 → 100644
View file @ c2e6e4c5
<template>
<div class="payment-record">
<p class="payment-record-status">持续缴费中</p>
<p class="payment-record-desc">预计下次扣费时间 2020.5.11</p>
<div class="payment-record-term">
<div class="Pr-term-item">
<span>800元</span>
<span>下期应缴金额</span>
</div>
<div class="Pr-term-item">
<span>6/12期</span>
<span>已缴/总期数</span>
</div>
<div class="Pr-term-item">
<span>0期</span>
<span>已欠缴期数</span>
</div>
</div>
<div class="payment-record-detail">
<div class="Pr-detail-title">
<span>缴费明细</span>
<span>按月缴费</span>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
</div>
</div>
</template>
<script></script>
<style lang="less" src="./index.less" scoped></style>
src/views/Policy/Detail/index.less
View file @ c2e6e4c5
...@@ -10,6 +10,27 @@ ...@@ -10,6 +10,27 @@
margin-right: 8px; margin-right: 8px;
} }
} }
.card-container() {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
}
.card-title(@marginBottom) {
margin-bottom: @marginBottom;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
.card-desc(@marginBottom, @lineHeight: 16px) {
margin-bottom: @marginBottom;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
.card-head() { .card-head() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -32,7 +53,8 @@ ...@@ -32,7 +53,8 @@
height: 16px; height: 16px;
} }
} }
.card-body() { .card-body(@marginBottom: 0) {
margin-bottom: @marginBottom;
div { div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -75,13 +97,16 @@ ...@@ -75,13 +97,16 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
padding-bottom: 49px; // padding-bottom: 49px;
.Pdb-status { .Pdb-status {
margin: 32px 0 5px 20px; margin: 0 0 5px 20px;
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 40px; line-height: 40px;
&:first-child {
margin: 32px 0 0 20px;
}
} }
.Pdb-tips { .Pdb-tips {
display: flex; display: flex;
...@@ -106,19 +131,47 @@ ...@@ -106,19 +131,47 @@
height: 12px; height: 12px;
} }
} }
.Pdb-payment { .Pdb-refund {
margin: 0 16px 10px; .card-container();
padding: 20px; margin: 27px 16px 10px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
&-title { &-title {
margin-bottom: 16px; .card-title(8px);
font-size: 18px; }
font-weight: 600; &-desc {
color: #242629; .card-desc(24px);
}
&-content {
.Pdbr-content-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
height: 50px;
background: #F6F7FA;
border-radius: 8px;
&:first-child {
margin-bottom: 12px;
}
span:first-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 500;
color: #333333;
line-height: 24px; line-height: 24px;
} }
}
}
}
.Pdb-payment {
.card-container();
&-title {
.card-title(16px);
}
&-content { &-content {
margin-bottom: 17px; margin-bottom: 17px;
.Pdbp-content-item { .Pdbp-content-item {
...@@ -132,10 +185,7 @@ ...@@ -132,10 +185,7 @@
background: #FFC842; background: #FFC842;
} }
.Pdbpc-item-text { .Pdbpc-item-text {
font-size: 14px; .card-desc(0, 24px);
font-weight: 400;
color: #999999;
line-height: 24px;
} }
} }
} }
...@@ -151,40 +201,24 @@ ...@@ -151,40 +201,24 @@
} }
} }
.Pdb-insurance { .Pdb-insurance {
margin: 0 16px 10px; .card-container();
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
&-name { &-name {
margin-bottom: 12px; .card-title(12px);
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
} }
&-no { &-no {
margin-bottom: 16px; .card-desc(16px);
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
} }
&-operation { &-operation {
.Pdbi-operation-button { .button } .Pdbi-operation-button { .button }
} }
} }
.Pdb-content { .Pdb-content {
margin: 0 16px 10px; .card-container();
padding: 20px;
background: #FFFFFF;
border-radius: 14px;
&-head { &-head {
.card-head .card-head
} }
&-body { &-body {
margin-bottom: 8px; .card-body(8px);
.card-body
} }
&-operation { &-operation {
.Pdbc-button { .button } .Pdbc-button { .button }
...@@ -192,11 +226,7 @@ ...@@ -192,11 +226,7 @@
&-user { &-user {
margin-top: 24px; margin-top: 24px;
.Pdbc-user-who { .Pdbc-user-who {
margin-bottom: 16px; .card-title(16px);
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
} }
.Pdbc-user-info { .Pdbc-user-info {
display: flex; display: flex;
...@@ -222,19 +252,18 @@ ...@@ -222,19 +252,18 @@
} }
} }
.Pdb-service { .Pdb-service {
.card-container();
margin: 0 16px 16px; margin: 0 16px 16px;
padding: 20px 20px 11px; padding: 20px 20px 11px;
background: #FFFFFF;
border-radius: 14px;
&-head { &-head {
.card-head .card-head();
} }
&-body { &-body {
.card-body .card-body();
} }
&-question { &-question {
margin: 24px 0 12px; margin-top: 24px;
.card-head .card-head();
} }
&-divider { &-divider {
margin: 0 0 12px 0; margin: 0 0 12px 0;
...@@ -265,7 +294,6 @@ ...@@ -265,7 +294,6 @@
align-items: center; align-items: center;
width: 84px; width: 84px;
.Pdbo-item-svg { .Pdbo-item-svg {
// margin-right: 12px;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
...@@ -277,5 +305,27 @@ ...@@ -277,5 +305,27 @@
} }
} }
} }
.Pdb-footer {
display: flex;
flex-direction: column;
align-items: center;
margin: 231px 0 20px;
span:first-child {
margin-bottom: 2px;
font-size: 11px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
span:last-child {
font-size: 20px;
font-weight: 600;
color: #666666;
line-height: 28px;
}
}
.Pdb-recommend {
margin-bottom: 49px;
}
} }
} }
\ No newline at end of file
src/views/Policy/Detail/index.vue
View file @ c2e6e4c5
<template> <template>
<div class="policy-detail"> <div class="policy-detail">
<div class="policy-detail-body"> <div class="policy-detail-body">
<p class="Pdb-status">保障中</p> <p class="Pdb-status">投保失败</p>
<div class="Pdb-tips"> <p class="Pdb-status">退款中...</p>
<!-- <div class="Pdb-tips">
<span class="Pdb-tips-text">缴费记录</span> <span class="Pdb-tips-text">缴费记录</span>
<svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" /> <svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
</div> -->
<div class="Pdb-refund">
<p class="Pdb-refund-title">很抱歉，您未通过保险公司的核保</p>
<p class="Pdb-refund-desc">不能投保此产品，正在原路给您退款，请注意查收…</p>
<div class="Pdb-refund-content">
<div class="Pdbr-content-item">
<span>退款金额</span>
<span>800.00元</span>
</div>
<div class="Pdbr-content-item">
<span>支付时间</span>
<span>2020.5.31 18:21:12</span>
</div>
</div>
</div> </div>
<div class="Pdb-payment"> <div class="Pdb-payment">
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p> <p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
...@@ -129,6 +144,10 @@ ...@@ -129,6 +144,10 @@
<span class="Pdbo-item-text">返回首页</span> <span class="Pdbo-item-text">返回首页</span>
</div> </div>
</div> </div>
<div class="Pdb-footer">
<span>如遇问题请拨打客服电话</span>
<span>00000000000</span>
</div>
<insurance-recommend class="Pdb-recommend" /> <insurance-recommend class="Pdb-recommend" />
</div> </div>
</div> </div>
......
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 to comment