微信小程序红色个人订单状态导航样式设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序红色个人订单状态导航样式设计制作开发教程

微信小程序红色个人订单状态导航样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序红色个人订单状态导航样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/user/dingdan.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" data-otype="pay" bindtap="swichNav">待付款</view>
   <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" data-otype="deliver" bindtap="swichNav">待发货</view> 
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" data-otype="receive" bindtap="swichNav">待收货</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" data-otype="finish" bindtap="swichNav">已完成</view>
  <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">退款/售后</view>
</view>
<view class="c_t60"></view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">

  <!-- 待付款 -->
  <swiper-item> 
    <view class="search_no" wx:if="{{!orderList0.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>

    <view class="shop df" wx:for="{{orderList0}}">        
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                <view class="sp_tit ovh1">{{item.name}}</view>
                </navigator>
                <view class="sp_neb">单价：¥ {{item.price_yh}} 数量：×{{item.product_num}} 产品：×{{item.pro_count}}</view>
                <view class="sp_jg">¥：{{item.price}}</view>
                <view class="font_12 red fl_r" bindtap="payOrderByWechat" data-orderid="{{item.id}}" data-ordersn="{{item.order_sn}}" wx:if="{{item.type=='weixin'}}">微信支付</view>
                <!--<navigator class="font_12 red fl_r" url="../order/downline?orderId={{item.id}}" wx:if="{{item.PayType=='cash'}}">线下支付</navigator>-->

                <view class="font_12 red fl_r mr_5" bindtap="removeOrder" data-order-id="{{item.id}}">取消订单</view>
                <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>

            </view>
        </view>
    </view>
    <view class="clear mt10" bindtap="getMore" wx:if="{{orderList0.length>0}}">点击查看更多</view>  
  </swiper-item>

  <!-- 待发货 -->
  <swiper-item>
    <view class="search_no" wx:if="{{!orderList1.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>
    <view class="shop df" wx:for="{{orderList1}}">
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.name}}</view>
                </navigator>
                <view class="sp_neb">单价：¥ {{item.price_yh}} 数量：×{{item.product_num}} 产品：×{{item.pro_count}}</view>
                <view class="sp_jg">¥：{{item.price}}</view>
                <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.id}}">申请退款</navigator>
                <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <view class="clear mt10" bindtap="getMore" wx:if="{{orderList1.length>0}}">点击查看更多</view> 
  </swiper-item>

  <!-- 待收货 -->
  <swiper-item>
        <view class="search_no" wx:if="{{!orderList2.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>
        <view class="shop df" wx:for="{{orderList2}}">        
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.name}}</view>
                </navigator>
                <view class="sp_neb">单价：¥ {{item.price_yh}} 数量：×{{item.product_num}} 产品：×{{item.pro_count}}</view>
                <view class="sp_jg">¥：{{item.price}}</view>
                <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.id}}">申请退款</navigator>
                <view class="font_12 red fl_r mr_5" bindtap="recOrder" data-order-id="{{item.id}}">确认收货</view>
                <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <view class="clear mt10" bindtap="getMore" wx:if="{{orderList2.length>0}}">点击查看更多</view> 
  </swiper-item>

  <!-- 已完成-->
  <swiper-item>
    <view class="search_no" wx:if="{{!orderList3.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>
    <view class="shop df" wx:for="{{orderList3}}">   
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.name}}</view>
                </navigator>
                <view class="sp_neb">单价：¥ {{item.price_yh}} 数量：×{{item.product_num}} 产品：×{{item.pro_count}}</view>
                <view class="sp_jg">¥：{{item.price}}</view>
                <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <view class="clear mt10" bindtap="getMore" wx:if="{{orderList3.length>0}}">点击查看更多</view> 
  </swiper-item>

  <!-- 退款/售后 -->
  <swiper-item>
    <view class="search_no" wx:if="{{!orderList4.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>

    <view class="shop df" wx:for="{{orderList4}}">
        <image class="sh_slt" src="{{item.photo_x}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.name}}</view>
                </navigator>
                <view class="sp_neb">单价：¥ {{item.price_yh}} 数量：×{{item.product_num}} 产品：×{{item.pro_count}}</view>
                <view class="sp_jg">¥：{{item.price}}</view>
                <view class="font_12 red fl_r">{{item.desc}}</view>
                <!--<navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>-->
            </view>
        </view>
    </view>
    <view class="clear mt10" bindtap="getMore2" wx:if="{{orderList4.length>0}}">点击查看更多</view> 
  </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;
}
.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: 14px;
}
.sp_neb{
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
}
.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;
}

.mt10{
  margin: 0 auto;
  text-align: center;
  height: 70rpx;
  width: 450rpx;
  line-height: 70rpx;
  border-radius:10rpx; 
  border: 1px solid #999;
  font-size: 30rpx;
  margin-top: 30rpx;
}
三、js页面代码如下：
// pages/user/dingdan.js
//index.js  
//获取应用实例  
var app = getApp();
var common = require("../../utils/common.js");
Page({  
  data: {  
    winWidth: 0,  
    winHeight: 900,  
    // tab切换  
    currentTab: 0,  
    isStatus:'pay',//10待付款，20待发货，30待收货 40、50已完成
    page:2,
    refundpage:2,
    orderList0:[],
    orderList1:[],
    orderList2:[],
    orderList3:[],
    orderList4:[],
    orderId:0
  },  
  onLoad: function(options) {  
    this.initSystemInfo();
    this.setData({
      currentTab: parseInt(options.currentTab),
      isStatus:options.otype
    });

    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;
  },

//取消订单
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.ceshiUrl + '/Api/Order/orders_edit',
          method:'post',
          data: {
            id: orderId,
            type:'cancel',
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var status = res.data.status;
            if(status == 1){
              wx.showToast({
                title: '操作成功！',
                duration: 2000
              });
              that.loadOrderList();
            }else{
              wx.showToast({
                title: res.data.err,
                duration: 2000
              });
            }
          },
          fail: function () {
            // fail
            wx.showToast({
              title: '网络异常！',
              duration: 2000
            });
          }
        });

      }
    });
  },

  //确认收货
recOrder: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.ceshiUrl + '/Api/Order/orders_edit',
          method:'post',
          data: {
            id: orderId,
            type:'receive',
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var status = res.data.status;
            if(status == 1){
              wx.showToast({
                title: '操作成功！',
                duration: 2000
              });
              that.loadOrderList();
            }else{
              wx.showToast({
                title: res.data.err,
                duration: 2000
              });
            }
          },
          fail: function () {
            // fail
            wx.showToast({
              title: '网络异常！',
              duration: 2000
            });
          }
        });

      }
    });
  },

  loadOrderList: function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Order/index',
      method:'post',
      data: {
        uid:app.d.userId,
        order_type:that.data.isStatus,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var status = res.data.status;
        var list = res.data.ord;
        switch(that.data.currentTab){
          case 0:
            that.setData({
              orderList0: list,
              winHeight: 900,
            });
            break;
          case 1:
            that.setData({
              orderList1: list,
              winHeight: 900,
            });
            break;  
          case 2:
            that.setData({
              orderList2: list,
              winHeight: 900,
            });
            break;
          case 3:
            that.setData({
              orderList3: list,
              winHeight: 900,
            });
            break;
          case 4:
            that.setData({
              orderList4: list,
              winHeight: 900,
            });
            break;  
        }
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    });
  },

loadReturnOrderList:function(){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Order/order_refund',
      method:'post',
      data: {
        uid:app.d.userId,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.ord;
        var status = res.data.status;
        if(status==1){
          that.setData({
            orderList4: data,
            winHeight: 900,
          });
        }else{
          wx.showToast({
            title: res.data.err,
            duration: 2000
          });
        }
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    });
  },

//获取更多
getMore: function (e) {
  var that = this;
  var winHeight = that.data.winHeight;
  var page = that.data.page;
  wx.request({
    url: app.d.ceshiUrl + '/Api/Order/get_more',
    method: 'post',
    data: {
      uid: app.d.userId,
      order_type: that.data.isStatus,
      page: that.data.page,
    },
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: function (res) {
      var list = res.data.ord;
      if (list == '') {
        wx.showToast({
          title: '没有更多数据！',
          duration: 2000
        });
        return false;
      }
      var len = (list.length)*120;
      var status = res.data.status;
      switch (that.data.currentTab) {
        case 0:
          that.setData({
            orderList0: that.data.orderList0.concat(list),
            winHeight: winHeight + len,
          });
          break;
        case 1:
          that.setData({
            orderList1: that.data.orderList1.concat(list),
            winHeight: winHeight + len,
          });
          break;
        case 2:
          that.setData({
            orderList2: that.data.orderList2.concat(list),
            winHeight: winHeight + len,
          });
          break;
        case 3:
          that.setData({
            orderList3: that.data.orderList3.concat(list),
            winHeight: winHeight + len,
          });
          break;
        case 4:
          that.setData({
            orderList4: that.data.orderList4.concat(list),
            winHeight: winHeight + len,
          });
          break;
      }
      //that.initProductData(data);
      that.setData({
        page: page + 1,
      });
      //endInitData
    },
    fail: function (e) {
      wx.showToast({
        title: '网络异常！',
        duration: 2000
      });
    }
  })
},

//退款获取更多
getMore2: function (e) {
  var that = this;
  var winHeight = that.data.winHeight;
  var page = that.data.refundpage;
  wx.request({
    url: app.d.ceshiUrl + '/Api/Order/get_refund_more',
    method: 'post',
    data: {
      uid: app.d.userId,
      page: that.data.refundpage,
    },
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: function (res) {
      var list = res.data.ord;
      if (list == '') {
        wx.showToast({
          title: '没有更多数据！',
          duration: 2000
        });
        return false;
      }
      var len = (list.length) * 120;
      //that.initProductData(data);
      that.setData({
        orderList4: that.data.orderList4.concat(list),
        refundpage: page + 1,
        winHeight: winHeight + len,
      });
      //endInitData
    },
    fail: function (e) {
      wx.showToast({
        title: '网络异常！',
        duration: 2000
      });
    }
  })
},
  
  // 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( that.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else { 
      var current = e.target.dataset.current;
      that.setData({
        currentTab: parseInt(current),
        isStatus: e.target.dataset.otype,
        page:2
      });

      //没有数据就进行加载
      switch(that.data.currentTab){
          case 0:
            !that.data.orderList0.length && that.loadOrderList();
            break;
          case 1:
            !that.data.orderList1.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);
  // },

  payOrderByWechat: function (e) {
    var that = this;
    var order_id = e.currentTarget.dataset.orderid;
    var order_sn = e.currentTarget.dataset.ordersn;

    if (!order_sn || !order_id){
      wx.showToast({
        title: "订单异常!",
        duration: 2000,
      });
      return false;
    }
    that.setData({
      orderId: order_id
    });
    wx.request({
      url: app.d.ceshiUrl + '/Api/Pay/dowxpay',
      data: {
        order_id: order_id,
        order_sn: order_sn,
        uid: app.d.userId,
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }, // 设置请求的 header
      success: function (res) {
        if (res.data.status == 1) {
          var order = res.data.success;
          wx.requestPayment({
            timeStamp: order.timeStamp,
            nonceStr: order.nonceStr,
            package: order.package,
            signType: 'MD5',
            paySign: order.paySign,
            success: function (res) {
              wx.showToast({
				title: "支付成功!",
				duration: 2000,
			  });
			  setTimeout(function () {
				wx.navigateTo({
				  url: '../user/dingdan?currentTab=1&otype=deliver',
				});
			  }, 2500);
            },
            fail: function (res) {
              wx.showToast({
                title: res,
                duration: 3000
              })
            }
          })
        } else {
          wx.showToast({
            title: res.data.err,
            duration: 2000
          });
        }
      },
      fail: function (e) {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    })
  },

  onShow: function () {
    if (this.data.currentTab == 4) {
      this.loadReturnOrderList();
    } else {
      this.loadOrderList();
    }
  },



})

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

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