微信小程序商城项目实战(第十篇:订单管理)

订单页面

分析

• 顶部改为"我的订单"
• 上方为导航栏:全部、待付款、待发货、退款/退货
• 下方为订单展示,并且通过点击订单可进订单详情页

代码实现

改变顶部导航内容"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.js
Page({

    /**
     * 页面的初始数据
     */
    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;
  }
  

效果图展示

全部订单：

点击不同的选项卡显示对应的状态订单:

这样显示对应状态的订单的订单页面就完成了~接下来实现订单详情页

订单详情页

分析

• 顶部改为"支付"
• 上方为该订单的收货地址
• 下方为订单详情页

---

• 分为两种,一种是已付款,一种是未付款
  • 未付款则可以继续付款
  • 已付款则可查看订单详情

详解

其实也就是前边做的支付页,我在支付页进行了对应的判断,所以此处不需要再写了，直接上效果图

效果图

付完款的

未付款的

成功完结订单管理~该功能在支付页进行了对应的判断,
可以立即前往查看传送门(支付页)