18.5 下单成功界面

18.5 下单成功界面

image-20220729110144358

实现步骤：

第 1 步：api 接口

接口地址 post /orders

img

数据格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
    "billing": {
        "first_name": "ducafe",
        "last_name": "cat",
        "company": "",
        "address_1": "bj",
        "address_2": "",
        "city": "bj",
        "state": "CN2",
        "postcode": "100126",
        "country": "CN",
        "email": "ducafecat1@gmail.com",
        "phone": "1231232132"
    },
    "shipping": {
        "first_name": "ducafe",
        "last_name": "cat",
        "company": "",
        "address_1": "bj",
        "address_2": "",
        "city": "bj",
        "state": "CN2",
        "postcode": "100126",
        "country": "CN",
        "phone": ""
    },
    "line_items": [
        {
            "product_id": 13,
            "quantity": 1
        }
    ]
  "coupon_lines": [{"code":"123"}]
}

line_items 是你的商品，可以多个
billing 下单人
shipping 收货人
coupon_lines 优惠券

接口文件

lib/common/api/order.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import '../index.dart';

// 订单
class OrderApi {
  /// 创建订单
  static Future<OrderModel> crateOrder({
    // 商品列表
    required List<LineItem> lineItem,
    // 优惠券列表
    required List<CouponsModel> lineCoupons,
  }) async {
    var data = {
      // 商品列表
      "line_items": lineItem
          .map((e) => {"product_id": e.productId!, "quantity": e.quantity!})
          .toList(),

      // 优惠券
      "coupon_lines": lineCoupons.map((e) => {"code": e.code!}).toList(),

      // 账单地址
      "billing": UserService.to.profile.billing!.toJson(),

      // 送货地址
      "shipping": UserService.to.profile.shipping!.toJson(),
    };
    var res = await WPHttpService.to.post(
      '/orders',
      data: data,
    );
    return OrderModel.fromJson(res.data);
  }
}

第 2 步：完成界面

lib/pages/cart/buy_done/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 主视图
Widget _buildView() {
  return <Widget>[
    // 图
    ImageWidget.asset(
      AssetsImages.orderConfirmedPng,
      height: 300.w,
    ).paddingBottom(40.w),

    // 文字
    TextWidget.title2(LocaleKeys.orderConfirmationTitle.tr)
        .paddingBottom(10.w),
    TextWidget.body1(LocaleKeys.orderConfirmationDesc.tr).paddingBottom(50.w),

    // 返回按钮
    ButtonWidget.primary(
      LocaleKeys.commonBottomBack.tr,
      onTap: () => Get.back(),
    ).tight(
      width: 160.w,
      height: 50.w,
    ),
  ]
      .toColumn(
        mainAxisAlignment: MainAxisAlignment.center,
      )
      .center();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@override
Widget build(BuildContext context) {
  return GetBuilder<BuyDoneController>(
    init: BuyDoneController(),
    id: "buy_done",
    builder: (_) {
      return Scaffold(
        body: SafeArea(
          child: _buildView(),
        ),
      );
    },
  );
}

第 3 步：控制器

lib/pages/cart/buy_now/controller.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 下单 checkout
void onCheckout() async {
  // 商品 LineItem
  List<LineItem> lineItems = [
    LineItem(
      productId: product.id,
      quantity: quantity,
    ),
  ];

  // 提交订单
  OrderModel res = await OrderApi.crateOrder(
    lineItem: lineItems,
    lineCoupons: lineCoupons,
  );

  // 交易成功
  if (res.id != null) {
    // 提示
    Loading.success("Order created.");

    // goto 成功界面
    Get.offNamed(RouteNames.cartBuyDone, arguments: res);
  }
}

第 4 步：解析修正

lib/common/models/woo/order_model/line_item.dart

1
2
factory LineItem.fromJson(Map<String, dynamic> json) => LineItem(
	price: double.parse("${json['price']}"),

第 5 步：视图

lib/pages/cart/buy_now/view.dart

1
2
3
4
5
6
7
8
9
10
11
// 底部按钮
Widget _buildButtons() {
    ...

    // 立刻购买 Place Order
    ButtonWidget.primary(
      LocaleKeys.placeOrderBtnPlaceOrder.tr,
      onTap: controller.onCheckout, // 立刻购买事件
    ).height(50.w).expanded(),

    ...

提交代码到 git