Skip to content

M
mongo-ui
Commit 20e12d35 authored by 郭志伟's avatar 郭志伟 Committed by 郝聪敏
Browse files
Options

feat: 详情页组件整理

parent bcf6bef8
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 334 deletions
src/api/detail.case.mock.js 0 → 100644
View file @ 20e12d35
/* eslint-disable */
export default {
name: "吴先生",
info: "46岁 北京 有社保",
list: [
{
title: "投保",
event: "2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。"
},
{
title: "投保",
event: "2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20"
},
{
title: "轻症理赔",
event: "2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。"
},
{
title: "重疾理赔",
event: "2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。"
}
]
};
src/components/Collapse.vue
View file @ 20e12d35
<template> <template>
<div> <div>
<ul> <div class="collapse">
<li v-for="(item, index) in list" :key="index"> <div
<p @click="changeContent(index)">{{ item.title }}</p> class="collapse-item"
<div class="box" v-show="item.showContent">11111</div> :class="{
</li> show: item.show,
</ul> more: index > 2 && !more
}"
v-for="(item, index) in list"
:key="index"
>
<div class="collapse-item-title" @click="itemClick(index)">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">{{ item.q }}</span>
<svg-icon icon-class="triangle-down" />
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<div class="collapse-item-content-txt">{{ item.a }}</div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div>
</div>
<div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
<a href="javascript:;" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
</div> </div>
</template> </template>
<script> <script>
// TODO
export default { export default {
name: "Collapse", name: "Collapse",
props: { props: {
list: { collapseData: {
type: Array, type: Array,
required: true,
default() { default() {
return []; return [];
} }
},
moreBtn: {
type: Boolean,
default: true
} }
}, },
watch: {
collapseData: {
immediate: true,
deep: true,
handler(val) {
this.list = val.map(item => {
item.showItem = false;
return item;
});
}
}
},
data() {
return {
list: [],
more: false
};
},
methods: { methods: {
changeContent(index) { itemClick(index) {
//通过index拿到当前值 let _item = this.list[index];
this.list[index].showContent = !this.list[index].showContent; _item.show = !_item.show;
this.$set(this.list, index, _item);
},
showMore() {
this.more = !this.more;
} }
} }
}; };
</script> </script>
<style></style> <style lang="less" scoped>
@import "../style/var.less";
.collapse {
&-item {
background-color: @white;
&.more {
display: none;
}
&-title {
display: flex;
color: @black;
font-weight: @font-weight-bold;
padding: @padding-md 0;
&-icon {
font-size: @font-size-12;
font-weight: @font-weight-bold;
font-style: normal;
line-height: @line-height-md - 2;
height: 20px;
text-align: center;
width: 20px;
margin-top: 2px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 10px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 17px;
width: 17px;
transition: all 0.2s linear;
margin-left: auto;
margin-top: 4px;
}
}
&-content {
display: none;
overflow: hidden;
color: @black;
font-size: @font-size-14;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px 16px 16px 12px;
line-height: @line-height-sm + 2;
margin-bottom: 15px;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
&.show {
.collapse-item-title {
.svg-icon {
transform: rotate(180deg);
}
}
.collapse-item-content {
display: flex;
}
}
}
}
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
span:nth-child(2) {
display: none;
}
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
transition: all 0.2s linear;
}
&.active {
span:nth-child(1) {
display: none;
}
span:nth-child(2) {
display: inline;
}
.svg-icon {
transform: rotate(180deg);
}
}
}
</style>
src/components/CompactCellGroup.vue
View file @ 20e12d35
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../style/var.less";
.sub-text-mixins { .sub-text-mixins {
font-size: @font-size-12; font-size: @font-size-12;
color: @gray-4; color: @gray-4;
......
src/components/Copyright.vue
View file @ 20e12d35
<template> <template functional>
<div class="copyright"> <div class="copyright">
<p class="copyright-logo" v-if="props.logo"> <p class="copyright-logo" v-if="props.logo">
<img src="../assets/logo-foot.png" alt="logo" /> <img src="../assets/logo-foot.png" alt="logo" />
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
<script> <script>
export default { export default {
name: "Copyright", name: "Copyright",
functional: true,
props: ["logo"] props: ["logo"]
}; };
</script> </script>
......
src/components/PopupWithIframe.vue
View file @ 20e12d35
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../style/var.less";
.body-wrap-mixin { .body-wrap-mixin {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
......
src/views/Goods/Detail/index.less
View file @ 20e12d35
@import "../../style/var.less"; @import "../../../style/var.less";
.sub-text-mixins { .sub-text-mixins {
font-size: @font-size-12; font-size: @font-size-12;
color: @gray-4; color: @gray-4;
......
src/views/Goods/Detail/index.vue
View file @ 20e12d35
<template> <template>
<div class="container"> <div class="container">
<detail-header @click="goInsureState = true" /> <detail-header @click="goInsureState = true" :det="headerInfo" />
<div class="det-body"> <div class="det-body">
<card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)"> <card title="保险计划" :option="['查看详情']" @option-click="openIframePupop(4)">
<cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" /> <cr-radio-btn v-model="formData.planValue" :radio-data="planOptions" />
...@@ -85,11 +85,11 @@ ...@@ -85,11 +85,11 @@
height="auto" height="auto"
/> />
</card> </card>
<cps-demo /> <cps-case :case-data="caseInfo" />
<cps-process @click="openIframePupop" /> <cps-process :process-data="processDetail" @click="openIframePupop(5)" />
<cps-qa /> <cps-qa :qa-data="qaList" />
</div> </div>
<detail-footer /> <detail-footer :company-info="companyInfo" />
<copyright /> <copyright />
<good-action @click="goInsureState = true" @leftClick="showLayer = true" /> <good-action @click="goInsureState = true" @leftClick="showLayer = true" />
<popup-with-iframe <popup-with-iframe
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
:content="pupopData.content" :content="pupopData.content"
:url="pupopData.url" :url="pupopData.url"
> >
<cps-process-detail v-if="currentPupopIndex === 5" /> <cps-process-detail v-if="currentPupopIndex === 5" :process-data="processDetail" />
<cps-rate v-if="currentPupopIndex === 6" /> <cps-rate v-if="currentPupopIndex === 6" />
</popup-with-iframe> </popup-with-iframe>
<record-layer v-model="showLayer" desc="敬请期待" /> <record-layer v-model="showLayer" desc="敬请期待" />
...@@ -109,19 +109,47 @@ ...@@ -109,19 +109,47 @@
<script> <script>
import DetailHeader from "./modules/DetailHeader"; import DetailHeader from "./modules/DetailHeader";
import DetailFooter from "./modules/DetailFooter"; import DetailFooter from "./modules/DetailFooter";
import CompactCellGroup from "@/modules/CompactCellGroup"; import CompactCellGroup from "@/components/CompactCellGroup";
import CpsDemo from "./modules/CpsDemo"; import CpsCase from "./modules/CpsCase";
import CpsProcess from "./modules/CpsProcess"; import CpsProcess from "./modules/CpsProcess";
import CpsQa from "./modules/CpsQA"; import CpsQa from "./modules/CpsQA";
import PopupWithIframe from "@/modules/PopupWithIframe"; import PopupWithIframe from "@/components/PopupWithIframe";
import GoInsureDialog from "../modules/GoInsureDialog"; import GoInsureDialog from "./modules/GoInsureDialog";
import CpsProcessDetail from "./modules/CpsProcessDetail"; import CpsProcessDetail from "./modules/CpsProcessDetail";
import CpsRate from "./CpsRate"; import CpsRate from "./modules/CpsRate";
import CrRadioBtn from "@/components/CrRadioBtn"; import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card"; import Card from "@/components/Card";
import Copyright from "@/components/Copyright"; import Copyright from "@/components/Copyright";
import GoodAction from "@/components/GoodAction"; import GoodAction from "@/components/GoodAction";
import RecordLayer from "@/components/RecordLayer"; import RecordLayer from "@/components/RecordLayer";
import Collapse from "@/components/Collapse";
import goodsBg01 from "@/assets/goods/detail/bg-zhongjixian.png";
import qaList from "@/api/detail.qa.mock";
import caseInfo from "@/api/detail.case.mock";
import processDetail from "@/api/detail.process.mock";
const headerInfo = {
bgSrc: goodsBg01,
type: "huatai",
company: "华泰财险",
title: "30万重疾轻症保障",
sub: "100种重症+40种轻症确诊即赔",
price: "首月<strong>3</strong>元<small>次月5.6元/月起</small>",
insuredNum: 0,
stamp: true
};
const companyInfo = [
{ content: "承保公司：华泰财产保险有限公司", offset: false },
{ content: "经营范围：短期健康保险和意外伤害保险", offset: false },
{ content: "备案名称：华泰财险重大疾病保险条款", offset: false },
{ content: "华泰财险附加重大疾病轻症综合保险条款；", offset: true },
{ content: "华泰财险附加保险费分期支付条款", offset: true },
{ content: "备案编号：C00015431912018061501152；", offset: false },
{ content: "C00015432622017111500872；", offset: true },
{ content: "C00015431922018061503991", offset: true }
];
export default { export default {
name: "GoodsDetail", name: "GoodsDetail",
...@@ -131,7 +159,9 @@ export default { ...@@ -131,7 +159,9 @@ export default {
CompactCellGroup, CompactCellGroup,
CrRadioBtn, CrRadioBtn,
Card, Card,
CpsDemo, // eslint-disable-next-line
Collapse,
CpsCase,
CpsProcess, CpsProcess,
CpsQa, CpsQa,
Copyright, Copyright,
...@@ -144,6 +174,11 @@ export default { ...@@ -144,6 +174,11 @@ export default {
}, },
data() { data() {
return { return {
headerInfo,
qaList,
caseInfo,
processDetail,
companyInfo,
introImg: [ introImg: [
"@/assets/goods/detail/zhongjixian/intro-01.png", "@/assets/goods/detail/zhongjixian/intro-01.png",
"@/assets/goods/detail/zhongjixian/intro-02.png", "@/assets/goods/detail/zhongjixian/intro-02.png",
......
src/views/Goods/Detail/modules/CpsCase.vue
View file @ 20e12d35
<template> <template functional>
<card class="cps-demo-title_np" title="理赔案例"> <card class="cps-demo-title_np" title="理赔案例">
<div class="cps-demo"> <div class="cps-demo">
<div class="cps-demo-header"> <div class="cps-demo-header">
...@@ -7,33 +7,13 @@ ...@@ -7,33 +7,13 @@
</div> </div>
<div class="cps-demo-body"> <div class="cps-demo-body">
<div class="cps-demo-person"> <div class="cps-demo-person">
<span>吴先生</span> <span>{{ props.caseData.name }}</span>
<span>46岁 北京 有社保</span> <span>{{ props.caseData.info }}</span>
</div> </div>
<div class="cps-demo-list"> <div class="cps-demo-list">
<div class="cps-demo-list-item"> <div class="cps-demo-list-item" v-for="(item, index) in props.caseData.list" :key="index">
<div class="cps-demo-list-item-title">投保</div> <div class="cps-demo-list-item-title">{{ item.title }}</div>
<div class="cps-demo-list-item-content"> <div class="cps-demo-list-item-content">{{ item.event }}</div>
2018年6月29日，吴先生为自己投保了一份万家保·重疾轻症险，保额20万，并续保。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">投保</div>
<div class="cps-demo-list-item-content">
2019年9月16日，吴先生意外烫伤双下肢皮肤，达到浅Ⅲ°烧伤，烧伤面积达20%。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">轻症理赔</div>
<div class="cps-demo-list-item-content">
2019年9月17日，吴先生后向我司报案，经核实符合该保险中轻症“特定面积Ⅲ度烧伤”的诊断赔付标准，给予4万保险金赔付。
</div>
</div>
<div class="cps-demo-list-item">
<div class="cps-demo-list-item-title">重疾理赔</div>
<div class="cps-demo-list-item-content">
2020年1月3日，吴先生突发胸痛咯血，后诊断为右肺非小细胞性肺癌，经我司核实后确认为保险责任，一次性给予20万元的重大疾病保险金。
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -42,23 +22,25 @@ ...@@ -42,23 +22,25 @@
</template> </template>
<script> <script>
import card from "@/components/Card";
export default { export default {
name: "CpsCase", name: "CpsCase",
components: {
card
},
props: { props: {
demoData: { caseData: {
type: Object, type: Object,
default() {} default() {
return {
name: "",
info: "",
list: []
};
}
} }
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../../../../style/var.less";
.cps-demo { .cps-demo {
&-title_np { &-title_np {
.card-header { .card-header {
...@@ -66,7 +48,7 @@ export default { ...@@ -66,7 +48,7 @@ export default {
} }
} }
&-header { &-header {
background: url(../../../assets/goods/detail/assistant-card.png) top no-repeat; background: url(../../../../assets/goods/detail/assistant-card.png) top no-repeat;
background-size: contain; background-size: contain;
padding: 24px 24px 21.5px; padding: 24px 24px 21.5px;
h4 { h4 {
......
src/views/Goods/Detail/modules/CpsProcess.vue
View file @ 20e12d35
<template> <template functional>
<card title="理赔流程" :option="['了解更多理赔信息']" @option-click="optionClick"> <card title="理赔流程" :option="['了解更多理赔信息']" @option-click="listeners.click">
<div class="cps-process-list"> <div class="cps-process-list">
<div class="cps-process-list-item"> <div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-title">1</div> <div class="cps-process-list-item-title">{{ index + 1 }}</div>
<div class="cps-process-list-item-content"> <div class="cps-process-list-item-content">
<h6>电话报案</h6> <h6>{{ item.title }}</h6>
<small> <small v-html="item.desc"></small>
请拨打华泰财险400-609-5509进行报案。华泰财险会有理赔专员1对1指导理赔事宜。
</small>
</div>
</div>
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">2</div>
<div class="cps-process-list-item-content">
<h6>提交资料</h6>
<small>根据理赔专员的指导，准备理赔材料，并邮寄至指定地点进行审核。</small>
</div>
</div>
<div class="cps-process-list-item">
<div class="cps-process-list-item-title">3</div>
<div class="cps-process-list-item-content">
<h6>理赔付款</h6>
<small>审核通过后，理赔款将通过转账的方式支付。</small>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,28 +13,21 @@ ...@@ -29,28 +13,21 @@
</template> </template>
<script> <script>
import card from "@/components/Card";
export default { export default {
name: "CpsProcess", name: "CpsProcess",
components: {
card
},
props: { props: {
processData: { processData: {
type: Object, type: Array,
default() {} default() {
} return [];
}, }
methods: {
optionClick() {
this.$emit("click", 5);
} }
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../../../../style/var.less";
.cps-process { .cps-process {
&-list { &-list {
position: relative; position: relative;
......
src/views/Goods/Detail/modules/CpsProcessDetail.vue
View file @ 20e12d35
<template> <template functional>
<div class="cps-process-list"> <div class="cps-process-list">
<div class="cps-process-list-item" v-for="(item, index) in detail" :key="index"> <div class="cps-process-list-item" v-for="(item, index) in props.processData" :key="index">
<div class="cps-process-list-item-title">{{ index + 1 }}</div> <div class="cps-process-list-item-title">{{ index + 1 }}</div>
<div class="cps-process-list-item-content"> <div class="cps-process-list-item-content">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
...@@ -11,20 +11,20 @@ ...@@ -11,20 +11,20 @@
</template> </template>
<script> <script>
import detail from "@/api/detail.process.mock";
export default { export default {
name: "CpsProcessDetail", name: "CpsProcessDetail",
data() { processData: {
return { type: Array,
detail default() {
}; return [];
}
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../style/var.less"; @import "../../../../style/var.less";
@import "../../style/mixins.less"; @import "../../../../style/mixins.less";
.cps-process { .cps-process {
&-list { &-list {
margin-bottom: 50px; margin-bottom: 50px;
......
src/views/Goods/Detail/modules/CpsQA.vue
View file @ 20e12d35
<template> <template functional>
<card title="常见问题" class="collapse-header"> <card title="常见问题" class="qa-header">
<div class="collapse"> <collapse :collapse-data="props.qaData" :more-btn="true" />
<div
class="collapse-item"
:class="{
show: item.show,
more: index > 2 && !more
}"
v-for="(item, index) in list"
:key="index"
>
<div class="collapse-item-title" @click="itemClick(index)">
<i class="collapse-item-title-icon">Q</i>
<span class="collapse-item-title-txt">{{ item.q }}</span>
<svg-icon icon-class="triangle-down" />
</div>
<div class="collapse-item-content">
<i class="collapse-item-content-icon">A:</i>
<div class="collapse-item-content-txt">{{ item.a }}</div>
</div>
<cr-divider :hairline="false" :style="{ color: '#ebebeb', margin: 0 }" />
</div>
</div>
<div class="collapse-more" :class="{ active: more }" v-if="moreBtn">
<a href="javascript:;" @click="showMore">
<span>查看更多</span>
<span>隐藏</span>
<svg-icon icon-class="arrow-down" />
</a>
</div>
</card> </card>
</template> </template>
<script> <script>
import card from "@/components/Card";
import detail from "@/api/detail.qa.mock";
export default { export default {
name: "CpsQA", name: "CpsQA"
components: {
card
},
props: {
qaData: {
type: Array,
default() {
return detail;
}
},
moreBtn: {
type: Boolean,
default: true
}
},
watch: {
qaData: {
immediate: true,
deep: true,
handler(val) {
this.list = val.map(item => {
item.showItem = false;
return item;
});
}
}
},
data() {
return {
list: [],
more: false
};
},
methods: {
itemClick(index) {
let _item = this.list[index];
_item.show = !_item.show;
this.$set(this.list, index, _item);
},
showMore() {
this.more = !this.more;
}
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../../../../style/var.less";
.collapse { .qa {
&-header { &-header {
.card-header { .card-header {
padding-bottom: 4px; padding-bottom: 4px;
} }
} }
&-item {
background-color: @white;
&.more {
display: none;
}
&-title {
display: flex;
color: @black;
font-weight: @font-weight-bold;
padding: @padding-md 0;
&-icon {
font-size: @font-size-12;
font-weight: @font-weight-bold;
font-style: normal;
line-height: @line-height-md - 2;
height: 20px;
text-align: center;
width: 20px;
margin-top: 2px;
border-radius: @border-radius-sm / 4 @border-radius-md / 2;
background-color: @orange-light;
box-shadow: 0px 6px 25px 0px rgba(255, 200, 66, 0.2);
}
&-txt {
margin-left: 10px;
font-weight: @font-weight-bold;
font-size: @font-size-14;
line-height: @line-height-lg;
}
.svg-icon {
height: 17px;
width: 17px;
transition: all 0.2s linear;
margin-left: auto;
margin-top: 4px;
}
}
&-content {
display: none;
overflow: hidden;
color: @black;
font-size: @font-size-14;
background-color: @gray-1;
border-radius: @border-radius-md;
padding: 16px 16px 16px 12px;
line-height: @line-height-sm + 2;
margin-bottom: 15px;
&-icon {
font-style: normal;
font-weight: @font-weight-bold;
}
&-txt {
margin-left: 8px;
}
}
&.show {
.collapse-item-title {
.svg-icon {
transform: rotate(180deg);
}
}
.collapse-item-content {
display: flex;
}
}
}
}
.collapse-more {
text-align: center;
line-height: @line-height-lg;
padding: 5px 0;
span:nth-child(2) {
display: none;
}
.svg-icon {
height: 11px;
width: 11px;
margin-left: 3px;
transition: all 0.2s linear;
}
&.active {
span:nth-child(1) {
display: none;
}
span:nth-child(2) {
display: inline;
}
.svg-icon {
transform: rotate(180deg);
}
}
} }
</style> </style>
src/views/Goods/Detail/modules/CpsRate.vue
View file @ 20e12d35
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../style/var.less"; @import "../../../../style/var.less";
.rate-container { .rate-container {
background-color: @white; background-color: @white;
......
src/views/Goods/Detail/modules/DetailFooter.vue
View file @ 20e12d35
<template> <template functional>
<div class="det-footer"> <div class="det-footer">
<p class="det-footer-logo"><img src="../../../assets/logo-foot.png" alt="logo" /></p> <p class="det-footer-logo"><img src="../../../../assets/logo-foot.png" alt="logo" /></p>
<p>承保公司：华泰财产保险有限公司</p> <p
<p>经营范围：短期健康保险和意外伤害保险</p> v-for="(item, index) in props.companyInfo"
<p>备案名称：华泰财险重大疾病保险条款(B款)；</p> :key="index"
<p class="det-footer-offset">华泰财险附加重大疾病轻症综合保险条款；</p> :class="{ 'det-footer-offset': item.offset }"
<p class="det-footer-offset">华泰财险附加保险费分期支付条款</p> >
<p>备案编号：C00015431912018061501152；</p> {{ item.content }}
<p class="det-footer-offset">C00015432622017111500872；</p> </p>
<p class="det-footer-offset">C00015431922018061503991</p>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "DetailFooter", name: "DetailFooter",
data() { props: {
return {}; companyInfo: {
type: Array,
default() {
return [];
}
}
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import "../../../style/var.less"; @import "../../../../style/var.less";
.det-footer { .det-footer {
padding: 25px 36px; padding: 25px 36px;
background-color: #fff; background-color: #fff;
......
src/views/Goods/Detail/modules/DetailHeader.vue
View file @ 20e12d35
<template> <template functional>
<div class="det-hd"> <div
<img src="../../../assets/logo-top.png" alt="logo" class="det-hd-logo" /> class="det-hd"
:class="props.det.type"
:style="{ backgroundImage: 'url(' + props.det.bgSrc + ')' }"
>
<img src="../../../../assets/logo-top.png" alt="logo" class="det-hd-logo" />
<div class="det-hd-recommend"> <div class="det-hd-recommend">
<h2 class="det-hd-recommend-h2">智能产品官-小果</h2> <h2 class="det-hd-recommend-h2">智能产品官-小果</h2>
<h1 class="det-hd-recommend-h1">为您优选推荐</h1> <h1 class="det-hd-recommend-h1">为您优选推荐</h1>
<cr-tag> <cr-tag>
由 由
<strong>华泰财险</strong>承保 <strong>{{ props.det.company }}</strong>
承保
</cr-tag> </cr-tag>
</div> </div>
<div class="det-hd-insured"> <div class="det-hd-insured" :class="{ stamp: props.det.stamp }">
<h1 class="det-hd-insured-title">30万重疾轻症保障</h1> <h1 class="det-hd-insured-title">{{ props.det.title }}</h1>
<small class="det-hd-insured-sub">100种重症+40种轻症确诊即赔</small> <small class="det-hd-insured-sub">
<h5 class="det-hd-insured-price"> <slot>{{ props.det.sub }}</slot>
首月 </small>
<strong>3</strong>元 <h5 class="det-hd-insured-price" v-html="props.det.price"></h5>
<small>次月5.6元/月起</small> <cr-button type="warning" block>立即开启保障</cr-button>
</h5>
<cr-button type="warning" block @click="btnClick">立即开启保障</cr-button>
<div class="det-hd-insured-people"> <div class="det-hd-insured-people">
已有 已有
<em>0</em>位用户投保 <em>{{ props.det.insuredNum }}</em>
位用户投保
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
const BTN_CLICK_EVENT = "click";
export default { export default {
name: "DetailHeader", name: "DetailHeader",
data() { props: {
return {}; det: {
}, type: Object,
methods: { default() {
btnClick() { return {
this.$emit(BTN_CLICK_EVENT, 1); bgSrc: "",
type: "",
company: "",
title: "",
sub: "",
price: "",
insuredNum: 0
};
}
} }
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less">
@import "../../../style/var.less"; @import "../../../../style/var.less";
.sub-text-mixins { .sub-text-mixins {
font-size: @font-size-12; font-size: @font-size-12;
color: @gray-4; color: @gray-4;
line-height: @line-height-sm; line-height: @line-height-sm;
} }
.det-hd { .det-hd {
background: url("../../../assets/goods/detail/bg-zhongjixian.png") top no-repeat; background-color: transparent;
background-position: top;
background-repeat: no-repeat;
background-size: contain; background-size: contain;
padding: 10px 16px; padding: 10px 16px;
&-logo { &-logo {
...@@ -88,10 +101,13 @@ export default { ...@@ -88,10 +101,13 @@ export default {
border-radius: @border-radius-md; border-radius: @border-radius-md;
padding: 30px 32px; padding: 30px 32px;
text-align: center; text-align: center;
background: url(../../../assets/goods/detail/stamp.png) no-repeat; background-repeat: no-repeat;
background-color: #fff; background-color: #fff;
background-position: bottom right; background-position: bottom right;
background-size: 19%; background-size: 19%;
&.stamp {
background-image: url(../../../../assets/goods/detail/stamp.png);
}
&-title { &-title {
font-size: 32px; font-size: 32px;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
......
src/views/Goods/Detail/modules/GoInsureDialog.vue
View file @ 20e12d35
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
</template> </template>
<script> <script>
import compactCellGroup from "./CompactCellGroup"; import CompactCellGroup from "@/components/CompactCellGroup";
const DIALOG_CHANGE_EVENT = "input"; const DIALOG_CHANGE_EVENT = "input";
export default { export default {
name: "GoInsureDialog", name: "GoInsureDialog",
components: { components: {
compactCellGroup CompactCellGroup
}, },
props: { props: {
value: null value: null
...@@ -81,7 +81,7 @@ export default { ...@@ -81,7 +81,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../../../../style/var.less";
.panel { .panel {
background-color: @white; background-color: @white;
border-radius: @border-radius-md; border-radius: @border-radius-md;
...@@ -99,7 +99,7 @@ export default { ...@@ -99,7 +99,7 @@ export default {
border-top-left-radius: @border-radius-md; border-top-left-radius: @border-radius-md;
border-top-right-radius: @border-radius-md; border-top-right-radius: @border-radius-md;
padding: @padding-lg @padding-lg 5px @padding-lg; padding: @padding-lg @padding-lg 5px @padding-lg;
background: url("../../../assets/dialog-header-bg.png") right no-repeat; background: url("../../../../assets/dialog-header-bg.png") right no-repeat;
background-size: 34px 25px; background-size: 34px 25px;
background-position: right center; background-position: right center;
h4 { h4 {
......
src/views/Goods/Inform/index.less
View file @ 20e12d35
@import "../../style/var.less"; @import "../../../style/var.less";
.inform-container { .inform-container {
background-color: @white; background-color: @white;
padding-top: 15px; padding-top: 15px;
......
src/views/Goods/Plan/index.less
View file @ 20e12d35
@import "../../style/var.less"; @import "../../../style/var.less";
.plan-container { .plan-container {
background-color: @white; background-color: @white;
padding-bottom: 20px; padding-bottom: 20px;
......
src/views/Goods/index.vue
View file @ 20e12d35
...@@ -17,10 +17,10 @@ ...@@ -17,10 +17,10 @@
</template> </template>
<script> <script>
import goodsList from "@/api/goodsList.mock";
import AiTestTip from "./modules/AiTestTip"; import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList/index"; import GoodList from "@/components/GoodList/index";
import Tabbar from "@/components/Tabbar"; import Tabbar from "@/components/Tabbar";
import goodsList from "@/api/goodsList.mock";
import copyright from "@/components/Copyright"; import copyright from "@/components/Copyright";
import RecordLayer from "@/components/RecordLayer"; import RecordLayer from "@/components/RecordLayer";
......
src/views/Goods/modules/AiTestTip.vue
View file @ 20e12d35
<template> <template functional>
<div class="ai-test"> <div class="ai-test">
<div class="ai-test-tip"> <div class="ai-test-tip">
<h5>不知道怎么买保险</h5> <h5>不知道怎么买保险</h5>
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</div> </div>
<cr-row class="ai-test-cell" type="flex" align="center"> <cr-row class="ai-test-cell" type="flex" align="center">
<cr-col span="5" class="ai-test-cell-image"> <cr-col span="5" class="ai-test-cell-image">
<cr-image width="60px" height="68px" :src="aiImg" /> <cr-image width="60px" height="68px" src="@/assets/goods/ai-mongo.png" />
</cr-col> </cr-col>
<div class="ai-test-cell-title"> <div class="ai-test-cell-title">
<h5>智能<span>风险测评</span></h5> <h5>智能<span>风险测评</span></h5>
...@@ -20,14 +20,8 @@ ...@@ -20,14 +20,8 @@
</template> </template>
<script> <script>
import aiImg from "@/assets/goods/ai-mongo.png";
export default { export default {
name: "AiTestTip", name: "AiTestTip"
data() {
return {
aiImg
};
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -35,7 +29,6 @@ export default { ...@@ -35,7 +29,6 @@ export default {
@import "../../../style/mixins.less"; @import "../../../style/mixins.less";
.ai-test { .ai-test {
margin-bottom: 49px;
padding: 20px 16px 25.5px; padding: 20px 16px 25.5px;
&-tip { &-tip {
text-align: center; text-align: center;
......
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