init

src/pages/cart/index.tsx

@@ -1,34 +1,282 @@
-import { View } from '@tarojs/components'
-import { Button } from '@antmjs/vantui'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { View, Text, Image, Textarea, ScrollView } from '@tarojs/components'
+import { Button, Empty, Popup, Stepper } from '@antmjs/vantui'
+import useCartStore from '@/stores/cart/useCartStore'
+import { createOrderApi } from '@/services/order'
+import type { CartItem } from '@/types/cart'
 import './index.less'
 
-export default function Index() {
+export default function CartPage() {
+  const items = useCartStore(s => s.items)
+  const totalQuantity = useCartStore(s => s.totalQuantity)
+  const totalAmount = useCartStore(s => s.totalAmount)
+  const loading = useCartStore(s => s.loading)
+  const fetchCart = useCartStore(s => s.fetchCart)
+  const updateQuantity = useCartStore(s => s.updateQuantity)
+  const removeItem = useCartStore(s => s.removeItem)
+  const clearCart = useCartStore(s => s.clearCart)
+  const clearLocal = useCartStore(s => s.clearLocal)
+
+  /** 本地编辑中的数量（输入即时生效，500ms 防抖后提交服务端） */
+  const [qtyMap, setQtyMap] = useState<Record<number, string>>({})
+  const debounceRef = useRef<Record<number, ReturnType<typeof setTimeout>>>({})
+
+  /** 下单弹层 */
+  const [showOrder, setShowOrder] = useState(false)
+  const [remark, setRemark] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  /** 可购项（status=1） */
+  const purchasable = items.filter(item => item.status === 1)
+  const hasInvalid = items.length > 0 && purchasable.length < items.length
+
+  useDidShow(() => {
+    fetchCart().catch(() => {})
+  })
+
+  /** 同步本地编辑数量：删除不存在的项，保留在编数量 */
+  useEffect(() => {
+    setQtyMap(prev => {
+      const next: Record<number, string> = {}
+      for (const item of items) {
+        if (prev[item.id] !== undefined) {
+          next[item.id] = prev[item.id]
+        }
+      }
+      return next
+    })
+  }, [items])
+
+  /** 清理防抖定时器 */
+  useEffect(() => {
+    const timers = debounceRef.current
+    return () => {
+      Object.values(timers).forEach(t => clearTimeout(t))
+    }
+  }, [])
+
+  /** 数量变更：本地即时更新 + 防抖提交 */
+  const handleQtyChange = useCallback(
+    (item: CartItem, val: string | number) => {
+      const value = Number(val)
+      if (!value || value <= 0) return
+      setQtyMap(prev => ({ ...prev, [item.id]: String(value) }))
+      if (debounceRef.current[item.id]) {
+        clearTimeout(debounceRef.current[item.id])
+      }
+      debounceRef.current[item.id] = setTimeout(() => {
+        updateQuantity(item.id, value).catch(() => {
+          // 服务端拒绝（超上限等）→ 重新同步展示
+          fetchCart().catch(() => {})
+        })
+      }, 500)
+    },
+    [updateQuantity, fetchCart],
+  )
+
+  /** 删除单项 */
+  const handleRemove = useCallback(
+    (item: CartItem) => {
+      Taro.showModal({
+        title: '删除商品',
+        content: `确定删除「${item.name}」吗？`,
+        confirmColor: '#ee0a24',
+        success: res => {
+          if (res.confirm) {
+            removeItem(item.id).catch(() => {})
+          }
+        },
+      })
+    },
+    [removeItem],
+  )
+
+  /** 清空购物车 */
+  const handleClear = useCallback(() => {
+    Taro.showModal({
+      title: '清空购物车',
+      content: '确定清空购物车吗？',
+      confirmColor: '#ee0a24',
+      success: res => {
+        if (res.confirm) {
+          clearCart().catch(() => {})
+        }
+      },
+    })
+  }, [clearCart])
+
+  /** 打开下单弹层 */
+  const handleOrderTap = useCallback(() => {
+    if (!purchasable.length) {
+      Taro.showToast({ title: '没有可购买的商品', icon: 'none' })
+      return
+    }
+    setShowOrder(true)
+  }, [purchasable.length])
+
+  /** 提交订单（金额一律服务端重算） */
+  const handleSubmitOrder = useCallback(async () => {
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      const res = await createOrderApi({
+        items: purchasable.map(item => ({
+          product_id: item.product_id,
+          quantity: Number(qtyMap[item.id] ?? item.quantity),
+        })),
+        remark: remark.trim() || undefined,
+      })
+      Taro.showToast({ title: '下单成功', icon: 'success' })
+      setShowOrder(false)
+      setRemark('')
+      // 本地先清空，再以服务端为准同步（服务端可能保留购物车内容）
+      clearLocal()
+      fetchCart().catch(() => {})
+    } catch {
+      // 错误（已下架/未设等级价）已由 request 层 toast
+    } finally {
+      setSubmitting(false)
+    }
+  }, [submitting, purchasable, qtyMap, remark, clearLocal, fetchCart])
+
+  /** 当前展示的数量 */
+  const displayQty = (item: CartItem) => qtyMap[item.id] ?? item.quantity
+
   return (
-    <View className='index'>
-      <View><Button type='primary'>Hello world!</Button></View>
-      <View>上面的按钮的颜色已经通过全局主题重写覆盖了，参见src/styles/index.less</View>
+    <View className='cart-page'>
+      {/* ========== 头部 ========== */}
+      <View className='cart-header'>
+        <Text className='cart-header__title'>购物车</Text>
+        {items.length > 0 && (
+          <Text className='cart-header__clear' onClick={handleClear}>清空</Text>
+        )}
+      </View>
+
+      {/* ========== 列表 ========== */}
+      {items.length === 0 ? (
+        loading ? (
+          <View className='cart-loading'><Text>加载中...</Text></View>
+        ) : (
+          <Empty description='购物车还是空的，去逛逛吧' className='cart-empty'>
+            <Button
+              type='danger'
+              size='small'
+              round
+              onClick={() => Taro.switchTab({ url: '/pages/product/index' })}
+            >
+              去选购
+            </Button>
+          </Empty>
+        )
+      ) : (
+        items.map(item => (
+          <View key={item.id} className={`cart-item ${item.status === 0 ? 'cart-item--invalid' : ''}`}>
+            <Image className='cart-item__image' src={item.image} mode='aspectFill' lazyLoad />
+            <View className='cart-item__info'>
+              <View className='cart-item__title-row'>
+                <Text className='cart-item__name'>{item.name}</Text>
+                {item.status === 0 && <Text className='cart-item__invalid-tag'>已失效</Text>}
+              </View>
+              <Text className='cart-item__spec'>{item.spec} / {item.unit}</Text>
+              <View className='cart-item__bottom'>
+                {item.price !== null ? (
+                  <Text className='cart-item__price'>￥{item.price}</Text>
+                ) : (
+                  <Text className='cart-item__price cart-item__price--none'>价格待定</Text>
+                )}
+                {item.status === 1 ? (
+                  <Stepper
+                    value={displayQty(item)}
+                    min={1}
+                    max={99999999.99}
+                    inputWidth='90rpx'
+                    buttonSize='56rpx'
+                    onChange={e => handleQtyChange(item, e.detail)}
+                  />
+                ) : (
+                  <Text className='cart-item__delete' onClick={() => handleRemove(item)}>删除</Text>
+                )}
+              </View>
+            </View>
+            {item.status === 1 && (
+              <View className='cart-item__actions'>
+                <Text className='cart-item__amount'>￥{item.amount ?? '0.00'}</Text>
+                <Text className='cart-item__delete' onClick={() => handleRemove(item)}>删除</Text>
+              </View>
+            )}
+          </View>
+        ))
+      )}
+
+      {hasInvalid && (
+        <View className='cart-invalid-hint'>
+          <Text>部分商品已下架或未设置您所在等级的价格，不可下单</Text>
+        </View>
+      )}
+
+      {/* ========== 底部结算栏 ========== */}
+      {items.length > 0 && (
+        <View className='cart-footer'>
+          <View className='cart-footer__total'>
+            <Text className='cart-footer__label'>合计（可购{totalQuantity}件）</Text>
+            <Text className='cart-footer__amount'>￥{totalAmount}</Text>
+          </View>
+          <Button type='danger' className='cart-footer__submit' onClick={handleOrderTap}>
+            去下单
+          </Button>
+        </View>
+      )}
+
+      {/* ========== 下单确认弹层 ========== */}
+      <Popup
+        show={showOrder}
+        position='bottom'
+        round
+        closeable
+        closeOnClickOverlay
+        safeAreaInsetBottom
+        onClose={() => setShowOrder(false)}
+      >
+        <View className='order-popup'>
+          <Text className='order-popup__title'>确认下单</Text>
+          <ScrollView scrollY className='order-popup__list'>
+            {purchasable.map(item => (
+              <View key={item.id} className='order-popup__item'>
+                <View className='order-popup__item-info'>
+                  <Text className='order-popup__item-name'>{item.name}</Text>
+                  <Text className='order-popup__item-spec'>{item.spec} / {item.unit}</Text>
+                </View>
+                <View className='order-popup__item-right'>
+                  <Text className='order-popup__item-qty'>×{displayQty(item)}</Text>
+                  <Text className='order-popup__item-amount'>￥{item.amount ?? '0.00'}</Text>
+                </View>
+              </View>
+            ))}
+          </ScrollView>
+          <View className='order-popup__remark'>
+            <Text className='order-popup__remark-label'>订单备注</Text>
+            <Textarea
+              className='order-popup__remark-input'
+              value={remark}
+              placeholder='选填，最多 255 字'
+              maxlength={255}
+              onInput={e => setRemark(e.detail.value)}
+            />
+          </View>
+          <View className='order-popup__footer'>
+            <Text className='order-popup__total'>合计 ￥{totalAmount}</Text>
+            <Button
+              type='danger'
+              className='order-popup__submit'
+              loading={submitting}
+              onClick={handleSubmitOrder}
+            >
+              提交订单
+            </Button>
+          </View>
+        </View>
+      </Popup>
     </View>
   )
 }
-
-// export default class Index extends Component {
-
-//   componentWillMount () { }
-
-//   componentDidMount () { }
-
-//   componentWillUnmount () { }
-
-//   componentDidShow () { }
-
-//   componentDidHide () { }
-
-//   render () {
-//     return (
-//       <View className='index'>
-//         <View><Button type='primary'>Hello world!</Button></View>
-//         <View>上面的按钮的颜色已经通过全局主题重写覆盖了，参见src/style/index.less</View>
-//       </View>
-//     )
-//   }
-// }