fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by lore-w
Commit 3e2632073a9031fa7fc47c3dbb8e769074685c2c 1 parent b9606906

意见反馈点赞

Inline Side-by-side
Showing 10 changed files with 289 additions and 62 deletions
framework @ 119c247f
Subproject commit 75bbc3b075de19f239532f60c5995d06c5f814e2
Subproject commit 119c247f5cf929aa1e059e40609bb16dd6b58f05
... ...
... ... @@ -17,7 +17,7 @@ use Plugin\Cache;
class Yohobuy
{
// /* 正式环境 */
/* 正式环境 */
// const API_URL = 'http://api2.open.yohobuy.com/';
// const API_URL2 = 'http://api.open.yohobuy.com/';
// const SERVICE_URL = 'http://service.api.yohobuy.com/';
... ... @@ -31,6 +31,7 @@ class Yohobuy
const API_URL_SHOPINGCART = 'http://192.168.102.213:8080/api-gateway-web/'; // 我的购物车接口URL
const API_URL_PRODUCTDETAIL = 'http://172.16.6.145:8080/'; // 商品详情页
/**
* 私钥列表
*
... ...
/*
* @Description: dialog
* @Time: 2015/11/18
* @author: chenglong.wang
*/
var $ = require('jquery'),
Handlebars = require('yoho.handlebars'),
Hammer = require('yoho.hammer');
var dialogTpl,
dialogTemplate;
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">{{.}}</span>' +
'{{/ leftBtnText}}' +
'{{# rightBtnText}}' +
'<span class="dialog-right-btn">{{.}}</span>' +
'{{/ rightBtnText}}' +
'</div>' +
'{{/ hasFooter}}' +
'</div>' +
'</div>';
dialogTemplate = Handlebars.compile(dialogTpl);
exports.showDialog = function(data, callback) {
var dialogStr = dialogTemplate(data),
$dialogBox,
$dialogWrapper,
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();
}
$dialogBox.css({
top: '50%',
marginTop: -($dialogBox.height() / 2)
});
//隐藏
if (data.autoHide) {
setTimeout(function() {
$dialogWrapper.fadeOut();
}, 1000);
}
dialogWrapperHammer.on('tap', function(event) {
if ($(event.target).hasClass('dialog-left-btn')) {
$dialogWrapper.fadeOut();
} else if ($(event.target).hasClass('dialog-right-btn')) {
callback();
}
});
};
\ No newline at end of file
... ...
... ... @@ -8,32 +8,24 @@ var $ = require('jquery'),
Hammer = require('yoho.hammer'),
Swiper = require('yoho.iswiper');
var diaLog = require('./dialog');
var $navLi = $('#fav-tab > li'),
$favContainer = $('.fav-content'),
$curContainer = $favContainer.children('.fav-type').first(),
$favContainer = $('.fav-content > .fav-type'),
$swiperList = $('.swiper-container'),
swiperObj = {},
favTabHammer,
favContentHammer;
favTabHammer = new Hammer(document.getElementById('fav-tab'));
favTabHammer.on('tap', function(e) {
var $cur = $(e.target).closest('li'),
index,
id,
i;
if ($cur.length === 0 || $cur.hasClass('active')) {
return;
}
index = $cur.index();
function showFavTab(index) {
var i,
id;
$navLi.filter('.active').removeClass('active');
$cur.addClass('active');
$navLi.eq(index).addClass('active');
$curContainer.addClass('hide');
$curContainer = $favContainer.children(':eq(' + index + ')').removeClass('hide');
$favContainer.filter('.show').removeClass('show');
$favContainer.eq(index).addClass('show');
if (index === 1) {
... ... @@ -51,16 +43,46 @@ favTabHammer.on('tap', function(e) {
}
}
}
// 如果从品牌收藏入口进入
if ($('#fav-tab').hasClass('brand-tab')) {
showFavTab(1);
} else {
showFavTab(0);
}
favTabHammer = new Hammer(document.getElementById('fav-tab'));
favTabHammer.on('tap', function(e) {
var $cur = $(e.target).closest('li'),
index;
if ($cur.length === 0 || $cur.hasClass('active')) {
return;
}
index = $cur.index();
showFavTab(index);
});
//删除收藏的商品
favContentHammer = new Hammer(document.getElementById('fav-content'));
favContentHammer.on('tap', function (e) {
favContentHammer.on('tap', function(e) {
var id = '';
if (!$(e.target).hasClass('del-fav')) {
return;
}
if ($(e.target).hasClass('del-fav')) {
diaLog.showDialog({
dialogText: '您确定要取消收藏吗？',
hasFooter: {
leftBtnText: '取消',
rightBtnText: '确定'
}
}, function() {
id = $(e.target).closest('li').attr('data-id');
$.ajax({
method: 'post',
... ... @@ -68,15 +90,31 @@ favContentHammer.on('tap', function (e) {
data: {
id: id
}
}).then(function (data) {
}).then(function(data) {
if (data.code === 200) {
diaLog.showDialog({
autoHide: true,
fast: true,
dialogText: '已经取消收藏'
});
$(e.target).closest('li').remove();
} else if (data.code === 400) {
diaLog.showDialog({
autoHide: true,
fast: true,
dialogText: data.message
});
} else {
diaLog.showDialog({
autoHide: true,
fast: true,
dialogText: '取消收藏失败'
});
}
}).fail(function () {
}).fail(function() {
//TODO
});
}
});
});
\ No newline at end of file
... ...
... ... @@ -9,13 +9,23 @@ var $ = require('jquery'),
Hammer = require('yoho.hammer'),
Handlebars = require('yoho.handlebars');
var diaLog = require('./dialog');
var $uploadImgList = $('.upload-img-list'),
headerNavHammer,
imgTpl,
template;
imgTemplate,
$likeBtn = $('.suggest-item .like-btn'),
$disLikeBtn = $('.suggest-item .dislike-btn');
require('./jquery.uploadifive');
imgTpl = '{{# imgList}}' +
'<li><img src="{{imgUrl}}" /></li>' +
'{{/ imgList}}';
imgTemplate = Handlebars.compile(imgTpl);
$('#upload-img').uploadifive({
auto: true,
fileType: 'image*/*',
... ... @@ -24,25 +34,19 @@ $('#upload-img').uploadifive({
fileSizeLimit: 1024,
height: '100%',
width: '100%',
onAddQueueItem: function (files) {
onAddQueueItem: function(files) {
//TODO
},
onUploadComplete: function (file, data) {
$uploadImgList.html(template(data));
onUploadComplete: function(file, data) {
$uploadImgList.html(imgTemplate(JSON.parse(data)));
}
});
imgTpl = '{{# imgList}}' +
'<li><img src="{{imgUrl}}" /></li>' +
'{{/ imgList}}';
template = Handlebars.compile(imgTpl);
headerNavHammer = new Hammer(document.getElementById('yoho-header'));
headerNavHammer.on('tap', function (e) {
headerNavHammer.on('tap', function(e) {
var suggestText = $('#suggest-textarea').val();
... ... @@ -54,12 +58,65 @@ headerNavHammer.on('tap', function (e) {
data: {
content: suggestText
}
}).then(function (data) {
//TODO
}).fail(function () {
}).then(function(data) {
if (data.code === 200) {
diaLog.showDialog({
autoHide: true,
dialogText: '提交成功'
});
}
}).fail(function() {
//TODO
});
}
});
// 点赞与取消点赞
// suggestContentHammer = new Hammer(document.getElementById('suggest-content'));
$likeBtn.bind('click', function() {
var id = $(this).closest('.suggest-item').attr('data-id'),
$that = $(this);
$.ajax({
method: 'post',
url: '/home/upAndDown',
data: {
suggest_id: id
}
}).then(function(data) {
if (data.code === 200) {
if ($that.hasClass('active')) {
$that.closest('.suggest-type').removeClass('active')
.prev('.suggest-type').addClass('active');
} else {
$that.closest('.suggest-type').addClass('active')
.next('.suggest-type').removeClass('active');
}
}
}).fail(function(data) {
//TODO
});
});
$disLikeBtn.bind('click', function() {
var id = $(this).closest('.suggest-item').attr('data-id'),
$that = $(this);
$.ajax({
method: 'post',
url: '/home/upAndDown',
data: {
suggest_id: id
}
}).then(function(data) {
if (data.code === 200) {
$that.toggleClass('active');
}
}).fail(function(data) {
//TODO
});
});
\ No newline at end of file
... ...
... ... @@ -63,9 +63,6 @@ a {
.hide {
display: none;
}
#show {
display: block;
}
.overflow-hidden {
overflow: hidden;
... ...
... ... @@ -43,6 +43,13 @@
.fav-content {
//padding: 0 pxToRem(30px);
.fav-type {
display: none;
}
.show {
display: block;
}
.fav-null {
font-size: pxToRem(22px);
color: #444;
... ...
... ... @@ -74,26 +74,26 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
padding-left: pxToRem(128px);
@include box-sizing();
&.active {
color: #444;
&:nth-last-of-type(1) {
padding-left: pxToRem(0);
padding-right: pxToRem(128px);
text-align: right;
float: right;
> span {
display: inline-block;
height: 100%;
overflow: hidden;
&:nth-of-type(1) {
@include rotate(180deg);
@include transition(transform .5);
}
}
}
&:nth-last-of-type(1) {
padding-left: pxToRem(0);
padding-right: pxToRem(128px);
text-align: right;
float: right;
&.active {
color: #444;
}
}
... ... @@ -101,6 +101,9 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
text-align: center;
color: #444;
}
&.show {
display: block;
}
}
}
}
... ... @@ -219,4 +222,50 @@ $suggest: sprite-map("me/suggest/*.png",$spacing: 5px);
}
}
}
}
//dialog
.dialog-wrapper {
background: hsla(0, 0%, 0%, .5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
.dialog-box {
width: pxToRem(540px);
@include border-radius(pxToRem(20px));
background: hsla(100, 100%, 100%, .8);
position: absolute;
left: 50%;
margin-left: pxToRem(-540px)/2;
font-size: pxToRem(30px);
text-align: center;
color: #000;
}
.dialog-content {
padding: pxToRem(60px) pxToRem(30px);
}
.dialog-footer {
border-top: 1px solid #ccc;
height: pxToRem(88px);
line-height: pxToRem(88px);
> span {
display: block;
width: 50%;
height: 100%;
float: left;
@include box-sizing();
&:nth-last-of-type(1) {
border-left: 1px solid #ccc;
color: #ee0011;
}
}
}
}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="yoho-favorite-page yoho-page">
{{# favorite}}
<ul id="fav-tab" class="fav-tab">
<li class="active">收藏的商品</li>
<ul id="fav-tab" class="fav-tab {{# brandTab}}brand-tab{{/ brandTab}}">
<li>收藏的商品</li>
<li>收藏的品牌</li>
</ul>
<div class="fav-content" id="fav-content">
... ... @@ -48,7 +48,7 @@
<a class="go-shopping" href="#">随便逛逛</a>
{{/ hasFavProduct}}
</div>
<div class="fav-type hide">
<div class="fav-type">
{{# hasFavBrand}}
<div class="fav-brand-swiper">
<div class="swiper-header">
... ...
... ... @@ -8,25 +8,23 @@
<div class="suggest-content" id="suggest-content">
{{# suggestContent}}
<div class="suggest-item">
<div class="suggest-item" data-id="{{suggest_id}}">
<img src="{{imgUrl}}" alt=""/>
<h2>{{title}}</h2>
<p>{{content}}</p>
<!--bad传true表示点了不靠谱，false表示没有任何动作-->
<!--good传true表示点了靠谱，false表示没有任何动作-->
<div id="{{^ good}}show{{/ good}}" class="suggest-type">
<div>
<div class="suggest-type {{^ good}}show{{/ good}}">
<div class="like-btn">
<span class="iconfont">&#xe601;</span>
<span>靠谱</span>
</div>
<div class="{{# bad}}active{{/ bad}}">
<div class="dislike-btn {{# bad}}active{{/ bad}}">
<span class="iconfont">&#xe601;</span>
<span>不靠谱</span>
</div>
</div>
<div id="{{# good}}show{{/ good}}" class="suggest-type active">
<div class="like-btn active suggest-type {{# good}}show{{/ good}}">
<span class="iconfont">&#xe601;</span>
<span>靠谱，谢谢您的反馈</span>
</div>
... ...