Skip to content

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

Merge branch 'feature/add_policy' into 'master' 

Feature/add policy

See merge request !31
parents ba1be9d7 d65b2027
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2584 additions and 428 deletions
src/App.vue
View file @ aa88ae9c
......@@ -22,9 +22,6 @@ export default {
},
methods: {
...mapActions(["setIsLoading"])
},
mounted() {
console.log(this.isLoading);
}
};
</script>
......
src/api/goodsList.mock.js
View file @ aa88ae9c
......@@ -27,7 +27,8 @@ export default [
icon_closed: medical_closed,
icon: medical,
guarantee_title: "医疗保障",
guarantee_sub: "看病报销医药费,最高600万"
guarantee_sub: "看病报销医药费,最高600万",
compony: "泰康在线"
},
{
id: "HTDQZJX001",
......@@ -44,7 +45,8 @@ export default [
icon_closed: illness_closed,
icon: illness,
guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症"
guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险"
},
{
id: "BNZJX001",
......@@ -62,7 +64,8 @@ export default [
icon_closed: illness_closed,
icon: illness,
guarantee_title: "重疾保障",
guarantee_sub: "100种重症+40种轻症"
guarantee_sub: "100种重症+40种轻症",
compony: "华泰财险"
},
{
id: "ZAYWX001",
......@@ -79,7 +82,8 @@ export default [
icon_closed: casualty_closed,
icon: casualty,
guarantee_title: "意外保障",
guarantee_sub: "意外风险覆盖全,最高100万保额"
guarantee_sub: "意外风险覆盖全,最高100万保额",
compony: "众安保险"
},
{
id: "HGSX001",
......@@ -96,6 +100,7 @@ export default [
icon_closed: life_closed,
icon: life,
guarantee_title: "人寿保障",
guarantee_sub: "最高350万保额,顶梁柱必备"
guarantee_sub: "最高350万保额,顶梁柱必备",
compony: "华泰财险"
}
];
src/api/policy.js
View file @ aa88ae9c
......@@ -6,6 +6,6 @@ export const getPolicyList = () => {
};
// 查询订单详情
export const addPolicyDetail = param => {
return req.post("user/info", param);
export const getPolicyDetail = orderNo => {
return req.get(`/policy_order/detail?orderNo=${orderNo}`);
};
src/assets/icons/svg/retest.svg 0 → 100644
View file @ aa88ae9c
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>智能测评报告</title>
<desc>Created with Sketch.</desc>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智能测评报告" transform="translate(-142.000000, -1828.000000)" fill-rule="nonzero">
<g id="Group-4" transform="translate(123.000000, 1817.000000)">
<g id="编组" transform="translate(19.000000, 9.000000)">
<g id="刷新" transform="translate(0.000000, 2.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="1" y="1" width="16" height="16"></rect>
<path d="M15.3883125,9.86975 C14.9662812,13.0226875 12.2659219,15.4544375 8.99748437,15.4544375 C6.63620312,15.4544375 4.5715,14.1851719 3.44810937,12.29175 L4.63720312,11.1026563 L1.85390625,11.1026563 L1.85390625,13.8859531 L2.88276562,12.8570938 C4.162375,14.8847656 6.42259375,16.2316719 8.9975,16.2316719 C12.6957812,16.2316719 15.745,13.4531406 16.1718125,9.86975 L15.3883125,9.86975 L15.3883125,9.86975 Z M8.99748437,2.557875 C11.2990156,2.557875 13.3187812,3.76373438 14.4597812,5.57804688 L13.372875,6.66495313 L16.1561562,6.66495313 L16.1561562,3.88167188 L15.1032187,4.93460938 L15.0219375,5.01589063 C13.7280156,3.06609375 11.5129219,1.780625 8.99748437,1.780625 C5.29920312,1.780625 2.24998437,4.55915625 1.82317187,8.14254688 L2.60667187,8.14254688 C3.02870312,4.989625 5.72904687,2.557875 8.99748437,2.557875 Z" id="形状" fill="#999999"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/understand-not.svg 0 → 100644
View file @ aa88ae9c
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="92.843376%" y1="61.7618573%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#747AFF" offset="0%"></stop>
<stop stop-color="#C3C6FF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.2523376%" y1="70.2276035%" x2="85.8062056%" y2="70.2276035%" id="linearGradient-2">
<stop stop-color="#FFCEC7" offset="0%"></stop>
<stop stop-color="#FFA096" offset="100%"></stop>
</linearGradient>
</defs>
<g id="运营" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="投票弹窗" transform="translate(-238.000000, -316.000000)" fill-rule="nonzero">
<g id="Group-3-Copy" transform="translate(258.000000, 336.000000) scale(1, -1) translate(-258.000000, -336.000000) translate(238.000000, 316.000000)">
<g id="dianzan" transform="translate(1.000000, 15.382979)" fill="url(#linearGradient-1)">
<path d="M7.41162071,22.4304324 L7.41162071,1.39544697 C7.41162071,0.748216662 6.56457836,0.208858051 5.61165565,0.208858004 L2.75288767,0.208858004 C1.27056352,0.208858004 0,1.50331866 0,3.01352275 L0,20.7044848 C0,22.3225606 1.16468325,23.6170213 2.75288767,23.6170213 L5.61165565,23.6170213 C6.56457832,23.6170213 7.41162066,23.0776627 7.41162071,22.4304324 Z" id="Shape"></path>
</g>
<path d="M35.8347921,14.8367347 L27.2584882,14.8367347 C26.6232064,14.728863 26.4114458,14.0816327 26.3055655,13.7580175 L26.3055655,5.88338192 C26.3055655,3.72594753 24.6114808,2 22.4938749,2 C20.5880295,2 18.9998251,3.51020409 18.6821842,5.34402336 C17.517501,12.787172 13.0705286,15.2682216 10.2117606,16.0233236 C10.3176409,16.3469388 10.3176409,16.5626823 10.3176409,16.7784257 L10.3176409,37.7055393 C10.3176409,38.1370262 10.2117605,38.5685131 10,39 L30.7525379,39 C32.7642636,38.5685131 34.1407074,37.8134111 35.0936301,35.7638484 L39.4347222,20.2303207 C40.2817645,17.425656 38.9053207,14.728863 35.8347921,14.8367347 Z" id="Path" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/svg/understand.svg 0 → 100644
View file @ aa88ae9c
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="98.9906353%" y1="70.2901373%" x2="50%" y2="70.2901373%" id="linearGradient-1">
<stop stop-color="#FFE677" offset="0%"></stop>
<stop stop-color="#FFC842" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.2523376%" y1="70.2276035%" x2="85.8062056%" y2="70.2276035%" id="linearGradient-2">
<stop stop-color="#FFCEC7" offset="0%"></stop>
<stop stop-color="#FFA096" offset="100%"></stop>
</linearGradient>
</defs>
<g id="运营" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="投票弹窗" transform="translate(-96.000000, -316.000000)" fill-rule="nonzero">
<g id="Group-6" transform="translate(38.000000, 78.000000)">
<g id="Group-5">
<g id="Group-3" transform="translate(58.000000, 238.000000)">
<g id="dianzan" transform="translate(0.000000, 14.382979)" fill="url(#linearGradient-1)">
<path d="M7.41162071,22.4304324 L7.41162071,1.39544697 C7.41162071,0.748216662 6.56457836,0.208858051 5.61165565,0.208858004 L2.75288767,0.208858004 C1.27056352,0.208858004 0,1.50331866 0,3.01352275 L0,20.7044848 C0,22.3225606 1.16468325,23.6170213 2.75288767,23.6170213 L5.61165565,23.6170213 C6.56457832,23.6170213 7.41162066,23.0776627 7.41162071,22.4304324 Z" id="Shape"></path>
</g>
<path d="M34.728737,13.8367347 L26.152433,13.8367347 C25.5171513,13.728863 25.3053907,13.0816327 25.1995104,12.7580175 L25.1995104,4.88338192 C25.1995104,2.72594753 23.5054256,1 21.3878197,1 C19.4819744,1 17.89377,2.51020409 17.5761291,4.34402336 C16.4114458,11.787172 11.9644734,14.2682216 9.10570544,15.0233236 C9.21158576,15.3469388 9.21158576,15.5626823 9.21158571,15.7784257 L9.21158571,36.7055393 C9.21158571,37.1370262 9.1057054,37.5685131 8.89394486,38 L29.6464828,38 C31.6582084,37.5685131 33.0346523,36.8134111 33.9875749,34.7638484 L38.3286671,19.2303207 C39.1757094,16.425656 37.7992656,13.728863 34.728737,13.8367347 Z" id="Path" fill="url(#linearGradient-2)"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/router/routes.js
View file @ aa88ae9c
......@@ -14,6 +14,16 @@ export default [
name: "SmartMeasure",
component: () => import("../views/Home/SmartMeasure/index.vue")
},
{
path: "/home/smart-measure/report",
name: "Report",
component: () => import("../views/Home/SmartMeasure/Report/index.vue")
},
{
path: "/home/activity",
name: "Activity",
component: () => import("../views/Home/Activity/index.vue")
},
{
path: "/goods",
name: "Goods",
......@@ -70,10 +80,15 @@ export default [
component: () => import("../views/Policy/index.vue")
},
{
path: "/policy/detail",
path: "/policy/detail/:orderNo",
name: "Detail",
component: () => import("../views/Policy/Detail/index.vue")
},
{
path: "/policy/success",
name: "Sucess",
component: () => import("../views/Policy/Success/index.vue")
},
{
path: "/policy/add",
name: "AddPolicy",
......
src/service/cherry-ui.js
View file @ aa88ae9c
......@@ -41,9 +41,9 @@ const {
// Navbar,
Progress,
// Skeleton,
Sticky
// Swipe,
// SwipeItem,
Sticky,
Swipe,
SwipeItem
} = cherry;
Vue.use(Button);
......@@ -77,3 +77,5 @@ Vue.use(Form);
Vue.use(Picker);
Vue.use(Notify);
Vue.use(Loading);
Vue.use(Swipe);
Vue.use(SwipeItem);
src/service/utils.js
View file @ aa88ae9c
......@@ -128,3 +128,53 @@ export function parseSearch(searchString) {
return result;
}, {});
}
/**
* 时间转换
* @param {String} time 需要转换的时间
* @param {String} cFormat 格式 {y}-{m}-{d} {h}:{i}:{s}
* @return: {String} timeStr 转换完成的时间
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return "-";
}
if (time == null) {
return "-";
}
const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
let date;
if (time == "") {
date = new Date();
} else if (typeof time === "object") {
date = time;
} else {
if (("" + time).length === 10) time = parseInt(time) * 1000;
if (String(time).indexOf("T") > -1) {
time = time.replace(/T/g, " ").replace(/\..*/g, "");
}
if (String(time).indexOf("-") > -1 && String(time).indexOf("T") == -1) {
time = time.replace(/-/g, "/");
}
date = new Date(time);
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value];
}
if (result.length > 0 && value < 10) {
value = "0" + value;
}
return value || 0;
});
return timeStr;
}
src/style/index.less
View file @ aa88ae9c
@import "reset.less";
@import "var.less";
@import "mixins.less";
html,
body,
#app {
height: 100%;
}
body {
font-family: @font-family;
background-color: @background-color;
}
a {
color: @blue;
font-size: @font-size-12;
}
input::-webkit-input-placeholder {
color: #AAAAAA;
}
.cr-button {
padding: 0 @padding-sm !important;
padding: 0 @padding-sm !important;
&__text {
font-weight: bold !important;
}
&--warning {
color: @button-warning-color !important;
background-color: @button-warning-background-color !important;
border: 1px solid @button-warning-border-color !important;
border-radius: @border-radius-md !important;
color: @button-warning-color !important;
background-color: @button-warning-background-color !important;
border: 1px solid @button-warning-border-color !important;
border-radius: @border-radius-md !important;
}
&--default {
color: @button-default-color !important;
background-color: @button-default-background-color !important;
border: 1px solid @button-default-border-color !important;
border-radius: @border-radius-md !important;
color: @button-default-color !important;
background-color: @button-default-background-color !important;
border: 1px solid @button-default-border-color !important;
border-radius: @border-radius-md !important;
}
&--large {
height: @button-large-height !important;
line-height: @button-large-line-height !important;
height: @button-large-height !important;
line-height: @button-large-line-height !important;
}
&--small {
height: @button-small-height !important;
line-height: @button-small-line-height !important;
height: @button-small-height !important;
line-height: @button-small-line-height !important;
}
}
.cr-tag {
border-radius: 8px 2px 8px 2px !important;
background-color: @tag-default-background-color !important;
color: @tag-default-color !important;
background-color: @tag-default-background-color !important;
color: @tag-default-color !important;
padding: 1px 6px 2px !important;
font-size: 10px !important;
font-weight: bold;
&--round {
border-radius: 1em !important;
}
......@@ -58,14 +69,17 @@ input::-webkit-input-placeholder {
background-color: @tag-primary-background-color !important;
color: @tag-primary-color !important;
}
&--success {
background-color: @tag-success-background-color !important;
color: @tag-success-color !important;
}
&--danger {
background-color: @tag-danger-background-color !important;
color: @tag-danger-color !important;
}
&--warning {
background-color: @tag-warning-background-color !important;
color: @tag-warning-color !important;
......@@ -94,6 +108,7 @@ input::-webkit-input-placeholder {
}
}
}
.cr-notify {
font-size: @font-size-14;
}
......@@ -104,9 +119,12 @@ input::-webkit-input-placeholder {
.cr-picker {
font-size: 14px;
}.table {
}
.table {
margin: 0;
width: 100%;
thead {
th {
color: @gray-5;
......@@ -115,16 +133,19 @@ input::-webkit-input-placeholder {
padding: 12px 0 12px 18px;
text-align: left;
background-color: @gray-1;
&:first-child {
border-top-left-radius: @border-radius-lg;
border-bottom-left-radius: @border-radius-lg;
}
&:last-child {
border-top-right-radius: @border-radius-lg;
border-bottom-right-radius: @border-radius-lg;
}
}
}
tbody {
th {
color: @black;
......@@ -134,6 +155,7 @@ input::-webkit-input-placeholder {
text-align: left;
border-bottom: 1px solid #ece9e9;
}
td {
color: @black;
font-size: @font-size-12;
......@@ -143,25 +165,51 @@ input::-webkit-input-placeholder {
}
}
}
.searching {
animation: search-move 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes search-move {
0% {
transform: translate(49.369px, 66.02px) rotate(-45deg);
}
25% {
transform: translate(39.369px, 66.02px) rotate(-45deg);
}
50% {
transform: translate(39.369px, 76.02px) rotate(-45deg);
}
75% {
transform: translate(49.369px, 76.02px) rotate(-45deg);
}
100% {
transform: translate(49.369px, 66.02px) rotate(-45deg);
}
}
@-webkit-keyframes free_download {
0% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes free_download {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
\ No newline at end of file
src/views/Home/Activity/index.less 0 → 100644
View file @ aa88ae9c
@import "../../../style/index.less";
.font-public() {
font-size: 12px;
color: #666666;
font-weight: 400;
line-height: 17px;
}
.activity {
padding-bottom: 44px;
background: url('../../../assets/images/home/bg@2x.png') no-repeat 0 0 /cover;
&:before {
z-index: 1;
position: absolute;
top: 22px;
left: 0;
width: 100px;
height: 32px;
content: '';
background: url('../../../assets/logo-top.png') no-repeat 0 0 /cover;
}
&-detail {
position: absolute;
top: 29px;
right: 15px;
z-index: 1;
display: flex;
align-items: center;
&-text {
margin-right: 4px;
font-size: 11px;
color: #FFFFFF;
line-height: 13px;
}
&-svg {
padding-top: 2px;
width: 8px;
height: 8px;
}
}
&-title {
margin-top: 67px;
padding: 0 26px;
}
&-desc {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 13px;
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
line-height: 17px;
span {
color: #F94C4C;
}
}
&-prize {
margin: 20px 7px;
height: 362px;
background: url('../../../assets/images/home/zhuanpan.png') no-repeat 0 0 /contain;
&-pointer {
transform: none;
width: 100%;
height: 100%;
// width: 82px;
// height: 100px;
background: url('../../../assets/images/home/zhizhen.png') no-repeat center/82px 100px;
}
}
&-award {
margin: 29px 40px 40px;
padding: 10px;
height: 345px;
background: linear-gradient(123deg, #FFFDFD 0%, #FFF7AF 100%);
border-radius: 14px;
&-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background: #fff;
.Aa-container-congratulate {
margin: 32px 0 8px;
font-size: 24px;
color: #F94C4C;
font-weight: 600;
line-height: 33px;
}
.Aa-container-public {
.font-public();
}
.Aa-container-progress {
.font-public();
color: #F94C4C;
}
.Aa-container-qrcode {
margin: 18px 0 16px;
width: 140px;
height: 140px;
}
.Aa-container-focus {
font-size: 11px;
color: #999999;
line-height: 13px;
}
}
}
&-swiper {
margin: 0 38px;
height: 26px;
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
line-height: 17px;
background: url('../../../assets/images/home/zhognjiangxinxi.png') no-repeat 0 0 /contain;
&-container {
height: 100%;
width: 100%;
@{deep} .cr-swipe-item {
display: flex;
justify-content: center;
align-items: center;
height: 26px !important;
p:first-child {
margin-right: 10px;
}
span {
color: #F94C4C;
}
}
}
}
&-button {
display: flex;
justify-content: center;
margin: 26px 21px 0;
padding-top: 18px;
height: 75px;
font-size: 20px;
color: #B94A00;
font-weight: 600;
line-height: 28px;
background: url('../../../assets/images/home/button.png') no-repeat 0 0 /contain;
-webkit-animation: free_download .8s linear alternate infinite;
animation: free_download .8s linear alternate infinite;
}
&-withdrawal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 10px 24px;
height: 139px;
background: url('../../../assets/images/home/jiangpin.png') no-repeat 0 0 /contain;
p:first-child {
font-size: 14px;
color: #333333;
line-height: 17px;
}
p:last-child {
font-size: 32px;
color: #FF6702;
font-weight: 600;
line-height: 45px;
}
}
&-vote {
margin: 0 20px 24px;
padding: 20px 16px;
background: url('../../../assets/images/home/baoxianbg.png') no-repeat center / 100% 100%;
&-title {
font-size: 16px;
color: #FFFFFF;
font-weight: 600;
line-height: 22px;
}
&-desc {
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
line-height: 17px;
span {
color: #FFC842;
}
}
&-body {
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
background: #FFFFFF;
border-radius: 14px;
.Av-body-left {
display: flex;
align-items: center;
.Avb-left-image {
margin-right: 12px;
width: 32px;
height: 32px;
}
.Avb-left-text {
color: #242629;
font-weight: 600;
line-height: 17px;
p:first-child {
font-size: 12px;
}
p:last-child {
font-size: 17px;
}
}
}
.Av-body-right {
width: 76px;
height: 36px;
background: #FFC842 !important;
border-radius: 8px !important;
font-size: 12px;
color: #333333 !important;
font-weight: 600;
line-height: 17px;
}
}
}
&-intro {
margin: 24px 20px 0;
padding: 20px;
background: rgba(0, 0, 0, .1);
border-radius: 14px;
font-size: 11px;
color: rgba(255, 255, 255, .7);
font-weight: 400;
line-height: 16px;
p:first-child {
margin-bottom: 15px;
font-size: 16px;
color: #FFFFFF;
font-weight: 600;
line-height: 22px;
}
}
}
\ No newline at end of file
src/views/Home/Activity/index.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="activity">
<div class="activity-detail" @click="modal.detail = true">
<span class="activity-detail-text">活动详情</span>
<svg-icon class-name="activity-detail-svg" icon-class="arrow" />
</div>
<cr-image
class="activity-title"
width=""
height=""
fit="cover"
src="@/assets/images/home/biaoti@2x.png"
/>
<div class="activity-desc">
<p>参与投票即可抽取最高<span>18888</span>元红包</p>
<p>芒果保险老用户专享</p>
</div>
<div class="activity-prize">
<div class="activity-prize-pointer" @click="gameStart"></div>
</div>
<!-- <div class="activity-award">
<div class="activity-award-container">
<p class="Aa-container-congratulate">恭喜您已中奖</p>
<p class="Aa-container-public">快关注「芒果保险」公众号</p>
<p class="Aa-container-progress">查看红包进度</p>
<cr-image
class="Aa-container-qrcode"
width=""
height=""
fit="cover"
src="@/assets/images/home/qrcode.jpg"
/>
<p class="Aa-container-focus">截图或长按保存二维码</p>
<p class="Aa-container-focus">使用「微信」扫一扫即可关注</p>
</div>
</div> -->
<div class="activity-swiper">
<cr-swipe
class="activity-swiper-container"
:autoplay="3000"
:show-indicators="false"
vertical
>
<cr-swipe-item>
<p>138****8888</p>
<p>刚刚抽中了<span>18888</span>元红包</p>
</cr-swipe-item>
<cr-swipe-item>
<p>138****8887</p>
<p>刚刚抽中了<span>18888</span>元红包</p>
</cr-swipe-item>
<cr-swipe-item>
<p>138****8886</p>
<p>刚刚抽中了<span>18888</span>元红包</p>
</cr-swipe-item>
</cr-swipe>
</div>
<div class="activity-button" @click="modal.guide = true">立即抽奖 100%领钱</div>
<div class="activity-withdrawal">
<p>累计可提现红包</p>
<p>5元</p>
</div>
<div class="activity-vote">
<p class="activity-vote-title">投保“国民保·百万医疗险”的用户</p>
<p class="activity-vote-desc">参与投票，即可抽取最高<span>18888</span>元可提现红包</p>
<div class="activity-vote-body">
<div class="Av-body-left">
<cr-image
class="Avb-left-image"
width=""
height=""
fit="cover"
src="@/assets/images/home/vote@2x.png"
/>
<div class="Avb-left-text">
<p>您会为家人购买</p>
<p>百万医疗险吗？</p>
</div>
</div>
<cr-button class="Av-body-right" @click="modal.vote = true">
去投票
</cr-button>
</div>
</div>
<div class="activity-intro">
<p>奖品使用说明</p>
<p>1、“红包”仅限芒果保险用户可领取；</p>
<p>2、领取“红包”的手机账号需与提现的手机账号保持一致；</p>
<p>3、“红包”将通过“芒果保险”微信公众号发放至“微信零钱”；</p>
<p>4、请查看“活动详情”，了解更详细的“红包”发放规则、发放时间等信息。</p>
</div>
<Modal v-model="modal.winning" type="winning"></Modal>
<Modal v-model="modal.guide" type="guide"></Modal>
<Modal v-model="modal.vote" type="vote"></Modal>
<Modal v-model="modal.detail" type="detail"> </Modal>
</div>
</template>
<script>
import Modal from "../modules/Modal";
export default {
name: "Activity",
components: {
Modal
},
data() {
return {
isGoing: false,
modal: {
winning: false,
guide: false,
vote: false,
detail: false
}
};
},
computed: {},
methods: {
gameStart() {
this.$nextTick(() => {
if (this.isGoing) return;
this.isGoing = true;
console.log("游戏开始");
const turntable = document.querySelector(".activity-prize");
const pointer = document.querySelector(".activity-prize-pointer");
// 1. 计算旋转角度
let rotateItemDeg = (3 * 360) / 6; // 每个item旋转角度, 第一个不用旋转
let rotate = rotateItemDeg + 5 * 360;
let rotateSpeed = ((rotateItemDeg / 360) * 1 + 5).toFixed(2);
// 2. 重置转盘样式
turntable.removeAttribute("style");
pointer.removeAttribute("style");
// 3. 保证下一次旋转动画生效
setTimeout(() => {
turntable.style.transform = `rotate(${rotate}deg)`;
pointer.style.transform = `rotate(-${rotate}deg)`;
pointer.style.transition = `transform ${rotateSpeed}s ease-out`;
turntable.style.transition = `transform ${rotateSpeed}s ease-out`;
}, 10);
// 4. 动画结束，显示中奖结果，中奖结果如何显示，视实际情况而定
setTimeout(() => {
console.log("中奖了");
this.isGoing = false;
this.modal.winning = true;
}, rotateSpeed * 1000);
});
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Home/SmartMeasure/Report/index.less 0 → 100644
View file @ aa88ae9c
@import "../../../../style/index.less";
.button() {
height: 28px;
border-radius: 8px;
border: 1px solid #787EFF;
font-size: 14px;
font-weight: 400;
color: #787EFF;
line-height: 16px;
&:first-child {
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: 22px) {
margin-bottom: @marginBottom;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: @lineHeight;
}
.card-head() {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
span:first-child {
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 400;
color: #787EFF;
line-height: 24px;
}
.svg-icon {
padding: 4px 0;
width: 16px;
height: 16px;
}
}
.card-body(@marginBottom: 0) {
margin-bottom: @marginBottom;
div {
display: flex;
justify-content: space-between;
span:first-child {
font-size: 12px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 24px;
}
}
}
.report {
position: relative;
background: #F6F6F6;
&:before {
position: absolute;
width: 375px;
height: 194px;
border: 0;
content: '';
background: linear-gradient(0deg, #F1F1F1 0%, #FFC842 100%);
}
&: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;
}
&-container {
position: absolute;
left: 0;
right: 0;
&-head {
display: flex;
margin: 39px 0 32px 16px;
.Rc-head-left {
margin-right: 16px;
width: 50px;
height: 50px;
}
.Rc-head-right {
display: flex;
flex-direction: column;
align-items: space-between;
color: #242629;
line-height: 24px;
p:first-child {
font-size: 12px;
}
p:last-child {
font-size: 20px;
font-weight: 600;
}
}
}
&-degree {
.card-container();
.Rc-degree-title {
.card-title(24px);
span {
color: #FF6702;
}
}
.Rc-degree-progress {
margin-bottom: 4px;
@{deep} .cr-progress__track {
height: 12px;
border-radius: 6px;
background-color: #f4f4f4;
.cr-progress__progress {
background: linear-gradient(270deg, #ffe677 0%, #ffc842 100%);
border-radius: 6px;
}
}
}
.Rc-degree-pointer {
margin-bottom: 11px;
display: flex;
justify-content: space-around;
font-size: 11px;
font-weight: 400;
color: #CCCCCC;
line-height: 22px;
}
.Rc-degree-desc {
.card-desc(0);
}
}
&-analyze {
.card-container();
.Rc-analyze-title {
.card-title(12px);
}
.Rc-analyze-desc {
.card-desc(0);
}
.Rc-analyze-image {
display: flex;
justify-content: center;
margin: 10px 20px;
height: 255px;
}
}
&-plan {
.card-container();
.Rc-plan-title {
.card-title(12px);
}
.Rc-plan-advice {
.card-desc(7px);
}
.Rc-plan-priority {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 18px;
height: 49px;
background: #F4F4F4;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
.Rc-plan-desc {
.card-desc(23px);
}
.Rc-plan-card {
overflow: hidden;
margin: 0 -12px 10px;
background: #F4F4F4;
border-radius: 10px;
.Rcp-card-head {
display: flex;
align-items: center;
align-items: center;
margin: 14px 0 16px 0;
.Rcpc-head-left {
margin-right: 9px;
width: 49px;
height: 25px;
}
.Rcpc-head-right {
width: 258px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
.Rcp-card-body {
margin: 0 14px 20px;
padding: 13px 16px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
border-radius: 8px;
.Rcpc-body-title {
.card-title(6px);
}
.Rcpc-body-desc {
.card-desc(3px, 16px);
}
.Rcpc-body-opera {
display: flex;
justify-content: space-between;
align-items: flex-end;
.Rcpcb-opera-left {
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
span {
font-size: 20px;
font-weight: bold;
color: #F94C4C;
line-height: 22px;
}
}
.Rcpcb-opera-right {
width: 99px;
height: 36px;
background: #FFC842 !important;
border-radius: 8px !important;
font-size: 12px;
font-weight: 600;
color: #333333;
line-height: 17px;
}
}
}
}
}
&-retest {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px auto 27px;
padding: 0 19px;
width: 130px;
height: 40px;
border-radius: 8px;
border: 1px solid #DDD8D8;
.Rc-retest-svg {
width: 18px;
height: 18px;
}
.Rc-retest-text {
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 22px;
}
}
.report-container-explain {
width: 343px;
height: 76px;
margin: 0 auto 24px;
background: url('../../../../assets/images/home/explain@2x.png') no-repeat center/contain;
}
}
}
\ No newline at end of file
src/views/Home/SmartMeasure/Report/index.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="report">
<div class="report-container">
<div class="report-container-head">
<cr-image
class="Rc-head-left"
round
width=""
height=""
fit="cover"
src="@/assets/images/user/avatar@2x.png"
/>
<div class="Rc-head-right">
<p>王小闹</p>
<p>风险测评报告</p>
</div>
</div>
<div class="report-container-degree">
<p class="Rc-degree-title">风险程度 <span>高</span></p>
<cr-progress class="Rc-degree-progress" :percentage="85" :show-pivot="false" />
<p class="Rc-degree-pointer">
<span>低</span>
<span>中</span>
<span>高</span>
</p>
<p class="Rc-degree-desc">整体风险程度高，建议保持良好的生活习惯，增强相关保障。</p>
</div>
<div class="report-container-analyze">
<p class="Rc-analyze-title">风险分析</p>
<p class="Rc-analyze-desc">
您是家庭的重要成员，健康的生活习惯会让您未来受益匪浅，必要的配备健康保障，也是对个人和家庭更负责任的体现，奋斗的同时也要关注保障哦~
</p>
<cr-image
class="Rc-analyze-image"
width=""
height=""
fit="contain"
src="@/assets/images/home/report@2x.png"
/>
</div>
<div class="report-container-plan">
<p class="Rc-plan-title">适合你的保险方案</p>
<p class="Rc-plan-advice">建议投保优先级</p>
<p class="Rc-plan-priority">
<span>1.医疗险</span>
<span>2.重疾险</span>
<span>3.意外险</span>
<span>4.寿险</span>
</p>
<p class="Rc-plan-desc">
你的身体处在黄金期，但不可以掉以轻心，话习惯会影响到未来，适当的运动很重要，奋斗的同时一定也要合理的休息。
</p>
<div class="Rc-plan-card">
<div class="Rcp-card-head">
<cr-image
class="Rcpc-head-left"
width=""
height=""
fit="cover"
src="@/assets/images/home/medical@2x.png"
/>
<span class="Rcpc-head-right"
>因责任内“医疗和住院”所产生的费用，医疗险100%报销，赔多少钱，取决于您实际花费多少</span
>
</div>
<div class="Rcp-card-body">
<p class="Rcpc-body-title">万家保·百万医疗险</p>
<p class="Rcpc-body-desc">看病报销医药费，最高600万</p>
<div class="Rcpc-body-opera">
<p class="Rcpcb-opera-left"><span>¥1</span>首月</p>
<cr-button class="Rcpcb-opera-right">
去投保
</cr-button>
</div>
</div>
</div>
</div>
<div class="report-container-retest">
<svg-icon icon-class="retest" class-name="Rc-retest-svg" />
<span class="Rc-retest-text">重测一遍</span>
</div>
<div class="report-container-explain"></div>
</div>
</div>
</template>
<script>
export default {
name: "PolicyList",
data() {
return {};
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
src/views/Home/SmartMeasure/index.vue
View file @ aa88ae9c
<template>
<div ref="measure" class="measure">
<div class="measure">
<div class="measure-dialogue" v-for="(item, index) in smartMeasure" :key="item.id">
<div class="measure-dialogue-robot">
<cr-image
......
src/views/Home/index.less
View file @ aa88ae9c
......@@ -23,6 +23,18 @@
background: url('../../assets/logo-top.png') no-repeat 0 0 /cover;
}
&-button {
position: absolute;
top: 181px;
left: 50%;
margin-left: -76.5px;
width: 153px;
height: 60px;
background: url('../../assets/images/home/activity-button@2x.png') no-repeat center/contain;
-webkit-animation: free_download .8s linear alternate infinite;
animation: free_download .8s linear alternate infinite;
}
&-activity {
width: 100%;
}
......
src/views/Home/index.vue
View file @ aa88ae9c
......@@ -7,6 +7,7 @@
fit="cover"
src="@/assets/images/home/activity@2x.png"
/>
<div class="home-button"></div>
<div class="home-service">
<router-link tag="div" to="/home/smart-measure" class="home-service-item">
<svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
......
src/views/Home/modules/Modal.vue 0 → 100644
View file @ aa88ae9c
This diff is collapsed.
src/views/Policy/Detail/Types/Guarantee.vue 0 → 100644
View file @ aa88ae9c
<template>
<div>
<status-desc
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<pay-cost
v-if="showPayCost"
:statusKey="data.cardConfig.key"
:payCostConfig="data.cardConfig.payCostConfig"
></pay-cost>
<insurance-card
:productNo="data.productNo"
:autoRenewPremium="data.autoRenewPremium"
:policyNo="data.policyNo"
></insurance-card>
<security-content :data="data"></security-content>
<insurance-service></insurance-service>
<customer-service></customer-service>
<insurance-recommend class="Pdb-recommend" />
</div>
</template>
<script>
import InsuranceRecommend from "../../modules/InsuranceRecommend";
import InsuranceCard from "../modules/InsuranceCard";
import SecurityContent from "../modules/SecurityContent";
import InsuranceService from "../modules/InsuranceService";
import PayCost from "../modules/PayCost";
import StatusDesc from "../modules/StatusDesc";
import CustomerService from "../modules/CustomerService";
export default {
name: "Guarantee",
components: {
InsuranceRecommend,
InsuranceCard,
SecurityContent,
InsuranceService,
PayCost,
StatusDesc,
CustomerService
},
props: {
data: {
type: Object,
default: () => ({})
}
},
data() {
return {};
},
computed: {
showPayCost() {
return ["2", "4"].includes(this.data?.cardConfig?.key);
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/Types/Refund.vue 0 → 100644
View file @ aa88ae9c
<template>
<div>
<status-desc
:firstTitle="data.cardConfig.detailText"
:secondTitle="data.cardConfig.statusText"
:recordText="data.cardConfig.recordText"
></status-desc>
<pay-cost
v-if="showPayCost"
:statusKey="data.cardConfig.key"
:payCostConfig="data.cardConfig.payCostConfig"
></pay-cost>
<refund
v-else
:refundConfig="data.cardConfig.refundConfig"
:amount="amount"
:payTime="payTime"
></refund>
<Phone></Phone>
</div>
</template>
<script>
import StatusDesc from "../modules/StatusDesc";
import Phone from "../modules/Phone";
import Refund from "../modules/Refund";
import PayCost from "../modules/PayCost";
import { parseTime } from "@/service/utils";
export default {
name: "Guarantee",
components: {
StatusDesc,
Phone,
Refund,
PayCost
},
props: {
data: {
type: Object,
default: () => ({})
}
},
data() {
return {};
},
computed: {
amount() {
return this.data.cardConfig?.amount || 0;
},
payTime() {
return parseTime(this.data.cardConfig?.payTime, "{y}-{m}-{d}") || 0;
},
showPayCost() {
return ["4", "14", "13"].includes(this.data?.cardConfig?.key);
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/index.less
View file @ aa88ae9c
.button() {
height: 28px;
border-radius: 8px;
border: 1px solid #787EFF;
border-radius: 8px !important;
border: 1px solid #787EFF !important;
font-size: 14px;
font-weight: 400;
color: #787EFF;
color: #787EFF !important;
line-height: 16px;
background-color: #fff !important;
&:first-child {
margin-right: 8px;
}
......@@ -109,12 +110,12 @@
}
}
.Pdb-tips {
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 24px 20px;
padding-left: 4px;
width: 73px;
padding: 0 4px;
width: auto;
height: 20px;
background: #000000;
border-radius: 8px;
......@@ -171,6 +172,12 @@
.card-container();
&-title {
.card-title(16px);
&_tips {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
&-content {
margin-bottom: 17px;
......@@ -192,8 +199,8 @@
&-button {
width: 100%;
height: 52px;
background: #FFC842;
border-radius: 14px;
background: #FFC842 !important;
border-radius: 14px !important;
font-size: 16px;
font-weight: 600;
color: #333333;
......
src/views/Policy/Detail/index.vue
View file @ aa88ae9c
<template>
<div class="policy-detail">
<div class="policy-detail-body">
<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>
<div class="Pdb-payment-content">
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
</div>
</div>
<cr-button class="Pdb-payment-button">立即缴费</cr-button>
</div>
<div class="Pdb-insurance">
<p class="Pdb-insurance-name">国民保·百万医疗险</p>
<p class="Pdb-insurance-no">NO.XXXXXXXXXXXXXXXXXXXXXXXX<br />由XXXXXXXXX承保</p>
<div class="Pdb-insurance-operation">
<cr-button class="Pdbi-operation-button">已开通次年续保</cr-button>
<cr-button class="Pdbi-operation-button">申请理赔</cr-button>
</div>
</div>
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<span class="Pdbc-head-status">查看详情</span>
</div>
<div class="Pdb-content-body">
<div class="Pdbc-body-item">
<span>100种重大疾病医疗保险金（0免赔额）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>一般医疗保险金（1万免赔额）</span>
<span>300万</span>
</div>
<div class="Pdbc-body-item">
<span>质子重离子医疗保险金（60%赔付）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>意外身故</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外伤残</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外住院津贴</span>
<span>100元/天</span>
</div>
<div class="Pdbc-body-item">
<span>生效日期</span>
<span>2020.5.31</span>
</div>
<div class="Pdbc-body-item">
<span>终止日期</span>
<span>2021.5.31</span>
</div>
</div>
<div class="Pdb-content-operation">
<cr-button class="Pdbc-button">电子保单</cr-button>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">投保人</p>
<div class="Pdbc-user-info">
<span>王*闹</span>
<span>身份证号 1333**********3445</span>
</div>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">被保人</p>
<div class="Pdbc-user-info">
<span>王*闹</span>
<span>身份证号 1333**********3445</span>
</div>
</div>
</div>
<div class="Pdb-service">
<div class="Pdb-service-head">
<span>增值服务</span>
<span>查看详情</span>
</div>
<div class="Pdb-service-body">
<div>
<span>重疾快速就医</span>
<span></span>
</div>
<div>
<span>住院押金垫付</span>
<span></span>
</div>
</div>
<div class="Pdb-service-question">
<span>常见问题</span>
<svg-icon icon-class="arrow" />
</div>
<cr-divider class="Pdb-service-divider" :hairline="false" />
<div class="Pdb-service-agreement">
<span>保险条款</span>
<span>|</span>
<span>健康告知</span>
<span>|</span>
<span>投保须知与声明</span>
<span>|</span>
<span>服务协议</span>
</div>
</div>
<div class="Pdb-operation">
<div class="Pdb-operation-item">
<svg-icon class-name="Pdbo-item-svg" icon-class="customer-service-concat" />
<span class="Pdbo-item-text">联系客服</span>
</div>
<div class="Pdb-operation-item">
<svg-icon class-name="Pdbo-item-svg" icon-class="go-home" />
<span class="Pdbo-item-text">返回首页</span>
</div>
</div>
<div class="Pdb-footer">
<span>如遇问题请拨打客服电话</span>
<span>00000000000</span>
</div>
<act-banner />
<rec-good />
<insurance-recommend class="Pdb-recommend" />
<Component :is="policy.cardConfig.component" :data="policy"></Component>
</div>
</div>
</template>
<script>
import point from "@/assets/images/policy/detail/point@2x.png";
import InsuranceRecommend from "../modules/InsuranceRecommend";
import ActBanner from "../modules/ActBanner";
import RecGood from "../modules/RecGood";
import Guarantee from "./Types/Guarantee";
import Refund from "./Types/Refund";
import policyStatusMixin from "../mixin/policyStatus.mixin";
import { getPolicyDetail } from "@/api/policy";
export default {
name: "PolicyList",
mixins: [policyStatusMixin],
components: {
InsuranceRecommend,
ActBanner,
RecGood
Guarantee,
Refund
},
data() {
return {
point
policy: {
cardConfig: {
component: "Guarantee"
}
}
};
},
async created() {
console.log(this.$route.params.orderNo);
const detail = await getPolicyDetail(this.$route.params.orderNo);
this.policy = this.getData(detail);
// if (true) {}
}
};
</script>
......
src/views/Policy/Detail/modules/CustomerService.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-operation">
<div class="Pdb-operation-item" @click="goNext('phone')">
<svg-icon class-name="Pdbo-item-svg" icon-class="customer-service-concat" />
<span class="Pdbo-item-text">联系客服</span>
</div>
<div class="Pdb-operation-item" @click="goNext('home')">
<svg-icon class-name="Pdbo-item-svg" icon-class="go-home" />
<span class="Pdbo-item-text">返回首页</span>
</div>
</div>
</template>
<script>
export default {
name: "CustomerService",
data() {
return {};
},
methods: {
goNext(type) {
if (type === 'home') {
this.$router.push('/home')
}
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/InsuranceCard.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-insurance">
<p class="Pdb-insurance-name">{{ product.title }}</p>
<p class="Pdb-insurance-no">NO.{{ policyNo }}<br />由{{ product.compony }}承保</p>
<div class="Pdb-insurance-operation">
<cr-button class="Pdbi-operation-button" @click="goNext">{{ buttonText }}</cr-button>
<cr-button class="Pdbi-operation-button">申请理赔</cr-button>
</div>
</div>
</template>
<script>
import GOODS_LIST from "@/api/goodsList.mock";
export default {
name: "InsuranceCard",
props: {
productNo: {
type: [Number, String],
default: 1
},
autoRenewPremium: {
type: Boolean,
default: false
},
policyNo: {
type: String,
default: ""
}
},
data() {
return {};
},
computed: {
product() {
return GOODS_LIST.find(v => v.id === +this.productNo);
},
buttonText() {
return this.autoRenewPremium ? "已开通次年续保" : "已关闭次年续保";
}
},
methods: {
goNext() {}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/InsuranceService.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-service">
<div class="Pdb-service-head">
<span>增值服务</span>
<span>查看详情</span>
</div>
<div class="Pdb-service-body">
<div>
<span>重疾快速就医</span>
<span></span>
</div>
<div>
<span>住院押金垫付</span>
<span></span>
</div>
</div>
<div class="Pdb-service-question">
<span>常见问题</span>
<svg-icon icon-class="arrow" />
</div>
<cr-divider class="Pdb-service-divider" :hairline="false" />
<div class="Pdb-service-agreement">
<span>保险条款</span>
<span>|</span>
<span>健康告知</span>
<span>|</span>
<span>投保须知与声明</span>
<span>|</span>
<span>服务协议</span>
</div>
</div>
</template>
<script>
export default {
name: "InsuranceService",
data() {
return {};
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/PayCost.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-payment">
<p v-if="showTips" class="Pdb-payment-title Pdb-payment-title_tips">{{payCostConfig.title}}</p>
<div v-else>
<p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
<div class="Pdb-payment-content">
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
</div>
<div class="Pdbp-content-item">
<svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
<span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
</div>
</div>
</div>
<cr-button class="Pdb-payment-button">{{payCostConfig.button}}</cr-button>
</div>
</template>
<script>
export default {
name: "PayCost",
props: {
statusKey: {
type: String,
default: '2'
},
payCostConfig: {
type: Object,
default: () => ({
title: "",
button: "立即缴费"
})
}
},
computed: {
showTips() {
return ["4", "14", "13"].includes(this.statusKey);
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/Phone.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-footer">
<span>如遇问题请拨打客服电话</span>
<span>00000000000</span>
</div>
</template>
<script>
export default {
name: "Phone",
data() {
return {};
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/Refund.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-refund">
<p class="Pdb-refund-title">{{ refundConfig.title }}</p>
<p class="Pdb-refund-desc">{{ refundConfig.desc }}</p>
<div class="Pdb-refund-content">
<div class="Pdbr-content-item">
<span>退款金额</span>
<span>{{ amount }}元</span>
</div>
<div class="Pdbr-content-item">
<span>支付时间</span>
<span>{{ payTime }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Refund",
props: {
refundConfig: {
type: Object,
default: () => ({
title: "",
desc: ""
})
},
amount: {
type: Number,
default: 0
},
payTime: {
type: String,
default: "-"
}
},
data() {
return {};
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/SecurityContent.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="Pdb-content">
<div class="Pdb-content-head">
<span class="Pdbc-head-name">保障内容</span>
<span class="Pdbc-head-status">查看详情</span>
</div>
<div class="Pdb-content-body">
<div class="Pdbc-body-item">
<span>100种重大疾病医疗保险金（0免赔额）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>一般医疗保险金（1万免赔额）</span>
<span>300万</span>
</div>
<div class="Pdbc-body-item">
<span>质子重离子医疗保险金（60%赔付）</span>
<span>600万</span>
</div>
<div class="Pdbc-body-item">
<span>意外身故</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外伤残</span>
<span>1万</span>
</div>
<div class="Pdbc-body-item">
<span>意外住院津贴</span>
<span>100元/天</span>
</div>
<div class="Pdbc-body-item">
<span>生效日期</span>
<span>{{EffectiveDate}}</span>
</div>
<div class="Pdbc-body-item">
<span>终止日期</span>
<span>{{EndDate}}</span>
</div>
</div>
<div class="Pdb-content-operation">
<cr-button class="Pdbc-button" @click="showPdf">电子保单</cr-button>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">投保人</p>
<div class="Pdbc-user-info">
<span>{{data.holderUserNameMask}}</span>
<span>身份证号 {{data.holderIdNoMask}}</span>
</div>
</div>
<div class="Pdb-content-user">
<p class="Pdbc-user-who">被保人</p>
<div class="Pdbc-user-info">
<span>{{data.insuredUserNameMask}}</span>
<span>身份证号 {{data.insuredIdNoMask}}</span>
</div>
</div>
</div>
</template>
<script>
import { parseTime } from "@/service/utils";
export default {
name: "SecurityContent",
props: {
data: {
type: Object,
default: ({})
}
},
data() {
return {};
},
computed: {
EffectiveDate() {
return parseTime(this.data.policyEffectiveDate, "{y}-{m}-{d}")
},
EndDate() {
return parseTime(this.data.policyEndDate, "{y}-{m}-{d}")
}
},
methods: {
showPdf() {
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Detail/modules/StatusDesc.vue 0 → 100644
View file @ aa88ae9c
<template>
<div>
<p class="Pdb-status" v-if="firstTitle">{{ firstTitle }}</p>
<p class="Pdb-status">{{ secondTitleText }}</p>
<div class="Pdb-tips" v-if="recordText">
<span class="Pdb-tips-text">{{ recordText }}</span>
<svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
</div>
</div>
</template>
<script>
export default {
name: "StatusDesc",
props: {
firstTitle: {
type: String,
default: ''
},
secondTitle: {
type: String,
default: ''
},
recordText: {
type: String,
default: ''
}
},
data() {
return {};
},
computed: {
secondTitleText() {
return this.firstTitle ? `${this.secondTitle}...` : this.secondTitle
}
}
};
</script>
<style lang="less" src="../index.less" scoped></style>
src/views/Policy/Success/index.vue 0 → 100644
View file @ aa88ae9c
<template>
<div class="policy-detail">
<div class="policy-detail-body">
<status-desc secondTitle="购买成功"></status-desc>
<Refund></Refund>
<ActBanner></ActBanner>
<RecGood></RecGood>
</div>
</div>
</template>
<script>
import ActBanner from "./modules/ActBanner";
import StatusDesc from "../Detail/modules/StatusDesc";
import Refund from "../Detail/modules/Refund";
import RecGood from "./modules/RecGood";
export default {
name: "Sucess",
components: {
StatusDesc,
Refund,
ActBanner,
RecGood
},
data() {
return {};
},
computed: {
showPayCost() {
return ["2", "4"].includes(this.data?.cardConfig?.key);
}
}
};
</script>
<style lang="less" src="../Detail/index.less" scoped></style>
src/views/Policy/Success/modules/ActBanner.vue 0 → 100644
View file @ aa88ae9c
<template functional>
<div class="activity-banner">
<div class="activity-banner-item" @click="parent.$router.push('/draw')">
<cr-image src="@/assets/images/policy/draw.png" width="343px" height="60px" />
</div>
</div>
</template>
<script>
export default {
name: "ActBanner",
data() {
return {};
}
};
</script>
<style lang="less" scoped>
.activity-banner {
width: 343px;
margin: 24px auto;
}
</style>
src/views/Policy/modules/RecGood.vue → src/views/Policy/Success/modules/RecGood.vue
View file @ aa88ae9c
......@@ -74,8 +74,8 @@ export default {
};
</script>
<style lang="less" scoped>
@import "../../../style/var.less";
@import "../../../style/mixins.less";
@import "../../../../style/var.less";
@import "../../../../style/mixins.less";
.rec {
&-container {
width: 343px;
......
src/views/Policy/constants.js 0 → 100644
View file @ aa88ae9c
const statusMap = {
"1": {
status: ["6.2-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "保障中",
buttons: ["为家人投保", "电子保单"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"2": {
status: ["6.3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "保障中",
buttons: ["开通自动续费", "电子保单"],
detailText: "",
recordText: "保单已欠费，欠缴${money}元",
component: "Guarantee"
},
"3": {
status: ["6.1-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "待生效",
buttons: ["为家人投保", "电子保单"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"4": {
status: ["1-1", "4-1", "5-1"],
title: "被保人：${title}",
contend: "需付保费：${money}元",
statusText: "待支付",
buttons: ["去支付"],
detailText: "",
recordText: "请尽快支付",
component: "Guarantee",
payCostConfig: {
title: "订单将在今天23:59:59关闭",
button: "立即缴费"
}
},
"5": {
status: ["9-5"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "退款中",
buttons: ["联系客服"],
detailText: "退保终止",
recordText: "缴费记录",
component: "Guarantee"
},
"6": {
status: ["7-5"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款中",
buttons: ["联系客服"],
detailText: "投保失败",
recordText: "",
component: "Refund",
refundConfig: {
title: "很抱歉，您未通过保险公司的核保",
desc: "不能投保此产品，正在原路给您退款，请注意查收…"
}
},
"7": {
status: ["4-5", "5-5"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款中",
buttons: ["联系客服"],
detailText: "投保失败",
recordText: "",
component: "Refund",
refundConfig: {
title: "很抱歉，您未通过保险公司的核保",
desc: "不能投保此产品，正在原路给您退款，请注意查收…"
}
},
"8": {
status: ["4-6", "5-6", "7-6"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款成功",
buttons: ["联系客服"],
detailText: "投保失败",
recordText: "",
component: "Refund",
refundConfig: {
title: "原路退还给您的保费已到账",
desc: "请查收并查验金额。"
}
},
"9": {
status: ["4-4", "5-4", "7-4", "9-4"],
title: "退款金额：${title}",
contend: "支付时间：${start}",
statusText: "退款失败",
buttons: ["联系客服"]
},
"10": {
status: ["8"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "已终止",
buttons: ["重新投保"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"11": {
status: ["9-6"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "已终止",
buttons: ["联系客服"],
detailText: "退保终止，退款成功",
recordText: "缴费记录",
component: "Guarantee"
},
"12": {
status: ["10"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "已终止",
buttons: ["联系客服"],
detailText: "",
recordText: "缴费记录",
component: "Guarantee"
},
"13": {
status: ["2-3", "3-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "出单中",
buttons: [],
detailText: "",
recordText: "正在为您加速出单中",
component: "refund",
payCostConfig: {
title: "请耐心等待",
button: "点击刷新，查看出单结果"
}
},
"14": {
status: ["1-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "核保中",
buttons: [],
detailText: "",
recordText: "正在为您加速核保中",
component: "refund",
payCostConfig: {
title: "请耐心等待",
button: "点击刷新，查看核保结果"
}
},
"15": {
status: ["4", "5", "7-3"],
title: "被保人：${title}",
contend: "保障期限：${start} 至 ${end}",
statusText: "投保失败",
buttons: []
}
};
export default statusMap;
src/views/Policy/index.less
View file @ aa88ae9c
......@@ -54,7 +54,7 @@
color: #242629;
}
&-type{
padding: 3px 0 1px 0;
padding: 3px 0 2px 0;
width: 52px;
border-radius: 8px 2px 8px 2px;
text-align: center;
......@@ -102,23 +102,23 @@
width: 100%;
&-button {
margin: 9px 8px 0 0;
// margin: 9px 8px 11px 0;
padding: 0 !important;
width: 102px;
height: 28px;
border-radius: 8px;
border: 1px solid #787EFF;
border-radius: 8px !important;
border: 1px solid #787EFF !important;
background-color: #fff !important;
font-size: 14px;
font-weight: 400;
color: #787EFF;
color: #787EFF !important;
line-height: 16px;
&:last-child {
margin-right: 12px;
}
&_paid {
border: 0;
background: #F4F5FF;
color: #787EFF;
border: 0 !important;
background: #F4F5FF !important;
color: #787EFF !important;
}
}
&-image {
......
src/views/Policy/index.vue
View file @ aa88ae9c
......@@ -9,14 +9,9 @@
<cr-tabbar-item>子女</cr-tabbar-item>
</cr-tabbar>
</cr-sticky>
<policy-item></policy-item>
<policy-item :type="active"></policy-item>
<cr-divider class="policy-divider">我是有底线的</cr-divider>
<insurance-recommend></insurance-recommend>
<!-- <div class="policy-none">
<cr-image class="policy-none-image" round width="" height="" :src="policyDefault" />
<p class="policy-none-title">暂无保单</p>
<p class="policy-none-desc">赶紧去看看有哪些精品保险吧</p>
</div> -->
</div>
</template>
<script>
......
src/views/Policy/mixin/policyStatus.mixin.js 0 → 100644
View file @ aa88ae9c
import _ from "lodash";
import STATUS_MAP from "../constants";
import { parseTime } from "@/service/utils";
import GOODS_LIST from "@/api/goodsList.mock";
export default {
data() {
return {
isFromPay: false
};
},
methods: {
getData(policy) {
const key = this.findKey(policy);
const value = _.cloneDeep(STATUS_MAP[key]);
// console.log(status, key, value);
if (["6", "7", "8", "9"].includes(key)) {
value.title = value.title.replace("${title}", policy?.refundInfo?.amount || "-");
value.contend = value.contend.replace(
"${start}",
parseTime(policy?.refundInfo?.payTime, "{y}-{m}-{d}")
);
} else {
value.title = value.title.replace("${title}", policy?.insuredUserName || "-");
value.contend = value.contend
.replace("${start}", parseTime(policy?.policyEffectiveDate, "{y}-{m}-{d}"))
.replace("${end}", parseTime(policy?.policyEndDate, "{y}-{m}-{d}"))
.replace("${money}", policy?.payInfo?.amount || "-");
}
// 校验是否支付成功
const status = this.getStatus(policy);
console.log(1, this.isFromPay, status);
if (["6.2-3", "6.1-3"].includes(status) && this.isFromPay) {
this.$router.replace("/policy/success");
}
return {
...policy,
..._.find(GOODS_LIST, { id: +policy?.productNo }),
cardConfig: { ...value, key }
};
},
findKey(policy) {
const status = this.getStatus(policy);
return _.findKey(STATUS_MAP, v => v.status.includes(status));
},
getStatus(policy) {
return policy?.payState
? `${policy?.policyState}-${policy?.payState}`
: String(policy?.policyState);
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
const prePath = ["/goods/inform", "/goods/detail", "/policy/add"];
if (prePath.includes(from.path)) {
vm.isFromPay = true;
console.log(2, vm.isFromPay)
}
});
}
};
src/views/Policy/modules/InsuranceRecommend.vue
View file @ aa88ae9c
......@@ -10,7 +10,7 @@
<p class="Prc-right-desc">优势介绍 优势介绍 优势介绍</p>
</div>
</div>
<cr-button class="policy-recommend-button">点此投保</cr-button>
<cr-button class="policy-recommend-button" @click="goNext()">点此投保</cr-button>
<cr-image class="policy-recommend-angle" width="" height="" :src="recommendAngle" />
</div>
</template>
......@@ -25,6 +25,11 @@ export default {
recommendAngle,
recommendContent
};
},
methods: {
goNext() {
// todo 跳转医疗险详情页
}
}
};
</script>
......
src/views/Policy/modules/PolicyItem.vue
View file @ aa88ae9c
<template>
<div>
<div class="policy-item" v-for="item in list" :key="item.orderNo">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">为家人投保</cr-button>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
</div>
<cr-image
class="policy-item-operation-image"
width=""
height=""
fit="cover"
src="@/assets/images/policy/guarantee@2x.png"
/>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万意外险</p>
<p class="policy-item-pro-type policy-item-pro-type_casualty">意外保障</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button policy-item-operation-button_paid"
>开启自动续费</cr-button
>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_result">
有XX.X元扣费失败，请立即开通自动续费
</p>
<template v-if="list.length">
<div
class="policy-item"
v-for="(item, index) in list"
:key="index"
@click="goDetail(item.orderNo)"
>
<div class="policy-item-pro">
<p class="policy-item-pro-name">{{ item.title }}</p>
<p
:class="[
{ 'policy-item-pro-type_medical': item.itype === 'mi' },
{ 'policy-item-pro-type_illness': item.itype === 'cii' },
{ 'policy-item-pro-type_casualty': item.itype === 'ai' },
{ 'policy-item-pro-type_life': item.itype === 'li' },
'policy-item-pro-type'
]"
>
{{ item.guarantee_title }}
</p>
<p class="policy-item-pro-status" v-if="!showStatusText(item.cardConfig.statusText)">
{{ item.cardConfig.statusText }}
</p>
</div>
<p class="policy-item-recognizee">{{ item.cardConfig.title }}</p>
<p class="policy-item-time">{{ item.cardConfig.contend }}</p>
<div class="policy-item-operation">
<cr-button
:class="[
{ 'policy-item-operation-button_paid': ['去支付', '开通自动续费'].includes(button) },
'policy-item-operation-button'
]"
v-for="button in item.cardConfig.buttons"
:key="button"
@click="goNext(button, item)"
>{{ button }}</cr-button
>
<p
class="policy-item-operation-desc"
:class="
['13', '14'].includes(item.cardConfig.key)
? 'policy-item-operation-desc_wait'
: 'policy-item-operation-desc_result'
"
v-if="item.stateDesc"
>
{{ item.stateDesc }}
</p>
</div>
<cr-image
class="policy-item-operation-image"
width=""
height=""
fit="cover"
src="@/assets/images/policy/guarantee@2x.png"
v-if="showStatusText(item.cardConfig.statusText)"
/>
</div>
</template>
<div class="policy-none" v-else>
<cr-image
class="policy-item-operation-image"
class="policy-none-image"
round
width=""
height=""
fit="cover"
src="@/assets/images/policy/guarantee@2x.png"
src="@/assets/images/policy/policy-default@2x.png"
/>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
<p class="policy-item-pro-status">待生效</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">为家人投保</cr-button>
<cr-button class="policy-item-operation-button">电子保单</cr-button>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_illness">重疾保障</p>
<p class="policy-item-pro-status">待支付</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button policy-item-operation-button_paid"
>去支付</cr-button
>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">退款中</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">联系客服</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_result">
退保退款中，请注意查收
</p>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">出单中</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<cr-button class="policy-item-operation-button">联系客服</cr-button>
<p class="policy-item-operation-desc policy-item-operation-desc_wait">
正在出单，请耐心等待…
</p>
</div>
</div>
<div class="policy-item">
<div class="policy-item-pro">
<p class="policy-item-pro-name">国民保·百万医疗险</p>
<p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
<p class="policy-item-pro-status">投保失败</p>
</div>
<p class="policy-item-recognizee">被保人：王*闹</p>
<p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
<div class="policy-item-operation">
<p class="policy-item-operation-desc policy-item-operation-desc_result">
很抱歉，被保人的核保未通过
</p>
</div>
<p class="policy-none-title">暂无保单</p>
<p class="policy-none-desc">赶紧去看看有哪些精品保险吧</p>
</div>
</div>
</template>
<script>
import _ from "lodash";
import GOODS_LIST from "@/api/goodsList.mock";
import { getPolicyList } from "@/api/policy";
import policyStatusMixin from "../mixin/policyStatus.mixin";
// SELF(0, "本人"),
// PARENT(1, "父母"),
// SPOUSE(2, "配偶"),
// CHILDREN(3, "子女");
const relations = [-1, 0, 1, 2, 3];
export default {
name: "InsuranceRecommend",
mixins: [policyStatusMixin],
props: {
type: {
type: Number,
default: () => 0
}
},
data() {
return {
list: []
};
},
async created() {
const goodsList = GOODS_LIST.reduce((pre, next) => {
return pre.concat(next.children);
}, []);
let list = await getPolicyList();
this.list = list.map(v => goodsList.find(goods => goods.id === +v.productNo));
created() {
this.getList(this.type);
},
watch: {
type(val) {
this.getList(val);
}
},
methods: {
async getList(type) {
let list = await getPolicyList();
this.list = list
.filter(
v =>
_.some(GOODS_LIST, { id: +v.productNo }) &&
(type === 0 ? true : v.insuredRelation === relations[type]) &&
this.findKey(v)
)
.map(this.getData);
},
showStatusText(text) {
return text === "保障中";
},
goNext(text, item) {
// if (text === "为家人投保") {
// } else if (text === "电子保单") {
// } else if (text === "开通自动续费") {
// } else if (text === "去支付") {
// } else if (text === "重新投保") {
// } else if (text === "联系客服") {
// }
},
goDetail(orderNo) {
const policy = this.list.find(v => v.orderNo === orderNo);
if (["9", "15"].includes(policy.cardConfig.key)) return;
this.$router.push(`/policy/detail/${orderNo}`);
}
}
};
</script>
......
src/views/User/Family/Detail/index.vue
View file @ aa88ae9c
......@@ -23,12 +23,14 @@ export default {
}
};
},
created() {
async created() {
await this.setFamilyList();
const information = this.familyList.find(
family => family.userInfoSecId === this.$route.params.id
family => +family.userInfoSecId === +this.$route.params.id
);
this.information = {
...information,
relation: information.appellation,
socialSecurity: information.socialSecurity ? "true" : "false"
};
},
......
src/views/User/Family/index.less
View file @ aa88ae9c
......@@ -233,6 +233,7 @@
color: #333333;
line-height: 22px;
&_deleted {
width: 100%;
margin-top: 15px;
background: #F6F7FA !important;
}
......
src/views/User/Family/index.vue
View file @ aa88ae9c
......@@ -4,7 +4,7 @@
<p class="family-title">已添加家人</p>
<div class="family-list" v-if="!isCollapse">
<div
:class="[{ 'family-list-item_overlay': isCollapse && index === 0 }, 'family-list-item']"
class="family-list-item"
v-for="(item, index) in familyList"
@click="go(`/user/family/detail/${item.userInfoSecId}`)"
:key="index"
......@@ -12,7 +12,7 @@
<div class="Fl-item-left">
<cr-image class="Fli-left-image" :src="item.avatar" width="" height="" />
<span class="Fli-left-name">{{ item.name }}</span>
<span class="Fli-left-relation">{{ item.relation }}</span>
<span class="Fli-left-relation">{{ item.appellation }}</span>
</div>
<p class="Fl-item-right" v-if="item.auth">已认证</p>
</div>
......@@ -25,7 +25,7 @@
<div class="Fl-item-left">
<cr-image class="Fli-left-image" :src="familyList[0].avatar" width="" height="" />
<span class="Fli-left-name">{{ familyList[0].name }}</span>
<span class="Fli-left-relation">{{ familyList[0].relation }}</span>
<span class="Fli-left-relation">{{ familyList[0].appellation }}</span>
</div>
<p class="Fl-item-right" v-if="familyList[0].auth">已认证</p>
</div>
......@@ -39,61 +39,6 @@
</div>
</div>
<user-family-form type="add" title="为家人添加保障"></user-family-form>
<!-- <p class="family-title">为家人添加保障</p>
<cr-form ref="form" class="family-form" @submit="onSubmit" @failed="onFailed">
<cr-field
class="family-form-item"
v-model="formData.name"
name="姓名"
label="姓名"
placeholder="请输入投保人姓名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<cr-field
class="family-form-item"
v-model="formData.idNo"
type="password"
name="身份证号"
label="身份证号"
placeholder="请填写家人身份证号"
:rules="[{ required: true, message: '请填写身份证号' }]"
/>
<cr-field
@click.native="showPopups"
class="family-form-item"
v-model="formData.relation"
:readonly="true"
name="与本人的关系"
label="与本人的关系"
placeholder="请选择与本人的关系"
:rules="[{ required: true, message: '请选择与本人的关系' }]"
/>
<div class="family-form-radio">
<div class="Ff-radio-title">
<span class="Ffr-title-text">有无社保</span>
<svg-icon
icon-class="doubt"
@click.native="modal.delete = true"
class-name="Ffr-title-svg"
/>
</div>
<cr-field
class="Ff-radio-options"
name="社保"
:rules="[{ required: true, message: '请选择有无社保' }]"
>
<cr-radio-btn
class=""
slot="input"
v-model="formData.socialSecurity"
:radio-data="planOptions"
/>
</cr-field>
</div>
<cr-button class="family-form-button" native-type="submit">
生成保障方案
</cr-button>
</cr-form> -->
</div>
</template>
<script>
......@@ -107,7 +52,7 @@ export default {
},
data() {
return {
isCollapse: true
isCollapse: false
};
},
computed: {
......@@ -116,24 +61,13 @@ export default {
return this.isCollapse ? "点击展开" : "点击收起";
}
},
created() {
this.setFamilyList();
async created() {
await this.setFamilyList();
this.isCollapse = this.familyList.length > 1;
},
methods: {
...mapActions("user", ["setFamilyList"]),
onConfirm(picker, res) {
this.formData.relation = res[0];
this.showPopup = false;
},
showPopups() {
this.showPopup = true;
if (!this.refreshed) {
this.$refs.picker.refreshColumns();
this.refreshed = true;
}
},
go(path) {
console.log(path);
this.$router.push(path);
}
}
......
src/views/User/Family/modules/FamilyForm.vue
View file @ aa88ae9c
......@@ -55,7 +55,7 @@
class="family-modal"
v-model="modal.question"
:closeable="false"
@cancel="modal.question = false"
@confirm="modal.question = false"
cancel-btn=""
title="我们常说的社保都包括哪些？"
confirm-btn="我知道了"
......@@ -99,7 +99,9 @@
cancel-btn="确认删除"
confirm-btn="继续保留"
title="删除确认"
>确认删除【王大闹】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。
>确认删除【{{
information.nameMask
}}】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。
</Modal>
<cr-popup v-model="showPopup" position="bottom">
<cr-picker
......@@ -118,12 +120,20 @@ import formValidMixin from "@/mixins/formValidate.mixin";
import { addFamily, updateFamily, delFamily } from "@/api/user";
import CrRadioBtn from "@/components/CrRadioBtn";
import Modal from "@/components/Modal";
import _ from "lodash";
const relations = ["本人", "配偶", "父母", "子女"];
const planOptions = [
{ label: "有社保", value: "true" },
{ label: "无社保", value: "false" }
];
const defaultFormData = {
userInfoSecId: "",
nameMask: "",
idNoMask: "",
socialSecurity: "",
relation: ""
};
export default {
name: "FamilyForm",
......@@ -143,7 +153,7 @@ export default {
},
information: {
type: Object,
default: () => ({})
default: () => defaultFormData
}
},
data() {
......@@ -156,7 +166,7 @@ export default {
confirm: false,
delete: false
},
formData: this.information,
formData: _.cloneDeep(this.information),
isCollapse: true
};
},
......@@ -183,8 +193,10 @@ export default {
return this.type === "update" && this.formData.relation !== "本人" ? true : false;
}
},
created() {
console.log(this.formData);
watch: {
information(value) {
this.formData = _.cloneDeep(value);
}
},
methods: {
...mapActions("user", ["setFamilyList"]),
......@@ -200,6 +212,8 @@ export default {
} else {
await updateFamily(params);
}
await this.setFamilyList();
this.formData = _.cloneDeep(defaultFormData);
},
onConfirm(picker, res) {
this.formData.relation = res[0];
......
src/views/User/index.vue
View file @ aa88ae9c
......@@ -25,7 +25,7 @@
<div class="user-insurance-list" @click="go('/policy')">
<div class="user-insurance-list-icon">
<svg-icon icon-class="all-insurance-policy" class-name="user-insurance-list-icon-svg" />
<div class="user-insurance-list-icon-dot"></div>
<div class="user-insurance-list-icon-dot" v-if="showDot"></div>
</div>
<span class="user-insurance-list-title">全部保单</span>
</div>
......@@ -62,10 +62,10 @@
import { mapState, mapActions } from "vuex";
import customerService from "@/assets/images/user/customer-service@2x.png";
import help from "@/assets/images/user/help@2x.png";
import avatar from "@/assets/images/user/avatar@2x.png";
import UserFamily from "./modules/UserFamily";
import Tabbar from "@/components/Tabbar";
import RecordLayer from "@/components/RecordLayer";
import { getPolicyList } from "@/api/policy";
export default {
name: "User",
......@@ -76,20 +76,21 @@ export default {
},
data() {
return {
avatar,
customerService,
help,
isFixed: false,
showLayer: false
showLayer: false,
showDot: false
};
},
computed: {
...mapState("user", ["familyList", "userInfo"])
},
async created() {
await this.setUserInfo();
await this.setFamilyList();
console.log(this.familyList, this.userInfo);
this.setUserInfo();
const policyList = await getPolicyList();
await this.setFamilyList(policyList);
this.showDot = policyList.some(policy => policy.policyState === "6.3");
},
methods: {
...mapActions("user", ["setFamilyList", "setUserInfo"]),
......
src/views/User/modules/UserFamily.vue
View file @ aa88ae9c
......@@ -6,16 +6,10 @@
class="user-family-info-item"
@click="activeIndex = index"
v-for="(item, index) in familyList"
:key="item.id"
:key="index"
>
<cr-image
round
width="40px"
height="40px"
fit="cover"
src="http://desk.fd.zol-img.com.cn/g5/M00/00/07/ChMkJ1ZqMb2IWITEAAbRDaofaNIAAGBHwO3hh0ABtEl380.jpg"
/>
<span class="user-family-info-item-name">王斌</span>
<cr-image round width="40px" height="40px" fit="cover" :src="item.avatar" />
<span class="user-family-info-item-name">{{ item.nameMask }}</span>
<div class="user-family-info-item-divider" v-show="index === activeIndex"></div>
</div>
<div
......@@ -29,7 +23,7 @@
</div>
<div class="user-family-insurance">
<!-- user-family-insurance-item-middle_enable 保障中 -->
<div class="user-family-insurance-item" v-for="item in policyList" :key="item.id">
<div class="user-family-insurance-item" v-for="(item, index) in policyList" :key="index">
<cr-image
round
width=""
......@@ -102,7 +96,6 @@ export default {
computed: {
...mapState("user", ["familyList"]),
policyList() {
// console.log(this.activeIndex, this.familyList[this.activeIndex]?.policyList);
return this.familyList[this.activeIndex]?.policyList;
}
},
......@@ -113,7 +106,7 @@ export default {
const offsetWidth = document.querySelector(".user-family-info").offsetWidth;
const scrollWidth = document.querySelector(".user-family-info").scrollWidth;
this.isFixed = scrollWidth > offsetWidth;
console.log(scrollWidth, offsetWidth, this.isFixed);
// console.log(scrollWidth, offsetWidth, this.isFixed);
});
}
},
......
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