download review by wenxue
Showing
7 changed files
with
53 additions
and
22 deletions
@@ -8,7 +8,6 @@ | @@ -8,7 +8,6 @@ | ||
8 | <div class="info"> | 8 | <div class="info"> |
9 | <p class="name">{{product_name}}</p> | 9 | <p class="name">{{product_name}}</p> |
10 | <p class="time">{{sale_attr_desc.skc_attr}} {{sale_attr_desc.sku_attr}}</p> | 10 | <p class="time">{{sale_attr_desc.skc_attr}} {{sale_attr_desc.sku_attr}}</p> |
11 | - | ||
12 | </div> | 11 | </div> |
13 | </div> | 12 | </div> |
14 | {{/ goodsList}} | 13 | {{/ goodsList}} |
@@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
4 | <p class="status-tip">购买成功!</p> | 4 | <p class="status-tip">购买成功!</p> |
5 | <p class="download-tip">请下载有货APP查看阅读码和兑换/阅读电子刊。</p> | 5 | <p class="download-tip">请下载有货APP查看阅读码和兑换/阅读电子刊。</p> |
6 | 6 | ||
7 | - <a href="#" class="download-btn"> | 7 | + <a href="//union.yoho.cn/union/app-downloads.html?union_type=100000000000349" class="download-btn"> |
8 | <span class="download-icon"></span>点击下载Yoho!Buy有货 | 8 | <span class="download-icon"></span>点击下载Yoho!Buy有货 |
9 | </a> | 9 | </a> |
10 | </div> | 10 | </div> |
@@ -3,7 +3,6 @@ const detailModel = require('../models/detail'); // detail model | @@ -3,7 +3,6 @@ const detailModel = require('../models/detail'); // detail model | ||
3 | const headerModel = require('../../../doraemon/models/header'); // 头部model | 3 | const headerModel = require('../../../doraemon/models/header'); // 头部model |
4 | 4 | ||
5 | const cover = (req, res, next) => { | 5 | const cover = (req, res, next) => { |
6 | - console.log(req.params); | ||
7 | req.ctx(detailModel).getMagazineInfo(req.params).then(result => { | 6 | req.ctx(detailModel).getMagazineInfo(req.params).then(result => { |
8 | res.render('cover/index', { | 7 | res.render('cover/index', { |
9 | pageHeader: headerModel.setNav({ | 8 | pageHeader: headerModel.setNav({ |
@@ -9,13 +9,7 @@ class detailModel extends global.yoho.BaseModel { | @@ -9,13 +9,7 @@ class detailModel extends global.yoho.BaseModel { | ||
9 | e_id: params[0] | 9 | e_id: params[0] |
10 | }}).then((data) => { | 10 | }}).then((data) => { |
11 | if (data.code === 200) { | 11 | if (data.code === 200) { |
12 | - data = data.data || {}; | ||
13 | - | ||
14 | - if (data.coverPic && !data.coverPics) { | ||
15 | - data.coverPics = [data.coverPic]; | ||
16 | - } | ||
17 | - | ||
18 | - return data; | 12 | + return data.data || {}; |
19 | } | 13 | } |
20 | 14 | ||
21 | return {}; | 15 | return {}; |
@@ -3,18 +3,19 @@ | @@ -3,18 +3,19 @@ | ||
3 | <div class="magazine-cover-container"> | 3 | <div class="magazine-cover-container"> |
4 | <div class="swiper-container cover-block"> | 4 | <div class="swiper-container cover-block"> |
5 | <div class="swiper-wrapper"> | 5 | <div class="swiper-wrapper"> |
6 | - {{# coverPics}} | 6 | + {{# eBookPreviewPicBoList}} |
7 | <div class="swiper-slide"> | 7 | <div class="swiper-slide"> |
8 | - <img src="{{.}}" class="cover-img" alt=""> | 8 | + <div class="filter-bg" style="background-image: url('{{picUrl}}')"></div> |
9 | + <img src="{{picUrl}}" class="cover-img" alt=""> | ||
9 | </div> | 10 | </div> |
10 | - {{/ coverPics}} | 11 | + {{/ eBookPreviewPicBoList}} |
11 | </div> | 12 | </div> |
12 | <div class="swiper-pagination"></div> | 13 | <div class="swiper-pagination"></div> |
13 | <div class="magazine-info-block"> | 14 | <div class="magazine-info-block"> |
14 | <p class="m-time">{{bookNumber}}</p> | 15 | <p class="m-time">{{bookNumber}}</p> |
15 | <p class="m-title">{{title}}</p> | 16 | <p class="m-title">{{title}}</p> |
16 | 17 | ||
17 | - <div class="m-order">查看阅读 | 18 | + <div class="m-order to-download">查看阅读 |
18 | <i class="iconfont"></i> | 19 | <i class="iconfont"></i> |
19 | </div> | 20 | </div> |
20 | 21 | ||
@@ -26,7 +27,6 @@ | @@ -26,7 +27,6 @@ | ||
26 | <div class="magazine-detail-container"> | 27 | <div class="magazine-detail-container"> |
27 | <div class="touch-area"></div> | 28 | <div class="touch-area"></div> |
28 | <div class="tab-wrap"> | 29 | <div class="tab-wrap"> |
29 | - <label>评论</label> | ||
30 | <label>内容</label> | 30 | <label>内容</label> |
31 | </div> | 31 | </div> |
32 | <div class="detail-container"> | 32 | <div class="detail-container"> |
@@ -3,6 +3,7 @@ require('scss/magazine/detail.page.scss'); | @@ -3,6 +3,7 @@ require('scss/magazine/detail.page.scss'); | ||
3 | let $ = require('yoho-jquery'); | 3 | let $ = require('yoho-jquery'); |
4 | let get = require('lodash/get'); | 4 | let get = require('lodash/get'); |
5 | let Swiper = require('yoho-swiper'); | 5 | let Swiper = require('yoho-swiper'); |
6 | +let dialog = require('js/plugin/dialog'); | ||
6 | 7 | ||
7 | new Swiper('.swiper-container', { | 8 | new Swiper('.swiper-container', { |
8 | observer: true, | 9 | observer: true, |
@@ -16,7 +17,6 @@ new Swiper('.swiper-container', { | @@ -16,7 +17,6 @@ new Swiper('.swiper-container', { | ||
16 | pagination: '.swiper-pagination', | 17 | pagination: '.swiper-pagination', |
17 | }); | 18 | }); |
18 | 19 | ||
19 | - | ||
20 | function DragableElm(elm) { | 20 | function DragableElm(elm) { |
21 | if (!elm || !elm.length || elm._dragable) { | 21 | if (!elm || !elm.length || elm._dragable) { |
22 | return; | 22 | return; |
@@ -96,3 +96,15 @@ function DragableElm(elm) { | @@ -96,3 +96,15 @@ function DragableElm(elm) { | ||
96 | } | 96 | } |
97 | 97 | ||
98 | new DragableElm($('.magazine-detail-container')); | 98 | new DragableElm($('.magazine-detail-container')); |
99 | + | ||
100 | +$('.to-download').on('click', function() { | ||
101 | + dialog.showDialog({ | ||
102 | + dialogText: '请下载有货APP阅读电子刊', | ||
103 | + hasFooter: { | ||
104 | + leftBtnText: '取消', | ||
105 | + rightBtnText: '确定' | ||
106 | + } | ||
107 | + }, function() { | ||
108 | + window.location.href = '//union.yoho.cn/union/app-downloads.html?union_type=100000000000349'; | ||
109 | + }); | ||
110 | +}); |
@@ -27,11 +27,30 @@ body { | @@ -27,11 +27,30 @@ body { | ||
27 | height: 100%; | 27 | height: 100%; |
28 | } | 28 | } |
29 | 29 | ||
30 | - .cover-img { | ||
31 | - width: 100%; | ||
32 | - height: auto; | ||
33 | - min-width: 100%; | ||
34 | - min-height: 100%; | 30 | + .swiper-slide { |
31 | + display: flex; | ||
32 | + align-items: center; | ||
33 | + position: relative; | ||
34 | + box-sizing: border-box; | ||
35 | + padding-bottom: 134px; | ||
36 | + | ||
37 | + .filter-bg { | ||
38 | + filter: blur(20px); | ||
39 | + background-size: cover; | ||
40 | + background-repeat: no-repeat; | ||
41 | + background-position: center; | ||
42 | + position: absolute; | ||
43 | + left: 0; | ||
44 | + right: 0; | ||
45 | + top: 0; | ||
46 | + bottom: 0; | ||
47 | + z-index: -1; | ||
48 | + } | ||
49 | + | ||
50 | + .cover-img { | ||
51 | + width: 100%; | ||
52 | + height: auto; | ||
53 | + } | ||
35 | } | 54 | } |
36 | 55 | ||
37 | .swiper-pagination { | 56 | .swiper-pagination { |
@@ -135,9 +154,17 @@ body { | @@ -135,9 +154,17 @@ body { | ||
135 | } | 154 | } |
136 | 155 | ||
137 | .tab-wrap { | 156 | .tab-wrap { |
138 | - height: 52px; | 157 | + height: 44px; |
158 | + line-height: 42px; | ||
139 | border-bottom: 2px solid #eee; | 159 | border-bottom: 2px solid #eee; |
140 | flex-shrink: 0; | 160 | flex-shrink: 0; |
161 | + | ||
162 | + label { | ||
163 | + font-size: 24px; | ||
164 | + color: #000; | ||
165 | + font-weight: 500; | ||
166 | + margin: 0 100px 0 34px; | ||
167 | + } | ||
141 | } | 168 | } |
142 | 169 | ||
143 | .detail-container { | 170 | .detail-container { |
-
Please register or login to post a comment