liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
							<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>产品列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<style>
		#pullrefresh_chanpin_list .mui-table-view-chevron .wh-100{padding:0;}
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object:nth-of-type(odd){padding-right: 4px;}
		.mui-pull-caption{font-size: 12px;}
		.tab-with-chanpin-list{margin-top: 0;padding-top: 5px;}
		#pullrefresh_chanpin_list{padding-top: 46px;}
		#pullrefresh_chanpin_list .mui-table-view-cell{border-bottom: 0;text-align: left;}
		#pullrefresh_chanpin_list .mui-table-view-chevron .mui-table-view-cell:last-child{border-bottom: 0;}
		#pullrefresh_chanpin_list .mui-table-view-cell:after{display: none;}

		#pullrefresh_chanpin_list .mui-grid-view{padding:0 10px 10px 0;}
		#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell>a{background: #fff;}
		#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell:nth-of-type(odd){border-right: 0;}
		#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell:nth-of-type(even){border-left: 0;}
		#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell:nth-of-type(odd):last-child{border-bottom: 0;}
		#pullrefresh_chanpin_list .mui-table-view-chevron .wh-100{padding:0;}
		#pullrefresh_chanpin_list .mui-grid-view .shop-price {padding:0;}
		#pullrefresh_chanpin_list .my-tab-view-pull:after{display: none;}
		.go_chanpin_details .mui-h6{margin-top: 5px;}
	</style>
	<script type="text/javascript">
        // 屏蔽分享
        window.hiddenAllWechatMenu = true;
	</script>
</head>
<script>
	var d = new Date().getTime(); //当前时间戳
	if (d > 1560873599000) {
		location.href = "chanpin_list.html";
	}
</script>
<body>
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>
<nav class="mui-bar mui-bar-tab" id="footer-bar">
	<a class="mui-tab-item" >
		<div class="iconfont icon-home"></div>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item">
		<div class="iconfont icon-gouwuche"><span class="mui-badge">0</span></div>
		<span class="mui-tab-label">购物车</span>
	</a>
	<a class="mui-tab-item">
		<div class="iconfont icon-dingdan"></div>
		<span class="mui-tab-label">订单</span>
	</a>
	<a class="mui-tab-item">
		<div class="iconfont icon-vip"></div>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>
<div class="mui-segmented-control tab-with-chanpin-list">
	<a class="mui-control-item mui-active">
		<span class="mui-tab-label">WaterO</span>
	</a>
	<a class="mui-control-item">
		<span class="mui-tab-label">Aiberle</span>
	</a>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh_chanpin_list" class="mui-content mui-scroll-wrapper" style="background: #fff;">
	<div class="mui-scroll">
		<!--数据列表-->
		<ul class="mui-table-view mui-grid-view my-tab-view-pull">

		</ul>
	</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
<script src="js/page/wechat-utils-1.0.js"></script>
<script src="js/page/validate.js"></script>
<script>
	mui.init({
    pullRefresh: {
        container: '#pullrefresh_chanpin_list',
        down: {},
        up: {
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        }
    }
});
var pageNumber = 0,
    pagesize = 10,
    proType = "1";

function pullupRefresh() {
    pageNumber += 1;
    $.ajax(base_path + '/product/productIndex?dates=' + new Date().getTime(), {
        data: {
            "pageSize": pagesize,
            "pageNO": pageNumber,
            "productType": proType
        },
        dataType: 'json',
        type: 'post',
        timeout: 15000,
        xhrFields: {
			withCredentials: true
		},
		crossDomain: true,
        success: function(dt) {
        	if (dt.isRedirect) {
				location.href = dt.redirectURL;
			} else {
            if(dt.status) {
                var chanpin_data = [];
                chanpin_data = dt.data.productList;
                mui('#pullrefresh_chanpin_list').pullRefresh().endPullupToRefresh(chanpin_data.length < pagesize);
                var table = document.body.querySelector('.my-tab-view-pull');
                mui(chanpin_data).each(function(index) {
                    var pro_color = this.productColor;
                    var li = document.createElement('li');
                    var yuanjia = '<s class="gwc-pp">原价：¥' + accDiv(this.productPrice, 100) + '</s>';
                    if(marquee != '' && this.productDiscount == '328000') {
                        yuanjia = '<span class="mui-h6">购买即赠3年滤芯</span>'
                    }
                    var img='';
                    img=this.colorImg;
                    if($(".box-list-card .iconfont").hasClass("icon-list")) {
                        li.className = 'mui-table-view-cell mui-media';
                        li.innerHTML = '<a proid="' + this.productId + '" colorid="'+this.colorId+'" class="go_chanpin_details"><img class="mui-media-object mui-pull-left wh-100" src="' + img + '"><div class="mui-media-body gwc-tit">' + this.productName + '</div><div class="mui-ellipsis mui-h6">' + this.productColorDes + '</div><div class="shop-price">' + marquee + '<span class="price-sp">¥' + accDiv(this.productDiscount, 100) + '</span>' + yuanjia + '</div></div></a>">';
                    } else {
                        li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
                        li.innerHTML = '<a proid="' + this.productId + '" colorid="'+this.colorId+'" class="go_chanpin_details"><img class="mui-media-object" src="' + img + '"><div class="mui-media-body gwc-tit">' + this.productName + '</div><div class="mui-ellipsis mui-h6">' + this.productColorDes + '</div><div class="shop-price">' + marquee + '<span class="price-sp">¥' + accDiv(this.productDiscount, 100) + '</span>' + yuanjia + '</div></a>';
                    }
                    table.appendChild(li)
                    mui('#pullrefresh_chanpin_list').pullRefresh().disablePullupToRefresh();
                });
                if(chanpin_data.length==0){
                    mui('#pullrefresh_chanpin_list').pullRefresh().disablePullupToRefresh();
                    var li = document.createElement('li');
                    li.className = 'mui-table-view-cell mui-media mui-col-xs-12 mui-text-center';
                    li.innerHTML='<img style="width:100px;display:block;margin:40px auto 0 auto;" src="images/null-4.png" /><h6 class="mui-text-center">暂无产品信息，逛逛别的产品吧！</h6>';
                    table.appendChild(li);
				}
            } else {
                mui('#pullrefresh_chanpin_list').pullRefresh().endPullupToRefresh(true)
            }
            }
        },
        error: function(xhr, type, errorThrown) {
            console.log(xhr)
        }
    })
};

function search_pullrefresh(str) {
    if(str != null && str != '') {
        if(!checkParameter(str)) {
            mui.alert('您输入的格式有误,请重新输入!')
        } else {
            pageNumber = 0;
            $('.my-tab-view-pull').empty();
            search_str = str;
            mui('#pullrefresh_chanpin_list').pullRefresh().refresh(true);
            mui('#pullrefresh_chanpin_list').pullRefresh().pullupLoading()
        }
    } else {
        pageNumber = 0;
        $('.my-tab-view-pull').empty();
        search_str = str;
        mui('#pullrefresh_chanpin_list').pullRefresh().refresh(true);
        mui('#pullrefresh_chanpin_list').pullRefresh().pullupLoading()
    }
};
//mui.os.ios ? listener_ipt() : keyup_fn();
//
//function keyup_fn() {
//  $('body').on('keyup', '#chanpin-search', function(e) {
//      var currKey = 0,
//          e = e || event;
//      currKey = e.keyCode || e.which || e.charCode;
//      var keyName = String.fromCharCode(currKey);
//      if(currKey == "13") {
//          var str = $.trim($('#chanpin-search').val());
//          search_pullrefresh(str)
//      }
//  })
//};
//document.getElementById('chanpin-search').addEventListener('input', function(e) {
//  var value = e.target.value
//});

//function listener_ipt() {
//  document.getElementById('chanpin-search').onblur = function() {
//      var str = $.trim($('#chanpin-search').val());
//      search_pullrefresh(str)
//  }
//};
mui.ready(function() {
    proType = getParam("proType");
    proType == null ? proType = "1" : proType;
    //springFestivalPop();
    marquee_Show();
    if(proType != 1) {
        $(".tab-with-chanpin-list .mui-control-item:first-child").removeClass('mui-active');
        $(".tab-with-chanpin-list .mui-control-item:last-child").addClass('mui-active');
    }
    mui('#pullrefresh_chanpin_list').pullRefresh().pullupLoading();
    getCartNum();
    document.querySelector('.loading-bg').style.display = 'none'
});

function checkParameter(remark) {
    if(!/^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/.test(remark)) {
        return false
    }
    return true
};
$(document).on('tap', '.box-list-card', function() {
    var listcard = $(this).children().first();
    if(listcard.hasClass("icon-list")) {
        listcard.removeClass("icon-list").addClass("icon-list-card");
        $(".my-tab-view-pull").removeClass("mui-table-view-chevron").addClass("mui-grid-view");
        $(".mui-media-object").removeClass("mui-pull-left wh-100");
        $(".my-tab-view-pull .mui-table-view-cell").addClass("mui-col-xs-6")
    } else {
        listcard.removeClass("icon-list-card").addClass("icon-list");
        $(".my-tab-view-pull").removeClass("mui-grid-view").addClass("mui-table-view-chevron");
        $(".mui-media-object").addClass("mui-pull-left wh-100");
        $(".my-tab-view-pull .mui-table-view-cell").removeClass("mui-col-xs-6")
    }
});
mui.each(document.querySelectorAll('.tab-with-chanpin-list .mui-control-item'), function(index, el) {
    el.addEventListener('tap', function() {
        pageNumber = 0;
        switch(index) {
            case 0:
                proType = 1;
                break;
            case 1:
                proType = 16;
                break;
            default:
                proType = 1;
                break
        }
//      var href=location.href;
//      if(href.indexOf("proType")>0){
//      	history.pushState("", "产品列表",'//'+location.host+'/wateroWechat/chanpin_list_20190618.html?proType='+proType);
//      }
        $('.my-tab-view-pull').empty();
        mui('#pullrefresh_chanpin_list').pullRefresh().refresh(true);
        mui('#pullrefresh_chanpin_list').pullRefresh().pullupLoading()
    }, false)
});
</script>
</body>
</html>