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

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

1.创建订单模型orderModelFlutter-防京东商城项目-订单列表数据渲染、项目总结-46
2.添加订单页面的变成获取真实数据的内容Flutter-防京东商城项目-订单列表数据渲染、项目总结-46
导入

//订单列表数据模型
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),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
上一篇:Day06(Spring_test)46


下一篇:js图片上传验证图片格式和大小尺寸