Skip to content

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

Merge branch 'feature/user' into 'master' 

feat: 添加保单详情

See merge request !18
parents 434cd87c c2e6e4c5
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 57 deletions
src/components/Tabbar.vue
View file @ 45d21a61
......@@ -24,7 +24,6 @@
<script>
import { mapState, mapMutations } from "vuex";
const route = ["/goods", "/user"];
const tabbarData = [
{
name: "产品",
......@@ -51,15 +50,18 @@ export default {
...mapState(["activeIdx"])
},
created() {
if (this.$route.path !== route[this.activeIdx] && route.includes(this.$route.path)) {
this.setActiveIdx(route.indexOf(this.$route.path));
if (
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: {
...mapMutations(["setActiveIdx"]),
oninput(idx) {
this.setActiveIdx(idx);
this.$router.replace(route[idx]);
this.$router.replace(tabbarData[idx].path);
}
}
};
......
src/router/index.js
View file @ 45d21a61
......@@ -44,6 +44,11 @@ const routes = [
name: "Detail",
component: () => import("../views/Policy/Detail/index.vue")
},
{
path: "/payment-record",
name: "PaymentRecord",
component: () => import("../views/PaymentRecord/index.vue")
},
{
path: "/introduction",
name: "Introduction",
......
src/style/index.less
View file @ 45d21a61
@import "reset.less";
@import "var.less";
@import "mixins.less";
html,body {
html,body,#app {
height: 100%;
}
body {
......
src/views/PaymentRecord/index.less 0 → 100644
View file @ 45d21a61
@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 @ 45d21a61
<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 @ 45d21a61
......@@ -10,6 +10,27 @@
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() {
display: flex;
justify-content: space-between;
......@@ -32,7 +53,8 @@
height: 16px;
}
}
.card-body() {
.card-body(@marginBottom: 0) {
margin-bottom: @marginBottom;
div {
display: flex;
justify-content: space-between;
......@@ -75,13 +97,16 @@
position: absolute;
left: 0;
right: 0;
padding-bottom: 49px;
// padding-bottom: 49px;
.Pdb-status {
margin: 32px 0 5px 20px;
margin: 0 0 5px 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
&:first-child {
margin: 32px 0 0 20px;
}
}
.Pdb-tips {
display: flex;
......@@ -106,18 +131,46 @@
height: 12px;
}
}
.Pdb-refund {
.card-container();
margin: 27px 16px 10px;
&-title {
.card-title(8px);
}
&-desc {
.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;
}
}
}
}
.Pdb-payment {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
.card-container();
&-title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
.card-title(16px);
}
&-content {
margin-bottom: 17px;
......@@ -132,10 +185,7 @@
background: #FFC842;
}
.Pdbpc-item-text {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 24px;
.card-desc(0, 24px);
}
}
}
......@@ -151,40 +201,24 @@
}
}
.Pdb-insurance {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 14px;
.card-container();
&-name {
margin-bottom: 12px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
.card-title(12px);
}
&-no {
margin-bottom: 16px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
.card-desc(16px);
}
&-operation {
.Pdbi-operation-button { .button }
}
}
.Pdb-content {
margin: 0 16px 10px;
padding: 20px;
background: #FFFFFF;
border-radius: 14px;
.card-container();
&-head {
.card-head
}
&-body {
margin-bottom: 8px;
.card-body
.card-body(8px);
}
&-operation {
.Pdbc-button { .button }
......@@ -192,11 +226,7 @@
&-user {
margin-top: 24px;
.Pdbc-user-who {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
.card-title(16px);
}
.Pdbc-user-info {
display: flex;
......@@ -222,19 +252,18 @@
}
}
.Pdb-service {
.card-container();
margin: 0 16px 16px;
padding: 20px 20px 11px;
background: #FFFFFF;
border-radius: 14px;
&-head {
.card-head
.card-head();
}
&-body {
.card-body
.card-body();
}
&-question {
margin: 24px 0 12px;
.card-head
margin-top: 24px;
.card-head();
}
&-divider {
margin: 0 0 12px 0;
......@@ -265,7 +294,6 @@
align-items: center;
width: 84px;
.Pdbo-item-svg {
// margin-right: 12px;
width: 16px;
height: 16px;
}
......@@ -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 @ 45d21a61
<template>
<div class="policy-detail">
<div class="policy-detail-body">
<p class="Pdb-status">保障中</p>
<div class="Pdb-tips">
<p class="Pdb-status">投保失败</p>
<p class="Pdb-status">退款中...</p>
<!-- <div class="Pdb-tips">
<span class="Pdb-tips-text">缴费记录</span>
<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 class="Pdb-payment">
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
......@@ -129,6 +144,10 @@
<span class="Pdbo-item-text">返回首页</span>
</div>
</div>
<div class="Pdb-footer">
<span>如遇问题请拨打客服电话</span>
<span>00000000000</span>
</div>
<insurance-recommend class="Pdb-recommend" />
</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