移动端评论相册

app/code/Joshine/Review/view/frontend/templates/product/view/list.phtml

@@ -291,7 +291,7 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
     .j-modal .j-modal-dialog {
         position: relative;
         width: 530px;
-        margin: 30px auto;
+        margin: 7rem auto;
     }
 
     .j-modal .j-modal-content {
@@ -472,6 +472,137 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
         overflow: hidden;
         border: 1px solid #efefef;
     }
+
+    .joshine-mobile-image-box {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        z-index: 1000;
+        background: rgba(0,0,0);
+    }
+
+    .joshine-mobile-image-box .scroll-wrapper {
+        transition-duration: 0ms;
+        transform: translate3d(0px, 0px, 0px);
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        display: -webkit-box;
+        display: flex;
+        -webkit-transition-property: -webkit-transform;
+        transition-property: transform,-webkit-transform;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+    }
+    .joshine-mobile-image-box .scroll-wrapper .scroll-wrapper-item {
+        flex-shrink: 0;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        -webkit-transition-property: -webkit-transform;
+        transition-property: -webkit-transform;
+        transition-property: transform;
+        transition-property: transform,-webkit-transform;
+        display: -webkit-box;
+        display: flex;
+        display: -ms-flexbox;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+    }
+    .joshine-mobile-image-box .scroll-wrapper-item img {
+        width: 100%;
+        max-height: 100%;
+    }
+    .joshine-mobile-image-box-bottom {
+        padding: .7em;
+        position: absolute;
+        height: 9rem;
+        left: 0;
+        color: #fff;
+        bottom: 0;
+        width: 100%;
+        overflow: hidden;
+        z-index: 1;
+        font-size: 1rem;
+        line-height: 1.2rem;
+        background: -webkit-gradient(linear,left top,left bottom,from(#0000003b),to(rgba(0,0,0,.1)));
+        background: linear-gradient(180deg,#0000003b,rgb(0 0 .1));
+    }
+    .joshine-mobile-image-wrapper {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+    }
+    .joshine-mobile-image-box-container {
+        margin-left: auto;
+        margin-right: auto;
+        position: relative;
+        overflow: hidden;
+        list-style: none;
+        padding: 0;
+        z-index: 1;
+        height: 100%;
+    }
+    .joshine-mobile-image-box-content {
+        color: #fff;
+        height: 100%;
+        overflow: auto;
+        margin-bottom: 0.32rem;
+    }
+    .image-box-content-title {
+        margin-bottom: .3rem;
+        line-height: .8rem;
+        color: hsla(0,0%,100%,.8);
+    }
+
+    .joshine-mobile-image-box .close {
+        color: white;
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+        color: #000;
+        -webkit-text-stroke: 0.02rem #fff;
+        font-weight: 400;
+    }
+
+    .joshine-mobile-image-box .close svg {
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+
+    .joshine-review-pic-item {
+        cursor:pointer;
+    }
+
+    .review-box-size {
+        font-size: .7rem;
+    }
+    .review-box-content {
+        font-size: .9rem;
+    }
+    .review-box-title {
+        font-size: .8rem;
+    }
 </style>
 
 <div class="joshine-model-warp joshine-hidden">
@@ -480,7 +611,9 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
         <div class="j-modal-dialog">
             <div class="j-modal-content">
                 <div class="j-modal-header">
-                    <span class="joshine-close">x</span>
+                    <span class="joshine-close">
+                        <svg t="1678760827915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2762" width="200" height="200"><path d="M579.888 512l190.064-190.064a48 48 0 0 0-67.888-67.872L512 444.112 321.936 254.064a48 48 0 1 0-67.872 67.872L444.112 512 254.064 702.064a48 48 0 1 0 67.872 67.872L512 579.888l190.064 190.064a48 48 0 0 0 67.872-67.888L579.888 512z" fill="#dbdbdb" p-id="2763" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path></svg>
+                    </span>
                 </div>
                 <div class="j-modal-body">
                     <div class="modal-reviews-details row">
@@ -531,6 +664,31 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
     </div>
 </div>
 
+<div class="joshine-mobile-image-box joshine-hidden">
+    <div class="joshine-mobile-image-box-container">
+        <div class="joshine-mobile-image-wrapper">
+            <div class="scroll-wrapper">
+            </div>
+        </div>
+
+        <div class="joshine-mobile-image-box-bottom">
+            <div class="joshine-mobile-image-box-content">
+                <div class="image-box-content-title">
+                    <input type="hidden" id="review-box-id">
+                    <p class="review-box-title"></p>
+                    <span class="review-box-size"></span>
+                </div>
+                <span class="review-box-content"></span>
+            </div>
+        </div>
+        <div class="joshine-mobile-image-box-top">
+        </div>
+        <div class="close">
+            <svg t="1678760827915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2762" width="200" height="200"><path d="M579.888 512l190.064-190.064a48 48 0 0 0-67.888-67.872L512 444.112 321.936 254.064a48 48 0 1 0-67.872 67.872L444.112 512 254.064 702.064a48 48 0 1 0 67.872 67.872L512 579.888l190.064 190.064a48 48 0 0 0 67.872-67.888L579.888 512z" fill="#dbdbdb" p-id="2763" data-spm-anchor-id="a313x.7781069.0.i3" class="selected"></path></svg>
+        </div>
+    </div>
+</div>
+
 <script type="text/javascript">
     require([
         'jquery','ko'
@@ -689,7 +847,6 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
                 $('.image-full-wrapper').html(html);
             }
 
-
         });
 
         $(".joshine-close").on('click', function () {
@@ -784,5 +941,213 @@ $imagesBlock = $helper->getReviewImagesBlock(15, $block->getProductId());
             return review;
         }
 
+        var $galleryElement = document.querySelector(".joshine-mobile-image-wrapper .scroll-wrapper");
+        let distanceScrollOne = $(window).width();
+        //照片切换阈值
+        let threshold = {
+            time: 400,
+            distance:  parseInt(distanceScrollOne / 2)
+        };
+        let start = {};
+        let scrollIdx    = 0;
+        let maxScrollIdx = 1;
+        let current  = getTranslateXY($galleryElement);
+        $galleryElement.addEventListener('pointerdown', galleryStartHandler, false);
+        // 阻止移动端默认行为
+        $galleryElement.addEventListener(
+            'touchstart',
+            evt => {
+                evt.preventDefault();
+            },
+            false
+        );
+
+        $(".joshine-review-container-mobile .joshine-review-pic-item").on('click', function(evt){
+            var reviewId  = $(this).data('reviews-id');
+            var productId = $(this).data('product-id');
+            var image_id  = $(this).data('image-id');
+            var formKey   = $.mage.cookies.get('form_key');
+            var data      = 'review_id='+ reviewId +'&form_key=' + formKey + '&product_id=' + productId;
+            $.ajax({
+                url: '/joshine_review/ajax/reviewinfo',
+                data: data,
+                type: 'GET',
+                dataType: 'json',
+                success: function (response) {
+                    reviewList = response.data;
+                    displayScrollItem(response);
+                    $(".joshine-mobile-image-box").removeClass('joshine-hidden');
+                }
+            });
+
+            function displayScrollItem(response) {
+                var html = '';
+                var image_index = 0;
+                var data = response.data;
+                for (let i = 0; i < data.length; i++) {
+                    for (let j = 0; j < data[i].images.full.length; j++) {
+                        html += `
+                            <div class="scroll-wrapper-item" data-review-id="${data[i].review_id}" data-img-index="${image_index}" data-image-id="${data[i].images.full[j].image_id}">
+                                <img src="${data[i].images.full[j].url}" alt="">
+                            </div>
+                        `;
+                        image_index++;
+                    }
+                }
+                maxScrollIdx = image_index - 1;
+                $(".joshine-mobile-image-wrapper .scroll-wrapper").html(html);
+                let idx = findGoScrollIdx(image_id);
+                goScrollMove(idx);
+            }
+
+            function findGoScrollIdx(image_id) {
+                let res = 0;
+                $(".scroll-wrapper-item").each(function (index, ele) {
+                    if ($(ele).data('image-id') == image_id) {
+                        res = $(ele).data('img-index');
+                    }
+                });
+                return res;
+            }
+        });
+
+        $(".joshine-mobile-image-box .close").on('click', function(evt){
+            $(".joshine-mobile-image-box").addClass('joshine-hidden');
+        });
+
+        function galleryStartHandler(evt) {
+            evt.preventDefault();
+
+            start.time = new Date().getTime();
+            start.x = evt.pageX;
+
+            document.addEventListener('pointermove',   galleryChangeHandler, false);
+            document.addEventListener('pointerup',     galleryEndHandler, false);
+            document.addEventListener('pointercancel', galleryEndHandler, false);
+        }
+
+        function galleryChangeHandler(evt) {
+            evt.preventDefault();
+            $galleryElement.style.transition = 'transform 0s ease 0s';
+            let deltaAbs  = Math.abs(getScrollDelta(evt).x);
+            let direct    = getScrollDirection(getScrollDelta(evt));
+            if (direct == "left") {
+                var deltaX =  current.translateX - deltaAbs;
+            } else {
+                var deltaX =  current.translateX - 0 + deltaAbs;
+            }
+            $galleryElement.style.transform = `translate3d(${deltaX}px, 0px, 0px)`;
+        }
+
+        function galleryEndHandler(evt) {
+            evt.preventDefault();
+            let delta = getScrollDelta(evt);
+            //达到划过阈值
+            if (shouldScroll(delta)) {
+                goScroll(delta);
+                return;
+            }
+            rollBackScroll(delta);
+        }
+
+        function shouldScroll(delta)
+        {
+            let direction = getScrollDirection(delta);
+            if (direction == 'left' && scrollIdx == maxScrollIdx) {
+                return false;
+            }
+            if (direction == 'right' && scrollIdx == 0) {
+                return false;
+            }
+            //1.如果过半，直接滑过
+            if (Math.abs(delta.x) > threshold.distance) {
+                return true;
+            }
+            //2.未过半，500ms内滑过1/4，也滑过
+            if (delta.time < threshold.time && Math.abs(delta.x) > parseInt(threshold.distance / 4)) {
+                return true;
+            }
+            return false;
+        }
+
+        //获取滑动方向
+        function getScrollDirection(delta)
+        {
+            if (delta.x > 0) {
+                return 'right';
+            }
+            return 'left';
+        }
+
+        function getScrollDelta(evt)
+        {
+            let delta = {};
+            delta.time = new Date().getTime() - start.time;
+            delta.x = evt.pageX - start.x;
+            return delta;
+        }
+
+        function rollBackScroll(delta)
+        {
+            let $scroll = document.querySelector(".scroll-wrapper");
+            let distance = distanceScrollOne * scrollIdx;
+            $scroll.style.transition = 'transform .2s ease 0s';
+            $scroll.style.transform  = `translate3d(-${distance}px, 0px, 0px)`;
+        }
+
+        function goScroll(delta)
+        {
+            let $scroll = document.querySelector(".scroll-wrapper");
+            $scroll.style.transition = 'transform .5s ease 0s';
+            let direction = getScrollDirection(delta);
+            //右话滑向后
+            if (direction == 'left') {
+                scrollIdx++;
+            } else {
+                scrollIdx--;
+            }
+            let distance = distanceScrollOne * scrollIdx;
+            $scroll.style.transform  = `translate3d(-${distance}px, 0px, 0px)`;
+            current.translateX = -distance;
+            dealReviewContent(scrollIdx);
+        }
+
+        function goScrollMove(idx)
+        {
+            scrollIdx = idx;
+            let distance = distanceScrollOne * scrollIdx;
+            $galleryElement.style.transform  = `translate3d(-${distance}px, 0px, 0px)`;
+            current.translateX = -distance;
+            dealReviewContent(scrollIdx);
+        }
+
+        function getTranslateXY(element) {
+            const style = window.getComputedStyle(element)
+            const matrix = new DOMMatrixReadOnly(style.transform)
+            return {
+                translateX: matrix.m41,
+                translateY: matrix.m42
+            }
+        }
+
+        function dealReviewContent(idx)
+        {
+            var shouldReviewId;
+            $(".scroll-wrapper-item").each(function (index, ele) {
+                if ($(ele).data('img-index') == idx) {
+                    shouldReviewId = $(ele).data('review-id');
+                }
+            });
+            let curReviewId = $('#modal-current-review-id').data("review-id");
+
+            if (shouldReviewId != curReviewId) {
+                let review = findReviewById(shouldReviewId);
+                $(".review-box-title").html(review.title);
+                let fits_text = fitsTranslate(review.size_fits);
+                $(".review-box-size").html("Size Fits:"+ fits_text);
+                $(".review-box-content").html(review.detail);
+                $("#review-box-id").val(review.review_id);
+            }
+        }
     });
 </script>
\ No newline at end of file