Browse Source

✨ feat(passengers): 优化证件类型选择组件

- 将Select组件替换为原生Picker组件,提升小程序兼容性
- 证件类型显示中文名称而非枚举值,优化用户体验
- 实现证件类型选项列表和当前选中索引的状态管理

♻️ refactor(passengers): 重构证件类型选择逻辑

- 提取证件类型选项为统一数组,便于维护
- 实现根据证件类型值获取对应中文标签的逻辑
- 移除未使用的Select组件相关导入
yourname 3 months ago
parent
commit
0e49eafd5f
2 changed files with 54 additions and 32 deletions
  1. 27 16
      mini/src/pages/passengers/add-passenger.tsx
  2. 27 16
      mini/src/pages/passengers/passengers.tsx

+ 27 - 16
mini/src/pages/passengers/add-passenger.tsx

@@ -1,12 +1,11 @@
 import { useState, useEffect } from 'react'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { View, Text, ScrollView, Picker } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Navbar } from '@/components/ui/navbar'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Label } from '@/components/ui/label'
 import { useAuth } from '@/utils/auth'
 import { passengerClient } from '@/api'
@@ -32,6 +31,18 @@ const AddPassengerPage: React.FC = () => {
 
   const [from, setFrom] = useState<string>('order')
 
+  // 证件类型选项
+  const idTypeOptions = [
+    { label: '身份证', value: IdType.ID_CARD },
+    { label: '港澳通行证', value: IdType.HONG_KONG_MACAO_PASS },
+    { label: '台湾通行证', value: IdType.TAIWAN_PASS },
+    { label: '护照', value: IdType.PASSPORT },
+    { label: '其他证件', value: IdType.OTHER }
+  ]
+
+  // 获取当前证件类型的索引
+  const currentIdTypeIndex = idTypeOptions.findIndex(option => option.value === formData.idType)
+
   // 获取页面参数
   useEffect(() => {
     const currentPage = Taro.getCurrentPages().pop()
@@ -153,21 +164,21 @@ const AddPassengerPage: React.FC = () => {
             {/* 证件类型 */}
             <View className="space-y-2">
               <Label htmlFor="idType">证件类型</Label>
-              <Select
-                value={formData.idType}
-                onValueChange={(value: IdType) => setFormData({ ...formData, idType: value })}
+              <Picker
+                mode="selector"
+                range={idTypeOptions.map(option => option.label)}
+                value={currentIdTypeIndex}
+                onChange={(e) => {
+                  const index = Number(e.detail.value)
+                  setFormData({ ...formData, idType: idTypeOptions[index].value })
+                }}
               >
-                <SelectTrigger>
-                  <SelectValue placeholder="选择证件类型" />
-                </SelectTrigger>
-                <SelectContent>
-                  {Object.values(IdType).map((type) => (
-                    <SelectItem key={type} value={type}>
-                      {type}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                <View className="border border-gray-300 rounded-lg px-3 py-2 bg-white">
+                  <Text className="text-gray-900">
+                    {idTypeOptions[currentIdTypeIndex]?.label || '选择证件类型'}
+                  </Text>
+                </View>
+              </Picker>
             </View>
 
             {/* 证件号码 */}

+ 27 - 16
mini/src/pages/passengers/passengers.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { View, Text, ScrollView } from '@tarojs/components'
+import { View, Text, ScrollView, Picker } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Navbar } from '@/components/ui/navbar'
@@ -7,7 +7,6 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input as ShadcnInput } from '@/components/ui/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Label } from '@/components/ui/label'
 import { useAuth } from '@/utils/auth'
 import { passengerClient } from '@/api'
@@ -32,6 +31,18 @@ const PassengersPage: React.FC = () => {
     phone: ''
   })
 
+  // 证件类型选项
+  const idTypeOptions = [
+    { label: '身份证', value: IdType.ID_CARD },
+    { label: '港澳通行证', value: IdType.HONG_KONG_MACAO_PASS },
+    { label: '台湾通行证', value: IdType.TAIWAN_PASS },
+    { label: '护照', value: IdType.PASSPORT },
+    { label: '其他证件', value: IdType.OTHER }
+  ]
+
+  // 获取当前证件类型的索引
+  const currentIdTypeIndex = idTypeOptions.findIndex(option => option.value === formData.idType)
+
   // 获取乘客列表
   const { data: passengersResponse, isLoading } = useQuery({
     queryKey: ['passengers'],
@@ -401,21 +412,21 @@ const PassengersPage: React.FC = () => {
 
               <View className="space-y-2">
                 <Label htmlFor="idType">证件类型</Label>
-                <Select
-                  value={formData.idType}
-                  onValueChange={(value: IdType) => setFormData({ ...formData, idType: value })}
+                <Picker
+                  mode="selector"
+                  range={idTypeOptions.map(option => option.label)}
+                  value={currentIdTypeIndex}
+                  onChange={(e) => {
+                    const index = Number(e.detail.value)
+                    setFormData({ ...formData, idType: idTypeOptions[index].value })
+                  }}
                 >
-                  <SelectTrigger>
-                    <SelectValue placeholder="选择证件类型" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {Object.values(IdType).map((type) => (
-                      <SelectItem key={type} value={type}>
-                        {type}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  <View className="border border-gray-300 rounded-lg px-3 py-2 bg-white">
+                    <Text className="text-gray-900">
+                      {idTypeOptions[currentIdTypeIndex]?.label || '选择证件类型'}
+                    </Text>
+                  </View>
+                </Picker>
               </View>
 
               <View className="space-y-2">