Skip to content

J
joshine
Commit 49d6abd9 by halweg
Options

feat : 留言相册

parent 39829c19
Showing with 347 additions and 22 deletions
app/code/Joshine/Review/Helper/BlockHelper.php
......@@ -72,4 +72,14 @@ class BlockHelper implements \Magento\Framework\Data\CollectionDataSourceInterfa
->createBlock(ToolBar::class)
->toHtml();
}
public function getReviewImagesBlock($reviewId, $productId) : Images
{
return $this->blockFactory
->createBlock(Images::class)
->setProductId($productId)
->setReviewId($reviewId);
}
}
app/code/Joshine/Review/view/frontend/templates/images.phtml
......@@ -2,10 +2,9 @@
/** @var \Joshine\Review\Block\Images $block */
$collection = $block->getCollection();
?>
<?php if ($collection->getSize()): ?>
<?php foreach ($collection as $item): ?>
<div class="joshine-review-pic-item joshine-col-xs-4" data-amreview-js="slider-item" data-img-src="<?= $block->getFullImagePath($item) ?>"
<div class="joshine-review-pic-item joshine-col-xs-4" data-img-src="<?= $block->getFullImagePath($item) ?>"
data-product-id="<?= $block->getProductId() ?>"
data-reviews-id="<?= $block->getReviewId() ?>">
<img class="review-image rounded" src="<?= $block->getResizedImagePath($item) ?>"/>
......@@ -14,3 +13,4 @@ $collection = $block->getCollection();
<?php endif;?>
app/code/Joshine/Review/view/frontend/templates/modal.phtml
<style>
.joshine-model-warp .joshine-mask {
z-index: 1000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
</style>
<div class="joshine-model-warp joshine-hidden">
Place Your Contents Here
<div class="joshine-mask"></div>
</div>
app/code/Joshine/Review/view/frontend/templates/product/view/list.phtml
......@@ -19,6 +19,10 @@ $count = $block->getReviewsCount();
$t = [ 1 => __('Small') , 2 => __('True to Size') ,3 => __('Large')];
$imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
?>
<style>
......@@ -248,12 +252,300 @@ $t = [ 1 => __('Small') , 2 => __('True to Size') ,3 => __('Large')];
<?= $block->getPagerHtml() ?>
<?php endif; ?>
</div>
</div>
</div>
<style>
.joshine-model-warp {
z-index: 1000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.joshine-model-warp .joshine-mask {
z-index: 1000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.joshine-model-warp .j-modal {
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.j-modal .j-modal-dialog {
position: relative;
width: 530px;
margin: 30px auto;
}
.j-modal .j-modal-content {
position: relative;
padding: 40px 50px 30px;
background: #fff;
background-clip: padding-box;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.j-modal .j-modal-header {
text-align: center;
max-height: 60em;
overflow-y: auto;
}
.joshine-model-warp .j-modal .j-modal-dialog {
width: 1050px;
}
.joshine-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 14px;
cursor: pointer;
}
.j-modal .j-modal-body {
position: relative;
line-height: 1.2;
}
.joshine-review-des-head {
display: flex;
align-items: center;
justify-content:space-between;
}
.modal-reviews-details__des-wrap {
margin-left: 24px;
}
.modal-reviews-details__des-wrap div {
margin-bottom: 24px;
}
.modal-reviews-details__image-wrap .modal-reviews-details__image-swiper {
padding: 10px;
height: 779px;
}
.modal-reviews-details__image-thumbs {
margin-top: 14px;
}
.image-thumbs-list {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-item {
position: relative;
margin-right: 1px;
}
.swiper-item img {
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
display: block;
position: absolute;
top: 50%;
max-width: 100%;
max-height: 100%;
}
.image-thumbs-list-item {
margin-right: 4px;
height: 50px;
width: 45px;
overflow: hidden;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
position: relative;
cursor: pointer;
}
.image-thumbs-list-item.active {
border: 1px solid #000;
}
.image-thumbs-list-item .modal-reviews-details__image-thumbs-image img {
width: 100%;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.swiper-wrapper {
display: flex;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
transform: translate3d(0,0,0);
}
.swiper-wrapper .swiper-item {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
height: 100%;
width: 100%;
}
.modal-reviews-details__image-swiper .swiper-button-prev {
height: 100%;
width: 50%;
position: absolute;
top: 0;
margin-top: 0;
left: 0;
right: auto;
z-index: 12;
cursor: url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-pre.ico), auto;
}
.modal-reviews-details__image-swiper .swiper-button-next {
height: 100%;
width: 50%;
position: absolute;
top: 0;
margin-top: 0;
right: 0;
left: auto;
z-index: 12;
cursor: url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-next.ico), auto;
}
</style>
<div class="joshine-model-warp joshine-hidden">
<div class="joshine-mask"></div>
<div class="j-modal">
<div class="j-modal-dialog">
<div class="j-modal-content">
<div class="j-modal-header">
<span class="joshine-close">x</span>
</div>
<div class="j-modal-body">
<div class="modal-reviews-details row">
<div class="modal-reviews-details__image-wrap joshine-col-xs-7 joshine-text-center">
<div class="modal-reviews-details__image-swiper joshine-bg-silver">
<div class="swiper-container">
<div class="swiper-button-prev"></div>
<div class="swiper-wrapper">
<?php if ($imagesBlock->getCollection()->getSize()): ?>
<?php foreach ($imagesBlock->getCollection() as $item): ?>
<div class="swiper-item">
<img src="<?= $imagesBlock->getFullImagePath($item) ?>" alt="">
</div>
<?php endforeach; ?>
<?php endif;?>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="modal-reviews-details__image-thumbs">
<div class="image-thumbs-list">
<?php if ($imagesBlock->getCollection()->getSize()): ?>
<?php foreach ($imagesBlock->getCollection() as $item): ?>
<div class="image-thumbs-list-item">
<div class="modal-reviews-details__image-thumbs-image active">
<img src="<?= $imagesBlock->getFullImagePath($item) ?>" alt="">
</div>
</div>
<?php endforeach; ?>
<?php endif;?>
</div>
</div>
</div>
<div class="modal-reviews-details__des-wrap joshine-col-xs-4">
<div class="joshine-review-des-head">
<span class="joshine-review-nickname" style="font-size: .9em;">
halweg
</span>
<div class="joshine-rating-container joshine-rating-small" style="margin-bottom: 3px;">
<div class="joshine-rating-starts" style="width: 60%;"></div>
</div>
<span class="joshine-review-date joshine-font-c-darkgray joshine-font-mini-plus joshine-pull-right">
2020/03/04 11:11
</span>
</div>
<div class="joshine-review-des-title joshine-font-w-bolder joshine-font-text joshine-font-c-deepin">
I love this product!!!
</div>
<div class="joshine-review-des-text joshine-font-c-darkgray joshine-font-mini-plus">
This Product is good,This Product is good,This Product is good,This Product is good,
This Product is good,This Product is good,This Product is good,This Product is good,
This Product is good,This Product is good,This Product is good,This Product is good,
</div>
<div class="joshine-foot-mark rate-fit">
<div class="rate-fit-item">
<span><strong class="joshine-font-w-bolder">Size Fits:</strong> Small </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
require([
'jquery',
'jquery','ko'
], function ($) {
$(".joshine-review-add-btn").on('click',function () {
$(".block.review-add").removeClass('joshine-hidden');
......@@ -294,5 +586,36 @@ $t = [ 1 => __('Small') , 2 => __('True to Size') ,3 => __('Large')];
});
});
$(".joshine-review-pic-item").on('click', function () {
$(".joshine-model-warp").removeClass('joshine-hidden')
});
$(".joshine-close").on('click', function () {
$(".joshine-model-warp").addClass('joshine-hidden')
});
var img_idx = 0;
// 节流锁
var lock = true;
var swiper_wrapper = $('.swiper-wrapper');
$(".swiper-button-next").on('click', function () {
if (!lock) return;
lock = false;
swiper_wrapper.css({"transition" : 'transform .5s ease 0s'});
img_idx++;
swiper_wrapper.css({"transform" : 'translateX(' + -536 * img_idx + 'px)'});
// 开锁，动画结束之后开锁
setTimeout(function () {
lock = true;
}, 500);
});
$(".swiper-button-prev").on('click', function () {
});
});
</script>
\ No newline at end of file
app/code/Joshine/Review/view/frontend/web/css/_review.css
......@@ -236,4 +236,13 @@
.joshine-review-container-mobile .joshine-review-item .fit-item .joshine-process .joshine-process-active{
background-color: #222;
border-radius: 4px;
}
.modal-reviews-details__image-swiper .swiper-button-next {
cursor : url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-next.ico), auto;
}
.modal-reviews-details__image-swiper .swiper-button-prev {
cursor : url(static/frontend/Joshine/breeze/en_US/Joshine_Review/img/favicon-pre.ico), auto;
}
\ No newline at end of file
app/code/Joshine/Review/view/frontend/web/js/review/js-loader.js
......@@ -14,9 +14,6 @@ define([
handler.handlePage($(this), event);
});
/*$(document).on('click', '.joshine-review-pic-item', function (event) {
handler.handleReviewsImgClick($(this), event);
});*/
},
});
return $.mage.joshineReview
......
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