订单管理
订单页面分析代码实现效果图展示订单详情页分析详解效果图付完款的未付款的订单页面
分析
顶部改为"我的订单"上方为导航栏:全部、待付款、待发货、退款/退货下方为订单展示,并且通过点击订单可进订单详情页
代码实现
改变顶部导航内容"navigationBarTitleText": "我的订单"
界面:
上方使用组件Table并传对应的属性值关于
Table
前面文章已经讲解了,在商品列表代码那
<tab tabList="{{tabList}}" curr="{{curr}}" bind:tapwhere="_where"></tab><view class="order" wx:for="{{orderList}}" wx:for-index="idx" wx:for-item="item1" wx:key="idx" ><view class="content_"><navigator url="/pages/pay/pay?orderid={{item1.orderid}}" class="title"><view>订单编号:{{item1.orderid}}</view><text>{{item1.statu}}</text></navigator><navigator url="/pages/goods_detail/goods_detail?goods_id={{item2.goods.goods_id}}" class="card" wx:for="{{item1.goods}}" wx:for-index="gindex" wx:for-item="item2" wx:key="item2.goods.goods_id"><view class="card-img"><image src="{{item2.goods.goods_small_logo}}"></image></view><view class="card-text"><view class="card-text_"><text>{{item2.goods.goods_name}}</text><view><view>¥{{item2.goods.goods_price}}</view><text>x{{item2.shu}}</text></view></view></view></navigator></view><view class="bottom-title">共{{item1.goods[0].num}}件商品 实付:¥{{item1.goods[0].sum}}</view></view>
js
tabList:选项卡的选项orderList:订单,在本地存储好了,包含商品信息,状态,收货地址等等curr:选项卡选中的下标
函数:
onLoad(options)
页面加载执行,主要是接收选项卡传来的下标再调用onshow()
onshow()
页面显示时执行,主要是进行获取选项卡下标以及赋值对应的订单_where()
:选项卡点击事件,tab组件传来的
// pages/order/order.jsPage({/*** 页面的初始数据*/data: {tabList:['全部','待付款','待发货','退款/退货'],orderList:[],curr:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.onShow(options.curr);},/*** 生命周期函数--监听页面显示*/onShow: function (curr) {console.log(curr);let order=wx.getStorageSync('orderList')||[]console.log(order);let fahuo=order.findIndex((item)=>{return item.statu=='待发货';})let fukuan=order.findIndex((item)=>{return item.statu=='待付款';})if(curr!=undefined){if(curr==0){this.setData({orderList:order,curr:0})}else if(curr==1){this.setData({orderList:fukuan,curr:1})}else if(curr==2){this.setData({orderList:fahuo,curr:2})}else{this.setData({orderList:fukuan,curr:3})}}},/*导航栏点击事件,tab组件传来的 */_where(e){console.log(e.detail.index);let order=wx.getStorageSync('orderList')||[];var fahuo=order.filter((item)=>{return item.statu=='待发货';})var fukuan=order.filter((item)=>{return item.statu=='待付款';})//判断订单类型if(e.detail.index==0){//全部this.setData({orderList:order,curr:0})}else if(e.detail.index==1){//待付款console.log(fukuan);this.setData({orderList:fukuan,curr:1})}else if(e.detail.index==2){//待发货console.log(fahuo);this.setData({orderList:fahuo,curr:2})}else{this.setData({orderList:[],curr:3})}}})
css样式
.order {width: 100%;background-color: #f4f4f4;}.content_ {width: 100%;background-color: #fff;display: flex;flex-direction: column;}.title {width: 100%;line-height: 30px;justify-content: space-between;border-bottom: 1px solid #f5f8f4;padding: 0 20rpx;}.title>view {color: #666;}.title>text {color: #fa9b4e;}.bottom-title {width: 100%;text-align: right;line-height: 40px;background-color: #fff;padding: 0 20rpx;}.card {width: 100%;height: 100px;display: flex;flex-direction: row;}.card-img {height: 100px;width: 100px;padding: 7px 7px;}.card-img>image {width: 86px;height: 86px;}.card-text {height: 100px;width: 100%;display: flex;flex-direction: column;}.card-text_ {width: 100%;height: 60px;display: flex;flex-direction: row;}.card-text_>text {width: 80%;padding-left: 20rpx;color: #444;font-weight: 600;font-size: 10pt;}.card-text_>view {padding-right: 20rpx;width: 20%;text-align: right;}.card-text_>view>view {color: #444;font-weight: 600;margin-bottom: 10rpx;}.card-text_>view>text {font-size: 9pt;color: #999;}.card-button {width: 100%;line-height: 40px;display: flex;flex-direction: row;padding-left: 30rpx;}.card-button>view {background-color: #fff;line-height: 25px;width: 30%;margin-left: 10rpx;text-align: center;border-radius: 15px;border:1px solid#d6d6d6;color: #444;font-size: 9pt;}
效果图展示
全部订单:
点击不同的选项卡显示对应的状态订单:
这样显示对应状态的订单的订单页面就完成了~接下来实现订单详情页
订单详情页
分析
顶部改为"支付"上方为该订单的收货地址下方为订单详情页分为两种,一种是已付款,一种是未付款未付款则可以继续付款已付款则可查看订单详情
详解
其实也就是前边做的支付页,我在支付页进行了对应的判断,所以此处不需要再写了,直接上效果图
效果图
付完款的
未付款的
成功完结订单管理😀~该功能在支付页进行了对应的判断,
可以立即前往查看传送门(支付页)