Flutter-防京东商城项目-提交订单、去支付页面制作-44

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

代码文档

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

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

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

Flutter防京东商城源码(31-46)链接
本章效果：

1.把文件拖进来

CheckOutServices

import 'dart:convert';
import '../services/Storage.dart';
class CheckOutServices{
  //计算总价
  static getAllPrice(checkOutListData) {
    var tempAllPrice=0.0; 
    for (var i = 0; i < checkOutListData.length; i++) {
      if (checkOutListData[i]["checked"] == true) {
        tempAllPrice += checkOutListData[i]["price"] * checkOutListData[i]["count"];
      }
    }
    return tempAllPrice;
  }
  static removeUnSelectedCartItem() async{

    List _cartList=[];
    List _tempList=[];
    //获取购物车的数据
    try {
      List cartListData = json.decode(await Storage.getString('cartList'));
      _cartList = cartListData;
    } catch (e) {
      _cartList = [];
    }
 
    for (var i = 0; i < _cartList.length; i++) {
      if (_cartList[i]["checked"] == false) {
         _tempList.add(_cartList[i]);
      }
    }

    Storage.setString("cartList", json.encode(_tempList));
    
  }
}

2.回到页面

在立即下单按键点击方法里面添加下面的方法

2.1导入

import 'dart:convert';
import '../services/CheckOutServices.dart';
import '../provider/Cart.dart';

2.2添加代码

var cartProvider = Provider.of<Cart>(context);

2.3添加按键方法代码

child: RaisedButton(
  child:
      Text('立即下单', style: TextStyle(color: Colors.white)),
  color: Colors.red,




//-----------------------------------------------------------
  onPressed: () async{
      List userinfo=await UserServices.getUserInfo();
      //注意：商品总价保留一位小数          
      var allPrice=CheckOutServices.getAllPrice(checkOutProvider.checkOutListData).toStringAsFixed(1);                        
     
      //获取签名
      var sign=SignServices.getSign({
          "uid": userinfo[0]["_id"],                         
          "phone": this._addressList[0]["phone"],
          "address": this._addressList[0]["address"],
          "name": this._addressList[0]["name"], 
          "all_price":allPrice,
          "products": json.encode(checkOutProvider.checkOutListData),
          "salt":userinfo[0]["salt"]   //私钥
      });
      //请求接口
       var api = '${Config.domain}api/doOrder';
      var response = await Dio().post(api, data: {
        "uid": userinfo[0]["_id"],       
        "phone": this._addressList[0]["phone"],
        "address": this._addressList[0]["address"],
        "name": this._addressList[0]["name"], 
        "all_price":allPrice,
        "products": json.encode(checkOutProvider.checkOutListData),
        "sign": sign
      });        
       print(response);
       if(response.data["success"]){                       
          //删除购物车选中的商品数据
          await CheckOutServices.removeUnSelectedCartItem();

          //调用CartProvider更新购物车数据
          cartProvider.updateCartList();

          //跳转到支付页面
          Navigator.pushNamed(context, '/pay');
       }
  },
  //--------------------------------------------

上面写完之后报错的cartProvider方法找不到

4.创建一个支付页面，直接拖进来

import 'package:flutter/material.dart';
import '../widget/JdButton.dart';

class PayPage extends StatefulWidget {
  PayPage({Key key}) : super(key: key);

  _PayPageState createState() => _PayPageState();
}

class _PayPageState extends State<PayPage> {
  List payList = [
    {
      "title": "支付宝支付",
      "chekced": true,
      "image": "https://www.itying.com/themes/itying/images/alipay.png"
    },
    {
      "title": "微信支付",
      "chekced": false,
      "image": "https://www.itying.com/themes/itying/images/weixinpay.png"
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("去支付"),
      ),
      body: Column(
        children: <Widget>[
          Container(
              height: 400,
              padding: EdgeInsets.all(20),
              child: ListView.builder(
                itemCount: this.payList.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: <Widget>[
                      ListTile(
                        leading:
                            Image.network("${this.payList[index]["image"]}"),
                        title: Text("${this.payList[index]["title"]}"),
                        trailing: this.payList[index]["chekced"]
                            ? Icon(Icons.check)
                            : Text(""),
                        onTap: () {
                          //让payList里面的checked都等于false
                          setState(() {
                            for (var i = 0; i < this.payList.length; i++) {
                              this.payList[i]['chekced'] = false;
                            }
                            this.payList[index]["chekced"] = true;
                          });
                        },
                      ),
                      Divider(),
                    ],
                  );
                },
              )),
          JdButton(
            text: "支付",
            color: Colors.red,
            height: 74,
            cb: () {
              print('支付1111');
            },
          )
        ],
      ),
    );
  }
}

5.配置路由

import '../pages/Pay.dart';

'/pay': (context) => PayPage(),