Skip to content

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

Merge branch 'feature/goods' into 'master' 

Feature/goods

See merge request !7
parents 73c40489 43b4510b
Hide whitespace changes
Inline Side-by-side
Showing with 259 additions and 219 deletions
src/components/Card.vue
View file @ 1cede3d4
<template> <template>
<div class="card" :style="style"> <div class="card" :style="styles">
<div class="card-header"> <div class="card-header">
<slot name="header"> <slot name="header">
<h5 class="card-title" v-if="title"> <h5 class="card-title" v-if="title">
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true default: ""
}, },
content: { content: {
type: String, type: String,
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
type: String, type: String,
default: "" default: ""
}, },
style: { styles: {
type: Object, type: Object,
default() { default() {
return {}; return {};
......
src/components/CrRadioBtn.vue
View file @ 1cede3d4
<template> <template>
<cr-radio-group v-model="value" class="radio-btn"> <cr-radio-group v-model="radioVal" class="radio-btn">
<cr-radio <cr-radio
:name="item.value" :name="item.value"
:class="{ checked: value === item.value }" :class="{ checked: value === item.value }"
...@@ -25,8 +25,17 @@ export default { ...@@ -25,8 +25,17 @@ export default {
}, },
watch: { watch: {
value(val) { value(val) {
this.radioVal = val;
this.$emit(CHANGE_EVENT, val);
},
radioVal(val) {
this.$emit(CHANGE_EVENT, val); this.$emit(CHANGE_EVENT, val);
} }
},
data() {
return {
radioVal: ""
};
} }
}; };
</script> </script>
......
src/components/GoodAction.vue
View file @ 1cede3d4
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<script> <script>
const LEFT_BTN_CLICK_EVENT = "leftClick"; const LEFT_BTN_CLICK_EVENT = "leftClick";
const RIGHT_BTN_CLICK_EVENT = "rightClick"; const RIGHT_BTN_CLICK_EVENT = "click";
export default { export default {
name: "GoodAction", name: "GoodAction",
props: { props: {
...@@ -45,7 +45,6 @@ export default { ...@@ -45,7 +45,6 @@ export default {
}, },
rightClick() { rightClick() {
// TODO // TODO
this.$router.push("/goods/inform");
this.$emit(RIGHT_BTN_CLICK_EVENT, {}); this.$emit(RIGHT_BTN_CLICK_EVENT, {});
} }
} }
......
src/views/Goods/detail.less
View file @ 1cede3d4
@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;
} }
.container { .container {
background-color: @background-color; background-color: @background-color;
margin-bottom: 80px; margin-bottom: 80px;
} }
.plan-tip { .plan-tip {
font-size: @font-size-11; font-size: @font-size-11;
color: @gray-5; color: @gray-5;
line-height: @line-height-sm; line-height: @line-height-sm;
margin-top: 14px; margin-top: 14px;
.svg-icon { .svg-icon {
margin-right: 3px; margin-right: 3px;
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
&_offset { &_offset {
margin-right: 4px; margin-right: 4px;
} }
} }
.insure-form { .insure-form {
&-title { &-title {
font-size: @font-size-16; font-size: @font-size-16;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
margin: @padding-md 0; margin: @padding-md 0;
} }
/deep/ .cr-cell { /deep/ .cr-cell {
&-group { &-group {
&::after { &::after {
display: none; display: none;
} }
} }
background-color: @gray-1; background-color: @gray-1;
border-radius: @border-radius-md; border-radius: @border-radius-md;
margin-bottom: 12px; margin-bottom: 12px;
&::after { align-items: center;
display: none; padding: 9px 16px;
} &::after {
&__title { display: none;
color: #333333; }
} &__title {
} color: #333333;
&-item_nobg { display: flex;
background-color: @white !important; align-items: center;
padding: 10px 0; }
overflow: initial; }
align-items: baseline; &-item_nobg {
margin-bottom: 0 !important; background-color: @white !important;
/deep/ .cr-cell { padding: 10px 0;
&__title { overflow: initial;
width: 31%; align-items: baseline;
flex: none; margin-bottom: 0 !important;
} /deep/ .cr-cell {
&__value { &__title {
width: 69%; width: 31%;
flex: none; flex: none;
overflow: initial; }
} &__value {
} width: 69%;
} flex: none;
&-switch { overflow: initial;
display: flex; }
justify-content: space-between; }
align-items: center; }
flex: 1; &-switch {
&-card { display: flex;
padding-top: 0; justify-content: space-between;
} align-items: center;
&-label { flex: 1;
font-size: @font-size-12; &-card {
color: @black; padding-top: 0;
margin-right: 4px; }
} &-label {
.cr-tag { font-size: @font-size-12;
margin: 0 auto 0 8px; color: @black;
color: @white !important; margin-right: 4px;
} }
&-option { .cr-switch {
display: flex; /deep/ &__control {
align-items: center; box-shadow: none;
justify-content: right; }
} }
} .cr-tag {
&-pact { margin: 0 auto 0 8px;
display: flex; color: @white !important;
justify-content: space-between; }
align-items: center; &-option {
padding: 14px 0; display: flex;
/deep/ .cr-checkbox__label { align-items: center;
font-size: @font-size-11; justify-content: right;
color: @gray-4; }
line-height: @line-height-lg; }
} &-pact {
&-link { display: flex;
margin-top: -3.5px; justify-content: space-between;
a { align-items: center;
font-size: @font-size-11; padding: 14px 0;
vertical-align: middle; /deep/ .cr-checkbox__label {
} font-size: @font-size-11;
i { color: @gray-4;
display: inline-block; margin-left: 5px;
width: 0; // line-height: @line-height-lg;
height: 12px; }
border-right: 1px @blue solid; &-link {
vertical-align: middle; margin-top: -3.5px;
margin: 0 3px; a {
} font-size: @font-size-11;
} vertical-align: middle;
} }
} i {
.intro { display: inline-block;
margin: 10px 0;; width: 0;
padding: 0; height: 12px;
.card-body { border-right: 1px @blue solid;
margin-bottom: 0; vertical-align: middle;
} margin: 0 3px;
} }
.det-body { }
.card { }
padding-bottom: 0; }
} .intro {
/deep/ .card-body { margin: 10px 0;;
margin-bottom: 0; padding: 0;
} .card-body {
} margin-bottom: 0;
}
}
.det-body {
.card {
padding-bottom: 0;
}
/deep/ .card-body {
margin-bottom: 0;
}
}
src/views/Goods/detail.vue
View file @ 1cede3d4
...@@ -15,14 +15,22 @@ ...@@ -15,14 +15,22 @@
<card title="请填写投保信息"> <card title="请填写投保信息">
<h6 class="insure-form-title">本人信息</h6> <h6 class="insure-form-title">本人信息</h6>
<cr-cell-group class="insure-form"> <cr-cell-group class="insure-form">
<cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" /> <cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" /> <cr-field
v-model="formData.selfIdNo"
placeholder="信息保密，仅用于投保"
label="身份证号"
/>
</cr-cell-group> </cr-cell-group>
<h6 class="insure-form-title">为谁投保</h6> <h6 class="insure-form-title">为谁投保</h6>
<cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" /> <cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" />
<cr-cell-group class="insure-form"> <cr-cell-group class="insure-form">
<cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" /> <cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
<cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" /> <cr-field
v-model="formData.relativeIdNo"
placeholder="信息保密，仅用于投保"
label="身份证号"
/>
<cr-cell title="缴费方式" class="insure-form-item_nobg"> <cr-cell title="缴费方式" class="insure-form-item_nobg">
<cr-radio-btn v-model="formData.payway" :radio-data="paywayOptions" /> <cr-radio-btn v-model="formData.payway" :radio-data="paywayOptions" />
</cr-cell> </cr-cell>
...@@ -33,7 +41,7 @@ ...@@ -33,7 +41,7 @@
<h5 class="card-title">开通次年自动续保</h5> <h5 class="card-title">开通次年自动续保</h5>
<cr-tag type="warning">小果建议您开通</cr-tag> <cr-tag type="warning">小果建议您开通</cr-tag>
<div class="insure-form-switch-option"> <div class="insure-form-switch-option">
<span class="insure-form-switch-label">已开通</span> <span class="insure-form-switch-label">{{ formData.auto ? "已" : "未" }}开通</span>
<cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" /> <cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
</div> </div>
</div> </div>
...@@ -44,14 +52,14 @@ ...@@ -44,14 +52,14 @@
<card <card
title="投保须知" title="投保须知"
:option="['查看完整费率表']" :option="['查看完整费率表']"
:footer="true" footer="协议"
@option-click="openIframePupop(6)" @option-click="openIframePupop(6)"
> >
<compactCellGroup :cell-data="noticeCellData" /> <compactCellGroup :cell-data="noticeCellData" />
<div class="insure-form-pact" slot="footer"> <div class="insure-form-pact" slot="footer">
<cr-checkbox <cr-checkbox
shape="round" shape="round"
icon-size="12px" icon-size="13px"
v-model="formData.pact" v-model="formData.pact"
checked-color="#FFC842" checked-color="#FFC842"
> >
...@@ -69,7 +77,13 @@ ...@@ -69,7 +77,13 @@
</div> </div>
</card> </card>
<card class="intro"> <card class="intro">
<cr-image :src="item" v-for="(item, index) in introImg" :key="index" /> <cr-image
:src="item"
v-for="(item, index) in introImg"
:key="index"
width="100%"
height="auto"
/>
</card> </card>
<cps-demo /> <cps-demo />
<cps-process @click="openIframePupop" /> <cps-process @click="openIframePupop" />
...@@ -77,7 +91,7 @@ ...@@ -77,7 +91,7 @@
</div> </div>
<detail-footer /> <detail-footer />
<copyright /> <copyright />
<good-action /> <good-action @click="goInsureState = true" />
<protocol-iframe <protocol-iframe
v-model="popupShow" v-model="popupShow"
:title="pupopData.title" :title="pupopData.title"
...@@ -176,27 +190,36 @@ export default { ...@@ -176,27 +190,36 @@ export default {
popupShow: false, popupShow: false,
currentPupopIndex: null, currentPupopIndex: null,
popupArray: [ popupArray: [
{ title: "保险条款", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }, {
{ title: "健康告知", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }, title: "保险条款",
url: "http://mangguo-contract.qthbx.com/taikang-bao-xian-tiao-kuan-v1/"
},
{
title: "健康告知",
url: "http://mangguo-contract.qthbx.com/taikang-jian-kang-gao-zhi-v1/"
},
{ {
title: "投保须知及声明", title: "投保须知及声明",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" url: "http://mangguo-contract.qthbx.com/taikang-toubaoxuzhi-v1/"
}, },
{ {
title: "平台服务协议", title: "平台服务协议",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
}, },
{ title: "保险计划" }, { title: "保险计划" },
{ title: "保险计划" }, { title: "保险计划" },
{ title: "完整费率" }, { title: "完整费率" },
{ title: "自动续保", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" } {
title: "自动续保服务协议",
url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
}
], ],
formData: { formData: {
planValue: "3", planValue: "3",
insured: "1", insured: "1",
payway: "1", payway: "1",
auto: true, auto: false,
pact: true pact: false
}, },
goInsureState: false goInsureState: false
}; };
......
src/views/Goods/index.vue
View file @ 1cede3d4
<template> <template>
<div class="container"> <div class="container">
<cr-sticky 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>
</cr-sticky> </cr-sticky> -->
<good-list :list="goodsList" /> <good-list :list="goodsList" />
<ai-test-tip /> <ai-test-tip />
<tabbar></tabbar> <tabbar></tabbar>
......
src/views/Goods/modules/CompactCellGroup.vue
View file @ 1cede3d4
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<cr-cell <cr-cell
v-for="(item, index) in cellData" v-for="(item, index) in cellData"
:key="index" :key="index"
:title="!item.title.needSlot && (item.title.tpl || item.title)" :title="item.title.tpl || item.title"
:value="!item.value.needSlot && (item.value.tpl || item.value)" :value="item.value.tpl || item.value"
:class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }" :class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }"
@click="cellClick(item)" @click="cellClick(item)"
> >
...@@ -103,7 +103,7 @@ export default { ...@@ -103,7 +103,7 @@ export default {
&_br { &_br {
/deep/ .cr-cell__value { /deep/ .cr-cell__value {
flex: none; flex: none;
width: 165px; width: 70%;
} }
} }
} }
......
src/views/Goods/modules/DetailHeader.vue
View file @ 1cede3d4
...@@ -78,7 +78,6 @@ export default { ...@@ -78,7 +78,6 @@ export default {
font-weight: normal !important; font-weight: normal !important;
strong { strong {
font-weight: bold; font-weight: bold;
margin: 0 3px;
} }
} }
} }
......
src/views/Goods/modules/GoInsureDialog.vue
View file @ 1cede3d4
<template> <template>
<transition name="panel-fade"> <cr-popup
<cr-popup v-model="show"
v-model="show" :style="{ backgroundColor: 'transparent' }"
:style="{ backgroundColor: 'transparent' }" closeable
closeable get-container="body"
get-container="body" close-icon="close"
close-icon="close" class="panel-wrap"
class="panel-wrap" >
> <div class="panel">
<div class="panel"> <div class="panel-head">
<div class="panel-head"> <h4>
<h4> 立即拥有
立即拥有 <br />30万重疾轻症保障
<br />30万重疾轻症保障 </h4>
</h4> </div>
</div> <div class="panel-body">
<div class="panel-body"> <compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
<compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" /> <div class="pay-tip">*不满意可随时退保</div>
<div class="pay-tip">*不满意可随时退保</div> <div class="pay-protocol">
<div class="pay-protocol"> <div class="pay-protocol-tip">投保前请阅读</div>
<div class="pay-protocol-tip">投保前请阅读</div> <div class="pay-protocol-link">
<div class="pay-protocol-link"> <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
<a href="javascript:;" @click="openIframePupop(0)">保险条款</a> <i></i>
<i></i> <a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
<a href="javascript:;" @click="openIframePupop(1)">健康告知</a> <i></i>
<i></i> <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
<a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a> <i></i>
<i></i> <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
<a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
</div>
</div> </div>
<cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
</div> </div>
<cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
</div> </div>
</cr-popup> </div>
</transition> </cr-popup>
</template> </template>
<script> <script>
...@@ -84,33 +82,6 @@ export default { ...@@ -84,33 +82,6 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@import "../../../style/var.less"; @import "../../../style/var.less";
.panel-fade-enter-active {
animation: dialog-fadein 0.4s;
.panel {
animation: dialog-zoom 0.4s;
}
}
@keyframes dialog-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes dialog-zoom {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.panel { .panel {
background-color: @white; background-color: @white;
border-radius: @border-radius-md; border-radius: @border-radius-md;
...@@ -149,6 +120,36 @@ export default { ...@@ -149,6 +120,36 @@ export default {
} }
} }
.pay { .pay {
&-det {
padding-left: 34px;
position: relative;
&::after,
&::before {
content: " ";
display: block;
position: absolute;
left: 18px;
width: 8px;
height: 8px;
border-radius: @border-radius-max;
border: 1px solid @black;
}
&::before {
background-color: @orange-light;
top: 24px;
}
&::after {
bottom: 26.5px;
}
/deep/ & > div:first-child {
position: absolute;
left: 22.5px;
top: 35px;
height: 14px;
width: 0;
border-right: 1px dotted @gray-4;
}
}
&-tip { &-tip {
font-size: @font-size-12; font-size: @font-size-12;
color: @gray-4; color: @gray-4;
......
vue.config.js
View file @ 1cede3d4
...@@ -41,7 +41,6 @@ module.exports = { ...@@ -41,7 +41,6 @@ module.exports = {
priority: 10, priority: 10,
chunks: "initial" // only package third parties that are initially dependent chunks: "initial" // only package third parties that are initially dependent
}, },
// TODO 🤨打包没用，emmmmmmmmmmm
cherryUI: { cherryUI: {
name: "chunk-cherryUI", // split cherryUI into a single package name: "chunk-cherryUI", // split cherryUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
......
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