|
|
|
/*
|
|
|
|
* @description: 详情页
|
|
|
|
* @author: chenglong.wang@yoho.cn
|
|
|
|
* @date: 2015/1/13
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require("jquery");
|
|
|
|
var tools = require('yoho-tools');
|
|
|
|
var swiper = require('swiper-mobile');
|
|
|
|
|
|
|
|
var oShare = require("../plugin/share");
|
|
|
|
var flip = require("../plugin/flip");
|
|
|
|
var slide = require("../plugin/photoslide");
|
|
|
|
|
|
|
|
require("../plugin/login");
|
|
|
|
require("../plugin/comment");
|
|
|
|
require("../plugin/content-paging");
|
|
|
|
|
|
|
|
exports.init = function() {
|
|
|
|
|
|
|
|
//轮播图
|
|
|
|
var fashionSwiper = new swiper('.fashion-banner',{
|
|
|
|
mode:'horizontal',
|
|
|
|
loop: true,
|
|
|
|
grabCursor: true,
|
|
|
|
paginationClickable: true,
|
|
|
|
slideElement: 'li',
|
|
|
|
onSlideChangeEnd: fashionSwiperIndex
|
|
|
|
});
|
|
|
|
|
|
|
|
var fashionSwitch = $(".fashion-switch");
|
|
|
|
|
|
|
|
var page;
|
|
|
|
if (!!fashionSwiper.slides) {
|
|
|
|
page = fashionSwiper.slides.length-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
fashionSwitch.text(1+'/'+page);
|
|
|
|
|
|
|
|
function fashionSwiperIndex () {
|
|
|
|
var index = fashionSwiper.activeIndex;
|
|
|
|
//index = index > page ? 1 : index;
|
|
|
|
if (index > page) {
|
|
|
|
index = 1;
|
|
|
|
}else if (index <= 0) {
|
|
|
|
index = page;
|
|
|
|
}
|
|
|
|
fashionSwitch.text(index+'/'+page);
|
|
|
|
$(".relazy").lazyload({threshold: 100});
|
|
|
|
}
|
|
|
|
|
|
|
|
//变脸效果
|
|
|
|
slide.initSlide({
|
|
|
|
isMobile: true
|
|
|
|
});
|
|
|
|
|
|
|
|
var commentBox =$(".comments-box");
|
|
|
|
$(".comments").on("click",function(){
|
|
|
|
|
|
|
|
var cidNum = commentBox.attr("cid");
|
|
|
|
if($(".comment-textarea").size()>0){
|
|
|
|
|
|
|
|
if(commentBox.css("display") == "none"){
|
|
|
|
commentBox.show();
|
|
|
|
}else{
|
|
|
|
commentBox.hide();
|
|
|
|
}
|
|
|
|
}else{
|
|
|
|
commentBox.comment({
|
|
|
|
cid:cidNum,
|
|
|
|
commentPageUrl:'/comment/default/list',
|
|
|
|
publishUrl:'/comment/default/publish',
|
|
|
|
deleteUrl:'/comment/default/delete',
|
|
|
|
isMobile:true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
//ajax参数
|
|
|
|
var param = {
|
|
|
|
id:commentBox.attr("cid"),
|
|
|
|
type:commentBox.attr("ctype"),
|
|
|
|
c:commentBox.attr("cc"),
|
|
|
|
twoc:commentBox.attr("ctwoc")
|
|
|
|
};
|
|
|
|
//底部数据的获取
|
|
|
|
$.ajax({
|
|
|
|
type:'GET',
|
|
|
|
url:YohoConfig.mainUrl+'/channel/detail/getbottom?id='+param.id+'&type='+param.type+'&c='+param.c+'&twoc='+param.twoc,
|
|
|
|
success:function(response){
|
|
|
|
|
|
|
|
var data = response.data;
|
|
|
|
|
|
|
|
var relatedPost = data.related,
|
|
|
|
prevnext = data.prevnext,
|
|
|
|
attitude = data.attitude,
|
|
|
|
commentnum = data.commentnum;
|
|
|
|
|
|
|
|
//新品播报
|
|
|
|
var relatedPostItem = '';
|
|
|
|
for(var i=0;i<3;i++){
|
|
|
|
if(relatedPost[i].isVideo === true){
|
|
|
|
var video = '<li>'+
|
|
|
|
'<a href="'+relatedPost[i].link+'" target="_blank" onclick="relatedClickEvent();">'+
|
|
|
|
'<div class="content-pic">'+
|
|
|
|
'<img src="'+relatedPost[i].cover+'" alt="" />'+
|
|
|
|
'<span class="play-icon"></span>'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="content-text">'+
|
|
|
|
'<h2>'+relatedPost[i].title+'</h2>'+
|
|
|
|
'<h3>'+relatedPost[i].subtitle+'</h3>'+
|
|
|
|
'</div>'+
|
|
|
|
'</a>'+
|
|
|
|
'</li>';
|
|
|
|
relatedPostItem += video;
|
|
|
|
}else{
|
|
|
|
var img = '<li>'+
|
|
|
|
'<a href="'+relatedPost[i].link+'" target="_blank" onclick="relatedClickEvent();">'+
|
|
|
|
'<div class="content-pic">'+
|
|
|
|
'<img src="'+relatedPost[i].cover+'" alt="" />'+
|
|
|
|
'</div>'+
|
|
|
|
'<div class="content-text">'+
|
|
|
|
'<h2>'+relatedPost[i].title+'</h2>'+
|
|
|
|
'<h3>'+relatedPost[i].subtitle+'</h3>'+
|
|
|
|
'</div>'+
|
|
|
|
'</a>'+
|
|
|
|
'</li>';
|
|
|
|
relatedPostItem += img;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$(".recomment ul").append($(relatedPostItem));
|
|
|
|
|
|
|
|
//上一篇下一篇
|
|
|
|
var pagePrev = $('.detail-prev');
|
|
|
|
var pageNext = $('.detail-next');
|
|
|
|
if(prevnext.prev.title){
|
|
|
|
pagePrev.show();
|
|
|
|
pagePrev.find("a").attr("href",prevnext.prev.link)
|
|
|
|
.attr("title",prevnext.prev.title).attr("onclick","prevOrNextClickEvent();");
|
|
|
|
}
|
|
|
|
if(prevnext.next.title){
|
|
|
|
pageNext.show();
|
|
|
|
pageNext.find("a").attr("href",prevnext.next.link)
|
|
|
|
.attr("title",prevnext.next.title).attr("onclick","prevOrNextClickEvent();");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//态度
|
|
|
|
$(".stats-btn").find("li").removeClass("current");
|
|
|
|
setattitude(attitude.wowCount,attitude.zzzCount,attitude.wtfCount);
|
|
|
|
|
|
|
|
if(commentnum>0){
|
|
|
|
$(".comment-num").text(commentnum);
|
|
|
|
}else{
|
|
|
|
$(".comment-num").html('<img src="'+YohoConfig.resUrl+'/assets/images/comment-mobile.png">');
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//态度设置
|
|
|
|
$(".stats-btn").on("click","li",function(){
|
|
|
|
if($(this).index() == 3) return;
|
|
|
|
var exType = $(this).index()+1;
|
|
|
|
var isCancel = 0;
|
|
|
|
|
|
|
|
if($(this).hasClass("current")){
|
|
|
|
isCancel = 1;
|
|
|
|
}
|
|
|
|
//在请求开始之前先变色
|
|
|
|
if($(this).hasClass("current")){
|
|
|
|
$(this).removeClass('current');
|
|
|
|
}else{
|
|
|
|
$(".stats-btn").find("li").removeClass("current");
|
|
|
|
$(this).addClass('current');
|
|
|
|
}
|
|
|
|
|
|
|
|
var attitudeData = {id:param.id,exType:exType,isCancel:isCancel};
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
type:'POST',
|
|
|
|
url:YohoConfig.mainUrl+'/channel/detail/setattitude',
|
|
|
|
data:attitudeData,
|
|
|
|
dataType:'json',
|
|
|
|
success:function(response){
|
|
|
|
var attitude = response.data;
|
|
|
|
|
|
|
|
/*if(attitude.userWow>0){
|
|
|
|
$(".stats-btn .wow").addClass("current");
|
|
|
|
};
|
|
|
|
if(attitude.userWtf>0){
|
|
|
|
$(".stats-btn .wtf").addClass("current");
|
|
|
|
};
|
|
|
|
if(attitude.userZzz>0){
|
|
|
|
$(".stats-btn .zzz").addClass("current");
|
|
|
|
};*/
|
|
|
|
setattitude(attitude.wowCount,attitude.zzzCount,attitude.wtfCount);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
function setattitude(wow,zzz,wtf){
|
|
|
|
if(wow ===0){
|
|
|
|
$(".stats-btn .wow").find("span").find("img").show();
|
|
|
|
$(".stats-btn .wow").find("span").find("i").hide();
|
|
|
|
}else{
|
|
|
|
$(".stats-btn .wow").find("span").find("i").text(wow).show();
|
|
|
|
$(".stats-btn .wow").find("span").find("img").hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
if(zzz ===0){
|
|
|
|
$(".stats-btn .zzz").find("span").find("img").show();
|
|
|
|
$(".stats-btn .zzz").find("span").find("i").hide();
|
|
|
|
}else{
|
|
|
|
$(".stats-btn .zzz").find("span").find("i").text(zzz).show();
|
|
|
|
$(".stats-btn .zzz").find("span").find("img").hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
if(wtf ===0){
|
|
|
|
$(".stats-btn .wtf").find("span").find("img").show();
|
|
|
|
$(".stats-btn .wtf").find("span").find("i").hide();
|
|
|
|
}else{
|
|
|
|
$(".stats-btn .wtf").find("span").find("i").text(wtf).show();
|
|
|
|
$(".stats-btn .wtf").find("span").find("img").hide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
exports.updateLogin = function(){
|
|
|
|
$(".comments-box").login("updateLoginState");
|
|
|
|
$(".comments-box").comment("publishComment");
|
|
|
|
};
|
|
|
|
$(".side-bar-header").login();
|
|
|
|
$(".side-bar-header").on("click",function(){
|
|
|
|
$(this).login("loginBoxAnimate");
|
|
|
|
});
|
|
|
|
|
|
|
|
//手机版弹出登录框
|
|
|
|
/*$(".side-bar-header").on("click",function(){
|
|
|
|
if($(this).hasClass("login-success")) return;
|
|
|
|
$(".comments-box").comment("loginBoxAnimate");
|
|
|
|
})*/
|
|
|
|
//$(".comments-box").comment("initLoginState");
|
|
|
|
|
|
|
|
//share
|
|
|
|
var shareUrl = $("#share").attr("data-link");
|
|
|
|
oShare.init({
|
|
|
|
shareUrl:shareUrl,
|
|
|
|
img:$("#share").attr("cover"),
|
|
|
|
sinaText:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text(),
|
|
|
|
fbTextFunction:function(){
|
|
|
|
return {
|
|
|
|
des:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'#YohoBoy',
|
|
|
|
name:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'#YohoBoy',
|
|
|
|
caption:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'#YohoBoy',
|
|
|
|
url:location.href
|
|
|
|
}
|
|
|
|
},
|
|
|
|
tweetText:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'@YOHO潮流志',
|
|
|
|
qqText:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'（来自Yoho!Boys）'
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//hr分页
|
|
|
|
(function () {
|
|
|
|
// iphone上面的视频处理
|
|
|
|
var UserAgent = navigator.userAgent.toLowerCase();
|
|
|
|
var IsIphoneOs = UserAgent.match(/iphone os/i) == "iphone os";
|
|
|
|
var videoWrap = $('.fashion-text');
|
|
|
|
if (IsIphoneOs) {
|
|
|
|
// 内容中视频播放器替换为H5的VIDEO标签
|
|
|
|
if (videoWrap.find("object").length > 0) {
|
|
|
|
var defaultCover = videoWrap.attr("cover-url");
|
|
|
|
var playHref = "", videoUrl = "", videoCover = "", videoHtml = "";
|
|
|
|
videoWrap.find("object").each(function() {
|
|
|
|
playHref = $(this).find('embed').attr('src');
|
|
|
|
videoUrl = tools.request('url', playHref);
|
|
|
|
videoCover = tools.request('coverpic', playHref);
|
|
|
|
if (videoCover === "") {
|
|
|
|
videoCover = defaultCover;
|
|
|
|
}
|
|
|
|
videoCover = videoCover.replace(/%3A/g, ':').replace(/%2F/g, '/');
|
|
|
|
videoHtml = '<video controls="controls" preload="auto" width="290px" height="163px" poster="'+videoCover+'">'+
|
|
|
|
'<source src="' + videoUrl + '" type="video/mp4">'+
|
|
|
|
'</video>';
|
|
|
|
$(this).replaceWith(videoHtml);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
$(".fashion").contentPaging({
|
|
|
|
pageContentWrap:".fashion-text",
|
|
|
|
callback:function () {
|
|
|
|
lifeFlip();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
//翻转
|
|
|
|
function lifeFlip () {
|
|
|
|
var lifestyleFlip = $('.lifestyle-flip').size();
|
|
|
|
if (!!lifestyleFlip) {
|
|
|
|
flip.init();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
lifeFlip();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 点击关联关系区的事件
|
|
|
|
*/
|
|
|
|
function relatedClickEvent()
|
|
|
|
{
|
|
|
|
_hmt.push(['_trackEvent', '2.0 related', '2.0 post mobile', '2.0 related mobile']);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 点击上一页/下一页的事件
|
|
|
|
*/
|
|
|
|
function prevOrNextClickEvent()
|
|
|
|
{
|
|
|
|
_hmt.push(['_trackEvent', '2.0 prev or next', '2.0 prev or next mobile', '2.0 prev or next mobile']);
|
|
|
|
}
|
|
|
|
|
