Flutter商城结算页面开发：地址选择、支付方式选择和订单提交

Flutter 商城结算页面开发：地址选择、支付方式选择和订单提交

本文将详细介绍如何使用 Flutter 开发一个商城结算页面，包括地址选择、支付方式选择和订单提交功能。我们将使用 API 服务获取地址信息并解析数据，并提供示例代码以供参考。

结算页面：

import 'package:flutter/material.dart';
import 'package:your_app_name/models/address_model.dart';
import 'package:your_app_name/services/apiservice.dart';

class CheckoutPage extends StatefulWidget {
  @override
  _CheckoutPageState createState() => _CheckoutPageState();
}

class _CheckoutPageState extends State<CheckoutPage> {
  int _selectedAddressIndex = -1;
  List<AddressModel> _addresses = [];

  @override
  void initState() {
    super.initState();
    _getAddresses();
  }

  void _getAddresses() async {
    List<AddressModel> addresses = await ApiService.getAddresses();
    setState(() {
      _addresses = addresses;
      _selectedAddressIndex = _getDefaultAddressIndex();
    });
  }

  int _getDefaultAddressIndex() {
    for (int i = 0; i < _addresses.length; i++) {
      if (_addresses[i].isDefault) {
        return i;
      }
    }
    return -1;
  }

  void _selectAddress(int index) {
    setState(() {
      _selectedAddressIndex = index;
    });
  }

  void _addNewAddress() async {
    AddressModel newAddress = await ApiService.addNewAddress(
      name: '宋涛',
      phone: '15678880290',
      provience: '天津市',
      city: '和平区',
      district: '五常市',
      addressLine: '广场小区',
      isDefault: _addresses.isEmpty ? 1 : 0,
    );
    setState(() {
      _addresses.add(newAddress);
      _selectedAddressIndex = _addresses.length - 1;
    });
  }

  void _submitOrder() async {
    if (_selectedAddressIndex == -1) {
      // No address selected
      return;
    }
    String paymentMethod = '支付宝'; // or '微信'
    String result = await ApiService.submitOrder(
      addressId: _addresses[_selectedAddressIndex].id,
      paymentMethod: paymentMethod,
    );
    List<dynamic> response = json.decode(result);
    String qrCodeUrl = response[0];
    int orderId = response[1];
    _pollOrderStatus(orderId);
    // Show payment dialog with qrCodeUrl
  }

  void _pollOrderStatus(int orderId) async {
    while (true) {
      String status = await ApiService.queryOrderStatus(orderId);
      if (status == '支付成功') {
        // Show success message and navigate back to order list
        return;
      } else if (status == '支付失败' || status == '已关闭') {
        // Show error message and stay on this page
        return;
      }
      await Future.delayed(Duration(seconds: 1));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('结算'),
      ),
      body: ListView(
        padding: EdgeInsets.all(16),
        children: [
          Text(
            '请选择地址',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: RaisedButton(
                  onPressed: _addNewAddress,
                  child: Text('新增地址'),
                ),
              ),
              SizedBox(width: 16),
              Expanded(
                child: RaisedButton(
                  onPressed: _getAddresses,
                  child: Text('刷新地址列表'),
                ),
              ),
            ],
          ),
          SizedBox(height: 16),
          if (_addresses.isEmpty)
            Text('暂无地址')
          else
            Column(
              children: _addresses
                  .asMap()
                  .entries
                  .map(
                    (entry) => ListTile(
                      onTap: () => _selectAddress(entry.key),
                      selected: entry.key == _selectedAddressIndex,
                      title: Text(entry.value.addressLine),
                      subtitle: Text('${entry.value.provience}${entry.value.city}${entry.value.district}'),
                    ),
                  )
                  .toList(),
            ),
          SizedBox(height: 32),
          RaisedButton(
            onPressed: _submitOrder,
            child: Text('结算'),
          ),
        ],
      ),
    );
  }
}

**ApiService：**

```dart
import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:your_app_name/models/address_model.dart';

class ApiService {
  static const String baseUrl = 'http://book.musecloud.tech';

  static Dio dioWithCookie = Dio(BaseOptions(
    baseUrl: baseUrl,
    connectTimeout: 5000,
    receiveTimeout: 5000,
  ));

  static Future<List<AddressModel>> getAddresses() async {
    try {
      Response response = await dioWithCookie.get('$baseUrl/getaddresses');
      List<dynamic> data = json.decode(response.data);
      List<AddressModel> addresses = data.map((item) => AddressModel.fromJson(item)).toList();
      return addresses;
    } catch (e) {
      throw e;
    }
  }

  static Future<AddressModel> addNewAddress({
    String name,
    String phone,
    String provience,
    String city,
    String district,
    String addressLine,
    int isDefault,
  }) async {
    try {
      String query = 'addressId=&provience=$provience&city=$city&district=$district&address_line=$addressLine&phone=$phone&isdefault=$isDefault&name=$name';
      Response response = await dioWithCookie.get('$baseUrl?$query');
      AddressModel newAddress = AddressModel.fromJson(json.decode(response.data));
      return newAddress;
    } catch (e) {
      throw e;
    }
  }

  static Future<String> submitOrder(int addressId, String paymentMethod) async {
    try {
      Response response = await dioWithCookie.get(
        '$baseUrl/submitorder',
        queryParameters: {
          'addressId': addressId,
          'paymentMethod': paymentMethod,
        },
      );
      String result = response.data;
      return result;
    } catch (e) {
      throw e;
    }
  }

  static Future<String> queryOrderStatus(int orderId) async {
    try {
      Response response = await dioWithCookie.get('$baseUrl/order/queryOrderStatus?orderSn=$orderId');
      String status = response.data;
      return status;
    } catch (e) {
      throw e;
    }
  }
}

**Model：**

```dart
class AddressModel {
  int id;
  String name;
  String phone;
  String provience;
  String city;
  String district;
  String addressLine;
  int isDefault;

  AddressModel({
    this.id,
    this.name,
    this.phone,
    this.provience,
    this.city,
    this.district,
    this.addressLine,
    this.isDefault,
  });

  factory AddressModel.fromJson(Map<String, dynamic> json) {
    return AddressModel(
      id: json['id'],
      name: json['name'],
      phone: json['phone'],
      provience: json['provience'],
      city: json['city'],
      district: json['district'],
      addressLine: json['addressLine'],
      isDefault: json['isDefault'],
    );
  }
}

代码说明：

CheckoutPage：结算页面，负责展示地址列表、支付方式选择和订单提交按钮。
_getAddresses()：从 API 获取地址列表并更新页面状态。
_getDefaultAddressIndex()：查找默认地址的索引。
_selectAddress()：选择地址。
_addNewAddress()：新增地址，调用 API 添加新地址。
_submitOrder()：提交订单，调用 API 提交订单并获取支付二维码。
_pollOrderStatus()：轮询查询订单状态，直到订单状态为'支付成功'或'支付失败'。
ApiService：API 服务类，负责与后端 API 交互，包含获取地址列表、新增地址、提交订单和查询订单状态等方法。
AddressModel：地址模型类，用于解析 API 返回的地址数据。

注意：

为了简化代码，代码中没有包含支付功能，实际开发过程中需要根据实际需求实现支付功能。
代码中使用的 API 接口地址和返回数据格式仅供参考，请根据实际项目进行修改。
代码中使用了 Dio 包进行网络请求，请确保项目中已经安装了 Dio 包。

总结：

本文介绍了使用 Flutter 开发商城结算页面的基本流程，包括地址选择、支付方式选择和订单提交功能。代码示例可以帮助你快速入门 Flutter 商城开发，并提供了一些实用的开发技巧。希望本文能对你有所帮助！