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 471 additions and 41 deletions
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
16 "amfe-flexible": "^2.2.1", 16 "amfe-flexible": "^2.2.1",
17 "axios": "^0.19.0", 17 "axios": "^0.19.0",
18 "axios-mock-adapter": "^1.16.0", 18 "axios-mock-adapter": "^1.16.0",
19 "calculatorjs": "^1.1.2",
19 "co": "^4.6.0", 20 "co": "^4.6.0",
20 "core-js": "^2.6.5", 21 "core-js": "^2.6.5",
21 "crypto-js": "^3.1.9-1", 22 "crypto-js": "^3.1.9-1",
......
1 export default {
2 props: ["min", "max", "value"],
3 data() {
4 return {
5 slider: null, //滚动条DOM元素
6 thunk: null, //拖拽DOM元素
7 per: this.value || 0 //当前值
8 };
9 },
10 methods: {
11 initData() {
12 this.slider = this.$refs.slider;
13 this.thunk = this.$refs.trunk;
14 var _this = this;
15 // console.log("object");
16 this.thunk.onmousedown = function (e) {
17 var width = parseInt(_this.width);
18 var disX = e.clientX;
19 document.onmousemove = function (e) {
20 // value, left, width
21 // 当value变化的时候，会通过计算属性修改left，width
22
23 // 拖拽的时候获取的新width
24 var newWidth = e.clientX - disX + width;
25 // 拖拽的时候得到新的百分比
26 var scale = newWidth / _this.slider.offsetWidth;
27 _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
28 _this.per = Math.max(_this.per, _this.min);
29 _this.per = Math.min(_this.per, _this.max);
30 _this.$emit("input", _this.per);
31 };
32 document.onmouseup = function () {
33 document.onmousemove = document.onmouseup = null;
34 };
35 return false;
36 };
37 }
38 },
39 //渲染到页面的时候
40 mounted() {
41 this.initData();
42 window.addEventListener('resize', ()=>{
43 this.initData();
44 }, false);
45 },
46
47 computed: {
48 // 设置一个百分比，提供计算slider进度宽度和trunk的left值
49 // 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width
50 // trunk left = slider进度width + trunk宽度/2
51 scale() {
52 return (this.per - this.min) / (this.max - this.min);
53 },
54 width() {
55 if (this.slider) {
56 return this.slider.offsetWidth * this.scale + "px";
57 } else {
58 return 0 + "px";
59 }
60 },
61 left() {
62 if (this.slider) {
63 return (
64 this.slider.offsetWidth * this.scale -
65 this.thunk.offsetWidth / 2 +
66 "px"
67 );
68 } else {
69 return 0 + "px";
70 }
71 }
72 }
73 };
1 @import "@/styles/_support.scss";
2
3 .slider {
4 position: relative;
5 // margin: 20px 0;
6 width: 100%;
7 height: 17px;
8 border-radius: 8.5px;
9 @include linear-bg-rev;
10 }
11 .slider .process {
12 position: absolute;
13 left: 0;
14 top: 0;
15 width: 100%;
16 height: 17px;
17 border-radius: 8.5px;
18 }
19 .slider .thunk {
20 position: absolute;
21 bottom: -4px;
22 left: -12px;
23 }
24 .slider .block {
25 background-image: url("~@/assets/images/index/index-thumb.png");
26 @extend .bis;
27 width: 27px;
28 height: 26px;
29 margin: 1px auto 0;
30 cursor: pointer;
31 transition: 0.2s all;
32 }
33 .slider .tips {
34 // position: absolute;
35 // left: -7px;
36 // bottom: 30px;
37 // min-width: 15px;
38 // text-align: center;
39 // padding: 4px 8px;
40 // background: #000;
41 // border-radius: 5px;
42 // height: 24px;
43 // color: #fff;
44 background-image: url("~@/assets/images/index/index-num-bg.png");
45 @extend .bis;
46 width: 40px;
47 height: 30px;
48 font-size: $fontSize-M2;
49 color: #ffffff;
50 text-align: center;
51 padding-top: 2px;
52 }
53 .slider .tips i {
54 position: absolute;
55 margin-left: -5px;
56 left: 50%;
57 bottom: -9px;
58 font-size: 16px;
59 color: #000;
60 }
61 .slider .block:hover {
62 // transform: scale(1.1);
63 opacity: 0.9;
64 }
1 <template>
2 <div class="slider" ref="slider">
3 <div class="process" :style="{width}"></div>
4 <div class="thunk" ref="trunk" :style="{left}">
5 <div class="tips">
6 <span>{{per}}</span>
7 <!-- <span>300</span> -->
8 </div>
9 <div class="block"></div>
10
11 </div>
12 </div>
13 </template>
14
15 <script src="./slider-comp.js"></script>
16 <style lang="scss" scoped>
17 @import "./slider-comp.scss";
18 </style>
...@@ -9,6 +9,8 @@ import { ...@@ -9,6 +9,8 @@ import {
9 } from "@/api/fetch-api.js"; 9 } from "@/api/fetch-api.js";
10 10
11 import DatePicker from "@/components/date-picker/date-picker.vue"; 11 import DatePicker from "@/components/date-picker/date-picker.vue";
12 import Slider from "@/components/slider-comp/slider-comp.vue";
13
12 import { 14 import {
13 ddMMyyyy2yyyyMMdd 15 ddMMyyyy2yyyyMMdd
14 } from "@utils/utils.js"; 16 } from "@utils/utils.js";
...@@ -16,6 +18,8 @@ import { ...@@ -16,6 +18,8 @@ import {
16 contactMethodCheck 18 contactMethodCheck
17 } from "@utils/utils.js"; 19 } from "@utils/utils.js";
18 20
21 // import calc from 'calculatorjs';
22
19 export default { 23 export default {
20 data() { 24 data() {
21 return { 25 return {
...@@ -73,10 +77,69 @@ export default { ...@@ -73,10 +77,69 @@ export default {
73 e5: "", // 理想聯絡時間 77 e5: "", // 理想聯絡時間
74 e6: "", // 查詢事項 78 e6: "", // 查詢事項
75 }, 79 },
80
81 sliderMin: 1, // 投保滑动最小值
82 sliderMax: 300, // 投保滑动最大值
83 sliderPer: 1, // 保费数值
84
85 // 繳費期列表
86 paymentPeriodList: [{
87 v: 3,
88 n: "3年",
89 p: 333.330000
90 },
91 {
92 v: 5,
93 n: "5年",
94 p: 200.000000
95 },
96 {
97 v: 8,
98 n: "8年",
99 p: 125.000000
100 },
101 {
102 v: 10,
103 n: "10年",
104 p: 100.000000
105 }
106 ],
107 // 缴费选项列表
108 paymentOptionList: [{
109 v: 1,
110 m: 12,
111 n: "每年",
112 p: 1
113 },
114 {
115 v: 2,
116 m: 6,
117 n: "每半年",
118 p: 0.5064
119 },
120 {
121 v: 4,
122 m: 6,
123 n: "每季度",
124 p: 0.2548
125 },
126 {
127 v: 12,
128 m: 1,
129 n: "每月",
130 p: 0.0853
131 }
132 ],
133
134 // 当前选择保费期
135 curPaymentPeriod: {},
136 // 当前缴费选项
137 curPaymentOption: {}
76 }; 138 };
77 }, 139 },
78 components: { 140 components: {
79 DatePicker 141 DatePicker,
142 Slider
80 }, 143 },
81 computed: { 144 computed: {
82 locale() { 145 locale() {
...@@ -99,7 +162,6 @@ export default { ...@@ -99,7 +162,6 @@ export default {
99 console.log("result:", result); 162 console.log("result:", result);
100 return result; 163 return result;
101 }, 164 },
102
103 submitBtnDisabled() { 165 submitBtnDisabled() {
104 // let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0; 166 // let b1 = !this.selectedPolicies || this.selectedPolicies.length == 0;
105 // let b2 = !this.data.address && !this.data.email && !this.data.mobile; 167 // let b2 = !this.data.address && !this.data.email && !this.data.mobile;
...@@ -157,28 +219,26 @@ export default { ...@@ -157,28 +219,26 @@ export default {
157 }; 219 };
158 return result; 220 return result;
159 }, 221 },
222
223 /**
224 *
225 * 保费=保额/1000 * 费率因子 * 缴别系数
226 * 以50万港币为例，缴费期10年，季缴，计算如下：
227 * 500,000 / 1000 * 100 * 0.2548 = 12740
228 */
229 sumAssured() {
230 let {
231 curPaymentPeriod,
232 curPaymentOption,
233 sliderPer
234 } = this;
235 let bet = 10000; //单位 万元
236 let result = bet * sliderPer / 1000 * curPaymentPeriod.p * curPaymentOption.p * curPaymentOption.v;
237 result = result.toFixed(2);
238 return result;
239 }
160 }, 240 },
161 methods: { 241 methods: {
162 // fetchBanner() {
163 // return new Promise((resolve, reject) => {
164 // httpPost({
165 // url: api.banner
166 // }).then(res => {
167 // resolve(res);
168 // });
169 // });
170 // },
171 // refreshBanner() {
172 // let key = this.locale;
173 // if (key == "zh") {
174 // key = "cn";
175 // }
176 // let bannerList = [];
177 // this.bannerCandidateList.forEach(element => {
178 // bannerList.push(element[key]);
179 // });
180 // this.$set(this, "bannerList", bannerList);
181 // },
182 btnNavigateTo(type, link, d) { 242 btnNavigateTo(type, link, d) {
183 switch (type) { 243 switch (type) {
184 case "none": 244 case "none":
...@@ -207,6 +267,14 @@ export default { ...@@ -207,6 +267,14 @@ export default {
207 break; 267 break;
208 } 268 }
209 }, 269 },
270 // 选择繳費期
271 onSelectPaymentPeriodHandler(item) {
272 this.curPaymentPeriod = item;
273 },
274 // 选择缴费选项
275 onSelectPaymentOptionHandler(item) {
276 this.curPaymentOption = item;
277 },
210 // 选择标签 278 // 选择标签
211 onTabHandler(item) { 279 onTabHandler(item) {
212 this.curTab = item; 280 this.curTab = item;
...@@ -264,7 +332,6 @@ export default { ...@@ -264,7 +332,6 @@ export default {
264 query: {} 332 query: {}
265 }); 333 });
266 } 334 }
267
268 }, 335 },
269 /** 336 /**
270 * 验证表单 337 * 验证表单
...@@ -359,11 +426,11 @@ export default { ...@@ -359,11 +426,11 @@ export default {
359 }); 426 });
360 }) 427 })
361 }, 428 },
429
362 initData() { 430 initData() {
363 // this.fetchBanner().then(res => { 431
364 // this.bannerCandidateList = res; 432 this.curPaymentPeriod = this.paymentPeriodList[0];
365 // this.refreshBanner(); 433 this.curPaymentOption = this.paymentOptionList[0];
366 // });
367 434
368 // 可以埋数据在 localStorage 435 // 可以埋数据在 localStorage
369 httpPost({ 436 httpPost({
...@@ -398,7 +465,7 @@ export default { ...@@ -398,7 +465,7 @@ export default {
398 element.index = idx; 465 element.index = idx;
399 element.describeList = element.describe.split("\n"); 466 element.describeList = element.describe.split("\n");
400 }); 467 });
401 this.curTab = this.dataList[0]; 468 this.curTab = this.dataList[1];
402 this.bannerList = this.dataList; 469 this.bannerList = this.dataList;
403 console.log("this.dataList:", this.dataList); 470 console.log("this.dataList:", this.dataList);
404 }) 471 })
...@@ -410,7 +477,6 @@ export default { ...@@ -410,7 +477,6 @@ export default {
410 this.initData(); 477 this.initData();
411 }, 478 },
412 created() { 479 created() {
413
414 this.$root.eventBus.$on("langChange", () => { 480 this.$root.eventBus.$on("langChange", () => {
415 try { 481 try {
416 // this.refreshBanner(); 482 // this.refreshBanner();
......
1 @import "@/styles/_support.scss"; 1 @import "@/styles/_support.scss";
2 2
3 .page { 3 .page {
4 font-size: 22px; 4 font-size: $fontSize-M2;
5 } 5 }
6 6
7 .top-space { 7 .top-space {
...@@ -297,11 +297,10 @@ ...@@ -297,11 +297,10 @@
297 } 297 }
298 298
299 &-cont { 299 &-cont {
300 min-height: 380px; 300 min-height: 384px;
301 margin: 0 auto 0; 301 margin: 0 auto 0;
302 position: relative; 302 position: relative;
303 display: flex; 303 display: flex;
304 font-size: 22px;
305 304
306 .panel { 305 .panel {
307 // position: relative; 306 // position: relative;
...@@ -310,7 +309,7 @@ ...@@ -310,7 +309,7 @@
310 309
311 .panel-left { 310 .panel-left {
312 @include linear-bg; 311 @include linear-bg;
313 // position: relative; 312 font-size: 22px;
314 @extend .fcc; 313 @extend .fcc;
315 .desc { 314 .desc {
316 @extend .bb; 315 @extend .bb;
...@@ -327,12 +326,16 @@ ...@@ -327,12 +326,16 @@
327 326
328 .panel-right { 327 .panel-right {
329 background-color: #ffffff; 328 background-color: #ffffff;
330 @extend .fcc; 329 // @extend .fcc;
331 330
331 .plugin {
332 width: 100%;
333 height: 100%;
334 }
332 .func { 335 .func {
333 } 336 }
334 337
335 // 性别和年龄选择 338 // 产品好医时交互插件 性别和年龄选择
336 .func1 { 339 .func1 {
337 &-item { 340 &-item {
338 display: flex; 341 display: flex;
...@@ -373,7 +376,156 @@ ...@@ -373,7 +376,156 @@
373 } 376 }
374 } 377 }
375 378
376 // 平安福保费计算 379 // 平安福 保费计算 插件
380 .func2 {
381 @extend .bb;
382 padding: 12px 32px;
383
384 &-tit {
385 font-size: 22px;
386 font-weight: bold;
387 text-align: center;
388 color: $cOrange2;
389 }
390
391 &-tit2 {
392 margin-top: 2px;
393 font-size: $fontSize-M2;
394 text-align: center;
395 color: $cFontGray2;
396 }
397
398 // 滑动条
399 .slider {
400 position: relative;
401 max-width: 100%;
402 margin: 38px auto 0;
403 }
404
405 // 滑动条
406 // .slider {
407 // position: relative;
408 // max-width: 100%;
409 // margin: 0 auto;
410
411 // &-bar {
412 // position: relative;
413 // @include linear-bg-rev;
414 // height: 17px;
415 // border-radius: 8.5px;
416 // width: 100%;
417 // margin-top: 36px;
418
419 // &-thumb {
420 // position: absolute;
421 // bottom: -4px;
422 // left: -12px;
423
424 // .num {
425 // background-image: url("~@/assets/images/index/index-num-bg.png");
426 // @extend .bis;
427 // width: 40px;
428 // height: 30px;
429 // font-size: $fontSize-M2;
430 // color: #ffffff;
431 // text-align: center;
432 // padding-top: 2px;
433 // }
434
435 // .circle {
436 // background-image: url("~@/assets/images/index/index-thumb.png");
437 // @extend .bis;
438 // width: 27px;
439 // height: 26px;
440 // margin: 1px auto 0;
441 // cursor: pointer;
442 // }
443 // }
444 // }
445 // }
446
447 .form {
448 margin-top: 14px;
449
450 &-item {
451 @extend .bb;
452 display: flex;
453
454 .label {
455 @extend .bb;
456 width: 110px;
457 font-size: 22px;
458 padding-right: 10px;
459 }
460
461 .val {
462 display: flex;
463 justify-content: space-between;
464 flex-wrap: wrap;
465 flex: 1;
466
467 .item {
468 @extend .fcc;
469 @include border-tans;
470 border-radius: 10px;
471 width: 76px;
472 height: 35px;
473 text-align: center;
474 margin-right: 12px;
475 margin-bottom: 14px;
476 cursor: pointer;
477
478 &:last-child {
479 margin-right: 0;
480 }
481 }
482
483 .item-act {
484 @include linear-bg-rev;
485 border: none;
486 color: #ffffff;
487 }
488 }
489
490 .val2 {
491 justify-content: flex-start;
492 .item {
493 width: 132px;
494 height: 36px;
495 }
496 }
497 }
498 }
499
500 .line {
501 margin-top: 2px;
502 width: 100%;
503 height: 2px;
504 background-color: #efefef;
505 }
506
507 .calculation {
508 margin-top: 10px;
509 display: flex;
510 justify-content: space-between;
511 align-items: flex-end;
512 .label {
513 }
514 .value {
515 .price {
516 font-size: 24px;
517 font-weight: bold;
518 // transition: 0.2s all;
519 }
520 }
521 }
522
523 .tips {
524 margin-top: 6px;
525 font-size: $fontSizeSmall-M2;
526 color: rgba(102, 102, 102, 0.5);
527 }
528 }
377 } 529 }
378 530
379 .arrow { 531 .arrow {
...@@ -745,7 +897,6 @@ ...@@ -745,7 +897,6 @@
745 font-size: $fontSize-M2; 897 font-size: $fontSize-M2;
746 898
747 .panel { 899 .panel {
748 // 性别年龄
749 .func1 { 900 .func1 {
750 &-item { 901 &-item {
751 display: block; 902 display: block;
......
...@@ -107,7 +107,9 @@ ...@@ -107,7 +107,9 @@
107 </div> 107 </div>
108 </div> 108 </div>
109 <div class="panel panel-right"> 109 <div class="panel panel-right">
110 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="func func1"> 110 <!-- 好医时 -->
111 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
112 <div class="func func1">
111 <div class="func1-item"> 113 <div class="func1-item">
112 <div class="k"> {{$t('common.Sex')}}</div> 114 <div class="k"> {{$t('common.Sex')}}</div>
113 <div class="gender"> 115 <div class="gender">
...@@ -132,7 +134,7 @@ ...@@ -132,7 +134,7 @@
132 <!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')"> 134 <!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
133 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option> 135 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
134 </el-select> --> 136 </el-select> -->
135 <date-picker class="ipt-date" :placeholder="$t('index.contact.form.Time') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{ 137 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
136 border: 'none !important', 138 border: 'none !important',
137 'background-color': 'transparent !important', 139 'background-color': 'transparent !important',
138 padding: '16px 24px', 140 padding: '16px 24px',
...@@ -145,10 +147,59 @@ ...@@ -145,10 +147,59 @@
145 </div> 147 </div>
146 </div> 148 </div>
147 </div> 149 </div>
150 </div>
151
152 <!-- 传家福 -->
153 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
154 <div class="func func2">
155 <div class="func2-tit">滑動選擇保額</div>
156 <div class="func2-tit2">保額（萬美元）</div>
157 <!-- <div class="slider">
158 <div class="slider-bar">
159 <div class="slider-bar-thumb" >
160 <div class="num">300</div>
161 <div class="circle"></div>
162 </div>
163 </div>
164 </div> -->
148 165
149 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="func func2"> 166 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
150 <!-- PRODUCT_REN_RICH --> 167 <!-- 表格选择 -->
168 <div class="form">
169 <div class="form-item">
170 <div class="label">繳費期</div>
171 <div class="val">
172 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
173 {{ item.n }}
174 </div>
175 </div>
151 </div> 176 </div>
177 <div class="form-item">
178 <div class="label">繳費選項</div>
179 <div class="val val2">
180 <!-- <div class="item">每年</div>
181 <div class="item">每半年</div>
182 <div class="item">每季度</div>
183 <div class="item">每月</div> -->
184 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
185 {{ item.n }}
186 </div>
187 </div>
188 </div>
189 </div>
190 <!-- 分割线 -->
191 <div class="line"></div>
192 <!-- 计算 -->
193 <div class="calculation">
194 <div class="label">每月保费</div>
195 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
196 </div>
197 <!-- 提示 -->
198 <div class="tips">Please contact your financial consultant to quote for insured
199 amount that exceeds USD 3 million</div>
200 </div>
201 </div>
202
152 </div> 203 </div>
153 </div> 204 </div>
154 </div> 205 </div>
......
...@@ -160,3 +160,8 @@ ...@@ -160,3 +160,8 @@
160 background-color: transparent; 160 background-color: transparent;
161 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff); 161 background-image: linear-gradient(135deg, #f15a08, #feab1b), linear-gradient(90deg, #fff, #fff);
162 } 162 }
163
164 @mixin linear-bg-rev() {
165 background-color: transparent;
166 background-image: linear-gradient(135deg, #feab1b, #f15a08), linear-gradient(90deg, #fff, #fff);
167 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -32,6 +32,7 @@ $fontSize-M:14px; ...@@ -32,6 +32,7 @@ $fontSize-M:14px;
32 $fontSizeSmall-M:12px; 32 $fontSizeSmall-M:12px;
33 33
34 34
35 //新版PC字体
35 $fontSizeTitle-M2:24px; 36 $fontSizeTitle-M2:24px;
36 $fontSize-M2:18px; 37 $fontSize-M2:18px;
37 $fontSizeSmall-M2:16px; 38 $fontSizeSmall-M2:16px;
......