Skip to content

M
mongo-ui
Commit 757f00bb authored by 郭志伟's avatar 郭志伟
Browse files
Options

"feat: 商品列表"

parent d038e6c5
Hide whitespace changes
Inline Side-by-side
Showing with 446 additions and 143 deletions
src/api/goodsList.mock.js 0 → 100644
View file @ 757f00bb
import good01 from "@/assets/goods/goods-01.png";
import good02 from "@/assets/goods/goods-02.png";
import good03 from "@/assets/goods/goods-03.png";
import good04 from "@/assets/goods/goods-04.png";
export default [
{
title: "住院医疗险",
sub: "报销医药费，有无社保均可保",
children: [
{
img: good01,
title: "万家保·百万医疗险",
sub: "产品优势",
glory: "好评榜第1名",
price: "0",
unit: "",
allow: false
}
]
},
{
title: "重大疾病险",
sub: "责任内疾病确诊即赔",
children: [
{
img: good02,
title: "万家保·重疾轻症险",
sub: "100种重疾+40种轻症",
glory: "",
price: "3",
unit: "首月",
allow: true
},
{
img: good02,
title: "百年康惠保2.0重大疾病险",
sub: "产品优势",
glory: "",
price: "0",
unit: "",
allow: false
}
]
},
{
title: "意外伤害险",
sub: "意外保障无等待期",
children: [
{
img: good03,
title: "万家保·综合意外险",
sub: "产品优势",
glory: "开车必备",
price: "0",
unit: "",
allow: false
}
]
},
{
title: "人寿保险",
sub: "避免因家庭顶梁柱身故，导致的房贷、子女教育等生活压力",
children: [
{
img: good04,
title: "华贵大麦2020定期寿险",
sub: "产品优势",
glory: "",
price: "0",
unit: "",
allow: false
}
]
}
];
src/assets/icons/svg/triangle-right.svg
View file @ 757f00bb
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 14 Copy</title> <title>Group 14 Copy</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<g id="产品" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="全部保单" transform="translate(-165.000000, -106.000000)" fill-rule="nonzero"> <g id="全部保单" transform="translate(-180.000000, -45.000000)" fill-rule="nonzero">
<g id="Group-14-Copy" transform="translate(173.000000, 114.000000) rotate(-90.000000) translate(-173.000000, -114.000000) translate(165.000000, 106.000000)"> <g id="Group-14-Copy" transform="translate(188.000000, 53.000000) rotate(-90.000000) translate(-188.000000, -53.000000) translate(180.000000, 45.000000)">
<g id="Group"> <g id="Group">
<rect id="Rectangle" x="0" y="0" width="16" height="16"></rect> <rect id="Rectangle" x="0" y="0" width="16" height="16"></rect>
<path d="M8.70710678,5.70710678 L13.2928932,10.2928932 C13.6834175,10.6834175 13.6834175,11.3165825 13.2928932,11.7071068 C13.1053568,11.8946432 12.8510029,12 12.5857864,12 L3.41421356,12 C2.86192881,12 2.41421356,11.5522847 2.41421356,11 C2.41421356,10.7347835 2.5195704,10.4804296 2.70710678,10.2928932 L7.29289322,5.70710678 C7.68341751,5.31658249 8.31658249,5.31658249 8.70710678,5.70710678 Z" id="Triangle" fill="#EEEEEE" transform="translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) "></path> <path d="M8.70710678,5.70710678 L13.2928932,10.2928932 C13.6834175,10.6834175 13.6834175,11.3165825 13.2928932,11.7071068 C13.1053568,11.8946432 12.8510029,12 12.5857864,12 L3.41421356,12 C2.86192881,12 2.41421356,11.5522847 2.41421356,11 C2.41421356,10.7347835 2.5195704,10.4804296 2.70710678,10.2928932 L7.29289322,5.70710678 C7.68341751,5.31658249 8.31658249,5.31658249 8.70710678,5.70710678 Z" id="Triangle" fill="#EEEEEE" transform="translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) "></path>
......
src/components/GoodList.vue 0 → 100644
View file @ 757f00bb
<template>
<div class="goods-list">
<div v-if="hasChildren">
<template v-for="(item, index) in list">
<div class="goods-list-head" :key="'head' + index">
<slot :data="item">
<h5>{{ item.title || "-" }}</h5>
<small>
{{ item.sub || "-" }}
<svg-icon icon-class="triangle-right" />
</small>
</slot>
</div>
<div class="goods-list-children" v-if="item.children.length > 0" :key="'children' + index">
<cr-row type="flex" class="goods-list-item" v-for="(it, idx) in item.children" :key="idx">
<cr-col span="7" class="goods-list-item-img">
<!-- <cr-tag type="primary">标签</cr-tag> -->
<cr-image width="72px" height="72px" :src="it.img" />
</cr-col>
<cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5>
<small>{{ it.sub || "-" }}</small>
<div class="goods-list-item-price">
<span class="goods-list-item-price-amount">¥{{ it.price || "--" }}</span>
<span class="goods-list-item-price-unit" v-if="it.unit">{{ it.unit }}/月起</span>
</div>
</cr-col>
</cr-row>
<cr-divider :hairline="false" :style="{ color: '#e3e5e8' }" />
</div>
</template>
</div>
<div v-else>
<cr-row type="flex" class="goods-list-item" v-for="(it, idx) in list" :key="idx">
<cr-col span="7" class="goods-list-item-img">
<cr-image width="72px" height="72px" :src="it.img" />
</cr-col>
<cr-col span="17" class="goods-list-item-info">
<h5>{{ it.title || "-" }}</h5>
<small>{{ it.sub || "-" }}</small>
<div class="goods-list-item-price">
<span class="goods-list-item-price-amount">¥{{ it.price || "--" }}</span>
<span class="goods-list-item-price-unit" v-if="it.unit">{{ it.unit }}/月起</span>
</div>
</cr-col>
</cr-row>
</div>
</div>
</template>
<script>
export default {
name: "GoodsList",
props: {
list: {
type: Array,
default() {
return [];
}
}
},
computed: {
// TODO
hasChildren: function() {
return this.list[0].children && this.list[0].children.length > 0;
}
}
};
</script>
<style lang="less" scoped>
@import "../style/var.less";
@import "../style/mixins.less";
.goods-list {
background-color: @white;
padding: 18px 20px;
.cell-title-mixin();
&-head {
margin-bottom: 15px;
/deep/ .svg-icon {
width: 16px;
height: 16px;
vertical-align: -0.3em;
}
}
// &-children {}
&-item {
margin: 16px 0 20px;
// &-img {}
&-price {
display: flex;
align-items: baseline;
margin-top: 4px;
&-amount {
font-size: @font-size-20;
line-height: @line-height-md;
color: @red;
font-weight: 600;
margin-right: 3px;
}
&-unit {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
}
}
}
</style>
src/components/SvgIcon.vue
View file @ 757f00bb
...@@ -34,15 +34,10 @@ export default { ...@@ -34,15 +34,10 @@ export default {
<style scoped> <style scoped>
.svg-icon { .svg-icon {
width: 5em; width: 1em;
height: 5em; height: 1em;
vertical-align: -0.15em; vertical-align: -0.15em;
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style> </style>
src/main.js
View file @ 757f00bb
...@@ -2,7 +2,6 @@ import Vue from "vue"; ...@@ -2,7 +2,6 @@ import Vue from "vue";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
import "@qg/cherry-ui/src/style/normalize.css";
import "./style/index.less"; import "./style/index.less";
import "amfe-flexible"; import "amfe-flexible";
import vConsole from "vconsole"; import vConsole from "vconsole";
......
src/service/cherry-ui.js
View file @ 757f00bb
...@@ -27,7 +27,7 @@ const { ...@@ -27,7 +27,7 @@ const {
// Radio, // Radio,
// RadioGroup, // RadioGroup,
// Switch, // Switch,
// Tag, Tag,
// PullRefresh, // PullRefresh,
// CardList, // CardList,
// Search, // Search,
...@@ -37,11 +37,11 @@ const { ...@@ -37,11 +37,11 @@ const {
// SwipeCell, // SwipeCell,
// Form, // Form,
Tabbar, Tabbar,
TabbarItem TabbarItem,
// Navbar, // Navbar,
// Progress, // Progress,
// Skeleton, // Skeleton,
// Sticky, Sticky
// Swipe, // Swipe,
// SwipeItem, // SwipeItem,
} = cherry; } = cherry;
...@@ -51,5 +51,7 @@ Vue.use(Image); ...@@ -51,5 +51,7 @@ Vue.use(Image);
Vue.use(Row); Vue.use(Row);
Vue.use(Col); Vue.use(Col);
Vue.use(Divider); Vue.use(Divider);
Vue.use(Tag);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
Vue.use(Sticky);
src/style/index.less
View file @ 757f00bb
@import "reset.less";
@import "var.less"; @import "var.less";
html,body { html,body {
height: 100%; height: 100%;
...@@ -8,7 +9,9 @@ body { ...@@ -8,7 +9,9 @@ body {
} }
.cr-button { .cr-button {
padding: 0 @padding-sm !important; padding: 0 @padding-sm !important;
font-weight: 600; &__text {
font-weight: bold !important;
}
&--warning { &--warning {
color: @button-warning-color !important; color: @button-warning-color !important;
background-color: @button-warning-background-color !important; background-color: @button-warning-background-color !important;
......
src/style/mixins.less 0 → 100644
View file @ 757f00bb
.cell-title-mixin {
h5 {
color: @black;
margin: 0 0 4px;
font-size: @font-size-16;
font-weight: bold;
line-height: @line-height-lg;
}
small {
display: block;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-md;
}
}
\ No newline at end of file
src/style/reset.less 0 → 100644
View file @ 757f00bb
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
}
li {
list-style: none;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
\ No newline at end of file
src/style/var.less
View file @ 757f00bb
...@@ -70,13 +70,13 @@ ...@@ -70,13 +70,13 @@
@button-small-height: 28px; @button-small-height: 28px;
@button-small-min-width: 48px; @button-small-min-width: 48px;
@button-small-line-height: 26px; @button-small-line-height: 28px;
@button-large-height: 52px; @button-large-height: 52px;
@button-large-line-height: 50px; @button-large-line-height: 52px;
@button-default-height: 36px; @button-default-height: 36px;
@button-default-line-height: 34px; @button-default-line-height: 36px;
@button-default-font-size: @font-size-12; @button-default-font-size: @font-size-12;
@button-default-color: @text-color; @button-default-color: @text-color;
@button-default-background-color: @white; @button-default-background-color: @white;
......
src/views/Goods/index.less
View file @ 757f00bb
@import "../../style/var.less"; @import "../../style/var.less";
.cell-title-mixin { @import "../../style/mixins.less";
h5 {
color: @black;
margin: 0 0 4px;
font-size: @font-size-16;
line-height: @line-height-lg;
}
small {
display: block;
color: @gray-4;
font-size: @font-size-12;
line-height: @line-height-md;
}
}
.container { .container {
background-color: @background-color; background-color: @background-color;
} }
.goods-head { .goods-head {
width: 100% !important;
/deep/ & > div {
width: 100% !important;
z-index: 100;
}
/deep/ .cr-tabbar { /deep/ .cr-tabbar {
background-color: #f5f5f5; background-color: #f5f5f5;
font-size: @font-size-16; font-size: @font-size-16;
...@@ -27,7 +20,7 @@ ...@@ -27,7 +20,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 26px; top: 26px;
transition: width .2s linear; // transition: width .2s linear;
content: " "; content: " ";
display: block; display: block;
width: 0; width: 0;
...@@ -44,65 +37,4 @@ ...@@ -44,65 +37,4 @@
} }
} }
} }
.goods-list {
background-color: @white;
padding: 18px 20px;
.cell-title-mixin();
&_head {
margin-bottom: 15px;
}
// &_children {}
&_item {
margin: 16px 0 20px;
// &-img {}
&-price {
display: flex;
align-items: baseline;
margin-top: 4px;
&-amount {
font-size: @font-size-20;
line-height: @line-height-md;
color: @red;
font-weight: 600;
margin-right: 3px;
}
&-unit {
font-size: @font-size-12;
color: @gray-4;
line-height: @line-height-sm;
}
}
}
}
.ai-test {
padding: 20px 16px 25.5px;
&_tip {
text-align: center;
.cell-title-mixin();
margin-bottom: @padding-md;
}
&_cell {
background-color: @white;
border-radius: @border-radius-md;
padding: 0 0 0 @padding-xs;
&-image {
.cr-image {
display: block;
margin: 0 auto;
}
}
&-title {
padding: 0 10px 0 5px;
.cell-title-mixin();
span {
color: @orange-dark;
}
}
&-btn {
width: 76px;
.cr-button {
border-radius: @border-radius-sm !important;
}
}
}
}
\ No newline at end of file
src/views/Goods/index.vue
View file @ 757f00bb
<template> <template>
<div class="container"> <div class="container">
<div class="goods-head"> <cr-sticky class="goods-head">
<cr-tabbar v-model="active" active-color="#333" inactive-color="#666"> <cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
<cr-tabbar-item>全部</cr-tabbar-item> <cr-tabbar-item>全部</cr-tabbar-item>
<cr-tabbar-item>成人</cr-tabbar-item> <cr-tabbar-item>成人</cr-tabbar-item>
<cr-tabbar-item>老年</cr-tabbar-item> <cr-tabbar-item>老年</cr-tabbar-item>
<cr-tabbar-item>少儿</cr-tabbar-item> <cr-tabbar-item>少儿</cr-tabbar-item>
</cr-tabbar> </cr-tabbar>
</div> </cr-sticky>
<div class="goods-list"> <good-list :list="goodsList" />
<div class="goods-list_head"> <ai-test-tip />
<h5>住院医疗险</h5>
<small>全网精选推荐文案全网精选</small>
</div>
<div class="goods-list_children">
<cr-row type="flex" class="goods-list_item">
<cr-col span="7" class="goods-list_item-img">
<cr-image width="72px" height="72px" :src="goodList[0].img" />
</cr-col>
<cr-col span="17" class="goods-list_item-info">
<h5>国民保·百万重疾险</h5>
<small>优势介绍 | 优势介绍 | 优势介绍 | 优势介绍</small>
<div class="goods-list_item-price">
<span class="goods-list_item-price-amount">¥2.3</span>
<span class="goods-list_item-price-unit">/月起</span>
</div>
</cr-col>
</cr-row>
<cr-divider :hairline="false" :style="{ color: '#e3e5e8' }" />
</div>
</div>
<div class="ai-test">
<div class="ai-test_tip">
<h5>不知道怎么买保险</h5>
<small>试一试智能风险评测，推荐最适合你的保险</small>
</div>
<cr-row class="ai-test_cell" type="flex" align="center">
<cr-col span="5" class="ai-test_cell-image">
<cr-image width="60px" height="68px" :src="aiImg" />
</cr-col>
<div class="ai-test_cell-title">
<h5>智能<span>风险测评</span></h5>
<small>AI小果：为您提供30s快速测评</small>
</div>
<div class="ai-test_cell-btn">
<cr-button type="warning">开始测评</cr-button>
</div>
</cr-row>
</div>
</div> </div>
</template> </template>
<script> <script>
import AiTestTip from "./modules/AiTestTip";
import GoodList from "@/components/GoodList";
import goodsList from "@/api/goodsList.mock";
export default { export default {
name: "GoodsList", name: "GoodsList",
components: {
AiTestTip,
GoodList
},
data() { data() {
return { return {
aiImg: require("../../assets/goods/ai-mongo.png"),
active: 0, active: 0,
goodList: [ goodsList
{
img: require("../../assets/goods/goods-01.png")
}
]
}; };
} }
}; };
......
src/views/Goods/modules/AiTestTip.vue 0 → 100644
View file @ 757f00bb
<template>
<div class="ai-test">
<div class="ai-test-tip">
<h5>不知道怎么买保险</h5>
<small>试一试智能风险评测，推荐最适合你的保险</small>
</div>
<cr-row class="ai-test-cell" type="flex" align="center">
<cr-col span="5" class="ai-test-cell-image">
<cr-image width="60px" height="68px" :src="aiImg" />
</cr-col>
<div class="ai-test-cell-title">
<h5>智能<span>风险测评</span></h5>
<small>AI小果：为您提供30s快速测评</small>
</div>
<div class="ai-test-cell-btn">
<cr-button type="warning">开始测评</cr-button>
</div>
</cr-row>
</div>
</template>
<script>
import aiImg from "@/assets/goods/ai-mongo.png";
export default {
name: "AiTestTip",
data() {
return {
aiImg
};
}
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../style/mixins.less";
.ai-test {
padding: 20px 16px 25.5px;
&-tip {
text-align: center;
.cell-title-mixin();
margin-bottom: @padding-md;
}
&-cell {
background-color: @white;
border-radius: @border-radius-md;
padding: 0 0 0 @padding-xs;
height: 72px;
&-image {
align-self: flex-end;
.cr-image {
display: block;
margin: 0 auto;
}
}
&-title {
padding: 8px 10px 0 5px;
.cell-title-mixin();
h5 {
margin: 0;
}
span {
color: @orange-dark;
}
}
&-btn {
width: 76px;
.cr-button {
border-radius: @border-radius-sm !important;
}
}
}
}
</style>
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