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

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

时间：2020-02-20 13:37:05

订单管理

订单页面分析代码实现效果图展示订单详情页分析详解效果图付完款的未付款的

订单页面

分析

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

代码实现

改变顶部导航内容"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>

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;}