medicine-purchase.page.ts 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { Component, OnInit } from '@angular/core';
  2. import { Router } from '@angular/router';
  3. import { CartService } from '../services/cart.service'; // 根据实际路径调整
  4. import { BehaviorSubject } from 'rxjs';
  5. import { CartItem } from '../services/cart.service'; // 确保路径正确
  6. import { OrderService } from '../services/order.service';
  7. import { take } from 'rxjs/operators';
  8. import { trigger, state, style, transition, animate } from '@angular/animations';
  9. @Component({
  10. selector: 'app-medicine-purchase',
  11. templateUrl: './medicine-purchase.page.html',
  12. styleUrls: ['./medicine-purchase.page.scss'],
  13. animations: [
  14. trigger('fadeItem', [
  15. state('void', style({ opacity: 0 })),
  16. state('*', style({ opacity: 1 })),
  17. transition(':enter', [animate('300ms ease-in')]),
  18. transition(':leave', [animate('300ms ease-out')])
  19. ])
  20. ]
  21. })
  22. export class MedicinePurchasePage implements OnInit {
  23. medicines = [
  24. { id: 1, name: '阿司匹林', price: 15.99, description: '用于缓解轻度至中度疼痛...', imageUrl: '../assets/images/medicine1.png' },
  25. { id: 2, name: '布洛芬', price: 12.99, description: '非甾体抗炎药...', imageUrl: '../assets/images/medicine2.png' },
  26. // 添加更多药品...
  27. ];
  28. cartItems$ = this.cartService.cartItems$;
  29. private cartTotalSubject = new BehaviorSubject<number>(0);
  30. cartTotal$ = this.cartTotalSubject.asObservable();
  31. constructor(
  32. private router: Router,
  33. private cartService: CartService,
  34. private orderService: OrderService // 注入OrderService
  35. ) {}
  36. ngOnInit() {
  37. this.cartService.cartItems$.subscribe(items => {
  38. const total = this.cartService.getCartTotal();
  39. this.cartTotalSubject.next(total);
  40. });
  41. }
  42. goToDetail(id: number) {
  43. this.router.navigate(['/medicine-detail', id]);
  44. }
  45. addToCart(medicine: any) {
  46. this.cartService.addToCart({ ...medicine, quantity: 1 });
  47. }
  48. removeFromCart(item: CartItem) {
  49. this.cartService.removeFromCart(item.id);
  50. }
  51. incrementQuantity(item: CartItem) {
  52. this.cartService.updateCartItem(item.id, item.quantity + 1);
  53. }
  54. decrementQuantity(item: CartItem) {
  55. if (item.quantity > 1) {
  56. this.cartService.updateCartItem(item.id, item.quantity - 1);
  57. } else {
  58. this.removeFromCart(item);
  59. }
  60. }
  61. updateQuantity(item: CartItem) {
  62. this.cartService.updateCartItem(item.id, item.quantity);
  63. }
  64. purchase() {
  65. this.cartService.cartItems$.pipe(take(1)).subscribe(cartItems => {
  66. if (cartItems.length === 0) {
  67. alert('购物车为空,请选择商品后再进行购买');
  68. return;
  69. }
  70. // 创建订单
  71. const orderId = this.orderService.createOrder(cartItems); // 确保类型匹配
  72. // 清空购物车
  73. this.cartService.clearCart();
  74. // 提示用户购买成功
  75. alert(`购买成功!订单号:${orderId}`);
  76. // 导航到订单页面
  77. this.router.navigate(['/orders']);
  78. });
  79. }
  80. }