我现在用flutter写了一个商城我需要你按照下面的要求给我对应的文件和代码所有的网络请求都要写在apiservice里面我的网络请求这部分需要一个model去解析我现在要求你帮我改购物车页面的代码购物车需要请求网址是httpbookmusecloudtechgetshoppingcart返回的是一个json数组数组的第一个是每个购物车每个购物车都在json数组的第二项有对应的商品json数组第三
购物车页面的代码修改如下:
import 'package:flutter/material.dart';
import '../models/cart_item.dart';
import '../models/product.dart';
import '../services/api_service.dart';
class CartPage extends StatefulWidget {
@override
_CartPageState createState() => _CartPageState();
}
class _CartPageState extends State<CartPage> {
List<CartItem> cartItems = [];
List<Product> products = [];
double totalPrice = 0.0;
@override
void initState() {
super.initState();
_fetchData();
}
_fetchData() async {
try {
List<dynamic> data = await ApiService.getShoppingCart();
setState(() {
cartItems = data[0]
.map<CartItem>((json) => CartItem.fromJson(json))
.toList();
products = data[1]
.map<Product>((json) => Product.fromJson(json))
.toList();
totalPrice = data[2];
});
} catch (e) {
print(e);
}
}
_updateCart(int productId, int quantity) async {
try {
List<dynamic> data = await ApiService.updateCart(productId, quantity);
setState(() {
totalPrice = data[0];
int cartIndex = cartItems.indexWhere((item) => item.productId == productId);
cartItems[cartIndex] = CartItem.fromJson(data[1]);
});
} catch (e) {
print(e);
}
}
_deleteCart(int productId) async {
try {
double newTotalPrice = await ApiService.deleteCart(productId);
setState(() {
cartItems.removeWhere((item) => item.productId == productId);
totalPrice = newTotalPrice;
});
} catch (e) {
print(e);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('购物车'),
),
body: ListView.builder(
itemCount: cartItems.length,
itemBuilder: (context, index) {
CartItem cartItem = cartItems[index];
Product product =
products.firstWhere((p) => p.id == cartItem.productId);
return ListTile(
leading: Image.network(product.imageUrl),
title: Text(product.name),
subtitle: Text('价格: ${cartItem.price} 数量: ${cartItem.quantity}'),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.remove),
onPressed: () {
_updateCart(
cartItem.productId, cartItem.quantity - 1);
},
),
IconButton(
icon: Icon(Icons.add),
onPressed: () {
_updateCart(
cartItem.productId, cartItem.quantity + 1);
},
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
_deleteCart(cartItem.productId);
},
),
],
),
);
},
),
bottomNavigationBar: _buildBottomBar(),
);
}
Widget _buildBottomBar() {
return Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text('总价: $totalPrice'),
ElevatedButton(
onPressed: () {
// TODO: Implement checkout process
},
child: Text('结算'),
),
],
),
);
}
}
修改后的代码实现了购物车的增加、减少、删除功能。其中,增加和减少的操作调用了 ApiService.updateCart 方法,删除操作调用了 ApiService.deleteCart 方法。
改动后的 api_service.dart 文件如下:
import 'package:dio/dio.dart';
final String baseUrl = 'http://book.musecloud.tech';
final Dio dioWithCookie = Dio(BaseOptions(
baseUrl: baseUrl,
headers: {
'Cookie':
'connect.sid=s%3A5_N8d_dL1lqXjFZ9lM0Lk5o9IvCkCgYs.8K3yGZiEjxT4J1%2Fnw1Q%2F1AyL1jLptQKoqb8J8tQd6xQ',
},
));
// 更新购物车
static Future<List<dynamic>> updateCart(int productId, int quantity) async {
try {
Response response = await dioWithCookie.get(
'$baseUrl/updatecart',
queryParameters: {
'productId': productId,
'quantity': quantity,
},
);
List<dynamic> jsonData = jsonDecode(response.data);
return jsonData;
} catch (e) {
throw e;
}
}
// 删除购物车项
static Future<double> deleteCart(int productId) async {
try {
Response response = await dioWithCookie.get(
'$baseUrl/deletecart',
queryParameters: {
'productId': productId,
},
);
double result = double.parse(response.data);
return result;
} catch (e) {
throw e;
}
}
// 获取地址列表
static Future<List<Map<String, dynamic>>> getAddresses() async {
try {
Response response = await dioWithCookie.get('$baseUrl/getaddresses');
List<dynamic> jsonData = jsonDecode(response.data);
return jsonData.cast<Map<String, dynamic>>();
} 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;
}
}
改动后的 api_service.dart 文件中,新增了 updateCart 方法和修改了 deleteCart 方法的返回值,以便购物车页面的修改操作能够实时更新页面数据
原文地址: https://www.cveoy.top/t/topic/fzfd 著作权归作者所有。请勿转载和采集!