商品详情页JS文件

@@ -11,14 +11,14 @@ var express = require('express'),
 var app = express();
 var app = express();
 
 
 // set view engin
 // set view engin
-var doraemon = path.join(__dirname, '../../doraemon/views'); //parent view root
+var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
 
 
 app.set('views', path.join(__dirname, 'views/action'));
 app.set('views', path.join(__dirname, 'views/action'));
 app.engine('.hbs', hbs({
 app.engine('.hbs', hbs({
     extname: '.hbs',
     extname: '.hbs',
     defaultLayout: 'layout',
     defaultLayout: 'layout',
     layoutsDir: doraemon,
     layoutsDir: doraemon,
-    partialsDir: ['./views/partial', `${doraemon}/partial`],
+    partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
     helpers: 'helpers'
     helpers: 'helpers'
 }));
 }));
 
 

@@ -23,27 +23,27 @@ hello, I am product hbs
                     <p class="good-tag limit-tag">限量商品</p>
                     <p class="good-tag limit-tag">限量商品</p>
                 {{/ is_limited}}
                 {{/ is_limited}}
                 {{# is_soon_sold_out}}
                 {{# is_soon_sold_out}}
-                    <p class="good-tag soonSoldOut-tag">即将售罄</p>
+                    <p class="good-tag soon-sold-out-tag">即将售罄</p>
                 {{/ is_soon_sold_out}}
                 {{/ is_soon_sold_out}}
             {{/ tags}}
             {{/ tags}}
         </div>
         </div>
         {{# bannerTop}}
         {{# bannerTop}}
-        {{!> product/banner-swiper-arrow}}
+        {{> product/banner-swiper-arrow}}
         {{/ bannerTop}}
         {{/ bannerTop}}
     </div>
     </div>
     {{# goodsName}}
     {{# goodsName}}
-    <h2 class="goodsName"><span>{{.}}</span></h2>
+    <h2 class="goods-name"><span>{{.}}</span></h2>
     {{/ goodsName}}
     {{/ goodsName}}
 
 
     {{# goodsSubtitle}}
     {{# goodsSubtitle}}
-    <h1 class="goodsSubtitle"><span>{{.}}</span></h1>
+    <h1 class="goods-subtitle"><span>{{.}}</span></h1>
     {{/ goodsSubtitle}}
     {{/ goodsSubtitle}}
 
 
     <div class="price-date">
     <div class="price-date">
         {{# goodsPrice}}
         {{# goodsPrice}}
         <div class="goodsPrice">
         <div class="goodsPrice">
-            <h1 class="currentPrice">{{currentPrice}}</h1>
-            <h1 class="previousPrice">{{previousPrice}}</h1>
+            <h1 class="current-price">{{currentPrice}}</h1>
+            <h1 class="previous-price">{{previousPrice}}</h1>
         </div>
         </div>
         {{/ goodsPrice}}
         {{/ goodsPrice}}
 
 
@@ -131,8 +131,8 @@ hello, I am product hbs
     {{/ enterStore}}
     {{/ enterStore}}
 
 
     <div id="productDesc"> </div>
     <div id="productDesc"> </div>
-    {{!> product/recommend-for-you}}
-    {{!> cart/chose-panel}}
+    {{> product/recommend-for-you}}
+    {{> cart/chose-panel}}
 
 
     {{#cartInfo}}
     {{#cartInfo}}
     <div class="cart-bar">
     <div class="cart-bar">

@@ -4,7 +4,7 @@
         <div class="infos">
         <div class="infos">
             <div class="basic-info" >
             <div class="basic-info" >
                 {{#thumbs}}
                 {{#thumbs}}
-                <img class="thumb {{#unless @first}}hide{{/if}}" src={{img}}>
+                <img class="thumb {{#unless @first}}hide{{/unless}}" src={{img}}>
                 {{/thumbs}}
                 {{/thumbs}}
                 <div class="text-info">
                 <div class="text-info">
                     <p class="name">{{name}}</p>
                     <p class="name">{{name}}</p>
@@ -20,7 +20,7 @@
                 <div class="color-list block-list">
                 <div class="color-list block-list">
                     <span>颜色</span>
                     <span>颜色</span>
                     {{# colors}}
                     {{# colors}}
-                    <ul id="{{id}}" data-index="{{@index}}" class="size-row clearfix  {{#unless @first}}hide{{/if}}">
+                    <ul id="{{id}}" data-index="{{@index}}" class="size-row clearfix  {{#unless @first}}hide{{/unless}}">
                         {{# color}}
                         {{# color}}
                         <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}">
                         <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}">
                             {{name}}
                             {{name}}
@@ -32,7 +32,7 @@
                 <div class="size-list block-list">
                 <div class="size-list block-list">
                     <span>尺码</span>
                     <span>尺码</span>
                     {{# sizes}}
                     {{# sizes}}
-                    <ul class="size-row clearfix  {{#unless @first}}hide{{/if}}">
+                    <ul class="size-row clearfix  {{#unless @first}}hide{{/unless}}">
                         {{# size}}
                         {{# size}}
                         <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-num="{{sizeNum}}" data-id="{{id}}" data-skuid="{{skuId}}">
                         <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-num="{{sizeNum}}" data-id="{{id}}" data-skuid="{{skuId}}">
                             {{name}}
                             {{name}}

+/**
+ * 购物车选择尺寸、颜色和数量面板
+ * 显示时构造当前商品信息的HTML插入yoho-page；消失则是直接清除HTML
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/21
+ */
+
+
+// bikai
+// 增加init函数，异步请求的接口需要重新初始化一下选择列表
+// 异步渲染的模板统一插入 #chose-panel ,兼容页面多个选择框
+
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading');
+
+var innerScroll = require('../plugin/inner-scroll');
+
+var $chosePanel = $('#chose-panel'),
+    $num,
+    $chosed,
+    $imgsThumb,
+    $leftNum,
+    leftNum,
+    confirming,
+    curColorIndex,
+    curSizeIndex,
+    hasChooseColor,
+    hasChooseSize,
+    $curSizeBlock,
+    $sizeRowList,
+    $curColorBlock,
+    $colorRowList,
+    cbFn,
+    $allChoseItems,
+    queryString,
+    $choseArea,
+    $cartBar,
+    $soonSoldOut = $('.soonSoldOut-tag'),
+    $yohoPage = $('.yoho-page');
+
+// 购物车编辑标相关变量
+var isEdit,
+    isSelected,
+    oldSknId;
+
+// 限购商品的商品码。只有限购商品时才会设置。
+var limitProductCode,
+
+    // 限购商品的skn。只有限购商品时才会设置。
+    skn;
+
+// 禁用数字编辑
+function disableNumEdit() {
+    var $numBtn = $('.chose-panel').find('.num .btn>.iconfont');
+
+    // 添加disabled样式
+    $numBtn.hasClass('disabled') ? null : $numBtn.addClass('disabled');
+
+    $yohoPage.off('touchstart', '.btn-minus');
+    $yohoPage.off('touchstart', '.btn-plus');
+}
+
+// 初始化购物车面板显示
+function init() {
+    hasChooseColor = false;
+    hasChooseSize = false;
+    $curSizeBlock = null;
+
+    queryString = $.queryString();
+    $imgsThumb = $('.chose-panel').find('.thumb');
+    $choseArea = $('.chose-panel .main .chose-items');
+    $allChoseItems = $('.chose-items');
+    $sizeRowList = $('.size-list ul');
+    $colorRowList = $('.color-list ul');
+    $leftNum = $('#left-num');
+    $cartBar = $('.cart-bar');
+    curColorIndex = 0;
+    curSizeIndex = 0;
+    isEdit = 0;
+}
+
+/*
+ * 设置当前面板为编辑模式
+ *
+ * @param {String} sknId. 当前编辑商品的sknId
+ *
+ * @param {Bool} isThisGoodSelected. 当前编辑商品的在购物车中是否被选中
+ *
+ * @return {undefined}
+ */
+function setEditModeWithSknId(sknId, isThisGoodSelected) {
+    $('#chose-btn-sure').html('确认');
+    isEdit = 1;
+    oldSknId = sknId;
+    isSelected = isThisGoodSelected;
+}
+
+/*
+ * 设置当前面板为限购商品模式
+ *
+ * @param {String} code 当前限购商品的商品码
+ *
+ * @param {String} sknId. 当前限购商品的sknId
+ *
+ * @return {undefined}
+ */
+function setLimitGoodModeWithSknId(code, sknId) {
+    disableNumEdit();
+    $('#chose-btn-sure').html('立即购买');
+    limitProductCode = code;
+    skn = sknId;
+}
+
+// 删除面板
+function removePannel() {
+    var $pannel = $('.chose-panel'),
+        $promotionId = $('#promotionId');
+
+    if ($pannel) {
+        $pannel.remove();
+    }
+
+    if ($promotionId) {
+        $promotionId.remove();
+    }
+}
+
+function checkColorSizeNum() {
+    if (!hasChooseColor && !hasChooseSize) {
+        tip.show('请选择颜色和尺码~');
+        return false;
+    } else if (!hasChooseColor) {
+        tip.show('请选择颜色~');
+        return false;
+    } else if (!hasChooseSize) {
+        tip.show('请选择尺码~');
+        return false;
+    }
+    return true;
+}
+
+
+
+function show(html, cb) {
+    if (html) {
+        $chosePanel.html(html);
+        if ($('#promotionId').val() !== '') {
+            disableNumEdit();
+        }
+        init();
+    }
+
+    $('.chose-panel').show();
+    $num = $('#good-num');
+    cbFn = cb;
+
+
+    innerScroll.disableScroll($choseArea);
+}
+
+// 隐藏当前Panel
+function hide() {
+    $('.chose-panel').hide();
+    innerScroll.enableScroll($choseArea);
+
+    if ($cartBar.length > 0) {
+        $cartBar.show();
+    }
+}
+
+// 修改加入购物车的文字和背景
+function updateConformButtonClassAndText() {
+    $chosed = $allChoseItems.find('.chosed');
+    if ($chosed.closest('.zero-stock').length === 2) {
+        $('#chose-btn-sure').css('background-color', '#c0c0c0').html('已售罄');
+    } else if (limitProductCode) {
+        $('#chose-btn-sure').css('background-color', '#eb0313').html('立即购买');
+    } else {
+        $('#chose-btn-sure').css('background-color', '#eb0313').html(isEdit ? '确认' : '加入购物车');
+    }
+}
+
+// 显示剩余件数
+function displayGoodNum(curGoodNum) {
+
+    // 数量大于0
+    if (curGoodNum > 0) {
+        if ($soonSoldOut.length > 0) {
+            $allChoseItems.find('.num .left-num').html('即将售罄');
+        } else {
+            $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
+        }
+
+        $leftNum.val(curGoodNum);
+
+        // 数量小于0
+    } else {
+        $allChoseItems.find('.num .left-num').html('');
+        $leftNum.val(0);
+    }
+}
+
+// 老的选中尺码去掉勾选,新的选中尺码加上勾选
+function changeSizeChosed(newSizeIndex) {
+    var sizes,
+        i;
+
+    if (curColorIndex && $curSizeBlock && $curSizeBlock.length > 0) {
+        $curSizeBlock.removeClass('chosed');
+        sizes = $sizeRowList.eq(newSizeIndex).children();
+        for (i = 0; i < sizes.length; i++) {
+            if ($(sizes[i]).data('id') === $curSizeBlock.data('id')) {
+                $curSizeBlock = $(sizes[i]);
+                queryString = '#' + $curSizeBlock.data('id');
+                curColorIndex = $(queryString).data('index');
+                $curSizeBlock.addClass('chosed');
+                return $curSizeBlock.data('num');
+            }
+        }
+
+        // 特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在,需要下述1,2,3
+        // 1.重置尺码选择的标志变量.
+        $curSizeBlock = null;
+        hasChooseSize = false;
+
+        // 2.当前颜色行隐藏
+        $colorRowList.eq(curColorIndex).addClass('hide');
+
+        // 3.目标颜色行第一行显示
+        $colorRowList.eq(0).removeClass('hide');
+        curColorIndex = 0;
+
+        return -1;
+    }
+    return 0;
+}
+
+// 老的选中颜色去掉勾选,新的选中颜色加上勾选
+function changeColorChosed(newColorIndex) {
+    if (curSizeIndex && $curColorBlock && $curColorBlock.length > 0) {
+        $curColorBlock.removeClass('chosed');
+        $curColorBlock = $($colorRowList.eq(newColorIndex).children().get(curSizeIndex - 1));
+        $curColorBlock.addClass('chosed');
+        return $curColorBlock.data('num');
+    }
+    return 0;
+}
+
+init();
+
+
+$yohoPage.on('touchstart', '.chose-panel', function(e) {
+    var $cur = $(e.target);
+
+    if ($cur.closest('.main').length > 0) {
+        return;
+    }
+
+    // 点击蒙版消失
+    hide();
+
+    return false;
+});
+
+$yohoPage.on('touchstart', '.color-list .block', function() {
+    var $this = $(this),
+        index = $this.index(),
+        curGoodNum;
+
+    // 当前颜色已经是选中状态,再点击时
+    if ($this.hasClass('chosed')) {
+
+        // 清空剩余件数的提示
+        $allChoseItems.find('.num .left-num').html('');
+        $leftNum.val(0);
+        hasChooseColor = false;
+
+        // 当前尺码行隐藏
+        $sizeRowList.eq(curSizeIndex).addClass('hide');
+
+        // 目标尺码行显示
+        $sizeRowList.eq(0).removeClass('hide');
+
+        curSizeIndex = 0;
+
+        // 老的选中尺码去掉勾选,新的选中尺码加上勾选
+        changeSizeChosed(0);
+
+        // 当前颜色不是选中状态,选中时
+    } else {
+        hasChooseColor = true;
+
+        // 尺码行当前行隐藏
+        $sizeRowList.eq(curSizeIndex).addClass('hide');
+
+        // 老的选中尺码去掉勾选,新的选中尺码加上勾选
+        curGoodNum = changeSizeChosed(index + 1);
+
+        // 显示剩余数量
+        displayGoodNum(curGoodNum);
+
+        // 尺码对应行显示
+        $sizeRowList.eq(index + 1).removeClass('hide');
+
+        curSizeIndex = index + 1;
+        $curColorBlock = $this;
+
+        // 修改颜色时修改商品图片
+        $imgsThumb.addClass('hide').eq(index).removeClass('hide');
+    }
+
+    // 颜色块切换勾选样式
+    $this.siblings('.chosed').removeClass('chosed');
+
+    // 特殊处理: 老的选中尺码在新选中的颜色对应尺码中不存在, 需要将颜色的第一行对应的颜色块加上勾选样式.
+    if (curGoodNum === -1) {
+        $curColorBlock = $($colorRowList.eq(0).children().get(index));
+        $curColorBlock.addClass('chosed');
+
+        // 当前选择的颜色块,加上勾选样式
+    } else {
+        $this.toggleClass('chosed');
+    }
+
+    $('#good-num').val(1);
+
+    // 设置按钮的样式和文字
+    updateConformButtonClassAndText();
+}).on('touchstart', '.size-list .block', function() {
+    var $this = $(this),
+        index,
+        curGoodNum;
+
+    // 当前尺码已经是选中状态,再点击时
+    if ($this.hasClass('chosed')) {
+
+        // 清空剩余件数的提示
+        $allChoseItems.find('.num .left-num').html('');
+        $leftNum.val(0);
+        hasChooseSize = false;
+
+        // 当前颜色行隐藏
+        $colorRowList.eq(curColorIndex).addClass('hide');
+
+        // 目标颜色行显示
+        $colorRowList.eq(0).removeClass('hide');
+
+        curColorIndex = 0;
+
+        // 老的选中颜色去掉勾选,新的选中颜色加上勾选
+        changeColorChosed(0);
+
+        // 当前尺码不是选中状态,选中时
+    } else {
+        hasChooseSize = true;
+
+        index = $('#' + $this.data('id')).data('index') - 1;
+
+        // 颜色当前行隐藏
+        $colorRowList.eq(curColorIndex).addClass('hide');
+
+        // 老的选中颜色去掉勾选,新的选中颜色加上勾选
+        curGoodNum = changeColorChosed(index + 1);
+
+        // 显示剩余数量
+        displayGoodNum(curGoodNum);
+
+        // 颜色对应行显示
+        $colorRowList.eq(index + 1).removeClass('hide');
+
+        curColorIndex = index + 1;
+        $curSizeBlock = $this;
+    }
+
+    // 颜色块切换勾选样式
+    $this.siblings('.chosed').removeClass('chosed');
+    $this.toggleClass('chosed');
+    $('#good-num').val(1);
+
+    // 设置按钮的样式和文字
+    updateConformButtonClassAndText();
+});
+
+$yohoPage.on('touchstart', '.btn-minus', function() {
+    var num = parseInt($num.val(), 10);
+
+    leftNum = $('#left-num').val();
+
+    if (!checkColorSizeNum()) {
+        return;
+    }
+
+    if (num === 1 || (leftNum - 0) === 0) {
+        tip.show('您选择的数量不能为零~');
+        return;
+    }
+    if (num < 0) {
+        tip.show('您选择的数量不能为负数~');
+        return;
+    }
+
+    $num.val(num - 1);
+}).on('touchstart', '.btn-plus', function() {
+    var num = parseInt($num.val(), 10);
+
+    leftNum = $('#left-num').val();
+
+    if (!checkColorSizeNum()) {
+        return;
+    }
+
+    if (num - 0 === leftNum || leftNum === 0) {
+        return;
+    }
+
+    // TODO:库存数验证
+    if (num > leftNum - 1) {
+        tip.show('您选择的数量超过了最大库存量~');
+        return;
+    }
+    $num.val(num + 1);
+}).on('touchstart', '#chose-btn-sure', function() {
+
+    var productSku,
+        buyNumber = $('#good-num').val() - 0,
+
+        promotionId,
+        cartGoodData,
+        url,
+        num = parseInt($num.val(), 10);
+
+    // 颜色尺码没有选择
+    if (!checkColorSizeNum()) {
+        return;
+    }
+
+    if ($('#chose-btn-sure').html() === '已售罄') {
+        return;
+    }
+
+    leftNum = $('#left-num').val() - 0;
+
+    if (num > leftNum) {
+        tip.show('您选择的数量超过了最大库存量~');
+        return;
+    }
+    if (num < 0) {
+        tip.show('您选择的数量小于一件~');
+        return;
+    }
+    $chosed = $('.block-list>ul>li.chosed');
+
+    if ($chosed.length === 2 && $chosed.closest('.zero-stock').length === 0) {
+        productSku = $curSizeBlock.data('skuid');
+        promotionId = $('#promotionId').val();
+        if (confirming) {
+            return false;
+        }
+
+        confirming = true;
+        loading.showLoadingMask();
+
+        // 针对是否处于编辑模式设置不同的url和需要post的数据
+        if (isEdit) {
+            cartGoodData = {
+                new_product_sku: productSku,
+                old_product_sku: oldSknId,
+                buy_number: buyNumber,
+                selected: isSelected
+            };
+
+            url = '/cart/index/modify';
+
+        } else if (limitProductCode) {
+
+            $(this).css('background-color', '#ccc').removeAttr('id');
+
+            // 当前面板选择的是限购商品
+            url = $('#limitProductPay').val() + '?limitproductcode=' + limitProductCode + '&sku=' +
+                  productSku + '&skn=' + skn + '&buy_number=' + buyNumber;
+
+            removePannel();
+            loading.showLoadingMask();
+
+            // 调用接口判断商品是否可以购买
+            $.ajax({
+                url: url
+            }).then(function(res) {
+
+                // 如果有错，则商品不可购买，执行页面刷新，否则跳到结算页面
+                if (res.error) {
+                    tip.show(res.message);
+                    setTimeout(function() {
+                        location.reload();
+                    }, 2000);
+                } else {
+                    location.href = url;
+                }
+            }).fail(function() {
+                tip.show('网络异常!');
+                setTimeout(function() {
+                    location.reload();
+                }, 2000);
+            });
+
+            return false;
+
+        } else {
+            cartGoodData = {
+                productSku: productSku,
+                buyNumber: buyNumber,
+                promotionId: promotionId,
+                isEdit: isEdit,
+                cartType: queryString.cartType
+            };
+
+            url = '/cart/index/add';
+        }
+
+        $.ajax({
+            method: 'POST',
+            url: url,
+            data: cartGoodData
+        }).done(function(res) {
+            var cartNum;
+
+            loading.hideLoadingMask();
+            if (res.code === 200 && !isEdit) {
+                cartNum = res.data.goods_count;
+                if (cartNum > 99) {
+                    cartNum = '99+';
+                }
+                $('.num-tag').html(cartNum).removeClass('hide');
+                confirming = false;
+
+                if (cbFn) {
+                    cbFn();
+                }
+            }
+            if (res.message && !isEdit) {
+                tip.show(res.message);
+            }
+
+            hide();
+
+            if (isEdit) {
+                loading.showLoadingMask();
+
+                // 延迟刷新，否则面板可能无法隐藏
+                setTimeout(function() {
+
+                    // 获取当前页面商品类型：普通商品/预售商品
+                    window.location.href = '/cart/index/index?cartType=' + $('#cartType').val();
+                }, 1);
+            }
+        }).fail(function() {
+            tip.show('网络出了点问题~');
+        }).always(function() {
+            confirming = false;
+        });
+    }
+
+});
+
+exports.init = init;
+exports.show = show;
+exports.remove = removePannel;
+exports.setEditModeWithSknId = setEditModeWithSknId;
+exports.disableNumEdit = disableNumEdit;
+exports.setLimitGoodModeWithSknId = setLimitGoodModeWithSknId;

+/*
+ * @Description: dialog
+ * @Time: 2015/11/18
+ * @author: chenglong.wang
+ */
+
+var $ = require('yoho-jquery'),
+    Handlebars = require('yoho-handlebars'),
+    Hammer = require('yoho-hammer');
+
+var $dialogWrapper,
+    dialogTpl,
+    dialogTemplate;
+
+function getInstance() {
+    if (dialogTpl === undefined) {
+        dialogTpl = '<div id="dialog-wrapper" class="dialog-wrapper">' +
+            '<div class="dialog-box">' +
+            '{{# hasHeader}}' +
+            '{{/ hasHeader}}' +
+            '<div class="dialog-content">{{dialogText}}</div>' +
+            '{{# hasFooter}}' +
+            '<div class="dialog-footer">' +
+            '{{# leftBtnText}}' +
+            '<span class="dialog-left-btn tap-hightlight">{{.}}</span>' +
+            '{{/ leftBtnText}}' +
+            '{{# rightBtnText}}' +
+            '<span class="dialog-right-btn tap-hightlight">{{.}}</span>' +
+            '{{/ rightBtnText}}' +
+            '</div>' +
+            '{{/ hasFooter}}' +
+            '</div>' +
+            '</div>';
+
+        dialogTemplate = Handlebars.compile(dialogTpl);
+    }
+    return dialogTemplate;
+}
+
+// fullWithBtn是供详情页获取限购码使用的特殊参数
+exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
+
+    var dialogTemplate = getInstance(),
+        dialogStr = dialogTemplate(data),
+        $dialogBox,
+        defaultHideDuraton,
+        dialogWrapperHammer;
+
+    $('.dialog-wrapper').remove();
+
+    $('body').append($(dialogStr));
+
+    $dialogBox = $('.dialog-box');
+    $dialogWrapper = $('.dialog-wrapper');
+
+
+    dialogWrapperHammer = new Hammer(document.getElementById('dialog-wrapper'));
+
+    // 显示
+    if (data.fast) {
+        $dialogWrapper.css({
+            display: 'block'
+        });
+    } else {
+        $dialogWrapper.fadeIn();
+    }
+
+    if (fullWithBtn) {
+        $('.dialog-wrapper .dialog-footer > span').css('width', '100%');
+        $('.dialog-wrapper .dialog-content').css({
+            'padding-left': '1.85rem',
+            'padding-right': '1.85rem'
+        });
+        $dialogWrapper.css('z-index', '10');
+    }
+
+    $dialogBox.css({
+        top: '50%',
+        marginTop: -($dialogBox.height() / 2)
+    });
+
+    // 隐藏
+    if (data.autoHide) {
+        defaultHideDuraton = 1000;
+        if (data.autoHide > 1) {
+            defaultHideDuraton = data.autoHide;
+        }
+        setTimeout(function() {
+            $dialogWrapper.fadeOut();
+        }, defaultHideDuraton);
+    }
+
+    // 禁止在dialog上可以上下滚动
+    $dialogWrapper.on('touchmove', function() {
+        return false;
+    });
+
+    dialogWrapperHammer.on('tap', function(event) {
+
+        if ($(event.target).hasClass('dialog-left-btn')) {
+            if (typeof callbackForLeft === 'function') {
+                callbackForLeft();
+            }
+            $dialogWrapper.fadeOut();
+        } else if ($(event.target).hasClass('dialog-right-btn')) {
+            callback();
+        }
+
+        // 防止出现点透问题
+        event.preventDefault();
+        event.srcEvent.stopPropagation();
+    });
+};
+
+exports.hideDialog = function() {
+    $('.dialog-wrapper').remove();
+};

+/**
+ * 弹出层可以滚动，遮盖层禁止滚动插件
+ *
+ * @author liangzhifeng<zhifeng.liang@yoho.cn>
+ * @date: 2016/02/22
+ */
+
+var $ = require('yoho-jquery');
+
+function preventDefault(e) {
+    e = e || window.event;
+    e.preventDefault && e.preventDefault();
+    e.returnValue = false;
+}
+
+function stopPropagation(e) {
+    e = e || window.event;
+    e.stopPropagation && e.stopPropagation();
+    e.cancelBubble = false;
+}
+
+function innerScroll(e) {
+    var delta = e.wheelDelta || e.originalEvent.wheelDelta || e.detail || 0,
+        box = $(this).get(0);
+
+    // 阻止冒泡到document
+    // document上已经preventDefault
+    stopPropagation(e);
+
+
+    if ($(box).height() + box.scrollTop >= box.scrollHeight) {
+        if (delta < 0) {
+            preventDefault(e);
+            return false;
+        }
+    }
+    if (box.scrollTop === 0) {
+        if (delta > 0) {
+            preventDefault(e);
+            return false;
+        }
+    }
+}
+
+function disableScroll($choseArea) {
+    var startX, startY;
+
+    // 内部可滚
+    $choseArea.on('mousewheel', innerScroll);
+
+    // 移动端touch重写
+    $choseArea.on('touchstart', function(e) {
+        startX = e.originalEvent.changedTouches[0].pageX;
+        startY = e.originalEvent.changedTouches[0].pageY;
+    });
+
+    // 仿innerScroll方法
+    $choseArea.on('touchmove', function(e) {
+        var deltaX = e.originalEvent.changedTouches[0].pageX - startX,
+            deltaY = e.originalEvent.changedTouches[0].pageY - startY;
+
+        var box = $(this).get(0);
+
+        e.stopPropagation();
+
+
+        // 只能纵向滚
+        if (Math.abs(deltaY) < Math.abs(deltaX)) {
+            e.preventDefault();
+            return false;
+        }
+
+
+        if ($(box).height() + box.scrollTop >= box.scrollHeight) {
+            if (deltaY < 0) {
+                e.preventDefault();
+                return false;
+            }
+        }
+        if (box.scrollTop === 0) {
+            if (deltaY > 0) {
+                e.preventDefault();
+                return false;
+            }
+        }
+    });
+
+    $(document).on('mousewheel', preventDefault);
+    $(document).on('touchmove', preventDefault);
+}
+
+function enableScroll($choseArea) {
+
+    $choseArea.off('touchstart');
+    $choseArea.off('touchmove');
+    $choseArea.off('mousewheel');
+
+    $(document).off('mousewheel', preventDefault);
+    $(document).off('touchmove', preventDefault);
+}
+
+exports.enableScroll = enableScroll;
+exports.disableScroll = disableScroll;

+/**
+ *  商品详情  --评论和咨询tab
+ * @author: Lynnic
+ * @date: 2015/11/18
+ */
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    Hammer = require('yoho-hammer');
+
+var commentsNum, consultsNum;
+
+var navtabEle = document.getElementById('nav-tab'),
+    navtabHammer = navtabEle && new Hammer(navtabEle),
+
+    gotoConsultEle = document.getElementById('goto-consult'),
+    gotoConsultHammer = gotoConsultEle && new Hammer(gotoConsultEle),
+
+    readmore = document.getElementById('readmore'),
+    readmoreHammer = readmore && new Hammer(readmore);
+
+
+
+(function() {
+    consultsNum = $('#nav-tab .consults-num').html() - 0;
+
+    commentsNum = $('#nav-tab .comments-num').html() - 0;
+
+    $('#nav-tab li').each(function() {
+        $(this).removeClass('focus');
+    });
+
+    $('#feedback-content .content').each(function() {
+        $(this).addClass('hide');
+    });
+    if (0 !== commentsNum) {
+        $('#nav-tab .comment-nav').addClass('focus');
+        $('#feedback-content .comment-content').removeClass('hide');
+
+    } else if (0 !== consultsNum) {
+        $('#nav-tab .consult-nav').addClass('focus');
+        $('#feedback-content .consult-content').removeClass('hide');
+    }
+
+})();
+
+if (navtabHammer) {
+    navtabHammer.on('tap', function(e) {
+        var $this = $(e.target).closest('li');
+        var index = $this.index();
+
+        if ($this.hasClass('comment-nav') && 0 === commentsNum) {
+            tip.show('暂无商品评价');
+        } else {
+            if (!$this.hasClass('focus')) {
+
+                $('#nav-tab li').each(function() {
+                    $(this).removeClass('focus');
+                });
+                $('#feedback-content .content').each(function() {
+                    $(this).addClass('hide');
+                });
+
+                $this.addClass('focus');
+                $('#feedback-content .content:eq(' + index + ')').removeClass('hide');
+            }
+        }
+    });
+}
+
+// if (consultFooterHammer) {
+//     consultFooterHammer.on('tap', function() {
+//         location.href = $(consultFooterEle).data('href');
+//     });
+// }
+
+if (gotoConsultHammer) {
+    gotoConsultHammer.on('tap', function() {
+        location.href = $(gotoConsultEle).find('a').attr('href');
+    });
+}
+
+// 咨询页面固定header
+if ($('.goods-consults-page').length > 0) {
+    $('#yoho-header').css('position', 'fixed').css('top', '0');
+}
+
+if ($('.goods-consults-page').length > 0) {
+    $('#yoho-footer').css('border-top', '1px solid #e0e0e0');
+}
+
+if (readmoreHammer) {
+    readmoreHammer.on('tap', function() {
+        $('.readmore').hide();
+        $('.goods-consults.customer-consults').removeClass('customer-consults');
+
+        return false;
+    });
+}
+
+require('./fav');

+/**
+ *  我要咨询提交页面
+ * @author: liangzhifeng<zhifeng.liang@yoho.cn>
+ * @date: 2015/12/01
+ */
+var $ = require('yoho-jquery'),
+    tip = require('../../plugin/tip'),
+    loading = require('../../plugin/loading');
+
+var $consultForm = $('.consult-form'),
+    $submit = $('#submit'),
+    $content = $('#content'),
+    productId = $('#product_id').val(),
+    isSubmiting;
+
+$submit.on('touchend', function() {
+    $content.blur();
+    $consultForm.submit();
+    return false;
+}).on('touchstart', function() {
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', function() {
+    $(this).removeClass('highlight');
+});
+
+$content.on('focus', function() {
+    if ($content.val() === '请输入咨询内容') {
+        $content.val('');
+    }
+}).on('blur', function() {
+    if ($content.val() === '') {
+        $content.val('请输入咨询内容');
+    }
+});
+
+// 提交表单请求
+$consultForm.on('submit', function() {
+    var content;
+
+    if (isSubmiting) {
+        return false;
+    }
+
+    // 简单的表单校验
+    content = $content.val();
+    if (!content || content === '请输入咨询内容') {
+        tip.show('咨询内容不能为空');
+        return false;
+    }
+
+    isSubmiting = true;
+    loading.showLoadingMask();
+    $.ajax({
+        method: 'POST',
+        url: '/product/detail/consultsubmit',
+        data: {
+            product_id: productId,
+            content: content
+        }
+    }).then(function(res) {
+        if ($.type(res) !== 'object') {
+            res = {};
+        }
+        if (res.code !== 200) {
+            tip.show(res.message || '网络出了点问题~');
+            isSubmiting = false;
+            loading.hideLoadingMask();
+        } else {
+            tip.show('提交成功~');
+            setTimeout(function() {
+                window.history.go(-1);
+            }, 3000);
+        }
+    }).fail(function() {
+        tip.show('网络出了点问题~');
+        isSubmiting = false;
+    });
+    return false;
+});

+/**
+ *  商品详情  --异步加载页面下半部分
+ * @author: liangzhifeng<zhifeng.liang@yoho.cn>
+ * @date: 2015/11/18
+ */
+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    Swiper = require('yoho-swiper'),
+    loading = require('../plugin/loading'),
+    tip = require('../plugin/tip');
+
+var introUrl = $('#introUrl').val(),
+    winH = $(window).height(),
+    $productDesc,
+    searching = false,
+    end = false;
+
+var sizeSwiper,
+    refSwiper;
+
+
+// 判断是否要显示向左滑动提示
+function hiddenTips($ele) {
+    var offsetContainer,
+        offsetLastColumn;
+
+    if ($ele.length > 0) {
+        offsetContainer = $ele[0].getBoundingClientRect().right;
+        offsetLastColumn = $ele.find('.swiper-slide:last-child')[0].getBoundingClientRect().right;
+
+
+        if (offsetLastColumn - offsetContainer < 0) {
+            $ele.next('.tips').css('display', 'none');
+        } else {
+            $ele.next('.tips').css('display', 'block');
+        }
+    }
+}
+
+// function isFlexSupport() {
+//    var flex = document.createElement('p').style.flex,
+//        webkitFlex = document.createElement('p').style.webkitFlex,
+//        flexWrap = document.createElement('p').style.flexWrap;
+//
+//    if ((flex === '' || webkitFlex === '') && flexWrap === '') {
+//        return true;
+//    } else {
+//        return false;
+//    }
+// }
+
+function wrapElements(selector, count) {
+    var elArr = null;
+
+    $(selector).each(function(idx, el) {
+        elArr = $(selector).slice(idx, idx + count);
+
+        if (elArr.length === count && idx % count === 0) {
+            $(elArr).wrapAll($('<div class="js-wraper"></div>'));
+        }
+    });
+}
+
+
+
+function search() {
+    if (searching || end) {
+        return;
+    }
+    searching = true;
+
+    // alert($('#reference-swiper-container .swiper-wrapper').width());
+
+    loading.showLoadingMask();
+
+    $.ajax({
+        type: 'GET',
+        url: introUrl,
+        success: function(data) {
+            $productDesc = $('#productDesc');
+            $productDesc.append(data);
+
+            window.rePosFooter();
+
+            lazyLoad($productDesc.find('img.lazy'));
+
+            // 尺码信息左右滑动
+            sizeSwiper = new Swiper('#size-swiper-container', {
+                slidesPerView: 'auto'
+            });
+
+            // 模特试穿左右滑动
+            refSwiper = new Swiper('#reference-swiper-container', {
+                slidesPerView: 'auto'
+            });
+
+            hiddenTips($('#size-swiper-container'));
+            hiddenTips($('#reference-swiper-container'));
+
+            // if (!isFlexSupport()) {
+            //    $('.detail .column').removeClass('column').addClass('oldbox');
+            // }
+            wrapElements('.detail .column', 2);
+            searching = false;
+            end = true;
+            loading.hideLoadingMask();
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+            searching = false;
+            loading.hideLoadingMask();
+        }
+    });
+}
+
+function scrollHandler() {
+    if (!end || $(window).scrollTop() + winH >= $(document).height() - 200) {
+        search();
+    }
+}
+
+// srcoll to load more
+$(window).scroll(function() {
+    window.requestAnimationFrame(scrollHandler);
+});
+

+/**
+ *  商品详情
+ * @author: liangzhifeng<zhifeng.liang@yoho.cn>
+ * @date: 2015/10/20
+ */
+var $ = require('yoho-jquery'),
+    Swiper = require('yoho-swiper'),
+    Hammer = require('yoho-hammer'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+var goodsSwiper,
+    $discountFolder = $('.goodsDiscount .discount-folder'),
+    $discountArrow = $('.goodsDiscount .first-item span');
+
+var goodsDiscountEl = document.getElementById('goodsDiscount'),
+    goodsDiscountHammer = goodsDiscountEl && new Hammer(goodsDiscountEl),
+    $discountFirstItem = $(goodsDiscountEl).find('.first-item');
+
+var $cart = $('.cart-bar');
+
+var appUrl = $('input[name="limitCodeUrl"]').val();
+
+var dialog = require('../me/dialog');
+
+
+// add extra marign-bottom for footer to show the yoho copyright
+function showFooter() {
+    var $cartBar = $('.cart-bar');
+
+    var timer = setInterval(function() {
+        if ($cartBar) {
+            window.reMarginFooter('.cart-bar');
+            clearInterval(timer);
+        } else {
+            $cartBar = $('.cart-bar');
+        }
+    }, 200);
+}
+
+showFooter();
+
+require('./like');
+
+lazyLoad($('img.lazy'));
+
+if ($('#goodsDiscount h1').length < 1) {
+    $('.dropdown').remove();
+}
+
+// 顶部swiper
+goodsSwiper = new Swiper('.banner-swiper', {
+    lazyLoading: true,
+    lazyLoadingInPrevNext: true,
+    paginationClickable: true,
+    pagination: '.banner-top .pagination-inner',
+    nextButton: '.my-swiper-button-next',
+    prevButton: '.my-swiper-button-prev',
+    spaceBetween: 3
+});
+
+
+// 初始化goods-discount
+if (0 === $discountFolder.children().length) {
+    $discountFolder.css('display', 'none');
+    $discountArrow.html('');
+}
+
+// goods-discount下拉按钮点击事件
+if (goodsDiscountHammer && $discountFolder.children().length > 0) {
+    goodsDiscountHammer.on('tap', function(e) {
+        if ($discountFolder.is(':hidden')) {
+            $discountFirstItem.removeClass('short-text');
+            $discountArrow.removeClass('icon-down').addClass('icon-up').html('&#xe608;');
+            $discountFolder.slideDown();
+        } else {
+            $discountFirstItem.addClass('short-text');
+            $discountArrow.removeClass('icon-up').addClass('icon-down').html('&#xe609;');
+            $discountFolder.slideUp();
+        }
+    });
+}
+
+$('#limit-sale').on('touchend', function(e) {
+    var loginUrl = $('#loginUrl').val(),
+        time,
+        ifr;
+
+    e.stopPropagation();
+
+    if (loginUrl) {
+        window.location = loginUrl;
+    } else {
+        dialog.showDialog({
+            dialogText: '进入有货APP，获取限购码',
+            hasFooter: {
+                rightBtnText: '打开Yoho!Buy有货APP'
+            }
+        }, function() {
+            ifr = document.createElement('iframe');
+            ifr.src = appUrl;
+            ifr.style.display = 'none';
+            document.body.appendChild(ifr);
+            window.location.href = appUrl;
+
+            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);
+
+        }, undefined, true);
+
+        $('.dialog-wrapper').off('touchstart').on('touchstart', function(e) {
+            e.stopPropagation();
+            if ($(e.target).hasClass('dialog-wrapper')) {
+                dialog.hideDialog();
+            }
+        });
+    }
+});
+
+require('./desc');
+require('./comments-consults');
+require('../recommend-for-you-product-desc');
+
+// 购物车商品数量
+$.ajax({
+    type: 'GET',
+    url: '/cart/index/count',
+    success: function(data) {
+        var count;
+
+        if (data.code === 200) {
+            count = data.data.cart_goods_count || 0;
+            if (count === 0) {
+                return false;
+            }
+            if (count > 99) {
+                count = '99+';
+            }
+            $cart.find('.num-tag').html(count).removeClass('hide');
+        }
+    }
+});
+
+if ($('.good-detail-page').length > 0) {
+    $('#yoho-footer').css('border-top', '1px solid #e0e0e0');
+}
+
+

+/**
+ *  商品详情咨询页  --点赞和帮助功能
+ * @author: Lynnic
+ * @date: 2015/12/09
+ */
+
+ var $ = require('yoho-jquery'),
+     Hammer = require('yoho-hammer'),
+     tip = require('../plugin/tip');
+
+ var goodsConsultsEle = $('#goods-consults')[0],
+     goodsConsultsHammer = goodsConsultsEle && new Hammer(goodsConsultsEle);
+
+ var productId,
+     total;
+
+ function showCountPlus($el) {
+     var $count = $el.find('.animate-count');
+
+     $count.css('display', 'inline');
+     $count.animate({
+         opacity: 0.25,
+         fontSize: '0.7rem',
+         right: '-=5'
+     }, 300, function() {
+         $count.css('display', 'none');
+     });
+ }
+
+ (function() {
+     var queryStr = window.location.search.substring(1);
+
+     productId = queryStr.split('&')[0].split('=')[1];
+     total = queryStr.split('&')[1] ? queryStr.split('&')[1].split('=')[1] : undefined;
+ })();
+
+ if (goodsConsultsHammer) {
+
+     goodsConsultsHammer.on('tap', function(e) {
+
+         var $this = $(e.target).closest('li'),
+             id = $this.closest('.consult-item').data('id'),
+             count = $this.find('.count').html() - 0,
+             url;
+
+         if (!$this.hasClass('highlight')) {
+
+             if ($this.hasClass('fav')) {
+                 url = '/product/detail/consultupvote';
+             } else if ($this.hasClass('useful')) {
+                 url = '/product/detail/consultuseful';
+             }
+
+             $.ajax({
+                 method: 'post',
+                 url: url,
+                 data: {
+                     id: id,
+                     productId: productId,
+                     total: total
+                 }
+             }).done(function(data) {
+                 if (data.code === 200) {
+                     showCountPlus($this);
+                     $this.addClass('highlight');
+                     $this.find('.count').html(count + 1);
+                 } else if (data.code === 401) {
+                     location.href = data.data;// 未登录跳转登录页
+                 }
+             }).fail(function(data) {
+                 tip.show('网络断开连接了~');
+             });
+
+         }
+     });
+ }

+/**
+ *  商品详情 --添加收藏
+ * @author: Lynnic
+ * @date: 2015/11/24
+ */
+
+
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    chosePanel = require('../cart/chose-panel');
+
+var productId = $('#productId').val();
+
+var skn = $('#productSkn').val(),
+    productCode = $('#limitProductCode').val();
+
+$('#likeBtn').on('touchstart', function() {
+    var opt,
+        favorite;
+
+    var $this = $(this);
+
+    if ($this.hasClass('liked')) {
+        opt = 'cancel';
+        favorite = 0;
+    } else {
+        opt = 'ok';
+        favorite = 1;
+    }
+
+    $.ajax({
+        type: 'POST',
+        url: '/product/opt/favoriteProduct',
+        data: {
+            id: productId,
+            opt: opt
+        },
+        success: function(data) {
+            if (data.code === 200) {
+                $this.toggleClass('liked');
+
+                if ('cancel' === opt) {
+                    tip.show('取消收藏成功');
+                } else if ('ok' === opt) {
+                    tip.show('收藏成功');
+                }
+            } else if (data.code === 400) {
+                location.href = data.data;// 未登录跳转登录页
+            } else {
+                tip.show(data.message);
+            }
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+        }
+    });
+
+    // 统计代码：用于统计用户加入或取消商品收藏的动作
+    if (window._yas) {
+        window._yas.sendCustomInfo({
+            pd: productId,
+            fa: favorite
+        }, true);
+    }
+
+    return false;
+});
+
+$('#addtoCart').on('touchstart', function() {
+    $('.cart-bar').hide();
+    productCode && chosePanel.setLimitGoodModeWithSknId(productCode, skn);
+    chosePanel.show();
+
+    // 统计代码：用于统计用户加入购物车的动作
+    if (window._yas) {
+        window._yas.sendCustomInfo({
+            pd: productId,
+            by: 1
+        }, true);
+    }
+
+    return false;
+});

+/**
+ * 为您优选
+ * @author: liangzhifeng<zhifeng.liang@yoho.cn>
+ * @date: 2015/11/16
+ */
+
+
+var Swiper = require('yoho-swiper'),
+    $ = require('yoho-jquery');
+
+var recommendSwiper,
+    $recommendForYou = $('.recommend-for-you'),
+    preferenceUrl = $('#preferenceUrl').val(),
+    winH = $(window).height(),
+    end = false,
+    requesting = false;
+
+
+function request() {
+    if (requesting || end) {
+        return;
+    }
+
+    requesting = true;
+
+    if (preferenceUrl) {
+        $.get(preferenceUrl).then(function(html) {
+            if (html.length < 5) {
+                $recommendForYou.css('display', 'none');
+            } else {
+                $recommendForYou.html(html).show();
+                if ($('#swiper-recommend').length) {
+                    recommendSwiper = new Swiper('#swiper-recommend', {
+                        slidesPerView: 'auto',
+                        grabCursor: true,
+                        slideElement: 'a',
+                        lazyLoading: true,
+                        watchSlidesVisibility: true
+                    });
+                }
+            }
+
+            requesting = false;
+            end = true;
+
+            window.rePosFooter();
+
+        }).fail(function() {
+            $recommendForYou.hide();
+        });
+    }
+}
+
+function scrollHandler() {
+    if (!end || $(window).scrollTop() + winH >= $(document).height() - 200) {
+        request();
+    }
+}
+
+$(window).scroll(function() {
+    window.requestAnimationFrame(scrollHandler);
+});

@@ -156,7 +156,7 @@ $basicBtnC:#eb0313;
             background-color: #fff;
             background-color: #fff;
             color: #000;
             color: #000;
         }
         }
-        .soonSoldOut-tag {
+        .soon-sold-out-tag {
             background-color: #ffac5b;
             background-color: #ffac5b;
             color: #fff;
             color: #fff;
         }
         }
@@ -212,7 +212,7 @@ $basicBtnC:#eb0313;
             }
             }
         }
         }
     }
     }
-    .goodsName {
+    .goods-name {
         box-sizing: border-box;
         box-sizing: border-box;
         width: 100%;
         width: 100%;
         font-size: 28px;
         font-size: 28px;
@@ -221,7 +221,7 @@ $basicBtnC:#eb0313;
         line-height: 48px;
         line-height: 48px;
         background-color: #515150;
         background-color: #515150;
     }
     }
-    .goodsSubtitle {
+    .goods-subtitle {
         /*display: table;*/
         /*display: table;*/
         height: 88px;
         height: 88px;
         font-size: 24px;
         font-size: 24px;
@@ -296,11 +296,11 @@ $basicBtnC:#eb0313;
             display: inline-block;
             display: inline-block;
             line-height: 88px;
             line-height: 88px;
         }
         }
-        .currentPrice {
+        .current-price {
             color: #d0021b;
             color: #d0021b;
             margin-right: 10px;
             margin-right: 10px;
         }
         }
-        .previousPrice {
+        .previous-price {
             text-decoration: line-through;
             text-decoration: line-through;
         }
         }
     }
     }