feat(支付设置): 新增微信免密支付详情页并优化导航逻辑

hejianhao

2026-05-14 201eb5bacd6a51e32ce73e9b73f52066b8fd93a4

feat(支付设置): 新增微信免密支付详情页并优化导航逻辑

新增支付设置详情页面、配置文件与样式文件，将新页面注册到小程序路由表中。移除首页调试用的自动收银台跳转，更新支付设置页跳转至详情页，清理无用代码

 src/app.config.ts

@@ -40,6 +40,7 @@
        'pages/share-trip/index',
        'pages/personal-center/index',
        'pages/payment-setting/index',
        'pages/payment-setting-detail/index',
      ],
    },
    {

 src/pages/robotaxi/home/hooks/use-navigation.ts

@@ -268,13 +268,6 @@
    }
  };

  /**
   * 跳转收银台调试页。
   */
  const toCashier = () => {
    Taro.navigateTo({ url: '/pages/cashier/index?token=debug' });
  };

  return {
    ensureNetwork,
    toSelectSitePage,
@@ -288,7 +281,6 @@
    handleOpenSetting,
    handleViewOperatingArea,
    handleBannerClick,
    toCashier,
    toPersonalCenter
  };
}

 src/pages/robotaxi/home/index.tsx

@@ -585,7 +585,6 @@
    handleOpenSetting,
    handleViewOperatingArea,
    handleBannerClick,
    toCashier,
    toPersonalCenter
  } = useNavigation({
    isGuest,
@@ -672,11 +671,6 @@
      }, 600);
    }
  };

  // 收银台调试：mount 后自动跳转
  useEffect(() => {
    toCashier();
  }, []);

  return (
    <View className="home-container">

 src/robotaxi/pages/payment-setting-detail/index.config.ts

New file
@@ -0,0 +1,3 @@
export default {
  navigationBarTitleText: '微信免密支付',
}

 src/robotaxi/pages/payment-setting-detail/index.less

New file
@@ -0,0 +1,51 @@
.payment-setting-detail-page {
  min-height: 100vh;
  background: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 258px 0 80px;
}

.payment-setting-detail-content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payment-setting-detail-icon {
  width: 120px;
  height: 120px;
}

.payment-setting-detail-title {
  margin-top: 40px;
  font-size: 30px;
  line-height: 46px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
}

.payment-setting-detail-description {
  margin-top: 20px;
  font-size: 24px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.payment-setting-detail-close {
  width: 100%;
  font-size: 24px;
  line-height: 40px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.payment-setting-detail-close-disabled {
  color: rgba(0, 0, 0, 0.3);
}

 src/robotaxi/pages/payment-setting-detail/index.tsx

New file
@@ -0,0 +1,110 @@
import Taro, { useDidShow } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { useCallback, useState } from 'react';
import payMaxIcon from '../../assets/pay-max-icon.png';
import { getPayPwd, RobotaxiPaySettingStatus, setPayPwd } from '../../api/payment';

import './index.less';

export default function PaymentSettingDetail() {
  const [isPayEnabled, setIsPayEnabled] = useState(true); // 当前免密支付状态
  const [isOperating, setIsOperating] = useState(false); // 当前是否正在关闭

  /**
   * 刷新当前支付设置状态。
   */
  const refreshPayStatus = useCallback(async () => {
    const response = await getPayPwd();
    const nextStatus = response === true;
    setIsPayEnabled(nextStatus);
    return nextStatus;
  }, []);

  /**
   * 返回上一页，不存在上一页时回个人中心。
   */
  const navigateBackToList = useCallback(() => {
    Taro.navigateBack({
      fail: () => {
        Taro.reLaunch({ url: '/robotaxi/pages/payment-setting/index' });
      }
    });
  }, []);

  /**
   * 关闭微信免密支付。
   */
  const handleClosePayment = async () => {
    if (isOperating || !isPayEnabled) {
      return;
    }

    const modalResult = await Taro.showModal({
      title: '',
      content: '确定关闭微信免密支付吗？',
      cancelText: '取消',
      confirmText: '确认',
      confirmColor: '#5A960A'
    });

    if (!modalResult.confirm) {
      return;
    }

    try {
      setIsOperating(true);
      await setPayPwd(RobotaxiPaySettingStatus.Disable);
      Taro.showToast({
        title: '微信免密支付已关闭',
        icon: 'none'
      });
      setTimeout(() => {
        navigateBackToList();
      }, 300);
    } catch (error) {
      Taro.showToast({
        title: '关闭失败',
        icon: 'none'
      });
    } finally {
      setIsOperating(false);
    }
  };

  useDidShow(() => {
    refreshPayStatus()
      .then((nextStatus) => {
        if (!nextStatus) {
          navigateBackToList();
        }
      })
      .catch(() => {
        Taro.showToast({
          title: '查询支付设置失败',
          icon: 'none'
        });
      });
  });

  return (
    <View className='payment-setting-detail-page'>
      <View className='payment-setting-detail-content'>
        <Image className='payment-setting-detail-icon' src={payMaxIcon} />
        <View className='payment-setting-detail-title'>已开通微信免密支付</View>
        <Text className='payment-setting-detail-description'>
          将优先从您指定的扣款方式扣款，若无法扣除，
        </Text>
        <Text className='payment-setting-detail-description'>
          则从其他支付方式扣款
        </Text>
      </View>

      <View
        className={`payment-setting-detail-close ${isOperating ? 'payment-setting-detail-close-disabled' : ''}`}
        onClick={handleClosePayment}
      >
        关闭微信免密支付
      </View>
    </View>
  );
}

 src/robotaxi/pages/payment-setting/index.tsx

@@ -1,7 +1,6 @@
import Taro, { useDidShow } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { useCallback, useEffect, useRef, useState } from 'react';
import backIcon from '../../assets/mine-back.png';
import arrowIcon from '../../assets/mine-arrow.png';
import payMiniIcon from '../../assets/pay-mini-icon.png';
import { getPayPwd, RobotaxiPaySettingStatus, setPayPwd } from '../../api/payment';
@@ -60,17 +59,6 @@
      throw error;
    }
  }, [requestPayStatus]);

  /**
   * 返回上一页。
   */
  const handleBack = () => {
    Taro.navigateBack({
      fail: () => {
        Taro.reLaunch({ url: '/robotaxi/pages/personal-center/index' });
      }
    });
  };

  /**
   * 处理支付分签约回跳。
@@ -143,6 +131,13 @@
      return;
    }

    if (isPayEnabled) {
      Taro.navigateTo({
        url: '/robotaxi/pages/payment-setting-detail/index'
      });
      return;
    }

    const nextOperateStatus = isPayEnabled
      ? RobotaxiPaySettingStatus.Disable
      : RobotaxiPaySettingStatus.Enable;