默认提交
Showing
3 changed files
with
42 additions
and
11 deletions
| ... | @@ -152,20 +152,37 @@ export default { | ... | @@ -152,20 +152,37 @@ export default { |
| 152 | }, | 152 | }, |
| 153 | initProduct() { | 153 | initProduct() { |
| 154 | let productList = [{ | 154 | let productList = [{ |
| 155 | title: "保證續保至100歲" | 155 | showMore: false, |
| 156 | title: "保證續保至100歲", | ||
| 157 | desc: "平安人壽（香港）「好e時」自願醫保標準計劃 接受任何介乎14天至80歲人士投保，您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況變而調高續保保費，而您的續保保費將根據當時保單週年日之保費表釐定。" | ||
| 156 | }, { | 158 | }, { |
| 159 | showMore: false, | ||
| 157 | title: "不設終身保障限額" | 160 | title: "不設終身保障限額" |
| 158 | }, { | 161 | }, { |
| 162 | showMore: false, | ||
| 159 | title: "一家投保 盡享稅務扣減" | 163 | title: "一家投保 盡享稅務扣減" |
| 160 | }, { | 164 | }, { |
| 165 | showMore: false, | ||
| 161 | title: "承保投保前未知的已有疾病" | 166 | title: "承保投保前未知的已有疾病" |
| 162 | }, { | 167 | }, { |
| 168 | showMore: false, | ||
| 163 | title: "出院免找數 讓您安心無憂" | 169 | title: "出院免找數 讓您安心無憂" |
| 164 | }, { | 170 | }, { |
| 171 | showMore: false, | ||
| 165 | title: "無索償折扣" | 172 | title: "無索償折扣" |
| 166 | }]; | 173 | }]; |
| 167 | this.productList = productList; | 174 | this.productList = productList; |
| 168 | }, | 175 | }, |
| 176 | onShowMoreHandler(idx) { | ||
| 177 | console.log("idx:", idx); | ||
| 178 | let productList = this.productList; | ||
| 179 | let curProduct = productList[idx]; | ||
| 180 | if (curProduct) { | ||
| 181 | curProduct.showMore = !curProduct.showMore; | ||
| 182 | } | ||
| 183 | this.productList = productList; | ||
| 184 | console.log("this.productList:",this.productList); | ||
| 185 | }, | ||
| 169 | initData() { | 186 | initData() { |
| 170 | this.initProduct(); | 187 | this.initProduct(); |
| 171 | let targetData = null; | 188 | let targetData = null; |
| ... | @@ -210,8 +227,7 @@ export default { | ... | @@ -210,8 +227,7 @@ export default { |
| 210 | try { | 227 | try { |
| 211 | this.sourceData = JSON.parse(d); | 228 | this.sourceData = JSON.parse(d); |
| 212 | this.initData(); | 229 | this.initData(); |
| 213 | } catch (e) { | 230 | } catch (e) {} |
| 214 | } | ||
| 215 | } | 231 | } |
| 216 | } | 232 | } |
| 217 | }, | 233 | }, |
| ... | @@ -219,7 +235,12 @@ export default { | ... | @@ -219,7 +235,12 @@ export default { |
| 219 | this.initActivity(); | 235 | this.initActivity(); |
| 220 | }, | 236 | }, |
| 221 | created() { | 237 | created() { |
| 222 | httpGet({ url: api.productInfo, data: { code: "voluntary" } }).then(res => { | 238 | httpGet({ |
| 239 | url: api.productInfo, | ||
| 240 | data: { | ||
| 241 | code: "voluntary" | ||
| 242 | } | ||
| 243 | }).then(res => { | ||
| 223 | if (res) { | 244 | if (res) { |
| 224 | localStorage.setItem("voluntaryInfo", JSON.stringify(res)); | 245 | localStorage.setItem("voluntaryInfo", JSON.stringify(res)); |
| 225 | this.sourceData = res; | 246 | this.sourceData = res; | ... | ... |
| ... | @@ -221,7 +221,7 @@ | ... | @@ -221,7 +221,7 @@ |
| 221 | @extend .fcc; | 221 | @extend .fcc; |
| 222 | padding: 2px; | 222 | padding: 2px; |
| 223 | width: 582px; | 223 | width: 582px; |
| 224 | height: 262px; | 224 | height: 280px; |
| 225 | margin-bottom: 25px; | 225 | margin-bottom: 25px; |
| 226 | 226 | ||
| 227 | .cont { | 227 | .cont { |
| ... | @@ -237,8 +237,8 @@ | ... | @@ -237,8 +237,8 @@ |
| 237 | } | 237 | } |
| 238 | 238 | ||
| 239 | .detail { | 239 | .detail { |
| 240 | padding: 52px 40px 0 0; | 240 | padding: 52px 32px 0 0; |
| 241 | // flex: 1; | 241 | flex: 1; |
| 242 | flex-grow: 1; | 242 | flex-grow: 1; |
| 243 | 243 | ||
| 244 | .t1 { | 244 | .t1 { |
| ... | @@ -247,7 +247,7 @@ | ... | @@ -247,7 +247,7 @@ |
| 247 | font-weight: bold; | 247 | font-weight: bold; |
| 248 | } | 248 | } |
| 249 | 249 | ||
| 250 | .desc { | 250 | .more { |
| 251 | display: flex; | 251 | display: flex; |
| 252 | // margin: 12px auto 0; | 252 | // margin: 12px auto 0; |
| 253 | 253 | ||
| ... | @@ -261,6 +261,13 @@ | ... | @@ -261,6 +261,13 @@ |
| 261 | font-size: 18px; | 261 | font-size: 18px; |
| 262 | } | 262 | } |
| 263 | } | 263 | } |
| 264 | |||
| 265 | .desc { | ||
| 266 | margin-top: 6px; | ||
| 267 | font-size: 18px; | ||
| 268 | font-weight: 300; | ||
| 269 | // letter-spacing: -0.45px; | ||
| 270 | } | ||
| 264 | } | 271 | } |
| 265 | } | 272 | } |
| 266 | } | 273 | } | ... | ... |
| ... | @@ -67,11 +67,14 @@ | ... | @@ -67,11 +67,14 @@ |
| 67 | </div> | 67 | </div> |
| 68 | <div class="detail"> | 68 | <div class="detail"> |
| 69 | <div class="t1" v-html="item.title">{{item.title}}</div> | 69 | <div class="t1" v-html="item.title">{{item.title}}</div> |
| 70 | <div class="desc"> | 70 | <div class="more pointer" @click="onShowMoreHandler(index)"> |
| 71 | <div class="desc-icon-wrap"> | 71 | <div class="more-icon-wrap" > |
| 72 | <img src="@/assets/images/vhis/vhis-plus.png"> | 72 | <img src="@/assets/images/vhis/vhis-plus.png"> |
| 73 | </div> | 73 | </div> |
| 74 | <div class="c1">展開</div> | 74 | <div class="c1">{{item.showMore ? '收起' : '展開'}}</div> |
| 75 | </div> | ||
| 76 | <div v-if="item.showMore" class="desc"> | ||
| 77 | {{item.desc}} | ||
| 75 | </div> | 78 | </div> |
| 76 | </div> | 79 | </div> |
| 77 | </div> | 80 | </div> | ... | ... |
-
Please register or sign in to post a comment