微信小程序企业版商品排行榜顶部分类页面设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序企业版商品排行榜顶部分类页面设计制作开发教程

微信小程序企业版商品排行榜顶部分类页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序企业版商品排行榜顶部分类页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/user/dingdan.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ?'on' : ''}}" data-current="0" bindtap="swichNav">综合↓</view>

  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">销量↑</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">上新</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">全部商品</view>
</view>


<view class="c_t60"></view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

  <!-- 综合 -->
  <swiper-item> 
     <navigator url="../detail/detail?productId={{item.ProID}}" hover-class="changestyle">
    <view class="shop df" wx:for="{{orderList0}}">        
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">

                    <view class="sp_tit ovh1">{{item.productName}}范德萨热无无无无无无无无</view>
                <view class="sp_jg">￥：{{item.price}}</view>
             <view class="sp_j">新上市</view>
  <view class="sp" >99%好评</view>

            </view>
        </view>
    </view>
                </navigator>
    
  </swiper-item>

  <!-- 销量 -->
  <swiper-item>
                  <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
    <view class="search_no" >

    <view class="shop df" wx:for="{{orderList0}}">
         <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">

                    <view class="sp_tit ovh1">{{item.productName}}范德萨热无无无无无无无无</view>
                <view class="sp_jg">￥：{{item.price}}</view>
          
             <view class="sp_j">新上市</view>
  <view class="sp" >99%好评</view>


            </view>
        </view>
        </view>
    </view>
 </navigator>
  </swiper-item>

  <!-- 折扣 -->
  <swiper-item>
                  <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
        <view class="search_no">
        <view class="shop df" wx:for="{{orderList0}}">        
       <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">

                    <view class="sp_tit ovh1">{{item.productName}}范德萨热无无无无无无无无</view>
                <view class="sp_jg">￥：{{item.price}}</view>
          
             <view class="sp_j">新上市</view>
  <view class="sp" >99%好评</view>
            </view>
        </view>
        </view>
    </view>
</navigator>
    
  </swiper-item>
  <!-- 折扣 -->
  <swiper-item>
      <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
        <view class="search_no">
        <view class="shop df" wx:for="{{orderList0}}">        
       <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">

                    <view class="sp_tit ovh1">{{item.productName}}范德萨热无无无无无无无无</view>
                <view class="sp_jg">￥：{{item.price}}</view>
          
             <view class="sp_j">新上市</view>
  <view class="sp" >99%好评</view>
            </view>
        </view>
        </view>
    </view>
                </navigator>
    
  </swiper-item>
 
</swiper>
 
二、wxss样式文件代码如下：
/* pages/user/dingdan.wxss */
.swiper-tab{  
    width: 100%;  
    border-bottom: 1px solid #eee;  
    text-align: center;  
    line-height: 80rpx;
    background: #fff;  
    position: fixed;
    top: 0;  
    z-index: 999;
    }  
.swiper-tab-list{  
  font-size: 12px;  
  display: inline-block;  
  width: 20%;  
  color: #666;  
  }  
.on{ 
  color: #dd2727;  
  border-bottom: 5rpx solid #dd2727;
  }  
  
.swiper-box{ 
  display: block; 
  height: 100%; 
  width: 100%; 
  overflow: hidden; 
  }  

.clearbutton{
    background: #fff; 
    display: inline-block;
    margin:3% 3% 2% 3%; 
    color: #dd2727;
    font-size: 14px;
    width: 94%;
}
.shop{
    background: #fff;
    padding: 4%;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee
}
.shop checkbox{ 
    margin-top: 27px;
    }
.sh_slt{
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 4%;
    float: left;
}
.sp_text{
    float: left;
    line-height: 20px;
    width: 100%;
    text-align: left;
    }
.sp_tit{
    width: 100%;
    overflow: hidden;
    font-size: 16px;
}
.sp_neb{
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
    padding: 20rpx 0;
    
}
.sp_j{
  float: left;
  font-size: 30rpx;
  color: #ccc;
}
.sp{
    float: right;
      font-size: 30rpx;
      color: #ccc;
}
.dle{
    color: #999;
    font-size: 12px;
    float: right;
}
.dle image{
    width: 18px;
    height: 18px;
    vertical-align: sub;
}
.jk_bottom{
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%; 
    display: inline-flex;
    border-bottom: 1px solid #eee; 
    font-size: 14px;
    color: #999;       
}
.jk_bottom checkbox{
    margin: 4% 0 4% 4%;    
}
.jk_bottom .heji{
    margin-top: 5.5%;
    width: 30%; 
    text-align: right;   
}
.jk_bottom .all{
    margin-top: 5.5%;
    padding-left: 2%;  
}
.jk_bottom .js_button{
    background: #dd2727;
    float: right;
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 40%;
    position: absolute;
    right: 0;
    line-height: 50px;
}
.c_t60{
    clear: both;
    height: 1px;
    padding-top: 48px;
}
.blue{
  color: #42b1ff;
}
.mr_5{
    margin-right: 5px;
}
三、js页面代码如下：
// pages/user/dingdan.js
//index.js  
//获取应用实例  
var app = getApp();
var common = require("../../utils/common.js");
Page( {  
  data: {  
    winWidth: 0,  
    winHeight: 0,  
    // tab切换  
    currentTab: 0,  
    isStatus:1,//1待付款，2待收货，3已完成
    page:1,
    orderList0:[],
    orderList2:[],
    orderList3:[],
    orderList4:[],
  },  
  onLoad: function(options) { 
     var objectId = options.ming;
  console.log(objectId)
 wx.setNavigationBarTitle(
    {
      title: objectId,
      success: function() {
        console.log('setNavigationBarTitle success')
      },
    })

    this.initSystemInfo();
    this.setData({
      currentTab: 0,
      // parseInt(options.currentTab)
    });
    this.setData({
      isStatus: this.getOrderStatus(),
    });
    console.log(options);

    if(this.data.currentTab == 4){
      this.loadReturnOrderList();
    }else{
      this.loadOrderList();
    }
  },  
  getOrderStatus:function(){
    return this.data.currentTab == 0 ? 1 : this.data.currentTab == 2 ?2 :this.data.currentTab == 3 ? 3:0;
  },
  loadOrderList: function(){
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/GetOrderZBTList',
      method:'post',
      data: {
        userId:app.d.userId,
        isStatus:that.data.isStatus,
        pageindex:that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initOrderList(data);
        switch(that.data.currentTab){
          case 0:
            that.setData({
              orderList0: that.data.orderList0.concat(data),
            });
            break;
          case 2:
            that.setData({
              orderList2: that.data.orderList2.concat(data),
            });
            break;
          case 3:
            that.setData({
              orderList3: that.data.orderList3.concat(data),
            });
            break;
        }
        //endInitData
        console.log(that.data);
      },
    });
  },
  initOrderList:function(data){
    for(var i=0; i<data.length; i++){
      console.log(data[i]);
      var item = data[i];

      item.ImgUrl = app.d.hostImg + item.ImgUrl;
      item.price = item.price/100;
      item.BuyMoney = item.BuyMoney/100;
      item.TotalAmount = item.TotalAmount/100;
      item.TotalMoney = item.TotalMoney/100;
      item.ProductImgUrl = app.d.hostImg + item.ProductImgUrl;
    }
  },
  loadReturnOrderList:function(){
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/GetReturnListZBT',
      method:'post',
      data: {
        userId:app.d.userId,
        pageindex:that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initOrderList(data);
        that.setData({
            orderList4: that.data.orderList4.concat(data),
          });
        //endInitData
      },
    });
  },
  removeOrder:function(e){
    var that = this;
    var orderId = e.currentTarget.dataset.orderId;
    wx.showModal({
      title: '提示',
      content: '你确认移除吗',
      success: function(res) {

        res.confirm && wx.request({
          url: app.d.hostUrl + '/ztb/orderZBT/ReMoveOrderZBT',
          method:'post',
          data: {
            orderId: orderId,
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var data = res.data;
            console.log(data);
            //todo
            if(data.result == 'ok'){
              //that.data.productData.length =0;
              switch(that.data.currentTab){
                case 0:
                  that.data.orderList0.length = 0;
                  break;
                case 2:
                  that.data.orderList2.length = 0;
                  break;
                case 3:
                  that.data.orderList3.length = 0;
                  break;
              }
              that.loadOrderList();
            }
          },
        });

      }
    });
  },
  // returnProduct:function(){
  // },
  initSystemInfo:function(){
    var that = this;  
  
    wx.getSystemInfo( {
      success: function( res ) {  
        that.setData( {  
          winWidth: res.windowWidth,  
          winHeight: res.windowHeight  
        });  
      }    
    });  
  },
  bindChange: function( e ) {  
  
    var that = this;  
    that.setData( { currentTab: e.detail.current });  
  
  },  
  swichNav: function( e ) {  
  
    var that = this;  
  
    if( this.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else {  
      that.setData({
        currentTab: parseInt(e.target.dataset.current),
      });
      that.setData( {  
        isStatus: this.getOrderStatus(),
      });

      //没有数据就进行加载
      switch(that.data.currentTab){
          case 0:
            !that.data.orderList0.length && that.loadOrderList();
            break;
          case 2:
            !that.data.orderList2.length && that.loadOrderList();
            break;
          case 3:
            !that.data.orderList3.length && that.loadOrderList();
            break;
          case 4:
            that.data.orderList4.length = 0;
            that.loadReturnOrderList();
            break;
        }
    };
  },
  /**
   * 微信支付订单
   */
  payOrderByWechat: function(event){
    var orderId = event.currentTarget.dataset.orderId;
    this.prePayWechatOrder(orderId);
    var successCallback = function(response){
      console.log(response);
    }
    common.doWechatPay("prepayId", successCallback);
  },

  /**
   * 调用服务器微信统一下单接口创建一笔微信预订单
   */
  prePayWechatOrder: function(orderId){
    var uri = "/ztb/userZBT/GetWxOrder";
    var method = "post";
    var dataMap = {
      SessionId: app.globalData.userInfo.sessionId,
      OrderNo: orderId
    }
    console.log(dataMap);
    var successCallback = function (response) {
      console.log(response);
    };
    common.sentHttpRequestToServer(uri, dataMap, method, successCallback);
  },
  onShareAppMessage: function () {
    return {
      title: '微信小程序联盟',
      desc: '最具人气的小程序开发联盟!',
      path: '/page/user?id=123'
    }
  },
})

模板简介：该模板名称为【微信小程序企业版商品排行榜顶部分类页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 29,841次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-12
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
企业网站 单页式简历模板 微信模板 微信文章 微信公众平台 响应式 html5 微信素材 微信图片 自适应
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 425
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 502
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,733
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,080
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,438
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,258
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备 42010602001367号 懒人模板-Copyright © 2023 版权所有