提交代码

2025-06-26 11:41:12 +08:00
commit d75fb55eec
396 changed files with 42172 additions and 0 deletions
--- a/src/hjm/bx/BestSellers.tsx
+++ b/src/hjm/bx/BestSellers.tsx
@@ -0,0 +1,202 @@
+import React from "react";
+import {Image, Space, Tag, Button} from '@nutui/nutui-react-taro'
+import {Truck, User, Shield, Location} from '@nutui/icons-react-taro'
+import Taro from '@tarojs/taro'
+import {HjmCar} from "@/api/hjm/hjmCar/model";
+
+interface BestSellersProps {
+  data: HjmCar[]
+  onRefresh?: () => void
+}
+
+/**
+ * 车辆列表组件
+ */
+const BestSellers: React.FC<BestSellersProps> = ({data, onRefresh}) => {
+
+  // 获取保险状态显示
+  const getInsuranceStatusDisplay = (status?: number) => {
+    switch (status) {
+      case 0:
+        return {text: '未投保', color: '#ff4d4f', bgColor: '#fff2f0'}
+      case 1:
+        return {text: '已投保', color: '#52c41a', bgColor: '#f6ffed'}
+      case 2:
+        return {text: '即将到期', color: '#faad14', bgColor: '#fffbe6'}
+      default:
+        return {text: '未知', color: '#8c8c8c', bgColor: '#f5f5f5'}
+    }
+  }
+
+  // 跳转到车辆详情
+  const navigateToDetail = (item: HjmCar) => {
+    Taro.navigateTo({
+      url: `/hjm/query?id=${item.id}`
+    })
+  }
+
+  // 快速报险
+  const quickInsurance = (item: HjmCar, event: any) => {
+    event.stopPropagation()
+    Taro.navigateTo({
+      url: `/hjm/bx/bx-add?carId=${item.id}&carCode=${item.code}`
+    })
+  }
+
+  if (!data || data.length === 0) {
+    return null
+  }
+
+  return (
+    <div style={{padding: '0 16px', marginBottom: '16px'}}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px'
+      }}>
+        {data.map((item, index) => {
+          const insuranceStatus = getInsuranceStatusDisplay(item.insuranceStatus)
+
+          return (
+            <div
+              key={index}
+              style={{
+                backgroundColor: '#fff',
+                borderRadius: '12px',
+                padding: '16px',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+                border: '1px solid #f0f0f0'
+              }}
+              onClick={() => navigateToDetail(item)}
+            >
+              <div style={{display: 'flex', gap: '12px'}}>
+                {/* 车辆图片 */}
+                <div style={{flexShrink: 0}}>
+                  <Image
+                    src={item.image || 'https://via.placeholder.com/80x80?text=车辆'}
+                    mode="aspectFill"
+                    radius="8px"
+                    width="80"
+                    height="80"
+                    style={{
+                      border: '1px solid #f0f0f0'
+                    }}
+                  />
+                </div>
+
+                {/* 车辆信息 */}
+                <div style={{flex: 1, minWidth: 0}}>
+                  <Space direction="vertical" size={8}>
+                    {/* 车辆编号 */}
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}>
+                      <Truck size={16} color="#1890ff"/>
+                      <span style={{
+                        fontSize: '16px',
+                        fontWeight: 'bold',
+                        color: '#262626'
+                      }}>
+                        {item.code || '未知编号'}
+                      </span>
+                    </div>
+
+                    {/* 快递公司 */}
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}>
+                      <Location size={14} color="#8c8c8c"/>
+                      <span style={{fontSize: '13px', color: '#8c8c8c'}}>
+                        快递公司：
+                      </span>
+                      <span style={{fontSize: '13px', color: '#595959'}}>
+                        {item.parentOrganization || '未知'}
+                      </span>
+                    </div>
+
+                    {/* 保险状态 */}
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}>
+                      <Shield size={14} color="#8c8c8c"/>
+                      <span style={{fontSize: '13px', color: '#8c8c8c'}}>
+                        保险状态：
+                      </span>
+                      <Tag
+                        color={insuranceStatus.color}
+                        style={{
+                          backgroundColor: insuranceStatus.bgColor,
+                          border: `1px solid ${insuranceStatus.color}`,
+                          fontSize: '12px'
+                        }}
+                      >
+                        {insuranceStatus.text}
+                      </Tag>
+                    </div>
+
+                    {/* 操作员 */}
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}>
+                      <User size={14} color="#8c8c8c"/>
+                      <span style={{fontSize: '13px', color: '#8c8c8c'}}>
+                        操作员：
+                      </span>
+                      <span style={{fontSize: '13px', color: '#595959'}}>
+                        {item.driver || '未绑定'}
+                      </span>
+                    </div>
+                  </Space>
+                </div>
+              </div>
+
+              {/* 操作按钮 */}
+              <div style={{
+                marginTop: '12px',
+                paddingTop: '12px',
+                borderTop: '1px solid #f0f0f0',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+              }}>
+                <Button
+                  type="primary"
+                  size="small"
+                  onClick={(e) => quickInsurance(item, e)}
+                  style={{
+                    borderRadius: '16px',
+                    fontSize: '12px'
+                  }}
+                >
+                  一键报险
+                </Button>
+
+                <Button
+                  type="default"
+                  size="small"
+                  onClick={() => navigateToDetail(item)}
+                  style={{
+                    borderRadius: '16px',
+                    fontSize: '12px'
+                  }}
+                >
+                  查看详情
+                </Button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default BestSellers