微信小程序-订单页面

说明：头部有一个三种预约状态的切换

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}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange"><!-- 完成 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view  class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" "><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">预定时间: {{item.time}}</view><text class="productPrice">当前状态：{{item.status}}</text></view></view><view class="productCount"><view><text>合计：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item><!-- 待付款 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" "><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">预定时间: {{item.time}}</view><text class="productPrice">当前状态：{{item.status}}</text></view></view><view class="productCount"><view><text>合计：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item><!-- 取消 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" "><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">预定时间: {{item.time}}</view><text class="productPrice">当前状态：{{item.status}}</text></view></view><view class="productCount"><view><text>合计：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item></swiper>

wxss样式：

/*切换栏*/
.swiper-tab {height: 40px;line-height: 40px;background: #3B3B3B;color:#fff ;display: flex;position: relative;z-index: 2;flex-direction: row;justify-content: center;align-items: center;border-bottom:1px solid black;
}.swiper-tab-list {margin: 0 30px;padding: 0 4px;font-size: 15px;
}.on {border-bottom:2px solid #fff;color: #f5f5f5;
}.navTopList {display: flex;width: 100%;height: 70rpx;background: #fff;border-bottom: 1rpx solid #BEBEBE    ;margin-top:5px;
}.navTopList .order-info {text-align: center;
}.navTopList .order-info view {width: 56rpx;height: 56rpx;margin-left: 31rpx;
}.navTopList .order-info text {font-size: 34rpx;
}.navTopList .order-info text.active {color: #ff6662;
}.navTopList .ywc,.navTopList .dfk,.navTopList .yqx {flex: 1;
}/*订单列表*/
.orderDetails {background: #fff;border-bottom: 20rpx solid #f5f5f5;
}.orderListTitle {height: 100rpx;line-height: 100rpx;border-bottom: 1rpx solid #BEBEBE;
}.orderListTitle .userName {padding-right: 50rpx;margin-left:10px;
}.orderListTitle .orderStatus {float: right;margin-right: 20rpx;color: #2f7b27;font-size: 34rpx;
}.orderListDetails {display: flex;height: 200rpx;border-bottom: 1rpx solid #f3f3f3;
}.orderListDetails .productImg {flex: 1;height:180rpx;width:120px;margin-top: 20rpx;margin-left: 20rpx;
}.orderListDetails .productImg image {width: 100px;height: 90%;
}.orderListDetails .productInfo {flex: 4;margin: 40rpx 10px 20px 30rpx;font-size:15px;}.orderListDetails .productInfo .productTitle {font-size:15px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom:10px;
}.productCount {height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #f3f3f3;
}.productCount>view {float: right;margin-right: 30rpx;
}

js：主要是在data中给切换栏配置参数，和默认显示第几个栏；

// pages/order/order.js
Page({/*** 页面的初始数据*/data: {currtab: 0,swipertab: [{ name: '已完成', index: 0 }, { name: '待付款', index: 1 }, { name: '已取消', index: 2 }],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {// 页面渲染完成this.getDeviceInfo()this.orderShow()},getDeviceInfo: function () {let that = thiswx.getSystemInfo({success: function (res) {that.setData({deviceW: res.windowWidth,deviceH: res.windowHeight})}})},/*** @Explain：选项卡点击切换*/tabSwitch: function (e) {var that = thisif (this.data.currtab === e.target.dataset.current) {return false} else {that.setData({currtab: e.target.dataset.current})}},tabChange: function (e) {this.setData({ currtab: e.detail.current })this.orderShow()},orderShow: function () {let that = thisswitch (this.data.currtab) {case 0:that.alreadyShow()breakcase 1:that.waitPayShow()breakcase 2:that.lostShow()break}},alreadyShow: function(){this.setData({alreadyOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已结束", url: "../../images/bad0.png", money: "132" }, { name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未开始", url: "../../images/bad3.jpg", money: "205" }]})},waitPayShow:function(){this.setData({waitPayOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未开始", url: "../../images/bad1.jpg", money: "186" }],})},lostShow: function () {this.setData({lostOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未开始", url: "../../images/bad1.jpg", money: "122" }],})},})

微信小程序-订单页面相关推荐

微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
微信小程序订单页面格式
我在开发一个点餐小程序时,遇到了一个问题,用户通过小程序进入商家,选中自己想下单的菜,如果同一个选了两份,那么订单会显示菜名乘以2,如果在餐厅吃的情况下是没有问题的,如果要有一份带走,那这时候出现的问 ...
微信小程序-订单页面——可左右滑动（附源码）
说明:头部有一个三种预约状态的切换 wxml页面:  <view class="swiper-tab"><block wx:f ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序订单扫码结算的步骤
微信小程序订单扫码结算的步骤,在小程序结算中,如果用户下单后到店自提或货到付款的方式,这种情况用户可以提现下单或预定下单,下单成功后,用户到店里自提或等待商家配送到家,在收到订单产品之后,商家扫码用 ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...

微信小程序-订单页面

微信小程序-订单页面相关推荐

最新文章

热门文章