小程序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": {} }