|
|
|
import {
|
|
|
|
View
|
|
|
|
} from 'yoho-mvc';
|
|
|
|
|
|
|
|
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,
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
lazyLoadingOnTransitionStart: true,
|
|
|
|
paginationClickable: true,
|
|
|
|
pagination: '.banner-top .pagination-inner',
|
|
|
|
nextButton: '.my-swiper-button-next',
|
|
|
|
prevButton: '.my-swiper-button-prev',
|
|
|
|
spaceBetween: 3
|
|
|
|
});
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
let $cartBar = $('.cart-bar');
|
|
|
|
let timer = setInterval(function() {
|
|
|
|
if ($cartBar) {
|
|
|
|
window.reMarginFooter('.cart-bar');
|
|
|
|
clearInterval(timer);
|
|
|
|
} else {
|
|
|
|
$cartBar = $('.cart-bar');
|
|
|
|
}
|
|
|
|
}, 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();
|
|
|
|
|
|
|
|
lazyLoad($productDesc.find('img.lazy'));
|
|
|
|
|
|
|
|
this.productDescStyle();
|
|
|
|
}
|
|
|
|
|
|
|
|
productDescStyle() {
|
|
|
|
new Swiper('#swiper-recommend', {
|
|
|
|
slidesPerView: 'auto',
|
|
|
|
grabCursor: true,
|
|
|
|
slideElement: 'a',
|
|
|
|
lazyLoading: true,
|
|
|
|
watchSlidesVisibility: true
|
|
|
|
});
|
|
|
|
|
|
|
|
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; // eslint-disable-line
|
|
|
|
|
|
|
|
$service.css({
|
|
|
|
height: showH,
|
|
|
|
overflow: 'hidden'
|
|
|
|
});
|
|
|
|
|
|
|
|
this.operation = {
|
|
|
|
showH,
|
|
|
|
serviceH
|
|
|
|
};
|
|
|
|
this.on('click', '.service-operation', this.serviceOperation.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
serviceOperation(e) {
|
|
|
|
function serviceState(opt) {
|
|
|
|
opt.dom.html(opt.txt + '<i class="service-icon shrink-btn-' + opt.btnClass + '"></i>');
|
|
|
|
|
|
|
|
$('.service-cont').animate({
|
|
|
|
height: opt.height
|
|
|
|
}, 0, function() {
|
|
|
|
$(this).css({
|
|
|
|
overflow: opt.of
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let $this = $(e.currentTarget);
|
|
|
|
let curState = $this.find('i').hasClass('shrink-btn-up');
|
|
|
|
|
|
|
|
if (curState) {
|
|
|
|
serviceState({
|
|
|
|
dom: $this,
|
|
|
|
txt: '展开',
|
|
|
|
btnClass: 'down',
|
|
|
|
height: this.operation.showH,
|
|
|
|
of: 'hidden'
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
serviceState({
|
|
|
|
dom: $this,
|
|
|
|
txt: '收起',
|
|
|
|
btnClass: 'up',
|
|
|
|
height: this.operation.serviceH,
|
|
|
|
of: 'visible'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getSkn() {
|
|
|
|
return this.$base.data('skn');
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
