Flutter-防京东商城项目-订单列表数据渲染、项目总结-46

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果：

1.创建订单模型orderModel
OrderModel

class OrderModel {
  bool success;
  String message;
  List<Result> result;

  OrderModel({this.success, this.message, this.result});

  OrderModel.fromJson(Map<String, dynamic> json) {
    success = json['success'];
    message = json['message'];
    if (json['result'] != null) {
      result = new List<Result>();
      json['result'].forEach((v) {
        result.add(new Result.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['success'] = this.success;
    data['message'] = this.message;
    if (this.result != null) {
      data['result'] = this.result.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Result {
  String sId;
  String uid;
  String name;
  String phone;
  String address;
  String allPrice;
  int payStatus;
  int orderStatus;
  List<OrderItem> orderItem;

  Result(
      {this.sId,
      this.uid,
      this.name,
      this.phone,
      this.address,
      this.allPrice,
      this.payStatus,
      this.orderStatus,
      this.orderItem});

  Result.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    uid = json['uid'];
    name = json['name'];
    phone = json['phone'];
    address = json['address'];
    allPrice = json['all_price'];
    payStatus = json['pay_status'];
    orderStatus = json['order_status'];
    if (json['order_item'] != null) {
      orderItem = new List<OrderItem>();
      json['order_item'].forEach((v) {
        orderItem.add(new OrderItem.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['uid'] = this.uid;
    data['name'] = this.name;
    data['phone'] = this.phone;
    data['address'] = this.address;
    data['all_price'] = this.allPrice;
    data['pay_status'] = this.payStatus;
    data['order_status'] = this.orderStatus;
    if (this.orderItem != null) {
      data['order_item'] = this.orderItem.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class OrderItem {
  String sId;
  String orderId;
  String productTitle;
  String productId;
  int productPrice;
  String productImg;
  int productCount;
  String selectedAttr;
  int addTime;

  OrderItem(
      {this.sId,
      this.orderId,
      this.productTitle,
      this.productId,
      this.productPrice,
      this.productImg,
      this.productCount,
      this.selectedAttr,
      this.addTime});

  OrderItem.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    orderId = json['order_id'];
    productTitle = json['product_title'];
    productId = json['product_id'];
    productPrice = json['product_price'];
    productImg = json['product_img'];
    productCount = json['product_count'];
    selectedAttr = json['selected_attr'];
    addTime = json['add_time'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['order_id'] = this.orderId;
    data['product_title'] = this.productTitle;
    data['product_id'] = this.productId;
    data['product_price'] = this.productPrice;
    data['product_img'] = this.productImg;
    data['product_count'] = this.productCount;
    data['selected_attr'] = this.selectedAttr;
    data['add_time'] = this.addTime;
    return data;
  }
}

2.添加订单页面的变成获取真实数据的内容

导入

//订单列表数据模型
import '../config/Config.dart';
import 'package:dio/dio.dart';
import '../model/OrderModel.dart';
import '../services/UserServices.dart';
import '../services/SignServices.dart';

3.替换下面的内容

class _OrderPageState extends State<OrderPage> {
  List _orderList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._getListData();
  }

  void _getListData() async {
    List userinfo = await UserServices.getUserInfo();

    var tempJson = {"uid": userinfo[0]['_id'], "salt": userinfo[0]["salt"]};

    var sign = SignServices.getSign(tempJson);

    var api =
        '${Config.domain}api/orderList?uid=${userinfo[0]['_id']}&sign=${sign}';

    var response = await Dio().get(api);
    print(response.data is Map);

    setState(() {
      var orderMode = new OrderModel.fromJson(response.data);

      this._orderList = orderMode.result;

      print(this._orderList[0].name);
    });
  }

  //自定义商品列表组件

  List<Widget> _orderItemWidget(orderItems) {
    List<Widget> tempList = [];
    for (var i = 0; i < orderItems.length; i++) {
      tempList.add(Column(
        children: <Widget>[
          SizedBox(height: 10),
          ListTile(
            leading: Container(
              width: ScreenAdapter.width(120),
              height: ScreenAdapter.height(120),
              child: Image.network(
                '${orderItems[i].productImg}',
                fit: BoxFit.cover,
              ),
            ),
            title: Text("${orderItems[i].productTitle}"),
            trailing: Text('x${orderItems[i].productCount}'),
          ),
          SizedBox(height: 10)
        ],
      ));
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我的订单"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(0, ScreenAdapter.height(80), 0, 0),
            padding: EdgeInsets.all(ScreenAdapter.width(16)),
            child: ListView(
                children: this._orderList.map((value) {
              return InkWell(
                onTap: (){

                  Navigator.pushNamed(context, '/orderinfo');
                },
                child: Card(
                  child: Column(
                    children: <Widget>[
                      ListTile(
                        title: Text("订单编号：${value.sId}",
                            style: TextStyle(color: Colors.black54)),
                      ),
                      Divider(),
                      Column(
                        children: this._orderItemWidget(value.orderItem),
                      ),
                      SizedBox(height: 10),
                      ListTile(
                        leading: Text("合计：￥${value.allPrice}"),
                        trailing: FlatButton(
                          child: Text("申请售后"),
                          onPressed: () {},
                          color: Colors.grey[100],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }).toList()),
          ),
          Positioned(
            top: 0,
            width: ScreenAdapter.width(750),
            height: ScreenAdapter.height(76),
            child: Container(
              width: ScreenAdapter.width(750),
              height: ScreenAdapter.height(76),
              color: Colors.white,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Text("全部", textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: Text("待付款", textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: Text("待收货", textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: Text("已完成", textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: Text("已取消", textAlign: TextAlign.center),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}