小程序swiper实现订单页面

小程序swiper实现订单页面

myOrder.wxml

<!--pages/myorder/myorder.wxml--> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view> </block> </view> <swiper current="{{currtab}}" style="height:{{deviceH-31}}px" bindchange="onTabChange"> <swiper-item> <scroll-view class="hot-box" scroll-y="true" style="height: 100%;"> <view class="container-0"> <view class="order" wx:for="{{allOrderS}}" wx:key="{{item.orderid}}" wx:for-item="order"> <view class="orderNumber">订单编号：{{order.orderid}}</view> <view class="orderStatus">{{order.status}}</view> <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data-orderid="{{order.orderid}}"> <image src='{{item.image}}'></image> <view class='orderDetail'> <view class='orderTitle'>{{item.title}}</view> <view class='orderStyle'> <view class="orderColor">{{item.properties}}</view> <!-- <view class="orderSize">{{item.size}},</view> <view class="orderUnit">{{item.unit}}</view> --> </view> </view> <view class='orderInfor'> <view class='orderPrice'>{{item.price}}</view> <view class='orderNum'>{{item.number}}</view> </view> </view> <view class='orderSumPri'> 共{{order.totalNumber}}件商品 合计： <view class='orderPri'>{{order.totalPrice}}元</view> </view> <view class="orderHander"> <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view> <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view> </view> </view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view class="hot-box" scroll-y="true" style="height: 100%;"> <view class="container-1"> <view class="order" wx:for="{{waitPayOrder}}" wx:key="{{item.orderid}}" wx:for-item="order"> <view class="orderNumber">{{order.orderid}}</view> <view class="orderStatus">{{order.status}}</view> <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow"> <image src='{{item.image}}'></image> <view class='orderDetail'> <view class='orderTitle'>{{item.title}}</view> <view class='orderStyle'> <view class="orderColor">{{item.properties}}</view> <!-- <view class="orderColor">{{item.color}}</view> <view class="orderSize">{{item.size}}</view> <view class="orderUnit">{{item.unit}}</view> --> </view> </view> <view class='orderInfor'> <view class='orderPrice'>{{item.price}}</view> <view class='orderNum'>{{item.number}}</view> </view> </view> <view class='orderSumPri'> 共{{order.totalNumber}}件商品 合计： <view class='orderPri'>{{order.totalPrice}}元</view> </view> <view class="orderHander"> <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view> <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view> </view> </view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view class="hot-box" scroll-y="true" style="height: 100%;"> <view class="container-2"> <view class="order" wx:for="{{waitSentOrder}}" wx:key="{{item.orderid}}" wx:for-item="order"> <view class="orderNumber">{{order.orderid}}</view> <view class="orderStatus">{{order.status}}</view> <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow"> <image src='{{item.image}}'></image> <view class='orderDetail'> <view class='orderTitle'>{{item.title}}</view> <view class='orderStyle'> <view class="orderColor">{{item.properties}}</view> <!-- <view class="orderColor">{{item.color}}</view> <view class="orderSize">{{item.size}}</view> <view class="orderUnit">{{item.unit}}</view> --> </view> </view> <view class='orderInfor'> <view class='orderPrice'>{{item.price}}</view> <view class='orderNum'>{{item.number}}</view> </view> </view> <view class='orderSumPri'> 共{{order.totalNumber}}件商品 合计： <view class='orderPri'>{{order.totalPrice}}元</view> </view> <view class="orderHander"> <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view> <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view> </view> </view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view class="hot-box" scroll-y="true" style="height: 100%;"> <view class="container-3"> <view class="order" wx:for="{{waitReceivedOrder}}" wx:key="{{item.orderid}}" wx:for-item="order"> <view class="orderNumber">{{order.orderid}}</view> <view class="orderStatus">{{order.status}}</view> <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow"> <image src='{{item.image}}'></image> <view class='orderDetail'> <view class='orderTitle'>{{item.title}}</view> <view class='orderStyle'> <view class="orderColor">{{item.properties}}</view> </view> </view> <view class='orderInfor'> <view class='orderPrice'>{{item.price}}</view> <view class='orderNum'>{{item.number}}</view> </view> </view> <view class='orderSumPri'> 共{{order.totalNumber}}件商品 合计： <view class='orderPri'>{{order.totalPrice}}元</view> </view> <view class="orderHander"> <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view> <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view> </view> </view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view class="hot-box" scroll-y="true" style="height: 100%;"> <view class="container-4"> <view class="order" wx:for="{{completeOrder}}" wx:key="{{item.orderid}}" wx:for-item="order"> <view class="orderNumber">{{order.orderid}}</view> <view class="orderStatus">{{order.status}}</view> <view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data-> <image src='{{item.image}}'></image> <view class='orderDetail'> <view class='orderTitle'>{{item.title}}</view> <view class='orderStyle'> <view class="orderColor">{{item.properties}}</view> <!-- <view class="orderColor">{{item.color}}</view> <view class="orderSize">{{item.size}}</view> <view class="orderUnit">{{item.unit}}</view> --> </view> </view> <view class='orderInfor'> <view class='orderPrice'>{{item.price}}</view> <view class='orderNum'>{{item.number}}</view> </view> </view> <view class='orderSumPri'> 共{{order.totalNumber}}件商品 合计： <view class='orderPri'>{{order.totalPrice}}元</view> </view> <view class="orderHander"> <view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view> <view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view> </view> </view> </view> </scroll-view> </swiper-item> </swiper> 

myOrder.js

// pages/myOrder/myOrder.js import { ApiUrl } from '../../utils/apiurl.js'; import { httpReq } from '../../utils/http.js'; Page({ /** * 页面的初始数据 */ data: { currtab: 0,//当前滑块的index swipertab: [{ name: '所有', index: 0 }, { name: '待付款', index: 1 }, { name: '待发货', index: 2 }, { name: '待收货', index: 3 }, { name: '已完成', index: 4 }], height: 0, allOrderS: [],//所有订单 waitPayOrder: [],//待付款订单 waitSentOrder: [],//待发货订单 waitReceivedOrder: [],//待收货订单 completeOrder: [],//已完成订单 token: '',//app.js里面拿token vipid: '',//会员号 ifhiddenone: true,//按钮隐藏 ifhiddentwo: false //按钮隐藏 }, /** * 请求数据 */ getGoods: function () { let that = this httpReq({ header: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, //获取数据的接口， url: ApiUrl.phplist + 'order/getorder?token=' + this.data.token + '&member_id=' + this.data.vipid, }).then((res) => { let lists = res.data.lists //数据重组 let orders = [] let waitPayOrder = [] let waitSentOrder = [] let waitReceivedOrder = [] let completeOrder = [] for (let m in lists) { let ss = {} let goods = [] ss.orderid = lists[m].order_sn ss.totalNumber = Number(lists[m].pay_num) ss.totalPrice = Number(lists[m].order_amount) if (lists[m].pay_status == '0') { ss.status = "待付款" ss.orderHandleOne = '取消订单' ss.orderHandleTwo = '确认付款' } else if (lists[m].pay_status == '1') { ss.status = "已取消" ss.ifhiddenone = true, ss.ifhiddentwo = true } else if (lists[m].pay_status == '2') { ss.status = "待发货" ss.orderHandleOne = '催TA发货' ss.orderHandleTwo = '申请退款' } else if (lists[m].pay_status == '3') { ss.status = "待收货" ss.orderHandleOne = '申请退款' ss.orderHandleTwo = '确认收货' } else { ss.status = "已完成" ss.orderHandleTwo = '删除订单' ss.ifhiddenone = true } for (let n in lists[m].goods) { let mm = {} // console.log(lists[m].goods[n]) if (lists[m].goods[n].hasOwnProperty('goods_logo')) { mm.image = lists[m].goods[n].goods_logo } if (lists[m].goods[n].hasOwnProperty('goods_name')) { mm.title = lists[m].goods[n].goods_name } if (lists[m].goods[n].hasOwnProperty('goods_price')) { mm.price = lists[m].goods[n].goods_price } if (lists[m].goods[n].hasOwnProperty('number')) { mm.number = lists[m].goods[n].number } goods.push(mm) ss.goods = goods } if (ss.status == "待付款") { waitPayOrder.push(ss) } if (ss.status == "待发货") { waitSentOrder.push(ss) } if (ss.status == "待收货") { waitReceivedOrder.push(ss) } if (ss.status == "已完成") { completeOrder.push(ss) } completeOrder orders.push(ss) } // console.log(orders) // console.log(that) that.setData({ allOrderS: orders, waitPayOrder: waitPayOrder, waitSentOrder: waitSentOrder, waitReceivedOrder: waitReceivedOrder, completeOrder: completeOrder }) }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (option) { let token = wx.getStorageSync('token')//缓存中获取数据 let vipid = wx.getStorageSync('vipid')//缓存中获取vipid this.setData({ token: token, vipid: vipid }) //拿后台数据 this.getGoods() //外部进入时默认选swiper的index为currtab,若是获取失败就默认设置为0. if (option.currtab == null || option.currtab == '') { option.currtab = 0 } else { let tab = option.currtab this.setData({ currtab: tab }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.getDeviceInfo() }, /* * 设置swiper高度，swiper自己高度限制必须重写不然里面内容过多不显示，这是swiper自己的坑。 */ getDeviceInfo: function () { let that = this wx.getSystemInfo({ success: function (res) { that.setData({ deviceW: res.windowWidth, deviceH: res.windowHeight }) } }) }, /** * @Explain：选项卡点击切换 */ tabSwitch: function (e) { var that = this let tab = e.target.dataset.current if (this.data.currtab === tab) { return false } else { that.setData({ currtab: tab }) } }, /** * 选项卡滑动切换页面 */ onTabChange: function (e) { var that = this let tab = e.detail.current that.setData({ currtab: tab }) }, /** * 点击订单进入订单详情 */ orderDetailShow: function(e) { // console.log(e.currentTarget.dataset.orderid) let orderid = e.currentTarget.dataset.orderid wx.navigateTo({ //订单详情接口 url: '../orderDetail/orderDetail?orderid=' + orderid }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动做 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) 

myOrder.wxss

/* pages/myorder/myorder.wxss */ .on { color: red; border-bottom:2px solid red; } swiper { height: auto; } .swiper-tab { width: 750rpx; height: 80rpx; background: #f5f7f9; display: flex; justify-content: space-around; margin-top: 18rpx; margin-bottom: 36rpx; } .swiper-tab view { width: 90rpx; height: 80rpx; font: 30rpx/76rpx ""; color: #333; text-align: center; } .container-0 { box-sizing: border-box; } .container-1 { box-sizing: border-box; } .container-2 { box-sizing: border-box; } .container-3 { box-sizing: border-box; } .container-4 { box-sizing: border-box; } .orderNumber { float: left; font-size: 24rpx; padding-left: 20rpx; padding-top: 10rpx; } .orderStatus { float: right; font-size: 28rpx; padding-left: 20rpx; padding-top: 10rpx; padding-right: 19rpx; color: orangered; } .order { box-sizing: border-box; width: 678rpx; background: #e6e6e6; margin: 0 auto; border-radius: 20rpx; padding-bottom: 32rpx; margin-bottom: 20rpx; } image { width: 150rpx; height: 150rpx; } .order .orderList { clear: both; display: flex; flex-direction: row; padding-top: 32rpx; padding-left: 20rpx; } .orderDetail { margin-left: 21rpx; } .orderDetail .orderTitle { width: 260rpx; height: 62rpx; font: 28rpx/28rpx ""; color: #333; } .orderDetail .orderStyle { width: 103rpx; height: 24rpx; font: 24rpx/24rpx ''; color: #999; margin-top: 17rpx; display: flex; flex-direction: row; } .orderInfor { margin-left: 116rpx; } .orderInfor .orderPrice { width: 98rpx; height: 19rpx; font-size: 24rpx; } .orderInfor .orderNum { width: 30rpx; height: 19rpx; font-size: 24rpx; color: #999; margin-top: 26rpx; } .orderSumPri { width: 286rpx; height: 20rpx; font: 22rpx/24rpx ''; color: #999; display: flex; flex-direction: row; margin-left: 385rpx; margin-top: 10rpx; } .orderHander { box-sizing: border-box; width: 100%; display: flex; flex-direction: row; padding-left: 379rpx; padding-top: 10rpx; } .kk { margin-left: 510rpx; } .orderCancel, .applyrefund{ width: 130rpx; height: 35rpx; font: 19rpx/35rpx ""; color: #333; background: #fff; text-align: center; margin-right: 19rpx; border-radius: 26rpx; border: 1rpx solid #333; } .orderConfirm, .urgeSent, .confirmReceipt { width: 130rpx; height: 35rpx; font: 19rpx/35rpx ""; color: #333; background: #fff; text-align: center; border-radius: 20rpx; border: 1rpx solid #333; } .order .mou{ color: #FF9130; } 

myOrder.json

效果相似于以下图，{
  "usingComponents": {} }