relatedReco-base-style
Showing
4 changed files
with
45 additions
and
70 deletions
| @@ -109,34 +109,9 @@ | @@ -109,34 +109,9 @@ | ||
| 109 | 109 | ||
| 110 | {{#if relatedReco}} | 110 | {{#if relatedReco}} |
| 111 | <div class="post-block related-reco-block clearfix"> | 111 | <div class="post-block related-reco-block clearfix"> |
| 112 | - <h2>相关推荐</h2> | ||
| 113 | - {{#if relatedReco.id}} | ||
| 114 | - {{#with relatedReco}} | ||
| 115 | - <div class="one-good"> | ||
| 116 | - <img class="thumb lazy" data-original={{thumb}}> | ||
| 117 | - <div class="content-container"> | ||
| 118 | - <p> | ||
| 119 | - <span class="reco-name">{{product_name}}</span> | ||
| 120 | - </p> | ||
| 121 | - <p class="price"> | ||
| 122 | - <span class="sale-price {{^price}}no-price{{/price}}">¥{{sales_price}}</span> | ||
| 123 | - {{#market_price}} | ||
| 124 | - <span class="market-price">¥{{.}}</span> | ||
| 125 | - {{/market_price}} | ||
| 126 | - <a class="check-detail" href={{url}}> | ||
| 127 | - 查看详情 | ||
| 128 | - </a> | ||
| 129 | - </p> | ||
| 130 | - </div> | ||
| 131 | - </div> | ||
| 132 | - {{/with}} | ||
| 133 | - {{^}} | ||
| 134 | - <div class="good-list clearfix"> | ||
| 135 | - {{# relatedReco}} | ||
| 136 | - {{> common/goods}} | ||
| 137 | - {{/ relatedReco}} | ||
| 138 | - </div> | ||
| 139 | - {{/if}} | 112 | + {{#each relatedReco}} |
| 113 | + {{> detail/related-reco}} | ||
| 114 | + {{/each}} | ||
| 140 | </div> | 115 | </div> |
| 141 | {{/if}} | 116 | {{/if}} |
| 142 | {{/ content}} | 117 | {{/ content}} |
| 1 | +<div class="one-good clearfix"> | ||
| 2 | + <img class="thumb lazy" data-original="{{image2 default_images w=152 h=204}}"> | ||
| 3 | + <div class="content-container"> | ||
| 4 | + <p> | ||
| 5 | + <span class="reco-name">{{product_name}}</span> | ||
| 6 | + </p> | ||
| 7 | + <p class="price"> | ||
| 8 | + <span class="sale-price">¥{{sales_price}}</span> | ||
| 9 | + </p> | ||
| 10 | + <p> | ||
| 11 | + <span class="check-detail"> | ||
| 12 | + <span class="iconfont"></span> | ||
| 13 | + <span class="iconfont plus"></span> | ||
| 14 | + </span> | ||
| 15 | + </p> | ||
| 16 | + </div> | ||
| 17 | +</div> |
| @@ -323,37 +323,27 @@ $focus-size: 42px; | @@ -323,37 +323,27 @@ $focus-size: 42px; | ||
| 323 | 323 | ||
| 324 | .related-reco-block { | 324 | .related-reco-block { |
| 325 | background: #fff; | 325 | background: #fff; |
| 326 | - padding-left: 15px; | ||
| 327 | - border-top: 1px solid #e0e0e0; | ||
| 328 | - | ||
| 329 | - h2 { | ||
| 330 | - margin-left: -15px; | ||
| 331 | - line-height: 104px; | ||
| 332 | - font-size: 15PX; | ||
| 333 | - color: #b0b0b0; | ||
| 334 | - text-align: center; | ||
| 335 | - } | ||
| 336 | 326 | ||
| 337 | .one-good { | 327 | .one-good { |
| 338 | - padding-left: 15px; | ||
| 339 | - padding-right: 30px; | ||
| 340 | - margin-bottom: 20px; | 328 | + padding: 20px 0; |
| 329 | + border-top: 1px solid #e0e0e0; | ||
| 341 | 330 | ||
| 342 | .thumb { | 331 | .thumb { |
| 343 | float: left; | 332 | float: left; |
| 344 | - height: 134px; | ||
| 345 | - width: 96px; | 333 | + height: 204px; |
| 334 | + width: 152px; | ||
| 335 | + margin: 0; | ||
| 336 | + padding: 0; | ||
| 346 | } | 337 | } |
| 347 | 338 | ||
| 348 | .content-container { | 339 | .content-container { |
| 349 | - padding-left: 120px; | ||
| 350 | - height: 134px; | ||
| 351 | - line-height: 1; | ||
| 352 | - font-size: 24px; | 340 | + width: 458px; |
| 341 | + float: left; | ||
| 342 | + font-size: 22px; | ||
| 343 | + margin-left: 20px; | ||
| 353 | 344 | ||
| 354 | > p { | 345 | > p { |
| 355 | - height: 50%; | ||
| 356 | - line-height: 94px; | 346 | + line-height: 80px; |
| 357 | } | 347 | } |
| 358 | 348 | ||
| 359 | span { | 349 | span { |
| @@ -384,12 +374,15 @@ $focus-size: 42px; | @@ -384,12 +374,15 @@ $focus-size: 42px; | ||
| 384 | 374 | ||
| 385 | .check-detail { | 375 | .check-detail { |
| 386 | display: inline-block; | 376 | display: inline-block; |
| 387 | - color: #000; | ||
| 388 | - border: 1px solid; | ||
| 389 | - border-radius: 2PX; | 377 | + background-color: #f0f0f0; |
| 378 | + color: #444; | ||
| 379 | + border-radius: 20px; | ||
| 390 | float: right; | 380 | float: right; |
| 391 | - padding: 0 5px; | ||
| 392 | - line-height: 1.5; | 381 | + padding: 10px 20px; |
| 382 | + } | ||
| 383 | + | ||
| 384 | + .check-detail > .plus { | ||
| 385 | + font-size: 12px; | ||
| 393 | } | 386 | } |
| 394 | } | 387 | } |
| 395 | } | 388 | } |
| @@ -326,27 +326,22 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW | @@ -326,27 +326,22 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW | ||
| 326 | } | 326 | } |
| 327 | } | 327 | } |
| 328 | 328 | ||
| 329 | - // 相关推荐 | 329 | + // 相关商品 170505 更改了前端样式 |
| 330 | if (_.get(value, 'goods.data', false)) { | 330 | if (_.get(value, 'goods.data', false)) { |
| 331 | let relatedReco = []; | 331 | let relatedReco = []; |
| 332 | - let moreThanOne = _.get(value, 'goods.data', []).length > 1; | ||
| 333 | 332 | ||
| 334 | _.forEach(_.get(value, 'goods.data', []), item => { | 333 | _.forEach(_.get(value, 'goods.data', []), item => { |
| 335 | allgoods += item.id + ','; | 334 | allgoods += item.id + ','; |
| 336 | }); | 335 | }); |
| 337 | 336 | ||
| 338 | - if (moreThanOne) { | ||
| 339 | relatedReco = _.get(value, 'goods.data', []); | 337 | relatedReco = _.get(value, 'goods.data', []); |
| 340 | - } else { | ||
| 341 | - relatedReco = _.get(value, 'goods.data[0]', {}); | ||
| 342 | - } | ||
| 343 | 338 | ||
| 344 | finalDetail.push({ | 339 | finalDetail.push({ |
| 345 | relatedReco: relatedReco | 340 | relatedReco: relatedReco |
| 346 | }); | 341 | }); |
| 347 | } | 342 | } |
| 348 | 343 | ||
| 349 | - // 悬停浮动商品 | 344 | + // 悬停浮动商品 170505 后面版本不支持配置此资源，重构可忽略此部分 |
| 350 | if (_.get(value, 'goodsGroup.data', false)) { | 345 | if (_.get(value, 'goodsGroup.data', false)) { |
| 351 | let collocation = []; | 346 | let collocation = []; |
| 352 | 347 | ||
| @@ -377,6 +372,10 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW | @@ -377,6 +372,10 @@ const processArticleDetail = (articleContent, isApp, gender, isWeixin, isqq, isW | ||
| 377 | }); | 372 | }); |
| 378 | } | 373 | } |
| 379 | 374 | ||
| 375 | + // 170505 新添加推荐商品 | ||
| 376 | + if (_.get(value, '', false)) { | ||
| 377 | + console.log('^-^'); | ||
| 378 | + } | ||
| 380 | }); | 379 | }); |
| 381 | 380 | ||
| 382 | return { | 381 | return { |
| @@ -392,18 +391,9 @@ const pushGoodsInfo = (finalDetail, goodsList) => { | @@ -392,18 +391,9 @@ const pushGoodsInfo = (finalDetail, goodsList) => { | ||
| 392 | let goodsObj = _goodsArrayToObj(productPrcs.processProductList(goodsList)); | 391 | let goodsObj = _goodsArrayToObj(productPrcs.processProductList(goodsList)); |
| 393 | 392 | ||
| 394 | _.forEach(finalDetail, (value, key) => { | 393 | _.forEach(finalDetail, (value, key) => { |
| 395 | - if (value.relatedReco && _.isArray(value.relatedReco)) { | ||
| 396 | - | ||
| 397 | _.forEach(value.relatedReco, (item, subKey) => { | 394 | _.forEach(value.relatedReco, (item, subKey) => { |
| 398 | finalDetail[key].relatedReco[subKey] = goodsObj[item.id]; | 395 | finalDetail[key].relatedReco[subKey] = goodsObj[item.id]; |
| 399 | }); | 396 | }); |
| 400 | - } | ||
| 401 | - | ||
| 402 | - if (value.relatedReco && _.isObject(value.relatedReco)) { | ||
| 403 | - _.assign(finalDetail[key].relatedReco, goodsObj[_.get(value, 'relatedReco.id', 'false')], { | ||
| 404 | - thumb: helpers.image(_.get(value, 'relatedReco.src', ''), 235, 314) | ||
| 405 | - }); | ||
| 406 | - } | ||
| 407 | 397 | ||
| 408 | if (value.collocation) { | 398 | if (value.collocation) { |
| 409 | _.forEach(value.collocation, (item, subKey) => { | 399 | _.forEach(value.collocation, (item, subKey) => { |
-
Please register or login to post a comment