|
|
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button'
|
|
|
import { useAuth } from '@/utils/auth'
|
|
|
import { useCart } from '@/utils/cart'
|
|
|
import { Image } from '@/components/ui/image'
|
|
|
+import './index.css'
|
|
|
|
|
|
type AddressResponse = InferResponseType<typeof deliveryAddressClient.$get, 200>
|
|
|
type Address = AddressResponse['data'][0]
|
|
|
@@ -140,141 +141,103 @@ export default function OrderSubmitPage() {
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
- <View className="min-h-screen bg-gray-50">
|
|
|
+ <View className="order-sure">
|
|
|
<Navbar
|
|
|
title="确认订单"
|
|
|
leftIcon="i-heroicons-chevron-left-20-solid"
|
|
|
onClickLeft={() => Taro.navigateBack()}
|
|
|
/>
|
|
|
-
|
|
|
- <ScrollView className="h-screen pt-12 pb-20">
|
|
|
- <View className="px-4 space-y-4">
|
|
|
- {/* 收货地址 */}
|
|
|
- <Card>
|
|
|
- <View className="p-4">
|
|
|
- <View className="flex items-center justify-between mb-3">
|
|
|
- <Text className="text-lg font-bold">收货地址</Text>
|
|
|
- <Button
|
|
|
- size="sm"
|
|
|
- variant="ghost"
|
|
|
- onClick={handleSelectAddress}
|
|
|
- >
|
|
|
- 选择地址
|
|
|
- </Button>
|
|
|
- </View>
|
|
|
-
|
|
|
- {selectedAddress ? (
|
|
|
- <View>
|
|
|
- <View className="flex items-center mb-2">
|
|
|
- <Text className="font-medium mr-3">{selectedAddress.name}</Text>
|
|
|
- <Text className="text-gray-600">{selectedAddress.phone}</Text>
|
|
|
- {selectedAddress.isDefault === 1 && (
|
|
|
- <Text className="ml-2 px-2 py-1 bg-red-100 text-red-600 text-xs rounded">
|
|
|
- 默认
|
|
|
- </Text>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- <Text className="text-sm text-gray-700">
|
|
|
- {selectedAddress.province?.name || ''}
|
|
|
- {selectedAddress.city?.name || ''}
|
|
|
- {selectedAddress.district?.name || ''}
|
|
|
- {selectedAddress.town?.name || ''}
|
|
|
- {selectedAddress.address}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- ) : (
|
|
|
- <Button
|
|
|
- className="w-full"
|
|
|
- onClick={handleSelectAddress}
|
|
|
- >
|
|
|
- 请选择收货地址
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- </View>
|
|
|
- </Card>
|
|
|
|
|
|
- {/* 商品列表 */}
|
|
|
- <Card>
|
|
|
- <View className="p-4">
|
|
|
- <Text className="text-lg font-bold mb-4">商品信息</Text>
|
|
|
-
|
|
|
- {orderItems.map((item) => (
|
|
|
- <View key={item.id} className="flex items-center py-3 border-b border-gray-100 last:border-b-0">
|
|
|
- <Image
|
|
|
- src={item.image}
|
|
|
- className="w-16 h-16 rounded-lg mr-3"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
-
|
|
|
- <View className="flex-1">
|
|
|
- <Text className="text-sm font-medium mb-1">{item.name}</Text>
|
|
|
- <Text className="text-sm text-gray-600">
|
|
|
- ¥{item.price.toFixed(2)} × {item.quantity}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- <Text className="text-red-500 font-bold">
|
|
|
- ¥{(item.price * item.quantity).toFixed(2)}
|
|
|
+ <ScrollView className="h-screen pt-12">
|
|
|
+ {/* 收货地址区域 */}
|
|
|
+ <View className="address-card">
|
|
|
+ {selectedAddress ? (
|
|
|
+ <View className="order-address" onClick={handleSelectAddress}>
|
|
|
+ <View className="address-content">
|
|
|
+ <Text className="detail">
|
|
|
+ {selectedAddress.province?.name || ''}
|
|
|
+ {selectedAddress.city?.name || ''}
|
|
|
+ {selectedAddress.district?.name || ''}
|
|
|
+ {selectedAddress.town?.name || ''}
|
|
|
+ {selectedAddress.address}
|
|
|
+ </Text>
|
|
|
+ <View className="info">
|
|
|
+ {selectedAddress.isDefault === 1 && (
|
|
|
+ <Text className="address-tag">默认</Text>
|
|
|
+ )}
|
|
|
+ <Text>
|
|
|
+ {selectedAddress.name} {selectedAddress.phone}
|
|
|
</Text>
|
|
|
</View>
|
|
|
- ))}
|
|
|
+ </View>
|
|
|
+ <View className="i-heroicons-chevron-right-20-solid address__right" />
|
|
|
</View>
|
|
|
- </Card>
|
|
|
-
|
|
|
- {/* 订单金额 */}
|
|
|
- <Card>
|
|
|
- <View className="p-4">
|
|
|
- <Text className="text-lg font-bold mb-4">订单金额</Text>
|
|
|
-
|
|
|
- <View className="space-y-2">
|
|
|
- <View className="flex justify-between">
|
|
|
- <Text className="text-gray-600">商品金额</Text>
|
|
|
- <Text>¥{totalAmount.toFixed(2)}</Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="flex justify-between">
|
|
|
- <Text className="text-gray-600">运费</Text>
|
|
|
- <Text>¥0.00</Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="flex justify-between text-lg font-bold border-t pt-2">
|
|
|
- <Text>实付款</Text>
|
|
|
- <Text className="text-red-500">¥{totalAmount.toFixed(2)}</Text>
|
|
|
- </View>
|
|
|
+ ) : (
|
|
|
+ <View className="order-address" onClick={handleSelectAddress}>
|
|
|
+ <View className="address-content">
|
|
|
+ <Text className="detail">请选择收货地址</Text>
|
|
|
</View>
|
|
|
+ <View className="i-heroicons-chevron-right-20-solid address__right" />
|
|
|
</View>
|
|
|
- </Card>
|
|
|
+ )}
|
|
|
+ <View className="top-line" />
|
|
|
+ </View>
|
|
|
|
|
|
- {/* 支付方式 */}
|
|
|
- <Card>
|
|
|
- <View className="p-4">
|
|
|
- <Text className="text-lg font-bold mb-4">支付方式</Text>
|
|
|
- <View className="flex items-center p-3 border rounded-lg">
|
|
|
- <View className="i-heroicons-credit-card-20-solid w-5 h-5 mr-3 text-blue-500" />
|
|
|
- <Text>微信支付</Text>
|
|
|
+ {/* 商品列表区域 */}
|
|
|
+ <View className="order-wrapper">
|
|
|
+ {orderItems.map((item) => (
|
|
|
+ <View key={item.id} className="goods-wrapper">
|
|
|
+ <Image
|
|
|
+ src={item.image}
|
|
|
+ className="goods-image"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+
|
|
|
+ <View className="goods-content">
|
|
|
+ <Text className="goods-title">{item.name}</Text>
|
|
|
+ <Text className="text-gray-600">规格：默认</Text>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="goods-right">
|
|
|
+ <Text className="goods-price">¥{item.price.toFixed(2)}</Text>
|
|
|
+ <Text className="goods-num">x{item.quantity}</Text>
|
|
|
</View>
|
|
|
</View>
|
|
|
- </Card>
|
|
|
+ ))}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 支付详情区域 */}
|
|
|
+ <View className="pay-detail">
|
|
|
+ <View className="pay-item">
|
|
|
+ <Text>商品总额</Text>
|
|
|
+ <Text className="pay-item__right font-bold">¥{totalAmount.toFixed(2)}</Text>
|
|
|
+ </View>
|
|
|
+ <View className="pay-item">
|
|
|
+ <Text>运费</Text>
|
|
|
+ <Text className="pay-item__right">¥0.00</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 金额区域 */}
|
|
|
+ <View className="amount-wrapper">
|
|
|
+ <View className="pay-amount">
|
|
|
+ <Text className="order-num">共{orderItems.length}件</Text>
|
|
|
+ <Text>小计</Text>
|
|
|
+ <Text className="total-price">¥{totalAmount.toFixed(2)}</Text>
|
|
|
+ </View>
|
|
|
</View>
|
|
|
</ScrollView>
|
|
|
|
|
|
{/* 底部提交栏 */}
|
|
|
- <View className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3">
|
|
|
- <View className="flex items-center justify-between">
|
|
|
- <View>
|
|
|
- <Text className="text-sm text-gray-600">合计: </Text>
|
|
|
- <Text className="text-lg font-bold text-red-500">
|
|
|
- ¥{totalAmount.toFixed(2)}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
-
|
|
|
- <Button
|
|
|
- onClick={handleSubmitOrder}
|
|
|
- disabled={!selectedAddress || orderItems.length === 0 || createOrderMutation.isPending}
|
|
|
- loading={createOrderMutation.isPending}
|
|
|
+ <View className="wx-pay-cover">
|
|
|
+ <View className="wx-pay">
|
|
|
+ <Text className="price">¥{totalAmount.toFixed(2)}</Text>
|
|
|
+ <View
|
|
|
+ className={`submit-btn ${selectedAddress ? '' : 'btn-gray'}`}
|
|
|
+ onClick={selectedAddress ? handleSubmitOrder : undefined}
|
|
|
>
|
|
|
- 提交订单
|
|
|
- </Button>
|
|
|
+ {createOrderMutation.isPending ? '提交中...' : '提交订单'}
|
|
|
+ </View>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
yourname