全球购详情页

@@ -36,16 +36,20 @@ const list = (req, res, next) => {
     }
 
     Promise.all(arrs).then((result) => {
+        let t = (result[1] || {}).brand_name || title;
+
+        param.title = t;
         res.render('global/list', {
             module: 'product',
             page: 'global-list',
             pageHeader: headerModel.setNav({
-                navTitle: (result[1] || {}).brand_name || title
+                navTitle: t
             }),
             list: result[0].list,
             filter: result[0].filter,
             pageFooter: true,
-            localCss: true
+            localCss: true,
+            appPath: `yohobuy://yohobuy.com/goapp?openby:yohobuy={"action":"go.globalpurchase","params":${JSON.stringify(param)}}`
         });
     }).catch(next);
 };
@@ -76,6 +80,11 @@ const detail = (req, res, next) => {
     };
 
     model.detail(params).then((result) => {
+        let appParams = {
+            skn: skn
+        };
+        let appPath = `yohobuy://yohobuy.com/goapp?openby:yohobuy={"action":"go.globalpurchase","params":${JSON.stringify(appParams)}}`;
+
         res.render('global/detail', {
             module: 'product',
             page: 'global-detail',
@@ -83,14 +92,17 @@ const detail = (req, res, next) => {
                 navTitle: '商品详情'
             }),
             result: result,
+            cartUrl: '//m.yohobuy.com/cart/index/index',
             pageFooter: true,
-            localCss: true
+            localCss: true,
+            appPath: appPath
         });
     }).catch(next);
 };
 
 const gethtml = (req, res, next) => {
     let skn = req.query.skn;
+
     if (!skn) {
         return next();
     }
@@ -104,8 +116,7 @@ const gethtml = (req, res, next) => {
     model.gethtml(params).then((html) => {
         res.send(html);
     }).catch(next);
-}
-
+};
 
 module.exports = {
     list,

@@ -43,6 +43,7 @@ exports.detail = (param) => {
         result = result.data;
 
         let goods = result.goods_list || [];
+
         if (goods.length === 1) {
             result.bannerTop = {
                 img: (goods[0].images_list[0] || {}).image_url
@@ -52,9 +53,9 @@ exports.detail = (param) => {
                 list: goods.map((g) => {
                     return {
                         img: (g.images_list[0] || {}).image_url
-                    }
+                    };
                 })
-            }
+            };
         }
 
         result.show_final_price = result.formart_final_price;
@@ -71,18 +72,27 @@ exports.detail = (param) => {
             result.brand_info.brand_url = `//m.yohobuy.com/product/global/list?brand=${result.brand_info.brand_id}`;
         }
 
+        if (result.illustrate_contents && result.illustrate_contents.length) {
+            result.illustrate = {
+                title1: (result.illustrate_contents[0] || {}).title,
+                content1: (result.illustrate_contents[0] || {}).content,
+                title2: (result.illustrate_contents[1] || {}).title,
+                content2: (result.illustrate_contents[1] || {}).content
+            };
+        }
+
         return result;
     });
 };
 
 exports.gethtml = (param) => {
-    return globalapi.get('product/api/v1/detail/gethtml', param,{
+    return globalapi.get('product/api/v1/detail/gethtml', param, {
         cache: true
     }).then((result) => {
         result = result || '';
         result = $.load(result);
         result = result('.good-detail-page');
-        
+
         return (result.html() || '').replace(/<img src=/g, '<img class="lazy" src="data:image/gif;' +
             'base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="' +
             ' data-original=').replace(/<img border="0" src=/g, '<img border="0" class="lazy" ' +
@@ -90,4 +100,4 @@ exports.gethtml = (param) => {
             'R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="' +
             ' data-original=');
     });
-}
+};

@@ -41,12 +41,28 @@
         <span class="country-name">{{country_name}}</span>
         <span class="product-source">{{product_source}}</span>
     </div>
-
+    
+    {{# illustrate}}
     <div class="illustrate">
-        <div class="illustrate-title"></div>
-        <div class="illustrate-contents"></div>
+        <div class="illustrate-title">
+            <div class="title checked"><i class="iconfont checked"></i>{{title1}}</div>
+            <div class="title notice"><i class="iconfont notice"></i>{{title2}}</div>
+            <div class="illustrate-down"><i class="iconfont down"></i></div>
+        </div>
+        <div class="illustrate-contents">
+            <div class="content checked">
+                <i class="iconfont checked"></i>{{title1}}
+                <div class="text">{{content1}}</div>
+            </div>
+            <div class="content notice">
+                <i class="iconfont notice"></i>{{title2}}
+                <div class="text">{{content2}}</div>
+            </div>
+            <div class="illustrate-up"><i class="iconfont up"></i></div>
+        </div>
     </div>
-    
+    {{/ illustrate}}
+
     {{# brand_info}}
     <div class="enter-store">
         {{#if brand_ico}}
@@ -69,8 +85,11 @@
     <div id="productDesc" class="product-desc"></div>
 
     <div class="cart-bar">
-        <a href="javascript:;" class="num-incart iconfont">&#xe62c;</a>
-        <a href="javascript:;" class="addto-cart add-to-cart-url">下载APP购买</a>
+        {{#unless @root.wap.common.removeCartCount}}
+            <input type="hidden" id="remove-cart-count" value="1">
+        {{/unless}}
+        <a href="{{../cartUrl}}" class="num-incart iconfont"><span class="num-tag hide"></span>&#xe62c;</a>
+        <a href="javascript:;" class="addto-cart">下载APP购买</a>
     </div>
 </div>
 {{/ result}}

@@ -15,26 +15,44 @@ import {
 class ListController extends Controller {
     constructor() {
         super();
-        
+
         this.detail = new DetailView();
 
         this.created();
     }
 
     created() {
-    	let skn = this.detail.getSkn();
-    	if (!skn) {
-    		return;
-    	}
-
-    	setTimeout(()=> {
-    		search('//m.yohobuy.com/product/global/gethtml', {
-    			skn: skn
-    		}).then((html)=>{
-    			this.detail.setDetailHtml(html)
-    		})
-    	}, 500);
+        let skn = this.detail.getSkn();
+
+        if (!skn) {
+            return;
+        }
+
+        setTimeout(() => {
+            search('//m.yohobuy.com/product/global/gethtml', {
+                skn: skn
+            }).then((html) => {
+                this.detail.setDetailHtml(html);
+            });
+
+            if (this.detail.getCart()) {
+                search('/cart/index/count').then((data) => {
+                    let count;
+
+                    if (data.code === 200) {
+                        count = data.data.cart_goods_count || 0;
+                        if (count === 0) {
+                            return false;
+                        }
+                        if (count > 99) {
+                            count = '99+';
+                        }
+                        this.detail.setCartCount(count);
+                    }
+                });
+            }
+        }, 500);
     }
 }
 
-module.exports = ListController;
\ No newline at end of file
+module.exports = ListController;

@@ -4,11 +4,19 @@ import {
 
 let Swiper = require('yoho-swiper');
 let lazyLoad = require('yoho-jquery-lazyload');
+let dialog = require('plugin/dialog');
 
 export class DetailView extends View {
     constructor() {
         super('#global-detail-page');
 
+        this.on('click', '.addto-cart', this.showDownLoadDialog.bind(this));
+        this.on('click', '.illustrate-title', this.illustrateDown.bind(this));
+        this.on('click', '.illustrate-contents', this.illustrateUp.bind(this));
+        this.illustrateTitle = $('.illustrate-title');
+        this.illustrateContents = $('.illustrate-contents');
+        this.illustrateContents.hide().addClass('down-animate');
+
         setTimeout(() => {
             new Swiper('.banner-swiper', {
                 preloadImages: false,
@@ -34,11 +42,70 @@ export class DetailView extends View {
         }, 500);
     }
 
+    showDownLoadDialog() {
+        dialog.showDialog({
+            dialogText: '进入有货APP',
+            hasFooter: {
+                rightBtnText: '打开Yoho!Buy有货APP'
+            }
+        }, function() {
+            let appUrl = $('#main-wrap').data('apppath');
+            let ifr = document.createElement('iframe');
+
+            ifr.src = appUrl;
+            ifr.style.display = 'none';
+            document.body.appendChild(ifr);
+            window.location.href = appUrl;
+
+            let time = Date.now();
+
+            window.setTimeout(function() {
+                document.body.removeChild(ifr);
+                if (Date.now() - time < 3200) {
+                    window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho';
+                }
+            }, 3000);
+
+        }, null, true);
+
+        $('.dialog-wrapper').off('touchstart').on('touchstart', function(para) {
+            para.stopPropagation();
+            if ($(para.target).hasClass('dialog-wrapper')) {
+                dialog.hideDialog();
+            }
+        });
+    }
+
+    illustrateDown() {
+        this.illustrateTitle.hide();
+        this.illustrateContents.show();
+        setTimeout(()=>{
+            this.illustrateContents.removeClass('down-animate');
+        }, 10);
+    }
+
+    illustrateUp() {
+        this.illustrateContents.addClass('down-animate');
+        setTimeout(()=>{
+            this.illustrateContents.hide();
+            this.illustrateTitle.show();
+        }, 500);
+    }
+
+    getCart() {
+        return $('#remove-cart-count').length;
+    }
+
+    setCartCount(count) {
+        $('.cart-bar').find('.num-tag').html(count).removeClass('hide');
+    }
+
     setDetailHtml(htmldata) {
         let $productDesc = $('#productDesc');
+
         $productDesc.append(htmldata);
-        
-        window.rePosFooter && window.rePosFooter(); 
+
+        window.rePosFooter && window.rePosFooter();
 
         lazyLoad($productDesc.find('img.lazy'));
 
@@ -54,10 +121,10 @@ export class DetailView extends View {
             watchSlidesVisibility: true
         });
 
-        var $service = $('.service-cont'),
+        let $service = $('.service-cont'),
             serviceH = $service.height(),
             serviceLi = $service.find('li'),
-            showH = parseInt(serviceLi.eq(0).height()) + parseInt(serviceLi.eq(1).height()) - parseInt(serviceLi.eq(1).find('.service-answer').height()) / 2;
+            showH = parseInt(serviceLi.eq(0).height()) + parseInt(serviceLi.eq(1).height()) - parseInt(serviceLi.eq(1).find('.service-answer').height()) / 2; // eslint-disable-line
 
         $service.css({
             height: showH,
@@ -67,11 +134,11 @@ export class DetailView extends View {
         this.operation = {
             showH,
             serviceH
-        }
+        };
         this.on('click', '.service-operation', this.serviceOperation.bind(this));
     }
 
-    serviceOperation(e,) {
+    serviceOperation(e) {
         function serviceState(opt) {
             opt.dom.html(opt.txt + '<i class="service-icon shrink-btn-' + opt.btnClass + '"></i>');
 
@@ -89,19 +156,19 @@ export class DetailView extends View {
 
         if (curState) {
             serviceState({
-                'dom': $this,
-                'txt': '展开',
-                'btnClass': 'down',
-                'height': this.operation.showH,
-                'of': 'hidden'
+                dom: $this,
+                txt: '展开',
+                btnClass: 'down',
+                height: this.operation.showH,
+                of: 'hidden'
             });
         } else {
             serviceState({
-                'dom': $this,
-                'txt': '收起',
-                'btnClass': 'up',
-                'height': this.operation.serviceH,
-                'of': 'visible'
+                dom: $this,
+                txt: '收起',
+                btnClass: 'up',
+                height: this.operation.serviceH,
+                of: 'visible'
             });
         }
     }
@@ -109,4 +176,4 @@ export class DetailView extends View {
     getSkn() {
         return this.$base.data('skn');
     }
-};
\ No newline at end of file
+}

@@ -8,7 +8,7 @@
         z-index: 2;
     }
 
-	.global-country {
+    .global-country {
         float: left;
         background: rgb(70, 46, 61);
         color: #fff;
@@ -20,7 +20,7 @@
         }
     }
 
-	.global-plane {
+    .global-plane {
         width: 21px;
         height: 21px;
         background-image: resolve("product/airplane.png");
@@ -224,6 +224,92 @@
         }
     }
 
+    .illustrate {
+        .iconfont {
+            font-size: 25px;
+            margin-right: 8px;
+        }
+
+        .iconfont.checked:before {
+            content: "\E646";
+        }
+
+        .iconfont.notice:before {
+            content: "\E628";
+        }
+
+        .iconfont.down:before {
+            content: "\E616";
+        }
+
+        .iconfont.up:before {
+            content: "\E615";
+        }
+    }
+
+    .illustrate-title {
+        height: 88px;
+        padding: 30px;
+        font-size: 25px;
+        line-height: 25px;
+        border-bottom: 1px solid #eee;
+        background: #fff;
+
+        .title {
+            float: left;
+            margin-right: 20px;
+        }
+
+        .notice {
+            color: #b0b0b0;
+        }
+    }
+
+    .illustrate-contents {
+        height: 215px;
+        border-bottom: 1px solid #eee;
+        background: #fff;
+        position: relative;
+        padding: 30px;
+        font-size: 22px;
+        line-height: 22px;
+        transition: height 500ms;
+        overflow: hidden;
+
+        &.down-animate {
+            height: 50px;
+        }
+
+        .notice {
+            margin-top: 20px;
+            color: #b0b0b0;
+        }
+
+        .text {
+            margin-top: 10px;
+            margin-left: 25px;
+            color: #b0b0b0;
+            font-size: 18px;
+        }
+    }
+
+    .illustrate-down {
+        float: right;
+        margin-right: 0;
+        font-size: 30px;
+        font-weight: 700;
+        color: #b0b0b0;
+    }
+
+    .illustrate-up {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        font-size: 30px;
+        font-weight: 700;
+        color: #b0b0b0;
+    }
+
     .enter-store {
         position: relative;
         margin-top: 30px;
@@ -282,7 +368,7 @@
         font-size: 28px;
         border-top: 1px solid #eee;
         border-bottom: 1px solid #eee;
-        
+
         a {
             display: block;
             height: 100%;
@@ -355,5 +441,4 @@
             }
         }
     }
-    
 }