Răsfoiți Sursa

✨ feat(button): 添加H5环境下获取手机号模拟功能

- 实现H5环境下getPhoneNumber开放能力的模拟功能
- 添加模拟事件处理和成功提示
- 优化按钮点击事件处理逻辑

♻️ refactor(order): 移除订单页面中isWeapp环境判断

- 删除订单页面中对isWeapp的依赖判断
- 简化获取手机号前置检查逻辑
yourname 3 luni în urmă
părinte
comite
e58526f919
2 a modificat fișierele cu 45 adăugiri și 3 ștergeri
  1. 44 1
      mini/src/components/ui/button.tsx
  2. 1 2
      mini/src/pages/order/index.tsx

+ 44 - 1
mini/src/components/ui/button.tsx

@@ -1,6 +1,8 @@
 import { Button as TaroButton, ButtonProps as TaroButtonProps } from '@tarojs/components'
 import { cn } from '@/utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { isH5 } from '@/utils/platform'
+import { showToast } from '@tarojs/taro'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background mt-0',
@@ -33,10 +35,51 @@ interface ButtonProps extends Omit<TaroButtonProps, 'size'>, VariantProps<typeof
   children?: React.ReactNode
 }
 
-export function Button({ className, variant, size, ...props }: ButtonProps) {
+export function Button({ className, variant, size, openType, onGetPhoneNumber, ...props }: ButtonProps) {
+  // H5环境下的getPhoneNumber模拟
+  const handleClick = (e: any) => {
+    if (isH5() && openType === 'getPhoneNumber' && onGetPhoneNumber) {
+      // 模拟获取手机号成功
+      const mockEvent = {
+        type: 'getphonenumber',
+        timeStamp: Date.now(),
+        target: {
+          id: '',
+          dataset: {}
+        },
+        currentTarget: {
+          id: '',
+          dataset: {}
+        },
+        detail: {
+          errMsg: 'getPhoneNumber:ok',
+          code: 'mock_code_for_h5_development'
+        },
+        mark: {}
+      }
+      onGetPhoneNumber(mockEvent as any)
+
+      // 显示模拟成功的提示
+      showToast({
+        title: 'H5环境:手机号获取成功(模拟)',
+        icon: 'success',
+        duration: 2000
+      })
+      return
+    }
+
+    // 正常点击事件
+    if (props.onClick) {
+      props.onClick(e)
+    }
+  }
+
   return (
     <TaroButton
       className={cn(buttonVariants({ variant, size, className }))}
+      openType={openType}
+      onGetPhoneNumber={onGetPhoneNumber}
+      onClick={handleClick}
       {...props}
     />
   )

+ 1 - 2
mini/src/pages/order/index.tsx

@@ -8,7 +8,6 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import type { InferResponseType , InferRequestType} from 'hono/client'
-import { isWeapp } from '@/utils/platform'
 
 // 使用RPC方式提取类型
 type Passenger = InferResponseType<typeof passengerClient.$get, 200>['data'][0]
@@ -146,7 +145,7 @@ export default function OrderPage() {
 
   // 添加乘客
   const handleAddPassenger = () => {
-    if (isWeapp() && !hasPhoneNumber) {
+    if (!hasPhoneNumber) {
       showToast({
         title: '请先获取手机号',
         icon: 'none',