Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
f747ac5b by simon
Options

1.页首跳转 

2.三语补充
3.体验优化
1 parent 8c2be4ec
Inline Side-by-side
Showing 8 changed files with 177 additions and 39 deletions
...@@ -407,6 +407,20 @@ module.exports = { ...@@ -407,6 +407,20 @@ module.exports = {
407 quote: "Quote now", 407 quote: "Quote now",
408 want: "", 408 want: "",
409 service: "Contact customer service", 409 service: "Contact customer service",
410 genRich:{
411 t1:"Scroll to select insured amount",
412 t2:"保額（萬美元）",
413 PaymentPeriod:"Payment period",
414 PaymentOptions:"Payment options",
415 quotePerMonth:"每月保費",
416 tips:"Please contact your financial consultant to quote for insured amount that exceeds USD 3 million",
417
418 years:"years",
419 Yearly:"Yearly",
420 SemiYearly:"Semi-yearly",
421 Quarterly:"Quarterly",
422 Monthly:"Monthly",
423 }
410 }, 424 },
411 contact: { 425 contact: {
412 t1: "Contact us for more product information.", 426 t1: "Contact us for more product information.",
......
...@@ -420,6 +420,20 @@ module.exports = { ...@@ -420,6 +420,20 @@ module.exports = {
420 quote: "立即報價", 420 quote: "立即報價",
421 want: "我想", 421 want: "我想",
422 service: "聯絡客服", 422 service: "聯絡客服",
423 genRich:{
424 t1:"滑動選擇保額",
425 t2:"保額（萬美元）",
426 PaymentPeriod:"繳費期",
427 PaymentOptions:"繳費選項",
428 quotePerMonth:"每月保費",
429 tips:"保費超過300萬以上，請聯系您的理財顧問索取報價",
430
431 years:"年",
432 Yearly:"每年",
433 SemiYearly:"每半年",
434 Quarterly:"每季",
435 Monthly:"每月",
436 }
423 }, 437 },
424 contact: { 438 contact: {
425 t1: "如欲了解我們的產品，歡迎聯絡我們。", 439 t1: "如欲了解我們的產品，歡迎聯絡我們。",
......
...@@ -423,6 +423,20 @@ module.exports = { ...@@ -423,6 +423,20 @@ module.exports = {
423 quote: "立即报价", 423 quote: "立即报价",
424 want: "我想", 424 want: "我想",
425 service: "联络客服", 425 service: "联络客服",
426 genRich:{
427 t1:"滑动选择保额",
428 t2:"保额（万美元）",
429 PaymentPeriod:"缴费期",
430 PaymentOptions:"缴费选项",
431 quotePerMonth:"每月保费",
432 tips:"保费超过300万以上，请联系您的理财顾问索取报价",
433
434 years:"年",
435 Yearly:"每年",
436 SemiYearly:"每半年",
437 Quarterly:"每季",
438 Monthly:"每月",
439 },
426 }, 440 },
427 contact: { 441 contact: {
428 t1: "如欲了解我们的产品，欢迎联系我们。", 442 t1: "如欲了解我们的产品，欢迎联系我们。",
......
...@@ -10,6 +10,11 @@ import { ...@@ -10,6 +10,11 @@ import {
10 import { 10 import {
11 getObjByListKeyValue 11 getObjByListKeyValue
12 } from '@utils/utils.js' 12 } from '@utils/utils.js'
13 import {
14 gotoVHIS
15 } from '@utils/biz.js'
16
17
13 import VDropdown from '@components/home/dropdown/dropdown.vue' 18 import VDropdown from '@components/home/dropdown/dropdown.vue'
14 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue' 19 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
15 20
...@@ -26,6 +31,9 @@ export default { ...@@ -26,6 +31,9 @@ export default {
26 DropdownLogin, 31 DropdownLogin,
27 }, 32 },
28 computed: { 33 computed: {
34 locale() {
35 return this.$i18n.locale || "tc";
36 },
29 i18n() { 37 i18n() {
30 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 38 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
31 } 39 }
...@@ -127,7 +135,7 @@ export default { ...@@ -127,7 +135,7 @@ export default {
127 }, 135 },
128 // 点击立即报价 136 // 点击立即报价
129 toQuote(){ 137 toQuote(){
130 138 gotoVHIS(this.locale);
131 } 139 }
132 }, 140 },
133 beforeDestroy() { 141 beforeDestroy() {
......
...@@ -8,7 +8,7 @@ $navHeiM: 72px; ...@@ -8,7 +8,7 @@ $navHeiM: 72px;
8 background-color: #fff; 8 background-color: #fff;
9 color: $cFontGray; 9 color: $cFontGray;
10 position: relative; 10 position: relative;
11 z-index: 1000; 11 z-index: 9000;
12 font-size: $fontSize; 12 font-size: $fontSize;
13 13
14 .header-container { 14 .header-container {
......
...@@ -89,22 +89,22 @@ export default { ...@@ -89,22 +89,22 @@ export default {
89 // 繳費期列表 89 // 繳費期列表
90 paymentPeriodList: [{ 90 paymentPeriodList: [{
91 v: 3, 91 v: 3,
92 n: "3年", 92 n: "",
93 p: 333.330000 93 p: 333.330000
94 }, 94 },
95 { 95 {
96 v: 5, 96 v: 5,
97 n: "5年", 97 n: "",
98 p: 200.000000 98 p: 200.000000
99 }, 99 },
100 { 100 {
101 v: 8, 101 v: 8,
102 n: "8年", 102 n: "",
103 p: 125.000000 103 p: 125.000000
104 }, 104 },
105 { 105 {
106 v: 10, 106 v: 10,
107 n: "10年", 107 n: "",
108 p: 100.000000 108 p: 100.000000
109 } 109 }
110 ], 110 ],
...@@ -112,25 +112,25 @@ export default { ...@@ -112,25 +112,25 @@ export default {
112 paymentOptionList: [{ 112 paymentOptionList: [{
113 v: 1, 113 v: 1,
114 m: 12, 114 m: 12,
115 n: "每年", 115 n: "",
116 p: 1 116 p: 1
117 }, 117 },
118 { 118 {
119 v: 2, 119 v: 2,
120 m: 6, 120 m: 6,
121 n: "每半年", 121 n: "",
122 p: 0.5064 122 p: 0.5064
123 }, 123 },
124 { 124 {
125 v: 4, 125 v: 4,
126 m: 6, 126 m: 6,
127 n: "每季度", 127 n: "",
128 p: 0.2548 128 p: 0.2548
129 }, 129 },
130 { 130 {
131 v: 12, 131 v: 12,
132 m: 1, 132 m: 1,
133 n: "每月", 133 n: "",
134 p: 0.0853 134 p: 0.0853
135 } 135 }
136 ], 136 ],
...@@ -317,7 +317,7 @@ export default { ...@@ -317,7 +317,7 @@ export default {
317 let durTime = 600; 317 let durTime = 600;
318 this.$refs.bannerSwiper.swiper.slideTo(index, durTime, true); 318 this.$refs.bannerSwiper.swiper.slideTo(index, durTime, true);
319 this.$refs.quoteBgSwiper.swiper.slideTo(index, durTime, true); 319 this.$refs.quoteBgSwiper.swiper.slideTo(index, durTime, true);
320 this.$refs.quoteSwiper.swiper.slideTo(index, durTime, true); 320 // this.$refs.quoteSwiper.swiper.slideTo(index, durTime, true);
321 }) 321 })
322 }, 322 },
323 323
...@@ -334,7 +334,6 @@ export default { ...@@ -334,7 +334,6 @@ export default {
334 * “好e时”tab的情况下，点击立即报价，跳到VHIS网销平台；传家福tab情况下调到传家福产品页 334 * “好e时”tab的情况下，点击立即报价，跳到VHIS网销平台；传家福tab情况下调到传家福产品页
335 */ 335 */
336 onQuoteHandler() { 336 onQuoteHandler() {
337 // gotoVHIS();
338 337
339 if (this.curTab.relation == this.PRODUCT_PRO_EASY) { 338 if (this.curTab.relation == this.PRODUCT_PRO_EASY) {
340 let d = { 339 let d = {
...@@ -482,6 +481,17 @@ export default { ...@@ -482,6 +481,17 @@ export default {
482 this.curPaymentPeriod = this.paymentPeriodList[0]; 481 this.curPaymentPeriod = this.paymentPeriodList[0];
483 this.curPaymentOption = this.paymentOptionList[0]; 482 this.curPaymentOption = this.paymentOptionList[0];
484 483
484 let yearStr = this.i18n.index.quote.genRich.years;
485 if (this.locale == "en") yearStr = " " + yearStr;
486 this.paymentPeriodList.forEach(element => {
487 element.n = element.v + "" + yearStr;
488 });
489
490 this.paymentOptionList[0].n = this.i18n.index.quote.genRich.Yearly;
491 this.paymentOptionList[1].n = this.i18n.index.quote.genRich.SemiYearly;
492 this.paymentOptionList[2].n = this.i18n.index.quote.genRich.Quarterly;
493 this.paymentOptionList[3].n = this.i18n.index.quote.genRich.Monthly;
494
485 // 可以埋数据在 localStorage 495 // 可以埋数据在 localStorage
486 httpPost({ 496 httpPost({
487 url: api.indexManageListApi, 497 url: api.indexManageListApi,
...@@ -520,7 +530,7 @@ export default { ...@@ -520,7 +530,7 @@ export default {
520 this.bannerList.forEach(element => { 530 this.bannerList.forEach(element => {
521 element.btns = element.btnDescribe; 531 element.btns = element.btnDescribe;
522 }); 532 });
523 console.log("this.dataList:", this.dataList); 533 // console.log("this.dataList:", this.dataList);
524 }) 534 })
525 535
526 }, 536 },
......
...@@ -278,10 +278,9 @@ ...@@ -278,10 +278,9 @@
278 } 278 }
279 279
280 .table { 280 .table {
281 // width: 1200px;
282 width: 1062px; 281 width: 1062px;
283 // background-color: wheat; 282 position: relative;
284 // display: none; 283 z-index: 1;
285 284
286 margin: 56px auto 0; 285 margin: 56px auto 0;
287 &-tab { 286 &-tab {
...@@ -331,6 +330,10 @@ ...@@ -331,6 +330,10 @@
331 position: relative; 330 position: relative;
332 } 331 }
333 332
333 // .quote-swiper {
334 // min-height: 600px;
335 // }
336
334 &-cont { 337 &-cont {
335 min-height: 384px; 338 min-height: 384px;
336 margin: 0 auto 0; 339 margin: 0 auto 0;
...@@ -363,10 +366,12 @@ ...@@ -363,10 +366,12 @@
363 background-color: #ffffff; 366 background-color: #ffffff;
364 // @extend .fcc; 367 // @extend .fcc;
365 368
369
366 .plugin { 370 .plugin {
367 width: 100%; 371 width: 100%;
368 height: 100%; 372 height: 100%;
369 } 373 }
374
370 .func { 375 .func {
371 } 376 }
372 377
...@@ -953,7 +958,8 @@ ...@@ -953,7 +958,8 @@
953 } 958 }
954 959
955 .arrow { 960 .arrow {
956 top: 25%; 961 // top: 20%;
962 top: 200px;
957 transform: scale(0.5); 963 transform: scale(0.5);
958 } 964 }
959 965
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 41
42 <!-- 导航菜单切换 --> 42 <!-- 导航菜单切换 -->
43 <div class="nav-tab"> 43 <div class="nav-tab">
44 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index,'nav-tab-item-act':dataList.length<=1 }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> 44 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index,'nav-tab-item-single':dataList.length<=1 }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div>
45 <!-- <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + '); '+ (index == dataList.length-1 ?'':'width:50%;') +' '" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> --> 45 <!-- <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + '); '+ (index == dataList.length-1 ?'':'width:50%;') +' '" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> -->
46 46
47 </div> 47 </div>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
104 </div> 104 </div>
105 <div class="linear"></div> 105 <div class="linear"></div>
106 <div class="table-wrap"> 106 <div class="table-wrap">
107 <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper"> 107 <!-- <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper">
108 <swiper-slide v-for="(item, index) in dataList" :key="index"> 108 <swiper-slide v-for="(item, index) in dataList" :key="index">
109 <div class="table-cont"> 109 <div class="table-cont">
110 <div class="panel panel-left"> 110 <div class="panel panel-left">
...@@ -115,7 +115,6 @@ ...@@ -115,7 +115,6 @@
115 </div> 115 </div>
116 </div> 116 </div>
117 <div class="panel panel-right"> 117 <div class="panel panel-right">
118 <!-- 好医时 -->
119 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc"> 118 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
120 <div class="func func1"> 119 <div class="func func1">
121 <div class="func1-item"> 120 <div class="func1-item">
...@@ -139,9 +138,6 @@ ...@@ -139,9 +138,6 @@
139 <div class="ipt-wrap-linear"> 138 <div class="ipt-wrap-linear">
140 <div class="down-arrow"></div> 139 <div class="down-arrow"></div>
141 <div class="cont"> 140 <div class="cont">
142 <!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
143 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
144 </el-select> -->
145 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{ 141 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
146 border: 'none !important', 142 border: 'none !important',
147 'background-color': 'transparent !important', 143 'background-color': 'transparent !important',
...@@ -157,25 +153,104 @@ ...@@ -157,25 +153,104 @@
157 </div> 153 </div>
158 </div> 154 </div>
159 155
160 <!-- 传家福 -->
161 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin "> 156 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
162 <div class="func func2"> 157 <div class="func func2">
163 <div class="func2-tit">滑動選擇保額</div> 158 <div class="func2-tit">{{$t('index.quote.vhis.t1')}}</div>
164 <div class="func2-tit2">保額（萬美元）</div> 159 <div class="func2-tit2">{{$t('index.quote.vhis.t2')}}</div>
165 <!-- <div class="slider"> 160
166 <div class="slider-bar"> 161 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
167 <div class="slider-bar-thumb" > 162
168 <div class="num">300</div> 163 <div class="form">
169 <div class="circle"></div> 164 <div class="form-item">
165 <div class="label">{{$t('index.quote.vhis.PaymentPeriod')}}</div>
166 <div class="val">
167 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
168 {{ item.n }}
170 </div> 169 </div>
171 </div> 170 </div>
172 </div> --> 171 </div>
172 <div class="form-item">
173 <div class="label">{{$t('index.quote.vhis.PaymentOptions')}}</div>
174 <div class="val val2">
175 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
176 {{ item.n }}
177 </div>
178 </div>
179 </div>
180 </div>
181 <div class="line"></div>
182 <div class="calculation">
183 <div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div>
184 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
185 </div>
186 <div class="tips">{{$t('index.quote.vhis.tips')}}</div>
187 </div>
188 </div>
189
190 </div>
191
192 </div>
193 </swiper-slide>
194 </swiper> -->
195 <div class="table-cont">
196 <div class="panel panel-left">
197 <div class="desc">
198 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
199 {{ item }}
200 </div>
201 </div>
202 </div>
203 <div class="panel panel-right">
204 <!-- 好医时 -->
205 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
206 <div class="func func1">
207 <div class="func1-item">
208 <div class="k"> {{$t('common.Sex')}}</div>
209 <div class="gender">
210 <div class="gender-item" @click="onQuoteSexHandler('M')">
211 {{$t('common.Male')}}
212 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
213 <img v-else src="@/assets/images/common/icon-male.png" alt />
214 </div>
215 <div class="gender-item" @click="onQuoteSexHandler('F')">
216 {{$t('common.Female')}}
217 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
218 <img v-else src="@/assets/images/common/icon-female.png" alt />
219 </div>
220 </div>
221 </div>
222 <div class="func1-item">
223 <div class="k">{{$t('common.Birthday')}}</div>
224 <div class="age">
225 <div class="ipt-wrap-linear">
226 <div class="down-arrow"></div>
227 <div class="cont">
228 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
229 border: 'none !important',
230 'background-color': 'transparent !important',
231 padding: '16px 24px',
232 color: '#606266',
233 'text-align': 'center'
234 }">
235 </date-picker>
236 </div>
237 </div>
238 </div>
239 </div>
240 </div>
241 </div>
242
243 <!-- 传家福 -->
244 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
245 <div class="func func2">
246 <div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div>
247 <div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div>
173 248
174 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider> 249 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
175 <!-- 表格选择 --> 250 <!-- 表格选择 -->
176 <div class="form"> 251 <div class="form">
177 <div class="form-item"> 252 <div class="form-item">
178 <div class="label">繳費期</div> 253 <div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div>
179 <div class="val"> 254 <div class="val">
180 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id"> 255 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
181 {{ item.n }} 256 {{ item.n }}
...@@ -183,7 +258,7 @@ ...@@ -183,7 +258,7 @@
183 </div> 258 </div>
184 </div> 259 </div>
185 <div class="form-item"> 260 <div class="form-item">
186 <div class="label">繳費選項</div> 261 <div class="label">{{$t('index.quote.genRich.PaymentOptions')}}</div>
187 <div class="val val2"> 262 <div class="val val2">
188 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id"> 263 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
189 {{ item.n }} 264 {{ item.n }}
...@@ -195,20 +270,17 @@ ...@@ -195,20 +270,17 @@
195 <div class="line"></div> 270 <div class="line"></div>
196 <!-- 计算 --> 271 <!-- 计算 -->
197 <div class="calculation"> 272 <div class="calculation">
198 <div class="label">每月保费</div> 273 <div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div>
199 <div class="value">$ <span class="price">{{sumAssured}}</span></div> 274 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
200 </div> 275 </div>
201 <!-- 提示 --> 276 <!-- 提示 -->
202 <div class="tips">Please contact your financial consultant to quote for insured 277 <div class="tips">{{$t('index.quote.vhis.tips')}}</div>
203 amount that exceeds USD 3 million</div>
204 </div> 278 </div>
205 </div> 279 </div>
206 280
207 </div> 281 </div>
208 282
209 </div> 283 </div>
210 </swiper-slide>
211 </swiper>
212 284
213 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 285 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
214 <div @click="onNextTabHandler()" class="arrow arrow-right"></div> 286 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
......