refactor(shop/orderConfirm):优化订单确认页面布局和内容- 调整地址信息显示样式

- 添加支付方式选择功能
- 修改订单总价和配送费

src/shop/orderConfirm/index.tsx

@@ -4,7 +4,7 @@ import {Location, ArrowRight} from '@nutui/icons-react-taro'
 import Taro, {useDidShow} from '@tarojs/taro'
 import {ShopGoods} from "@/api/shop/shopGoods/model";
 import {getShopGoods} from "@/api/shop/shopGoods";
-import {View} from '@tarojs/components';
+import {View, Text} from '@tarojs/components';
 import {listShopUserAddress} from "@/api/shop/shopUserAddress";
 import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
 import './index.scss'
@@ -118,7 +118,8 @@ const OrderConfirm = () => {
                   <Space className={'flex flex-row w-full'}>
                     <View className={'flex-wrap text-nowrap whitespace-nowrap text-gray-500'}>送至</View>
                     <View className={'font-medium text-sm flex items-center w-full'}>
-                      <View style={{width: '64%'}}>{address.province} {address.city} {address.region} {address.address}</View>
+                      <View
+                        style={{width: '64%'}}>{address.province} {address.city} {address.region} {address.address}</View>
                       <ArrowRight className={'text-gray-500'} size={14}/>
                     </View>
                   </Space>
@@ -157,6 +158,19 @@ const OrderConfirm = () => {
         </Cell>
       </CellGroup>
 
+      <CellGroup>
+        <Cell
+          title={'支付方式'}
+          extra={(
+            <View className={'flex items-center gap-2'}>
+              <View className={'text-gray-900'}>{payment?.name}</View>
+              <ArrowRight className={'text-gray-400'} size={14}/>
+            </View>
+          )}
+          onClick={() => setIsVisible(true)}
+        />
+      </CellGroup>
+
       <CellGroup>
         <Cell title={`商品总价（共1件）`} extra={<View className={'font-medium'}>{'￥' + goods.price}</View>}/>
         <Cell title={'优惠券'} extra={(
@@ -165,23 +179,21 @@ const OrderConfirm = () => {
             <ArrowRight className={'text-gray-400'} size={14}/>
           </View>
         )}/>
-        {/*<Cell title={'配送费'} extra={'￥' + 10}/>*/}
-        <Cell title={'订单备注'} extra={(
-          <Input placeholder={'选填，请先和商家协商一致'} style={{padding: '0'}}/>
+        <Cell title={'配送费'} extra={'￥0.00'}/>
+        <Cell extra={(
+          <View className={'flex items-end gap-2'}>
+            <Text>已优惠</Text>
+            <Text className={'text-red-500 text-sm'}>￥0.0</Text>
+            <Text className={'ml-2'}>小计</Text>
+            <Text className={'text-gray-700 font-bold'}>￥{goods.price}</Text>
+          </View>
         )}/>
       </CellGroup>
 
       <CellGroup>
-        <Cell
-          title={'支付方式'}
-          extra={(
-            <View className={'flex items-center gap-2'}>
-              <View className={'text-gray-900'}>{payment?.name}</View>
-              <ArrowRight className={'text-gray-400'} size={14}/>
-            </View>
-          )}
-          onClick={() => setIsVisible(true)}
-        />
+        <Cell title={'订单备注'} extra={(
+          <Input placeholder={'选填，请先和商家协商一致'} style={{padding: '0'}}/>
+        )}/>
       </CellGroup>
 
       <ActionSheet