小程序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": {}
}
效果类似于如下图，
