huahuibao/app/frontend/views/mobile/goodsDetail.php

<?php
use common\components\stringUtil;
?>
<link href="/css/mobile/hdx.min.css?version=<?= $this->context->version ?>" rel="stylesheet" type="text/css">
<style>
.goodsDetail img{
	width:100%;
}

#event_content img {
    max-width: 100% !important;
    height: auto !important;
}

.navbar-fixed-bottom {
    border-top: 1px solid #bcbcbc;
    box-sizing: border-box;
    height: 50px;
    z-index:90;
}

.navbar-bottom-small {
    background: #fff;
}

.navbar-bottom-small a.btn {
    padding-top: 5px;
    height: 50px;
    color: #999999
}

.navbar-bottom-small a.btn span {
    margin-right: 0px;
}

#reg_event_btn_enabled {
    height: 50px;
    line-height: 50px;
    padding: 0;
}

.open-app-img {
    width: 20px;
}

.navbar-bottom-small:nth-of-type(1) {
    border-right: 1px solid #bcbcbc;
}

@media all and (max-width:400px) {
    .modal.pay-complete.in .modal-dialog {
        width: 100% !important;
    }
}

@media all and (max-width:320px) {
    .modal.pay-complete.in .go-ticket {
        padding-top: 220px !important;
    }
}

@media all and (min-width:350px) and (max-width:400px) {
    .modal.pay-complete.in .modal-dialog {
        width: 350px !important;
    }
}

@media all and (min-width:401px) and (max-width:450px) {
    .modal.pay-complete.in .modal-dialog {
        width: 85% !important;
    }
}
.activeContent {
    position: relative;
    margin-top: 15px;
    z-index:1;
}
.activeContent img{
    width:100%;
}

.good-select{
    background:#7bb0b8;
    color: #ffffff;
    border:none;
}

.price-area {
    display:block;
    border:1px red;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
    margin-top:12px;
    font-size:12px;
}

.lay-foot .talk{
    display:inline-block;
    float:left;
    width:20%;
    border-right:1px solid #bcbcbc;
}

.lay-foot .talk p{
    margin-top:-25px;
    font-size:11px;
    color:#333;
}

.lay-foot .shop-card p{
    margin-top:-24px;
    font-size:11px;
    color:#333;
}

.lay-foot .shop-card{
    display:inline-block;
    float:left;
    width:20%;
}

.lay-foot .talk-img{
    height: 20px;
    width: 20px;
}

.lay-foot .shop-img{
    height: 20px;
    width: 20px;
}

.lay-foot .add-to-card{
    float:left;
    border-right:1px solid white;
    font-size:14px;
    width:30%;
}

.lay-foot .buy-btn{
    float:left;
    font-size:14px;
    width:30%;
}

</style>
<script type="text/javascript" src="/js/idangerous.swiper.min.js?version=<?= $this->context->version ?>"></script>

<div name="activeBeCenterMask" class="xhMask" ></div>
<div name="shareMask" style="position:fixed;left:0;top:0;width:100%;height:100%;z-index:990;background-color:gray;filter:alpha(opacity=10);opacity:0.8;display:none;">
    <img style="float:right;width:60%;" src="/images/goods/share.png" />
</div>
<div class="lay-body lay-body2" id="J_MainBody" style="padding-top:45px;">
    <div class="list">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <?php
                    $shopImg = json_decode($goods['shopImg'],true);
                    foreach($shopImg as $imgVal){
                ?>
                <div class="swiper-slide swiper-slide-visible swiper-slide-active"><img name="slideImg" src="<?= Yii::$app->params['imgUrl'].$imgVal ?>"></div>
                <?php } ?>
            </div>
            <div class="pagination" style="margin-left: -13px;"><span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span></div>
        </div>
        <div class="detail-head">
            <h2><?= $goods['goodsName'] ?></h2>
        </div>
        <div class="detail-price clearfix">
            <p class="fl" id="itemPriceFl">￥<?= $goods['price'] ?></p><span style="float:right;font-size:12px;color:#888">销量 <?= stringUtil::calcAdd($goods['sold'], $goods['actualSold']) ?></span>
        </div>
        <div class="m-detail-info">
            <div class="info-til J_DetailToggle">
                <h3>简短介绍 <span>DETAILS</span></h3>
    			   	<i class="minus-sign"></i>
            </div>
    		<div class="info-container J_Node goodsDetail">
    			<?= $goods['content'] ?>
            </div>
        </div>

        <div class="m-detail-info">
            <div class="info-til J_DetailToggle">
                <h3>简要说明 <span>OUTLINE</span></h3>
    			<i class="minus-sign"></i>
            </div>
    		<div class="info-container J_Node goodsDetail">
    			<?= $goods['goodSIntroduce'] ?>
            </div>
        </div>

    	<div class="m-detail-info">
            <div class="info-til">
                <h3>分享给朋友 <span>ShARE</span></h3>
                <!-- <i class="icon-minus-sign"></i> -->
            </div>
            <div class="info-share">
                <div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1439564077661">
                	<a title="分享到微信" href="javascript:void(0)" name="weixinShare" class="bds_weixin" data-cmd="weixin"><img src="/images/wxsharelogo.png" width="28" /></a>
                </div>
            </div>
        </div>
    </div>

    <footer class="lay-foot J_MenuBody">
        <!-- 商品数据表单 -->
        <form action="/mobile/goods-order?account=<?= $_GET['account'] ?>" id="goodsOrder" method="POST">
    		<input type="hidden" name="_csrf" value="=<?= Yii::$app->request->csrfToken ?>" />
    		<input type="hidden" name="sourceType" value="0" />
            <input type="hidden" name="goodsInfo[0][goodsId]" value="<?= $goods['id']?>" />
            <input type="hidden" name="goodsInfo[0][check]" value="<?= $goods['id'] ?>" />
            <input type="hidden" id="goodsNum" name="goodsInfo[0][num]" value="1" />

            <!-- 多价格表单项 -->
            <input type="hidden" name="multiPriceGoodId" value="<?= $goods['id']?>"/>
            <input type="hidden" name="isMultiPrice" value="0" />
            <input type="hidden" name="goodsInfo[0][multiPriceId]" class="multi-price-id"/>
            <!-- 多价格表单项结束 -->


        <?php if($this->context->isLogin){ ?>
            <?php if($goods['multiPrice'] == ''){ ?>
            <a href="/chat/index?account=<?=$merchant['id']?>&goodsId=<?=$goods['id']?>" class="talk"><div style="margin-top:-13px;"><img class="talk-img" src="/images/chatIcon.png"><p>客服</p></div></a>
            <a href="/cart/index?account=<?=$merchant['id']?>" class="shop-card"><div style="margin-top:-14px;"><img class="shop-img" src="/images/shopIcon.png"><p>购物车</p></div></a>
            <button type="button" class="foot-btn add-to-card" onclick="showMultiPrice('addToCart')" data-id="<?= $goods['id'] ?>">+购物车</button>
            <button type="button" class="foot-btn buy-btn" onclick="showMultiPrice('buy')">&nbsp;购&nbsp;买&nbsp;&nbsp;</button>
            <?php }else{ ?>
            <a href="/chat/index?account=<?=$merchant['id']?>&goodsId=<?=$goods['id']?>" class="talk"><div style="margin-top:-13px;"><img class="talk-img" src="/images/chatIcon.png"><p>客服</p></div></a>
            <a href="/cart/index?account=<?=$merchant['id']?>" class="shop-card"><div style="margin-top:-14px;"><img src="/images/shopIcon.png"><p>购物车</p></div></a>
            <button type="button" class="foot-btn add-to-card" onclick="showMultiPrice('addToCart')" data-id="<?= $goods['id'] ?>">+购物车</button>
            <button type="button" class="foot-btn buy-btn" onclick="showMultiPrice('buy')">&nbsp;购&nbsp;买&nbsp;&nbsp;</button>
            <?php } ?>
        <?php }else{ ?>
            <a href="/chat/index?account=<?=$merchant['id']?>&goodsId=<?=$goods['id']?>" class="talk"><div style="margin-top:-13px;"><img class="talk-img" src="/images/chatIcon.png"><p>客服</p></div></a>
            <a href="/cart/index?account=<?=$merchant['id']?>" class="shop-card"><div style="margin-top:-14px;"><img class="shop-img" src="/images/shopIcon.png"><p>购物车</p></div></a>
            <button type="button" class="foot-btn add-to-card" onclick="goToLogin('<?= $_SERVER['REQUEST_URI'].'&wantLogin=yes' ?>');">加入购物车</button>
            <button type="button" class="foot-btn buy-btn" onclick="goToLogin('<?= $_SERVER['REQUEST_URI'].'&wantLogin=yes' ?>');">&nbsp;购&nbsp;买&nbsp;&nbsp;</button>
        <?php } ?>
        </form>
    </footer>

    <div class="modal fade ticket-modal ticket-modal-bottom in" id="price-modal" data-scroll="true" aria-hidden="false" style="display:none; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);-webkit-overflow-scrolling: touch; z-index:9999;">
        <div class="modal-dialog">
            <div class="modal-content" style="position: relative; overflow:auto;-webkit-overflow-scrolling: touch; overflow-x: hidden;">
                <h4 class="modal-header" style="font-size:14px;">
                     商品选择
                    <div class="close" name="activeClose" data-dismiss="modal"><span class="icon-close-bubble"></span></div>
                </h4>
                <div class="media">
                    <img class="pull-left" src="<?= Yii::$app->params['imgUrl'].$shopImg[0] ?>" alt="">
                    <div class="media-body">
                        <h3><?= $goods['goodsName'] ?></h3>
                        <div>￥<span id="current-good-price"><?= $goods['actualSold'] ?></span></div>
                    </div>
                </div>
                <div class="modal-body" style="overflow:auto; overflow-x:-webkit-overflow-scrolling: touch; hidden;margin-bottom: 40px;max-height:300px;">
                    <div>
                        <?php
                            if(!empty($goods['multiPrice'])){
                        ?>
                        <div class="popover-box" id="event_tickets_area" style="overflow:auto; overflow-x:-webkit-overflow-scrolling: touch;font-size:12px;">
                        选项：
                            <ul name="event_tickets_thumbs" class="price-choise-btn">
                                <?php
                                    foreach($goods['goodsPriceArr'] as $key => $item){
                                ?>
                                <div style="display:block;padding-top:12px;">
                                    <button class="btn btn-default btn-xs" style="font-size:11px;" data-id="<?=$item['id']?>" data-price="<?=$item['price']?>" data-price="<?=$item['price']?>" data-img-url="<?=$item['picture']?>" ><?=$item['title']?></button>
                                </div>
                                <?php
                                    }
                                ?>
                            </ul>
                        </div>
                        <?php
                            }
                        ?>
                        <div class="price-area">
                            购买数量
                            <button class="btn btn-default" style="height:25px;padding:0 5px;" onclick="changeNumber('reduce')">&nbsp;-&nbsp;</button><input type="text" value="1" style="text-align:center;margin:0 12px;margin-top:8px;color:#4B797E;width:15%;height:25px;border-color:#e5e5e5;" id="buy-count"/><button class="btn btn-default" style="height:25px;padding:0 5px;" onclick="changeNumber('increase')">&nbsp;+&nbsp;</button>
                        </div>

                    </div>
                </div>
            </div>

            <footer class="lay-foot J_MenuBody">
                <div class="clearfix" id="confirm-btn">
                    <button class="btn-block foot-btn" style="font-size: 14px;"></button>
                </div>
            </footer>
        </div>
    </div>
</div>
        

</div>

<script type="text/javascript">

	//微信分享到朋友圈
	$("a[name=weixinShare]").click(function(){
		$("div[name=shareMask]").css("display","block");
	});
	$("div[name=shareMask]").click(function(){
		$(this).css("display","none");
	});

    /*banner轮播*/
    var mySwiper = new Swiper('.swiper-container',{
        pagination: '.pagination',
        loop:true,
        autoplay: 2000,//可选选项，自动滑动
        speed: 2000,
        grabCursor: true,
        paginationClickable: true
    });
    $('.pagination').eq(0).css({marginLeft:-$('.pagination').width()/2+'px'});
    $('.swiper-container').on('swipeLeft', function(e){ e.stopPropagation(); });
    $('.swiper-container').on('swipeRight', function(e){ e.stopPropagation(); });

    //幻灯片图片外框自适应图片大小
    $(window).load(function() {
        var thisSwiperHeight = $("img[name=slideImg]").eq(0).css('height');
        $('.swiper-container').css('height',thisSwiperHeight);
        $('.banner-container').css('height',thisSwiperHeight);
    });

    $('.swiper-container img').each(function(){
        var src = $(this).attr('src');
        $(this).on('tap',function(e){
            e.preventDefault();
            var img = new Image();
            img.src = src, img.className = 'pro-detail-pic J_Pic';
            $('body').append(img);
            $('.J_Mask').show().css({opacity:0.5, height:$('.lay-wrap').height()+'px'});
            $('.J_Pic').on('tap', function(){
                $('.J_Mask').hide();
                $(this).remove();
            });
        });
    });

    //添加到购物车
    $(function(){
    	$("button[name=addToCart]").click(function(){
    		var num = $("#goodsNum").val();
    		num = parseInt(num) > 0 ? parseInt(num) : 1;
    		var goodsId = $(this).attr('data-id');
    		var data = "num="+num+"&goodsId="+goodsId+"&_csrf=<?= Yii::$app->request->csrfToken ?>";
    		$.ajax({
                type:"POST",
                url:'/cart/add?account=<?= $_GET['account'] ?>',
                data:data,
                dataType:'json',
                async:false,
                success:function(data){
    				if(data.code == 'A0001'){
    					xhPopMsg(data.msg);
    				}
    			}
    		});
    	});
    });

    <?php if($this->context->isWeixin){ ?>
   	//微信分享
	var shareTitle = '<?= $goods['goodsName'] ?>';
	var descContent = '<?= $goods['material'] ?>';
	var lineLink = '<?= Yii::$app->request->hostInfo ?>/mobile/goods-detail?id=<?= $goods['id'] ?>&account=<?= $_GET['account'] ?>&weixinShare=yes';
	var imgUrl = '<?= Yii::$app->params['imgUrl'].$goods['cover'] ?>';

	wx.config({
        debug:false,
  	    appId: '<?= $this->context->signPackage['appId'] ?>',
  	    timestamp: <?= $this->context->signPackage['timestamp'] ?>,
  	    nonceStr: '<?= $this->context->signPackage['nonceStr'] ?>',
  	    signature: '<?= $this->context->signPackage['signature'] ?>',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
        ]
    });
    wx.ready(function () {
    	var shareData = {
    		  title: shareTitle,
  		      link: lineLink,
  		      imgUrl: imgUrl,
  		      desc:descContent,
        };
    	wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline({
       	  	  title: shareTitle,
	          link: lineLink,
	          imgUrl: imgUrl,
	          desc:descContent,
	          success: function () { 
				//分享成功后的操作
	          },
			cancel: function () { 
				// 用户取消分享后执行的回调函数
			}
        });
        wx.onMenuShareQQ({
       	  	  title: shareTitle,
	          link: lineLink,
	          imgUrl: imgUrl,
	          desc:descContent,
	          success: function () { 
				//分享成功后的操作
	          },
			cancel: function () { 
				// 用户取消分享后执行的回调函数
			}
        });
        wx.onMenuShareWeibo(shareData);
    });
	<?php } ?>

	/*幻灯片/触摸屏向下滑动隐藏/向上滑动显示*/
    (function(){
        var startX, startY, endX, endY, mainbody = $('#J_MainBody').get(0);
        mainbody.addEventListener('touchstart',function(event){
            startX = event.changedTouches[0].pageX;
            startY = event.changedTouches[0].pageY;
        });
        mainbody.addEventListener('touchend', function(event){
            endX = event.changedTouches[0].pageX;
            endY = event.changedTouches[0].pageY;
            if( (startY-endY) > 50 ){
                $('#J_SubHead').css({top:0});
            }else if( (startY-endY) < -50 ){
                $('#J_SubHead').css({top:'45px'});
            }
        });
    })();

//=========================     多价格选项 浮层     ================================
    var multiPrice = "<?= $goods['multiPrice'] ?>";
    var activeBeCenterMask  = $("div[name=activeBeCenterMask]"); 
    function showMultiPrice(action){
        var price = "<?= $goods['price'] ?>";
        var priceArr = price.split("-");
        var count = priceArr.length;
        if(action == 'buy'){
            $("#confirm-btn").find('.foot-btn').html('确定购买');
            $('#current-good-price').html(priceArr[0]);
            $('#buy-count').val(1);
            if(count == 2){
                $('#goodsOrder input[name=isMultiPrice]').val(1);
            }else{
                $('#goodsOrder .multi-price-id').remove();
            }
        }else if(action == 'addToCart'){
            $("#confirm-btn").find('.foot-btn').html('加入购物车');
            $('#current-good-price').html(priceArr[0]);
            $('#buy-count').val(1);
            if(count == 2){
                $('#goodsOrder input[name=isMultiPrice]').val(1);
            }else{
                $('#goodsOrder .multi-price-id').remove();
            }
        }
        $("#price-modal").css('display','block');
        activeBeCenterMask.css('display','block');
        $('html').addClass('noscroll');//有浮层不允许底部滚动
    }

    //价格上下调动
    function changeNumber(action){
        var num = parseInt($("#buy-count").val());
        if(action == 'reduce'){
            num -= 1;
            if(num < 1){
                //alert('退出操作');
                return;
            }
            $("#buy-count").val(num);
            $("#goodsNum").val(num);//表单Id（goodsOrder）里的商品数量
        }else if(action == 'increase'){
            num += 1;
            $("#buy-count").val(num);
            $("#goodsNum").val(num);//表单Id（goodsOrder）里的商品数量
        }
    }

    $("div[name=activeClose]").click(function(){
        $("#price-modal").css('display','none');
        activeBeCenterMask.css('display','none');
        $('#goodsOrder input[name=isMultiPrice]').val(0);
        $('html').removeClass('noscroll');//允许底部滚动
    });

    //价格选项
    $("#price-modal .price-choise-btn .btn").on('click', function(){
        var id = $(this).attr('data-id');
        var price = $(this).attr('data-price');
        var imgUrl = $(this).attr('data-img-url');
        var preImgUrl = "<?= Yii::$app->params['imgUrl']; ?>";

        $(this).addClass('btn-turquoise good-select');
        $(this).parent().siblings().find('.btn').removeClass('btn-turquoise good-select');
        $('#current-good-price').html(price);
        $('#goodsOrder input[name=isMultiPrice]').val(1);
        $('#goodsOrder .multi-price-id').val(id);
        if(imgUrl != ''){
            $('img.pull-left').attr('src', preImgUrl+imgUrl);
        }
    });

    $("#confirm-btn .foot-btn").on('click', function(){
        var content = $(this).html();
        var multiPriceId = $('#goodsOrder .multi-price-id').val();
        if((multiPriceId == '' || isNaN(multiPriceId)) && multiPrice != ''){
            xhPopMsg('请选择其中一选项');
            return;
        }

        if(content == '确定购买'){//多价格的商品 确定购买
            $('#goodsOrder').submit();
        }else if(content == '加入购物车'){//多价格的商品 添加到购物车
            var num = $("#buy-count").val();
            num = parseInt(num) > 0 ? parseInt(num) : 1;
            var goodsId = $('#goodsOrder input[name=multiPriceGoodId]').val();

            var data = "num="+num+"&goodsId="+goodsId+"&_csrf=<?= Yii::$app->request->csrfToken ?>";
            if(multiPrice != ''){
                data += "&multiPriceId="+multiPriceId+"&isMultiPrice=1";
            }

            $.ajax({
                type:"POST",
                url:'/cart/add?account=<?= $_GET['account'] ?>',
                data:data,
                dataType:'json',
                async:false,
                success:function(data){
                    if(data.code == 'A0001'){
                        $("#price-modal").css('display','none');
                        activeBeCenterMask.css('display','none');
                        xhPopMsg(data.msg);
                    }
                }
            });
        }
    })
</script>