Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
820aa37a by simon
Options

分红终身顶部的banner还是要保留，但是中间这一大块关于分红终身的内容，暂时都需要去掉

1 parent c7cc290e
Inline Side-by-side
Showing 3 changed files with 87 additions and 71 deletions
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
26 data() { 26 data() {
27 return { 27 return {
28 key: "value", 28 key: "value",
29 img:require("@/assets/images/index/index-tab-2.png"), 29 img: require("@/assets/images/index/index-tab-2.png"),
30 PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时 30 PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时
31 PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福 31 PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
32 // swiper 32 // swiper
...@@ -54,6 +54,8 @@ export default { ...@@ -54,6 +54,8 @@ export default {
54 // 导航菜单 54 // 导航菜单
55 curTab: {}, 55 curTab: {},
56 56
57 curTabTemp: {},
58
57 // 投保 59 // 投保
58 quoteData: { 60 quoteData: {
59 gender: "", 61 gender: "",
...@@ -88,51 +90,51 @@ export default { ...@@ -88,51 +90,51 @@ export default {
88 90
89 // 繳費期列表 91 // 繳費期列表
90 paymentPeriodList: [{ 92 paymentPeriodList: [{
91 v: 3, 93 v: 3,
92 n: "", 94 n: "",
93 p: 333.330000 95 p: 333.330000
94 }, 96 },
95 { 97 {
96 v: 5, 98 v: 5,
97 n: "", 99 n: "",
98 p: 200.000000 100 p: 200.000000
99 }, 101 },
100 { 102 {
101 v: 8, 103 v: 8,
102 n: "", 104 n: "",
103 p: 125.000000 105 p: 125.000000
104 }, 106 },
105 { 107 {
106 v: 10, 108 v: 10,
107 n: "", 109 n: "",
108 p: 100.000000 110 p: 100.000000
109 } 111 }
110 ], 112 ],
111 // 缴费选项列表 113 // 缴费选项列表
112 paymentOptionList: [{ 114 paymentOptionList: [{
113 v: 1, 115 v: 1,
114 m: 12, 116 m: 12,
115 n: "", 117 n: "",
116 p: 1 118 p: 1
117 }, 119 },
118 { 120 {
119 v: 2, 121 v: 2,
120 m: 6, 122 m: 6,
121 n: "", 123 n: "",
122 p: 0.5064 124 p: 0.5064
123 }, 125 },
124 { 126 {
125 v: 4, 127 v: 4,
126 m: 6, 128 m: 6,
127 n: "", 129 n: "",
128 p: 0.2548 130 p: 0.2548
129 }, 131 },
130 { 132 {
131 v: 12, 133 v: 12,
132 m: 1, 134 m: 1,
133 n: "", 135 n: "",
134 p: 0.0853 136 p: 0.0853
135 } 137 }
136 ], 138 ],
137 139
138 // 当前选择保费期 140 // 当前选择保费期
...@@ -157,13 +159,13 @@ export default { ...@@ -157,13 +159,13 @@ export default {
157 }, 159 },
158 titleList() { 160 titleList() {
159 let result = [{ 161 let result = [{
160 n: this.i18n.common.MaleTitle, 162 n: this.i18n.common.MaleTitle,
161 v: "M" 163 v: "M"
162 }, 164 },
163 { 165 {
164 n: this.i18n.common.FemaleTitle, 166 n: this.i18n.common.FemaleTitle,
165 v: "F" 167 v: "F"
166 } 168 }
167 ] 169 ]
168 // console.log("result:", result); 170 // console.log("result:", result);
169 return result; 171 return result;
...@@ -559,6 +561,27 @@ export default { ...@@ -559,6 +561,27 @@ export default {
559 }); 561 });
560 562
561 563
564 /**
565 * 硬编码
566 * 1.把下面代码删除
567 */
568
569 /**
570 * 硬编码 start ----
571 */
572 let tempDataList = [];
573 this.dataList.forEach(element => {
574 if (element.relation == this.PRODUCT_PRO_EASY) {
575 tempDataList.push(element);
576 }
577 });
578 this.dataList = tempDataList;
579 this.curTabTemp = this.dataList[0] || {};
580 /**
581 * 硬编码 end ----
582 */
583
584
562 // 设置缓存 585 // 设置缓存
563 sessionStorage.setItem("_pingan_index_datalist", JSON.stringify(this.dataList)); 586 sessionStorage.setItem("_pingan_index_datalist", JSON.stringify(this.dataList));
564 sessionStorage.setItem("_pingan_index_bannerlist", JSON.stringify(this.bannerList)); 587 sessionStorage.setItem("_pingan_index_bannerlist", JSON.stringify(this.bannerList));
...@@ -568,7 +591,7 @@ export default { ...@@ -568,7 +591,7 @@ export default {
568 591
569 }, 592 },
570 }, 593 },
571 beforeDestroy() { }, 594 beforeDestroy() {},
572 mounted() { 595 mounted() {
573 this.initData(); 596 this.initData();
574 }, 597 },
...@@ -577,7 +600,7 @@ export default { ...@@ -577,7 +600,7 @@ export default {
577 try { 600 try {
578 // this.refreshBanner(); 601 // this.refreshBanner();
579 this.initData(); 602 this.initData();
580 } catch (e) { } 603 } catch (e) {}
581 }); 604 });
582 }, 605 },
583 watch: { 606 watch: {
......
...@@ -406,7 +406,6 @@ ...@@ -406,7 +406,6 @@
406 .ipt-wrap-linear { 406 .ipt-wrap-linear {
407 width: 250px; 407 width: 250px;
408 .ipt-date { 408 .ipt-date {
409 padding: 0 24px;
410 width: 100%; 409 width: 100%;
411 background-color: #ffffff; 410 background-color: #ffffff;
412 border-radius: $borderRadius; 411 border-radius: $borderRadius;
...@@ -682,7 +681,6 @@ ...@@ -682,7 +681,6 @@
682 } 681 }
683 682
684 .ipt-date { 683 .ipt-date {
685 padding: 0 24px;
686 width: 100%; 684 width: 100%;
687 background-color: #ffffff; 685 background-color: #ffffff;
688 border-radius: $borderRadius; 686 border-radius: $borderRadius;
......
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
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-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> 44 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index,'nav-tab-item-single':bannerList.length<=1 }" :style="'width: calc(1200px / ' + bannerList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in bannerList" :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,'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> -->
46 46
47 </div> 47 </div>
48 48
...@@ -81,9 +81,9 @@ ...@@ -81,9 +81,9 @@
81 <swiper-slide v-for="(item, index) in dataList" :key="index"> 81 <swiper-slide v-for="(item, index) in dataList" :key="index">
82 <div class="ebg" :style="'background-image: url(' + item.pageMidImage + ');'"></div> 82 <div class="ebg" :style="'background-image: url(' + item.pageMidImage + ');'"></div>
83 <div class="tit-wrap"> 83 <div class="tit-wrap">
84 <div class="tit">{{curTab.pageMidTitle}}</div> 84 <div class="tit">{{curTabTemp.pageMidTitle}}</div>
85 <div class="tit2"> 85 <div class="tit2">
86 {{curTab.pageMidDescribe}} 86 {{curTabTemp.pageMidDescribe}}
87 </div> 87 </div>
88 </div> 88 </div>
89 </swiper-slide> 89 </swiper-slide>
...@@ -93,11 +93,10 @@ ...@@ -93,11 +93,10 @@
93 <div class="quote-cont"> 93 <div class="quote-cont">
94 <!-- tab表格 --> 94 <!-- tab表格 -->
95 <div class="table" :class="{'table-1':dataList.length<=1}"> 95 <div class="table" :class="{'table-1':dataList.length<=1}">
96 <!-- 1.把@click="onTabHandler(item)" 加回去; 2.把class改回 class="table-tab-item 3.把所有curTabTemp替换回curTab" -->
96 <div class="table-tab" ref="quote"> 97 <div class="table-tab" ref="quote">
97 <!-- <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style=" 98 <div class="table-tab-item table-tab-item-act" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTabTemp.index }" :style="
98 ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> --> 99 'width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ';backgroundImage:url('+require('@/assets/images/index/index-tab'+(item.index == curTabTemp.index?'-act':'')+'-'+dataList.length+'.png')+')'">{{ item.name }}</div>
99 <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
100 'width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ';backgroundImage:url('+require('@/assets/images/index/index-tab'+(item.index == curTab.index?'-act':'')+'-'+dataList.length+'.png')+')'">{{ item.name }}</div>
101 </div> 100 </div>
102 <div class="linear"></div> 101 <div class="linear"></div>
103 <div class="table-wrap"> 102 <div class="table-wrap">
...@@ -105,14 +104,14 @@ ...@@ -105,14 +104,14 @@
105 <div class="table-cont"> 104 <div class="table-cont">
106 <div class="panel panel-left"> 105 <div class="panel panel-left">
107 <div class="desc"> 106 <div class="desc">
108 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id"> 107 <div class="desc-item" v-for="item in curTabTemp.describeList" :key="item.id">
109 {{ item }} 108 {{ item }}
110 </div> 109 </div>
111 </div> 110 </div>
112 </div> 111 </div>
113 <div class="panel panel-right"> 112 <div class="panel panel-right">
114 <!-- 好医时 --> 113 <!-- 好医时 -->
115 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc"> 114 <div v-if="curTabTemp.relation == PRODUCT_PRO_EASY " class="plugin fcc">
116 <div class="func func1"> 115 <div class="func func1">
117 <div class="func1-item"> 116 <div class="func1-item">
118 <div class="k"> {{$t('common.Sex')}}</div> 117 <div class="k"> {{$t('common.Sex')}}</div>
...@@ -151,13 +150,12 @@ ...@@ -151,13 +150,12 @@
151 </div> 150 </div>
152 151
153 <!-- 传家福 --> 152 <!-- 传家福 -->
154 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin "> 153 <div v-if="curTabTemp.relation == PRODUCT_REN_RICH " class="plugin ">
155 <div class="func func2"> 154 <div class="func func2">
156 <div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div> 155 <div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div>
157 <div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div> 156 <div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div>
158 157
159 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider> 158 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
160 <!-- 表格选择 -->
161 <div class="form"> 159 <div class="form">
162 <div class="form-item"> 160 <div class="form-item">
163 <div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div> 161 <div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div>
...@@ -176,14 +174,11 @@ ...@@ -176,14 +174,11 @@
176 </div> 174 </div>
177 </div> 175 </div>
178 </div> 176 </div>
179 <!-- 分割线 -->
180 <div class="line"></div> 177 <div class="line"></div>
181 <!-- 计算 -->
182 <div class="calculation"> 178 <div class="calculation">
183 <div class="label">{{curPaymentOption.n}}{{locale == 'en' ? ' ' : ''}}{{$t('index.quote.genRich.Premium')}}</div> 179 <div class="label">{{curPaymentOption.n}}{{locale == 'en' ? ' ' : ''}}{{$t('index.quote.genRich.Premium')}}</div>
184 <div class="value">$ <span class="price">{{sumAssured}}</span></div> 180 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
185 </div> 181 </div>
186 <!-- 提示 -->
187 <div class="tips">{{$t('index.quote.genRich.tips')}}</div> 182 <div class="tips">{{$t('index.quote.genRich.tips')}}</div>
188 </div> 183 </div>
189 </div> 184 </div>
...@@ -193,8 +188,8 @@ ...@@ -193,8 +188,8 @@
193 </div> 188 </div>
194 </div> 189 </div>
195 190
196 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 191 <!-- <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
197 <div @click="onNextTabHandler()" class="arrow arrow-right"></div> 192 <div @click="onNextTabHandler()" class="arrow arrow-right"></div> -->
198 </div> 193 </div>
199 194
200 </div> 195 </div>
......