123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <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">
- <title>产品列表</title>
- <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/main.css" />
- <style>
- .btn-buy-know{border: 1px solid #999;position: absolute;right: 0;bottom: 0;}
- .pro-title{padding:10px 0 6px 0;}
- .pro-desc{padding: 0 0 8px 0;}
- .pro-delete{color: #999;margin-left: 15px;}
- .my-view-no .mui-table-view-cell:after{display: none;}
- </style>
- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
- <script>
- //屏蔽分享
- document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
- WeixinJSBridge.call('hideOptionMenu');
- });
- </script>
- </head>
- <body>
- <!--内容开始-->
- <div class="mui-content">
- <div class="banner-box">
- <!--banner开始-->
- <div id="slider" class="mui-slider">
- <div class="mui-slider-group mui-slider-loop">
- <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
- <div class="mui-slider-item mui-slider-item-duplicate">
- <a>
- <img src="images/banner-6.png">
- </a>
- </div>
- <!-- 第一张 -->
- <div class="mui-slider-item">
- <a>
- <img src="images/banner-6.png">
- </a>
- </div>
- <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
- <div class="mui-slider-item mui-slider-item-duplicate">
- <a>
- <img src="images/banner-6.png">
- </a>
- </div>
- </div>
- <!--轮播图下面的点(和轮播图数量一致)-->
- <div class="mui-slider-indicator my-slider-indicator">
- <!--<div class="mui-indicator mui-active"></div>
- <div class="mui-indicator"></div>
- <div class="mui-indicator"></div>-->
- </div>
- </div>
- <!--banner结束-->
- <div class="index-banner" style="display: none;"></div>
- </div>
- <ul class="mui-table-view mui-table-view-striped my-view-no mui-table-view-condensed" id="con_product_list" style="margin-top: 5px;">
- <!--<li class="mui-table-view-cell">
- <div class="mui-table">
- <div class="mui-table-cell mui-col-xs-12">
- <img width="100%" src="images/pro-channel-1.jpg">
- </div>
- </div>
- <div class="mui-table">
- <div class="mui-table-cell mui-col-xs-12">
- <h4 class="pro-title">上朵都市轻奢款声波牙刷</h4>
- <p class="pro-desc">柔和清洁牙龈,温柔呵护牙齿</p>
- <span class="pro-price">¥349.00</span><s class="pro-delete">¥399.00</s>
- <button type="button" class="mui-btn btn-buy-know pro-datail" color="203" >立即购买</button>
- </div>
- </div>
- </li>
- <li class="mui-table-view-cell">
- <div class="mui-table">
- <div class="mui-table-cell mui-col-xs-12">
- <img width="100%" src="images/pro-channel-2.jpg">
- </div>
- </div>
- <div class="mui-table">
- <div class="mui-table-cell mui-col-xs-12">
- <h4 class="pro-title">上朵儿童款声波牙刷</h4>
- <p class="pro-desc">柔羽呵护刷毛,专为孩子定制</p>
- <span class="pro-price">¥249.00</span><s class="pro-delete">¥289.00</s>
- <button type="button" class="mui-btn btn-buy-know pro-datail" color="208">立即购买</button>
- </div>
- </div>
- </li>-->
- </ul>
- </div>
- <!--内容结束-->
- <!-- 加载ing begin-->
- <div class="loading covers">
- <div class="loading-bj"></div>
- <p>正在加载...</p>
- </div>
- <!-- 加载ing end -->
- <script src="js/mui.min.js"></script>
- <script src="js/jquery-2.1.1.min.js"></script>
- <script src="js/main.js"></script>
- <script>
- window.addEventListener('pageshow', function(e) {
- // 通过persisted属性判断是否存在 BF Cache
- if(e.persisted) {
- location.reload();
- }
- });
-
- var channelType = getParam("channelType"); //类型
- var channelId = getParam("channelId"); //渠道id
- //ready事件
- mui.ready(function() {
- $(".loading").hide().css("opacity", "0");//隐藏(正在加载...)
-
- $.ajax(base_path + '/wechat/channelAdmin/getProductList?dates=' + new Date().getTime(), {
- data: {
- "channelType": channelType,
- "channelId": channelId
- },
- dataType: 'json',
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- type: 'get',
- timeout: 15000,
- success: function(dt) {
- if(dt.isRedirect) {
- location.href = dt.redirectURL;
- } else {
- //console.log(dt);
- var str = '';
- mui.each(dt.data, function(index) {
-
- str += '<li class="mui-table-view-cell">'
- + '<div class="mui-table">'
- + '<div class="mui-table-cell mui-col-xs-12">'
- + '<img width="100%" src="'+ this.productIntroduceImg +'">'
- + '</div></div>'
- + '<div class="mui-table">'
- + ' <div class="mui-table-cell mui-col-xs-12">'
- + '<h4 class="pro-title">'+ this.productName +'</h4>'
- + '<p class="pro-desc">'+ this.productColorDes +'</p>'
- + '<span class="pro-price">¥'+ accDiv(this.productDiscount,100) +'</span><s class="pro-delete">¥'+ accDiv(this.productPrice,100) +'</s>'
- + '<button type="button" class="mui-btn btn-buy-know pro-datail" color="'+ this.colorId +'" >立即购买</button>'
- + ' </div>'
- + ' </div>'
- + ' </li>'
- });
- $("#con_product_list").html(str);
- $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
- }
- },
- error: function(xhr, type, errorThrown) {
- console.log(xhr);
- mui.alert("获取订单列表失败!网络错误");
- }
- });
-
- });
-
- //跳转产品详情
- $(document).on('tap', '.pro-datail', function() {
- var id = $(this).attr("color");
- location.href='pro-details.html?colorId='+id+'&channelType='+channelType+'&channelId='+channelId;
- });
- </script>
- </body>
- </html>
|