我现在用flutter写了一个商城我需要你按照下面的要求给我对应的文件和代码所有的网络请求都要写在apiservice里面我的网络请求这部分需要一个model去解析我现在要求你帮我写一个结算页面和对应的model解析数据点击结算按钮弹出一个类似于iOS付款的框可以选择地址和新增地址并且可以选择支付宝或微信的单选然后就是结算按钮获取用户地址访问httpbookmusecloudtechgetaddr
以下是结算页面的代码示例:
import 'package:flutter/material.dart'; import 'package:your_app/api_service.dart'; import 'package:your_app/models/address_model.dart';
class CheckoutPage extends StatefulWidget { @override _CheckoutPageState createState() => _CheckoutPageState(); }
class _CheckoutPageState extends State
void _getAddressList() async {
List
void _submitOrder() async {
try {
String result = await ApiService.submitOrder(_selectedAddress.id, '支付宝');
List
void _addAddress() async { setState(() { _isAddingAddress = true; }); try { String result = await ApiService.saveAddress( addressId: '', province: _provinceController.text, city: _cityController.text, district: _districtController.text, addressLine: _addressLineController.text, phone: _phoneController.text, isDefault: 1, name: _nameController.text, ); // handle response data _getAddressList(); } catch (e) { // handle error } finally { setState(() { _isAddingAddress = false; }); } }
@override void initState() { super.initState(); _getAddressList(); }
@override void dispose() { _nameController.dispose(); _phoneController.dispose(); _provinceController.dispose(); _cityController.dispose(); _districtController.dispose(); _addressLineController.dispose(); super.dispose(); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('结算'), ), body: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ SizedBox(height: 16), Text('选择地址', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), SizedBox(height: 8), Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey[300]), borderRadius: BorderRadius.circular(8), ), child: Column( children: [ for (var address in _addressList) ListTile( onTap: () { setState(() { _selectedAddress = address; }); }, leading: Radio( value: address, groupValue: _selectedAddress, onChanged: (value) { setState(() { selectedAddress = value; }); }, ), title: Text(address.name), subtitle: Text('${address.province}${address.city}${address.district}${address.addressLine}'), ), Divider(), ListTile( onTap: () { showDialog( context: context, builder: () => AlertDialog( title: Text('新增地址'), content: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.min, children: [ TextField( controller: _nameController, decoration: InputDecoration(labelText: '收件人姓名'), ), TextField( controller: _phoneController, decoration: InputDecoration(labelText: '电话'), ), TextField( controller: _provinceController, decoration: InputDecoration(labelText: '省份'), ), TextField( controller: _cityController, decoration: InputDecoration(labelText: '城市'), ), TextField( controller: _districtController, decoration: InputDecoration(labelText: '区县'), ), TextField( controller: _addressLineController, decoration: InputDecoration(labelText: '详细地址'), ), ], ), ), actions: [ TextButton( onPressed: () { Navigator.pop(context); }, child: Text('取消'), ), TextButton( onPressed: _isAddingAddress ? null : _addAddress, child: _isAddingAddress ? CircularProgressIndicator() : Text('确定'), ), ], ), ); }, leading: Icon(Icons.add), title: Text('新增地址'), ), ], ), ), SizedBox(height: 16), Text('选择支付方式', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), SizedBox(height: 8), RadioListTile( value: '支付宝', groupValue: '支付宝', onChanged: (value) {}, title: Text('支付宝'), ), RadioListTile( value: '微信', groupValue: '支付宝', onChanged: (value) {}, title: Text('微信支付'), ), ], ), ), bottomNavigationBar: Container( height: kBottomNavigationBarHeight + 16, padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( border: Border(top: BorderSide(color: Colors.grey[300])), color: Colors.white, ), child: ElevatedButton( onPressed: _selectedAddress == null ? null : _submitOrder, child: Text('结算'), ), ), ); } }
以下是地址模型的代码示例:
class AddressModel { final int id; final String name; final String phone; final String province; final String city; final String district; final String addressLine; final bool isDefault;
AddressModel({ this.id, this.name, this.phone, this.province, 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'], province: json['province'], city: json['city'], district: json['district'], addressLine: json['addressLine'], isDefault: json['isDefault'] == 1, ); }
原文地址: https://www.cveoy.top/t/topic/fzgk 著作权归作者所有。请勿转载和采集!