小程序swiper实现订单页面

myOrder.wxml

<!--pages/myorder/myorder.wxml-->

  1 <view class="swiper-tab">
  2   <block wx:for="{{swipertab}}" wx:key="sptab">
  3     <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" 
  4     data-current="{{item.index}}" 
  5     bindtap="tabSwitch">{{item.name}}</view>
  6   </block>
  7 </view>
  8 
  9 <swiper current="{{currtab}}" style="height:{{deviceH-31}}px" bindchange="onTabChange">
 10   <swiper-item>
 11     <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
 12       <view class="container-0">
 13         <view class="order" wx:for="{{allOrderS}}" wx:key="{{item.orderid}}" wx:for-item="order">
 14           <view class="orderNumber">订单编号：{{order.orderid}}</view>
 15           <view class="orderStatus">{{order.status}}</view>
 16           <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data-orderid="{{order.orderid}}">
 17               <image src='{{item.image}}'></image>
 18               <view class='orderDetail'>
 19                 <view class='orderTitle'>{{item.title}}</view>
 20                 <view class='orderStyle'>
 21                   <view class="orderColor">{{item.properties}}</view>
 22                   <!-- <view class="orderSize">{{item.size}},</view>
 23                   <view class="orderUnit">{{item.unit}}</view> -->
 24                 </view>
 25               </view>
 26               <view class='orderInfor'>
 27                 <view class='orderPrice'>{{item.price}}</view>
 28                 <view class='orderNum'>{{item.number}}</view>
 29               </view>
 30           </view>
 31           <view class='orderSumPri'>
 32             共{{order.totalNumber}}件商品 合计：
 33             <view class='orderPri'>{{order.totalPrice}}元</view>
 34           </view>
 35           <view class="orderHander">
 36             <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
 37             <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
 38           </view>
 39         </view>
 40       </view>
 41     </scroll-view>
 42   </swiper-item>
 43   <swiper-item>
 44     <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
 45       <view class="container-1">
 46         <view class="order" wx:for="{{waitPayOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
 47           <view class="orderNumber">{{order.orderid}}</view>
 48           <view class="orderStatus">{{order.status}}</view>
 49           <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
 50               <image src='{{item.image}}'></image>
 51               <view class='orderDetail'>
 52                 <view class='orderTitle'>{{item.title}}</view>
 53                 <view class='orderStyle'>
 54                   <view class="orderColor">{{item.properties}}</view>
 55                   <!-- <view class="orderColor">{{item.color}}</view>
 56                   <view class="orderSize">{{item.size}}</view>
 57                   <view class="orderUnit">{{item.unit}}</view> -->
 58                 </view>
 59               </view>
 60               <view class='orderInfor'>
 61                 <view class='orderPrice'>{{item.price}}</view>
 62                 <view class='orderNum'>{{item.number}}</view>
 63               </view>
 64           </view>
 65           <view class='orderSumPri'>
 66             共{{order.totalNumber}}件商品 合计：
 67             <view class='orderPri'>{{order.totalPrice}}元</view>
 68           </view>
 69           <view class="orderHander">
 70             <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
 71             <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
 72           </view>
 73         </view>
 74       </view>
 75     </scroll-view>
 76   </swiper-item>
 77   <swiper-item>
 78     <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
 79       <view class="container-2">
 80         <view class="order" wx:for="{{waitSentOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
 81           <view class="orderNumber">{{order.orderid}}</view>
 82           <view class="orderStatus">{{order.status}}</view>
 83           <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
 84             <image src='{{item.image}}'></image>
 85             <view class='orderDetail'>
 86               <view class='orderTitle'>{{item.title}}</view>
 87               <view class='orderStyle'>
 88                 <view class="orderColor">{{item.properties}}</view>
 89                 <!-- <view class="orderColor">{{item.color}}</view>
 90                 <view class="orderSize">{{item.size}}</view>
 91                 <view class="orderUnit">{{item.unit}}</view> -->
 92               </view>
 93             </view>
 94             <view class='orderInfor'>
 95               <view class='orderPrice'>{{item.price}}</view>
 96               <view class='orderNum'>{{item.number}}</view>
 97             </view>
 98           </view>
 99           <view class='orderSumPri'>
100             共{{order.totalNumber}}件商品 合计：
101             <view class='orderPri'>{{order.totalPrice}}元</view>
102           </view>
103           <view class="orderHander">
104             <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
105             <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
106           </view>
107         </view>
108       </view>  
109     </scroll-view>
110   </swiper-item>
111   <swiper-item>
112     <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
113       <view class="container-3">
114         <view class="order" wx:for="{{waitReceivedOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
115           <view class="orderNumber">{{order.orderid}}</view>
116           <view class="orderStatus">{{order.status}}</view>
117           <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
118               <image src='{{item.image}}'></image>
119               <view class='orderDetail'>
120                 <view class='orderTitle'>{{item.title}}</view>
121                 <view class='orderStyle'>
122                   <view class="orderColor">{{item.properties}}</view>
123                 </view>
124               </view>
125               <view class='orderInfor'>
126                 <view class='orderPrice'>{{item.price}}</view>
127                 <view class='orderNum'>{{item.number}}</view>
128               </view>
129           </view>
130           <view class='orderSumPri'>
131             共{{order.totalNumber}}件商品 合计：
132             <view class='orderPri'>{{order.totalPrice}}元</view>
133           </view>
134           <view class="orderHander">
135             <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
136             <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
137           </view>
138         </view>
139       </view>
140     </scroll-view>
141   </swiper-item>
142   <swiper-item>
143     <scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
144       <view class="container-4">
145         <view class="order" wx:for="{{completeOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
146           <view class="orderNumber">{{order.orderid}}</view>
147           <view class="orderStatus">{{order.status}}</view>
148           <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data->
149             <image src='{{item.image}}'></image>
150             <view class='orderDetail'>
151               <view class='orderTitle'>{{item.title}}</view>
152               <view class='orderStyle'>
153                 <view class="orderColor">{{item.properties}}</view>
154                 <!-- <view class="orderColor">{{item.color}}</view>
155                 <view class="orderSize">{{item.size}}</view>
156                 <view class="orderUnit">{{item.unit}}</view> -->
157               </view>
158             </view>
159             <view class='orderInfor'>
160               <view class='orderPrice'>{{item.price}}</view>
161               <view class='orderNum'>{{item.number}}</view>
162             </view>
163           </view>
164           <view class='orderSumPri'>
165           共{{order.totalNumber}}件商品 合计：
166           <view class='orderPri'>{{order.totalPrice}}元</view>
167           </view>
168           <view class="orderHander">
169             <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
170             <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
171           </view>
172         </view>
173       </view>
174     </scroll-view>
175   </swiper-item>
176 </swiper>

myOrder.js

// pages/myOrder/myOrder.js

  1 import {
  2   ApiUrl
  3 } from '../../utils/apiurl.js';
  4 import {
  5   httpReq
  6 } from '../../utils/http.js';
  7 Page({
  8 
  9   /**
 10    * 页面的初始数据
 11    */
 12   data: {
 13     currtab: 0,//当前滑块的index
 14     swipertab: [{ name: '全部', index: 0 }, { name: '待付款', index: 1 }, { name: '待发货', index: 2 }, { name: '待收货', index: 3 }, { name: '已完成', index: 4 }],
 15     height: 0,
 16     allOrderS: [],//全部订单
 17     waitPayOrder: [],//待付款订单
 18     waitSentOrder: [],//待发货订单
 19     waitReceivedOrder: [],//待收货订单
 20     completeOrder: [],//已完成订单
 21     token: '',//app.js里面拿token
 22     vipid: '',//会员号
 23     ifhiddenone: true,//按钮隐藏
 24     ifhiddentwo: false //按钮隐藏
 25   },
 26   /**
 27    * 请求数据
 28    */
 29   getGoods: function () {
 30     let that = this
 31     httpReq({
 32       header: {
 33         'Content-Type': 'application/json',
 34         'Accept': 'application/json'
 35       },
 36       //获取数据的接口，
 37       url: ApiUrl.phplist + 'order/getorder?token=' + this.data.token + '&member_id=' + this.data.vipid,
 38     }).then((res) => {
 39       let lists = res.data.lists
 40       //数据重组
 41       let orders = []
 42       let waitPayOrder = []
 43       let waitSentOrder = []
 44       let waitReceivedOrder = []
 45       let completeOrder = []
 46       for (let m in lists) {
 47         let ss = {}
 48         let goods = []
 49         ss.orderid = lists[m].order_sn
 50         ss.totalNumber = Number(lists[m].pay_num)
 51         ss.totalPrice = Number(lists[m].order_amount)
 52         if (lists[m].pay_status == '0') {
 53           ss.status = "待付款"
 54           ss.orderHandleOne = '取消订单'
 55           ss.orderHandleTwo = '确认付款'
 56         }
 57         else if (lists[m].pay_status == '1') { 
 58           ss.status = "已取消"
 59           ss.ifhiddenone = true,
 60           ss.ifhiddentwo = true
 61         }
 62         else if (lists[m].pay_status == '2') { 
 63           ss.status = "待发货"
 64           ss.orderHandleOne = '催TA发货'
 65           ss.orderHandleTwo = '申请退款'
 66         }
 67         else if (lists[m].pay_status == '3') {
 68           ss.status = "待收货"
 69           ss.orderHandleOne = '申请退款'
 70           ss.orderHandleTwo = '确认收货'
 71          }
 72         else { 
 73           ss.status = "已完成"
 74           ss.orderHandleTwo = '删除订单'
 75           ss.ifhiddenone = true
 76           }
 77         for (let n in lists[m].goods) {
 78            let mm = {}
 79           // console.log(lists[m].goods[n])
 80           if (lists[m].goods[n].hasOwnProperty('goods_logo')) {
 81             mm.image = lists[m].goods[n].goods_logo
 82           }
 83           if (lists[m].goods[n].hasOwnProperty('goods_name')) {
 84             mm.title = lists[m].goods[n].goods_name
 85           }
 86           if (lists[m].goods[n].hasOwnProperty('goods_price')) {
 87             mm.price = lists[m].goods[n].goods_price
 88           }
 89           if (lists[m].goods[n].hasOwnProperty('number')) {
 90             mm.number = lists[m].goods[n].number
 91           } 
 92           
 93           goods.push(mm)
 94           ss.goods = goods
 95         }
 96         if (ss.status == "待付款") {
 97           waitPayOrder.push(ss)
 98         }
 99         if (ss.status == "待发货") {
100           waitSentOrder.push(ss)
101         }
102         if (ss.status == "待收货") {
103           waitReceivedOrder.push(ss)
104         }
105         if (ss.status == "已完成") {
106           completeOrder.push(ss)
107         }
108         completeOrder
109         orders.push(ss)
110       }
111       // console.log(orders)
112       // console.log(that)
113       that.setData({
114         allOrderS: orders,
115         waitPayOrder: waitPayOrder,
116         waitSentOrder: waitSentOrder,
117         waitReceivedOrder: waitReceivedOrder,
118         completeOrder: completeOrder
119       })
120     })
121   },
122   /**
123    * 生命周期函数--监听页面加载
124    */
125   onLoad: function (option) {
126     let token = wx.getStorageSync('token')//缓存中获取数据
127     let vipid = wx.getStorageSync('vipid')//缓存中获取vipid
128     this.setData({
129       token: token,
130       vipid: vipid
131     })
132     //拿后台数据
133     this.getGoods()
134     //外部进入时默认选swiper的index为currtab,如果获取失败就默认设置为0.
135     if (option.currtab == null || option.currtab == '') {
136       option.currtab = 0
137     } else {
138       let tab = option.currtab
139       this.setData({
140         currtab: tab
141       })
142     }
143   },
144   /**
145    * 生命周期函数--监听页面初次渲染完成
146    */
147   onReady: function () {
148     this.getDeviceInfo()
149   },
150   /*
151   * 设置swiper高度，swiper本身高度限制必须重写否则里面内容过多不显示，这是swiper本身的坑。
152    */
153   getDeviceInfo: function () {
154     let that = this
155     wx.getSystemInfo({
156       success: function (res) {
157         that.setData({
158           deviceW: res.windowWidth,
159           deviceH: res.windowHeight
160         })
161       }
162     })
163   },
164   /**
165    * @Explain：选项卡点击切换
166    */
167   tabSwitch: function (e) {
168     var that = this
169     let tab = e.target.dataset.current
170     if (this.data.currtab === tab) {
171       return false
172     } else {
173       that.setData({
174         currtab: tab
175       })
176     }
177   },
178   /**
179  * 选项卡滑动切换页面
180  */
181   onTabChange: function (e) {
182     var that = this
183     let tab = e.detail.current
184     that.setData({
185       currtab: tab
186     })
187   },
188   /**
189    * 点击订单进入订单详情
190    */
191   orderDetailShow: function(e) {
192     // console.log(e.currentTarget.dataset.orderid)
193     let orderid = e.currentTarget.dataset.orderid
194     wx.navigateTo({
195         //订单详情接口
196       url: '../orderDetail/orderDetail?orderid=' + orderid
197     })
198   },
199   /**
200    * 生命周期函数--监听页面显示
201    */
202   onShow: function () {
203   },
204 
205   /**
206    * 生命周期函数--监听页面隐藏
207    */
208   onHide: function () {
209 
210   },
211 
212   /**
213    * 生命周期函数--监听页面卸载
214    */
215   onUnload: function () {
216 
217   },
218 
219   /**
220    * 页面相关事件处理函数--监听用户下拉动作
221    */
222   onPullDownRefresh: function () {
223 
224   },
225 
226   /**
227    * 页面上拉触底事件的处理函数
228    */
229   onReachBottom: function () {
230 
231   },
232 
233   /**
234    * 用户点击右上角分享
235    */
236   onShareAppMessage: function () {
237 
238   }
239 })

myOrder.wxss

  1 /* pages/myorder/myorder.wxss */
  2 .on {
  3   color: red;
  4   border-bottom:2px solid red;
  5 }
  6 
  7 swiper {
  8   height: auto;
  9 }
 10 
 11 .swiper-tab {
 12    750rpx;
 13   height: 80rpx;
 14   background: #f5f7f9;
 15   display: flex;
 16   justify-content: space-around;
 17   margin-top: 18rpx;
 18   margin-bottom: 36rpx; 
 19 }
 20 
 21 .swiper-tab view {
 22    90rpx;
 23   height: 80rpx;
 24   font: 30rpx/76rpx "";
 25   color: #333;
 26   text-align: center;
 27 }
 28 
 29 .container-0 {
 30   box-sizing: border-box;
 31   
 32 }
 33 
 34 .container-1 {
 35   box-sizing: border-box;
 36 }
 37 
 38 .container-2 {
 39   box-sizing: border-box;
 40 }
 41 .container-3 {
 42   box-sizing: border-box;
 43 }
 44 
 45 .container-4 {
 46   box-sizing: border-box;
 47 }
 48 
 49 .orderNumber {
 50   float: left;
 51   font-size: 24rpx;
 52   padding-left: 20rpx;
 53   padding-top: 10rpx;
 54 
 55 }
 56 
 57 .orderStatus {
 58   float: right;
 59   font-size: 28rpx;
 60   padding-left: 20rpx;
 61   padding-top: 10rpx;
 62   padding-right: 19rpx;
 63   color: orangered;
 64 }
 65 
 66 .order {
 67   box-sizing: border-box;
 68    678rpx;
 69   background: #e6e6e6;
 70   margin: 0 auto;
 71   border-radius: 20rpx;
 72   padding-bottom: 32rpx; 
 73   margin-bottom: 20rpx;
 74 }
 75 
 76 image {
 77    150rpx;
 78   height: 150rpx;
 79 }
 80 
 81 .order .orderList {
 82   clear: both;
 83   display: flex;
 84   flex-direction: row;
 85   padding-top: 32rpx;
 86   padding-left: 20rpx;
 87 }
 88 
 89 .orderDetail {
 90   margin-left: 21rpx;
 91 }
 92 
 93 .orderDetail .orderTitle {
 94    260rpx;
 95   height: 62rpx;
 96   font: 28rpx/28rpx "";
 97   color: #333;
 98 }
 99 
100 .orderDetail .orderStyle {
101    103rpx;
102   height: 24rpx;
103   font: 24rpx/24rpx '';
104   color: #999;
105   margin-top: 17rpx;
106   display: flex;
107   flex-direction: row;
108 
109 }
110 
111 .orderInfor {
112   margin-left: 116rpx;
113 }
114 
115 .orderInfor .orderPrice {
116    98rpx;
117   height: 19rpx;
118   font-size: 24rpx;
119 }
120 
121 .orderInfor .orderNum {
122    30rpx;
123   height: 19rpx;
124   font-size: 24rpx;
125   color: #999;
126   margin-top: 26rpx;
127 }
128 
129 .orderSumPri {
130    286rpx;
131   height: 20rpx;
132   font: 22rpx/24rpx '';
133   color: #999;
134   display: flex;
135   flex-direction: row;
136   margin-left: 385rpx;
137   margin-top: 10rpx;
138 }
139 
140 .orderHander {
141   box-sizing: border-box;
142    100%;
143   display: flex;
144   flex-direction: row;
145   padding-left: 379rpx;
146   padding-top: 10rpx;
147 }
148 
149 .kk {
150   margin-left: 510rpx;
151 }
152 .orderCancel, .applyrefund{
153    130rpx;
154   height: 35rpx;
155   font: 19rpx/35rpx "";
156   color: #333;
157   background: #fff;
158   text-align: center;
159   margin-right: 19rpx;
160   border-radius: 26rpx;
161   border: 1rpx solid #333;
162 }
163 .orderConfirm, .urgeSent, .confirmReceipt {
164    130rpx;
165   height: 35rpx;
166   font: 19rpx/35rpx "";
167   color: #333;
168   background: #fff;
169   text-align: center;
170   border-radius: 20rpx;
171   border: 1rpx solid #333;
172 }
173  .order .mou{
174   color: #FF9130;
175 }
176 
177 myOrder.json
178 
179 {
180   "usingComponents": {}
181 }

效果类似于如下图，