fe / yohobuywap-node · Commits

Go to a project

Authored by 张丽霞
Commit 6836e8e2945bbb542d99489a0ac224033a26c6ca 1 parent 07aae56d

详情页相关目录整理

Inline Side-by-side
Showing 14 changed files with 950 additions and 0 deletions
{{# result}}
<div class="good-detail-page yoho-page">
<div class="banner-container">
<div class="tag-container">
{{# tags}}
{{# is_new}}
<p class="good-tag new-tag">NEW</p>
{{/ is_new}}
{{# is_advance}}
<p class="good-tag renew-tag">再到着</p>
{{/ is_advance}}
{{# is_discount}}
<p class="good-tag sale-tag">SALE</p>
{{/ is_discount}}
{{# is_yohood}}
<div class="good-tag running-man-tag">跑男同款</div>
{{/ is_yohood}}
{{# is_limited}}
<p class="good-tag limit-tag">限量商品</p>
{{/ is_limited}}
{{# is_soon_sold_out}}
<p class="good-tag soon-sold-out-tag">即将售罄</p>
{{/ is_soon_sold_out}}
{{/ tags}}
</div>
{{# bannerTop}}
{{> product/banner-swiper-arrow}}
{{/ bannerTop}}
</div>
{{# goodsName}}
<h2 class="goods-name"><span>{{.}}</span></h2>
{{/ goodsName}}
{{# goodsSubtitle}}
<h1 class="goods-subtitle"><span>{{.}}</span></h1>
{{/ goodsSubtitle}}
<div class="price-date">
{{# goodsPrice}}
<div class="goods-price">
<h1 class="current-price">{{currentPrice}}</h1>
<h1 class="previous-price">{{previousPrice}}</h1>
</div>
{{/ goodsPrice}}
{{^ noLimitGoodsBtn}}
{{#if canGetLimitCode}}
<button class="limit-sale" id='limit-sale'>获取限购码</button>
{{/if}}
{{#if codeEmpty}}
<button class="got-limit-sale">限购码已被抢光</button>
{{/if}}
{{#if gotCode}}
<button class="got-limit-sale">已获取限购码</button>
{{/if}}
{{/noLimitGoodsBtn}}
{{#if periodOfMarket}}
<div class="period-of-market">
<h1>上市期：</h1>
<h1 >{{periodOfMarket}}</h1>
</div>
{{/if}}
</div>
{{# vipLevel}}
<ul class="vip-level clearfix">
{{# list}}
<li class="icons-item {{#if currentLevel}}current-level{{/if}}">
<span class="vip-img " style="background-size:contain;">
</span>
<span class="vip-price ">{{text}}</span>
</li>
{{/ list}}
</ul>
{{/vipLevel}}
{{# goodsDiscount}}
<div class="goods-discount" id="goodsDiscount">
{{# list}}
{{#if @first}}
{{#if text}}
<h1 class="first-item short-text tap-hightlight">{{text}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
{{/if}}
{{/if}}
{{/ list}}
<div class="discount-folder">
{{# list}}
{{#if @first}}
{{else}}
{{#if text}}
<h1 class="folder-item tap-hightlight">{{text}}</h1>
{{/if}}
{{/if}}
{{/list}}
</div>
</div>
{{/ goodsDiscount}}
{{# feedbacks}}
<div class="feedback-list ">
{{#if commentsNum}}
{{> product/feedback-tab}}
{{else}}
{{#if consultsNum}}
{{> product/feedback-tab}}
{{else}}
<div class="nodata tap-hightlight" id="goto-consult">
<span>暂无商品评价和咨询</span>
<a href="{{consultsUrl}}" class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
</div>
{{/if}}
{{/if}}
</div>
{{/ feedbacks}}
{{# enterStore}}
<div id="enter-store" class="enter-store page-block tap-hightlight">
<a class="store-logo" href="{{url}}" style="">
<img class="lazy" data-original="{{img}}" alt="{{storeName}}">
</a>
<a class="store-name" href="{{url}}">{{storeName}}</a>
<a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
</div>
{{/ enterStore}}
<div id="productDesc"> </div>
{{> product/recommend-for-you}}
{{> cart/chose-panel}}
{{#cartInfo}}
<div class="cart-bar">
<a href="{{cartUrl}}" class="num-incart iconfont"><span class="num-tag hide"></span>&#xe62c;</a>
{{#if addToCartUrl}}
<!-- <a id="addtoCart" href="{{addToCartUrl}}" class="addto-cart">加入购物车</a> -->
<a id="addtoCart" href="javascript:;" class="addto-cart">加入购物车</a>
{{/if}}
{{#if soldOut}}
<a href="javascript:;" class="sold-out">已售罄</a>
{{/if}}
{{#if notForSale}}
<a href="javascript:;" class="sold-out">非卖品</a>
{{/if}}
{{#if limitNotForSale}}
<a href="javascript:;" class="sold-out limit">即将发售</a>
{{/if}}
{{#if canBuyLimit}}
<a href="javascript:;" id="addtoCart" class="addto-cart">立即购买</a>
{{/if}}
{{#if noLimitCode}}
<a href="javascript:;" class="sold-out limit">立即购买</a>
{{/if}}
<input type="hidden" id="limitCodeUrl" name="limitCodeUrl" value="{{limitCodeUrl}}">
<input type="hidden" id="limitProductPay" name="limitProductPay" value="{{limitProductPay}}">
{{#limitProductCode}}
<input type="hidden" id="limitProductCode" name="limitProductCode" value="{{.}}">
{{/limitProductCode}}
<a href="javascript:;" id="likeBtn" class="favorite iconfont {{#isCollect}}liked{{/isCollect}}">&#xe605;</a>
</div>
{{/cartInfo}}
{{#if introUrl}}
<input id="introUrl" type="hidden" value="{{introUrl}}">
{{/if}}
{{#if id}}
<input id="productId" type="hidden" value="{{id}}">
{{/if}}
{{#if preferenceUrl}}
<input id="preferenceUrl" type="hidden" value="{{preferenceUrl}}">
{{/if}}
<input id="productSkn" type="hidden" value="{{productSkn}}">
{{#loginUrl}}
<input type="hidden" name="loginUrl" id="loginUrl" value="{{.}}">
{{/loginUrl}}
</div>
{{/ result}}
\ No newline at end of file
... ...
{{# result}}
{{> product/product-description}}
{{/ result}}
\ No newline at end of file
... ...
{{> product/recommend-content}}
\ No newline at end of file
... ...
<ul id="nav-tab" class="nav-tab clearfix">
<li class="comment-nav tap-hightlight">商品评价(<span class="comments-num">{{commentsNum}}</span>)</li>
<li class="consult-nav tap-hightlight">购买咨询(<span class="consults-num">{{consultsNum}}</span>)</li>
</ul>
<div id="feedback-content" >
<div class="comment-content content ">
{{#if commentsNum}}
<div class="comment-content-main content-main">
{{# comments}}
<span class="user-name">
{{userName}}
</span>
<span class="goods-spec">
购买了{{desc}}
</span>
<p class="detail-content">
{{content}}
</p>
<span class="comment-time">
{{time}}
</span>
{{/ comments}}
</div>
<a class="comment-content-footer tap-hightlight" href="{{commentsUrl}}">
查看更多
<span class="iconfont">&#xe604;</span>
</a>
{{^}}
<div class="comment-content-main content-main no-item">
<span class="iconfont">&#xe63d;</span>暂无评论
</div>
{{/if}}
</div>
<div class="consult-content content hide ">
{{#if consultsNum}}
<div class="consult-content-main content-main">
{{# consults}}
<div class="question">
<span class="iconfont">&#xe644;</span>
<p>
{{question}}<br>
<span class="time">{{time}}</span>
</p>
</div>
<div class="answer">
<span class="iconfont">&#xe642;</span>
<p>{{answer}}</p>
</div>
{{/ consults}}
</div>
<a class="consult-content-footer tap-hightlight" href="{{consultsUrl}}">
查看更多
<span class="iconfont">&#xe604;</span>
</a>
{{else}}
<div class="consult-content-main content-main no-item">
<span class="iconfont">&#xe63f;</span>暂无咨询
</div>
<div class="consult-content-footer tap-hightlight">
<a href="{{consultsUrl}}">
我要咨询
<span class="iconfont">&#xe604;</span></a>
</div>
{{/if}}
</div>
</div>
... ...
{{#goodsDescription}}
<div class="goods-desc page-block">
<div class="service"></div>
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail table">
{{#list}}
<div class="column">{{param}}</div>
{{/list}}
</div>
{{/detail}}
{{#if desc}}
<div class="desc-text">{{desc}}</div>
{{/if}}
</div>
{{/goodsDescription}}
{{#sizeInfo}}
<div class="size-info page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
<div class="swiper-container detail-swiper" id="size-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide " >
{{#params}}
<div class="cell">{{param}}</div>
{{/params}}
</div>
{{/list}}
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
{{#measurementMethod}}
<div class="measurement-method page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail" style="width:100%">
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/measurementMethod}}
{{#reference}}
<div class="size-info page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
<div class="swiper-container detail-swiper" id="reference-swiper-container">
<div class="swiper-wrapper">
{{#list}}
{{#if @first}}
<div class="swiper-slide first-group" >
{{#params}}
{{#if @first}}
{{else}}
<div>
<img class="avatar lazy" data-original="{{param}}" alt="">
</div>
{{/if}}
{{/params}}
</div>
{{else}}
<div class="swiper-slide" >
{{#params}}
<div class=" cell">{{param}}</div>
{{/params}}
</div>
{{/if}}
{{/list}}
</div>
</div>
<p class="tips">提示:左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/reference}}
{{#materials}}
<div class="materials page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
{{#list}}
<div class="material-item">
<!-- <img class="lazy" data-original="{{img}}" alt="">
<p class="material-desc">
{{desc}}
</p>-->
<div class="material-image">
<img src="{{img}}" alt="材质图">
</div>
<div class="material-desc">
{{desc}}
</div>
</div>
{{/list}}
</div>
</div>
{{/materials}}
{{#washTips}}
<div class="wash-tips page-block">
<div class="detail table clearfix">
{{#list}}
<div class="tip">
<img src="{{img}}" alt="">
<span class="caption">{{caption}}</span>
</div>
{{/list}}
</div>
</div>
{{/washTips}}
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
{{{title}}}
<span class="en-title">{{{enTitle}}}</span>
</h1>
<div class="pro-detail">
<p>{{{desc}}}</p>
{{#list}}
<img class="lazy" data-original="{{img}}" alt="">
{{/list}}
</div>
</div>
{{/productDetail}}
... ...
<div class="recommend-for-you hide">
</div>
\ No newline at end of file
... ...
<div class="title">为您优选新品</div>
<div id="swiper-recommend" class="swiper-container">
<div class="swiper-wrapper swiper-wrapper-recommend">
{{#recommendList}}
<a class="swiper-slide" href="{{url}}">
<img class="swiper-lazy img-box" data-src="{{thumb}}">
<div class="sale-name">
{{name}}
</div>
<div class="price">
<span class="sale-price {{^price}}no-price{{/price}}">￥{{salePrice}}</span>
{{#price}}<span class="old-price">￥{{.}}</span>{{/price}}
</div>
<div class="swiper-lazy-preloader"></div>
</a>
{{/recommendList}}
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -7,6 +7,7 @@ var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
Hammer = require('yoho-hammer'),
lazyLoad = require('yoho-jquery-lazyload');
// commonJS = require('../common');
var $discountFolder = $('.goodsDiscount .discount-folder'),
... ...
/**
* 商品详情 --评论和咨询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 (commentsNum !== 0) {
$('#nav-tab .comment-nav').addClass('focus');
$('#feedback-content .comment-content').removeClass('hide');
} else if (consultsNum !== 0) {
$('#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') && commentsNum === 0) {
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;
// 判断是否要显示向左滑动提示
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) {
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'));
// 尺码信息左右滑动
new Swiper('#size-swiper-container', {
slidesPerView: 'auto'
});
// 模特试穿左右滑动
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: 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() {
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 (opt === 'cancel') {
tip.show('取消收藏成功');
} else if (opt === 'ok') {
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 $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) {
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);
});
... ...