Skip to content

J
joshine
Commit 360ccffc by halweg
Options

feat: 留言相册效果优化

parent e8c5e3fd
Showing with 70 additions and 45 deletions
app/code/Joshine/Review/view/frontend/templates/product/view/list.phtml
...@@ -104,9 +104,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -104,9 +104,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
<div class="joshine-review-nickname joshine-font-c-deepin joshine-font-size-default joshine-font-w-bolder "> <div class="joshine-review-nickname joshine-font-c-deepin joshine-font-size-default joshine-font-w-bolder ">
<?= $block->escapeHtml($review->getNickname()) ?> <?= $block->escapeHtml($review->getNickname()) ?>
</div> </div>
<div class="joshine-review-product"> <input type="hidden" id="modal-current-review-id">
</div>
<div class="joshine-review-date joshine-font-c-darkgray joshine-font-mini-plus"> <div class="joshine-review-date joshine-font-c-darkgray joshine-font-mini-plus">
<?= $block->escapeHtml($block->formatDate($review->getCreatedAt(), $format)) ?> <?= $block->escapeHtml($block->formatDate($review->getCreatedAt(), $format)) ?>
</div> </div>
...@@ -580,6 +578,49 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -580,6 +578,49 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
var lock = true; var lock = true;
var swiper_wrapper = $('.swiper-wrapper'); var swiper_wrapper = $('.swiper-wrapper');
var reviewList; var reviewList;
function processReview(review) {
$('[data-review-js="nickname"]').html(review.nickname);
$('[data-review-js="title"]').html(review.title);
$('[data-review-js="detail"]').html(review.detail);
$('[data-review-js="date"]').html(review.created_at);
let fits_text = fitsTranslate(review.size_fits);
$('[data-review-js="fits"]').html(fits_text);
$('[data-review-js="rating"]').width(review.rating + '%');
$('#modal-current-review-id').val(review.review_id);
}
function fitsTranslate(fits) {
var fits_words = 'default';
if (fits === '1') {
fits_words = 'Small';
}
if (fits === '2') {
fits_words = 'Ture Size';
}
if (fits === '3') {
fits_words = 'Large';
}
return fits_words;
}
function pullIdx(id)
{
img_idx = findIdxByImgId(id);
swiper_wrapper.css({"transform" : 'translateX(' + -536 * img_idx + 'px)'});
dealIndex(img_idx);
}
function findIdxByImgId(imgId)
{
let res = 0;
$(".image-thumbs-list-item").each(function (index, ele) {
if ($(ele).data('image-id') == imgId) {
res = $(ele).data('img-index');
}
});
return res;
}
$(".joshine-review-pic-item").on('click', function () { $(".joshine-review-pic-item").on('click', function () {
var reviewId = $(this).data('reviews-id'); var reviewId = $(this).data('reviews-id');
...@@ -644,47 +685,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -644,47 +685,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
$('.image-full-wrapper').html(html); $('.image-full-wrapper').html(html);
} }
function processReview(review) {
$('[data-review-js="nickname"]').html(review.nickname);
$('[data-review-js="title"]').html(review.title);
$('[data-review-js="detail"]').html(review.detail);
$('[data-review-js="date"]').html(review.created_at);
let fits_text = fitsTranslate(review.size_fits);
$('[data-review-js="fits"]').html(fits_text);
$('[data-review-js="rating"]').width(review.rating + '%');
}
function fitsTranslate(fits) {
var fits_words = 'default';
if (fits === '1') {
fits_words = 'Small';
}
if (fits === '2') {
fits_words = 'Ture Size';
}
if (fits === '3') {
fits_words = 'Large';
}
return fits_words;
}
function pullIdx(id)
{
img_idx = findIdxByImgId(id);
swiper_wrapper.css({"transform" : 'translateX(' + -536 * img_idx + 'px)'});
dealIndex(img_idx);
}
function findIdxByImgId(imgId)
{
let res = 0;
$(".image-thumbs-list-item").each(function (index, ele) {
if ($(ele).data('image-id') == imgId) {
res = $(ele).data('img-index');
}
});
return res;
}
}); });
$(".joshine-close").on('click', function () { $(".joshine-close").on('click', function () {
...@@ -712,7 +713,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -712,7 +713,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
// 开锁，动画结束之后开锁 // 开锁，动画结束之后开锁
dealIndex(img_idx); dealIndex(img_idx);
processReviewDetail(img_idx);
setTimeout(function () { setTimeout(function () {
lock = true; lock = true;
}, 500); }, 500);
...@@ -731,14 +732,38 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId()); ...@@ -731,14 +732,38 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
img_idx--; img_idx--;
swiper_wrapper.css({"transform" : 'translateX(' + -536 * img_idx + 'px)'}); swiper_wrapper.css({"transform" : 'translateX(' + -536 * img_idx + 'px)'});
dealIndex(img_idx); dealIndex(img_idx);
processReviewDetail(img_idx);
setTimeout(function () { setTimeout(function () {
lock = true; lock = true;
}, 500); }, 500);
}); });
function getReviewInfo(reviewId) function processReviewDetail(img_idx)
{ {
var shouldReviewId;
$(".image-thumbs-list-item").each(function (index, ele) {
if ($(ele).data('img-index') == img_idx) {
shouldReviewId = $(ele).data('review-id');
}
});
let curReviewId = $('#modal-current-review-id').val();
if (shouldReviewId != curReviewId) {
let review = findReviewById(shouldReviewId);
processReview(review);
}
}
function findReviewById(reviewId)
{
let review = '';
for(let i = 0; i < reviewList.length; i++) {
if (reviewList[i].review_id == reviewId) {
review = reviewList[i];
break;
}
}
return review;
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment