Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
12202a06 by simon
Options

默认提交

1 parent 2d1755fc
Inline Side-by-side
Showing 11 changed files with 492 additions and 62 deletions
......@@ -16,6 +16,7 @@
"amfe-flexible": "^2.2.1",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.16.0",
"calculatorjs": "^1.1.2",
"co": "^4.6.0",
"core-js": "^2.6.5",
"crypto-js": "^3.1.9-1",
......
export default {
props: ["min", "max", "value"],
data() {
return {
slider: null, //滚动条DOM元素
thunk: null, //拖拽DOM元素
per: this.value || 0 //当前值
};
},
methods: {
initData() {
this.slider = this.$refs.slider;
this.thunk = this.$refs.trunk;
var _this = this;
// console.log("object");
this.thunk.onmousedown = function (e) {
var width = parseInt(_this.width);
var disX = e.clientX;
document.onmousemove = function (e) {
// value, left, width
// 当value变化的时候，会通过计算属性修改left，width
// 拖拽的时候获取的新width
var newWidth = e.clientX - disX + width;
// 拖拽的时候得到新的百分比
var scale = newWidth / _this.slider.offsetWidth;
_this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
_this.per = Math.max(_this.per, _this.min);
_this.per = Math.min(_this.per, _this.max);
_this.$emit("input", _this.per);
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
return false;
};
}
},
//渲染到页面的时候
mounted() {
this.initData();
window.addEventListener('resize', ()=>{
this.initData();
}, false);
},
computed: {
// 设置一个百分比，提供计算slider进度宽度和trunk的left值
// 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width
// trunk left = slider进度width + trunk宽度/2
scale() {
return (this.per - this.min) / (this.max - this.min);
},
width() {
if (this.slider) {
return this.slider.offsetWidth * this.scale + "px";
} else {
return 0 + "px";
}
},
left() {
if (this.slider) {
return (
this.slider.offsetWidth * this.scale -
this.thunk.offsetWidth / 2 +
"px"
);
} else {
return 0 + "px";
}
}
}
};
@import "@/styles/_support.scss";
.slider {
position: relative;
// margin: 20px 0;
width: 100%;
height: 17px;
border-radius: 8.5px;
@include linear-bg-rev;
}
.slider .process {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 17px;
border-radius: 8.5px;
}
.slider .thunk {
position: absolute;
bottom: -4px;
left: -12px;
}
.slider .block {
background-image: url("~@/assets/images/index/index-thumb.png");
@extend .bis;
width: 27px;
height: 26px;
margin: 1px auto 0;
cursor: pointer;
transition: 0.2s all;
}
.slider .tips {
// position: absolute;
// left: -7px;
// bottom: 30px;
// min-width: 15px;
// text-align: center;
// padding: 4px 8px;
// background: #000;
// border-radius: 5px;
// height: 24px;
// color: #fff;
background-image: url("~@/assets/images/index/index-num-bg.png");
@extend .bis;
width: 40px;
height: 30px;
font-size: $fontSize-M2;
color: #ffffff;
text-align: center;
padding-top: 2px;
}
.slider .tips i {
position: absolute;
margin-left: -5px;
left: 50%;
bottom: -9px;
font-size: 16px;
color: #000;
}
.slider .block:hover {
// transform: scale(1.1);
opacity: 0.9;
}
<template>
<div class="slider" ref="slider">
<div class="process" :style="{width}"></div>
<div class="thunk" ref="trunk" :style="{left}">
<div class="tips">
<span>{{per}}</span>
<!-- <span>300</span> -->
</div>
<div class="block"></div>
</div>
</div>
</template>
<script src="./slider-comp.js"></script>
<style lang="scss" scoped>
@import "./slider-comp.scss";
</style>
......@@ -9,6 +9,8 @@ import {
} from "@/api/fetch-api.js";
import DatePicker from "@/components/date-picker/date-picker.vue";
import Slider from "@/components/slider-comp/slider-comp.vue";
import {
ddMMyyyy2yyyyMMdd
} from "@utils/utils.js";
......@@ -16,6 +18,8 @@ import {
contactMethodCheck
} from "@utils/utils.js";
// import calc from 'calculatorjs';
export default {
data() {
return {
......@@ -73,10 +77,69 @@ export default {
e5: "", // 理想聯絡時間
e6: "", // 查詢事項
},
sliderMin: 1, // 投保滑动最小值
sliderMax: 300, // 投保滑动最大值
sliderPer: 1, // 保费数值
// 繳費期列表
paymentPeriodList: [{
v: 3,
n: "3年",
p: 333.330000
},
{
v: 5,
n: "5年",
p: 200.000000
},
{
v: 8,
n: "8年",
p: 125.000000
},
{
v: 10,
n: "10年",
p: 100.000000
}
],
// 缴费选项列表
paymentOptionList: [{
v: 1,
m: 12,
n: "每年",
p: 1
},
{
v: 2,
m: 6,
n: "每半年",
p: 0.5064
},
{
v: 4,
m: 6,
n: "每季度",
p: 0.2548
},
{
v: 12,
m: 1,
n: "每月",
p: 0.0853
}
],
// 当前选择保费期
curPaymentPeriod: {},
// 当前缴费选项
curPaymentOption: {}
};
},
components: {
DatePicker
DatePicker,
Slider
},
computed: {
locale() {
......@@ -99,7 +162,6 @@ export default {
console.log("result:", result);
return result;
},
submitBtnDisabled() {
// let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
// let b2 = !this.data.address && !this.data.email && !this.data.mobile;
......@@ -157,28 +219,26 @@ export default {
};
return result;
},
/**
*
* 保费=保额/1000 * 费率因子 * 缴别系数
* 以50万港币为例，缴费期10年，季缴，计算如下：
* 500,000 / 1000 * 100 * 0.2548 = 12740
*/
sumAssured() {
let {
curPaymentPeriod,
curPaymentOption,
sliderPer
} = this;
let bet = 10000; //单位 万元
let result = bet * sliderPer / 1000 * curPaymentPeriod.p * curPaymentOption.p * curPaymentOption.v;
result = result.toFixed(2);
return result;
}
},
methods: {
// fetchBanner() {
// return new Promise((resolve, reject) => {
// httpPost({
// url: api.banner
// }).then(res => {
// resolve(res);
// });
// });
// },
// refreshBanner() {
// let key = this.locale;
// if (key == "zh") {
// key = "cn";
// }
// let bannerList = [];
// this.bannerCandidateList.forEach(element => {
// bannerList.push(element[key]);
// });
// this.$set(this, "bannerList", bannerList);
// },
btnNavigateTo(type, link, d) {
switch (type) {
case "none":
......@@ -207,6 +267,14 @@ export default {
break;
}
},
// 选择繳費期
onSelectPaymentPeriodHandler(item) {
this.curPaymentPeriod = item;
},
// 选择缴费选项
onSelectPaymentOptionHandler(item) {
this.curPaymentOption = item;
},
// 选择标签
onTabHandler(item) {
this.curTab = item;
......@@ -264,7 +332,6 @@ export default {
query: {}
});
}
},
/**
* 验证表单
......@@ -359,11 +426,11 @@ export default {
});
})
},
initData() {
// this.fetchBanner().then(res => {
// this.bannerCandidateList = res;
// this.refreshBanner();
// });
this.curPaymentPeriod = this.paymentPeriodList[0];
this.curPaymentOption = this.paymentOptionList[0];
// 可以埋数据在 localStorage
httpPost({
......@@ -398,7 +465,7 @@ export default {
element.index = idx;
element.describeList = element.describe.split("\n");
});
this.curTab = this.dataList[0];
this.curTab = this.dataList[1];
this.bannerList = this.dataList;
console.log("this.dataList:", this.dataList);
})
......@@ -410,7 +477,6 @@ export default {
this.initData();
},
created() {
this.$root.eventBus.$on("langChange", () => {
try {
// this.refreshBanner();
......
@import "@/styles/_support.scss";
.page {
font-size: 22px;
font-size: $fontSize-M2;
}
.top-space {
......@@ -297,11 +297,10 @@
}
&-cont {
min-height: 380px;
min-height: 384px;
margin: 0 auto 0;
position: relative;
display: flex;
font-size: 22px;
.panel {
// position: relative;
......@@ -310,7 +309,7 @@
.panel-left {
@include linear-bg;
// position: relative;
font-size: 22px;
@extend .fcc;
.desc {
@extend .bb;
......@@ -327,12 +326,16 @@
.panel-right {
background-color: #ffffff;
@extend .fcc;
// @extend .fcc;
.plugin {
width: 100%;
height: 100%;
}
.func {
}
// 性别和年龄选择
// 产品好医时交互插件 性别和年龄选择
.func1 {
&-item {
display: flex;
......@@ -373,7 +376,156 @@
}
}
// 平安福保费计算
// 平安福 保费计算 插件
.func2 {
@extend .bb;
padding: 12px 32px;
&-tit {
font-size: 22px;
font-weight: bold;
text-align: center;
color: $cOrange2;
}
&-tit2 {
margin-top: 2px;
font-size: $fontSize-M2;
text-align: center;
color: $cFontGray2;
}
// 滑动条
.slider {
position: relative;
max-width: 100%;
margin: 38px auto 0;
}
// 滑动条
// .slider {
// position: relative;
// max-width: 100%;
// margin: 0 auto;
// &-bar {
// position: relative;
// @include linear-bg-rev;
// height: 17px;
// border-radius: 8.5px;
// width: 100%;
// margin-top: 36px;
// &-thumb {
// position: absolute;
// bottom: -4px;
// left: -12px;
// .num {
// background-image: url("~@/assets/images/index/index-num-bg.png");
// @extend .bis;
// width: 40px;
// height: 30px;
// font-size: $fontSize-M2;
// color: #ffffff;
// text-align: center;
// padding-top: 2px;
// }
// .circle {
// background-image: url("~@/assets/images/index/index-thumb.png");
// @extend .bis;
// width: 27px;
// height: 26px;
// margin: 1px auto 0;
// cursor: pointer;
// }
// }
// }
// }
.form {
margin-top: 14px;
&-item {
@extend .bb;
display: flex;
.label {
@extend .bb;
width: 110px;
font-size: 22px;
padding-right: 10px;
}
.val {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex: 1;
.item {
@extend .fcc;
@include border-tans;
border-radius: 10px;
width: 76px;
height: 35px;
text-align: center;
margin-right: 12px;
margin-bottom: 14px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
}
.item-act {
@include linear-bg-rev;
border: none;
color: #ffffff;
}
}
.val2 {
justify-content: flex-start;
.item {
width: 132px;
height: 36px;
}
}
}
}
.line {
margin-top: 2px;
width: 100%;
height: 2px;
background-color: #efefef;
}
.calculation {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: flex-end;
.label {
}
.value {
.price {
font-size: 24px;
font-weight: bold;
// transition: 0.2s all;
}
}
}
.tips {
margin-top: 6px;
font-size: $fontSizeSmall-M2;
color: rgba(102, 102, 102, 0.5);
}
}
}
.arrow {
......@@ -745,7 +897,6 @@
font-size: $fontSize-M2;
.panel {
// 性别年龄
.func1 {
&-item {
display: block;
......
......@@ -107,48 +107,99 @@
</div>
</div>
<div class="panel panel-right">
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
<!-- 好医时 -->
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
<div class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
</div>
</div>
</div>
</div>
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
<el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
</el-select> -->
<date-picker class="ipt-date" :placeholder="$t('index.contact.form.Time') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
<date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
color: '#606266',
'text-align': 'center'
}">
</date-picker>
</date-picker>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="func func2">
<!-- PRODUCT_REN_RICH -->
<!-- 传家福 -->
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
<div class="func func2">
<div class="func2-tit">滑動選擇保額</div>
<div class="func2-tit2">保額（萬美元）</div>
<!-- <div class="slider">
<div class="slider-bar">
<div class="slider-bar-thumb" >
<div class="num">300</div>
<div class="circle"></div>
</div>
</div>
</div> -->
<slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
<!-- 表格选择 -->
<div class="form">
<div class="form-item">
<div class="label">繳費期</div>
<div class="val">
<div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
<div class="form-item">
<div class="label">繳費選項</div>
<div class="val val2">
<!-- <div class="item">每年</div>
<div class="item">每半年</div>
<div class="item">每季度</div>
<div class="item">每月</div> -->
<div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="line"></div>
<!-- 计算 -->
<div class="calculation">
<div class="label">每月保费</div>
<div class="value">$ <span class="price">{{sumAssured}}</span></div>
</div>
<!-- 提示 -->
<div class="tips">Please contact your financial consultant to quote for insured
amount that exceeds USD 3 million</div>
</div>
</div>
</div>
</div>
</div>
......
......@@ -159,4 +159,9 @@
@mixin linear-bg() {
background-color: transparent;
background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
}
@mixin linear-bg-rev() {
background-color: transparent;
background-image: linear-gradient(135deg, #feab1b, #f15a08), linear-gradient(90deg, #fff, #fff);
}
\ No newline at end of file
......
......@@ -32,6 +32,7 @@ $fontSize-M:14px;
$fontSizeSmall-M:12px;
//新版PC字体
$fontSizeTitle-M2:24px;
$fontSize-M2:18px;
$fontSizeSmall-M2:16px;
......