import Taro, { useDidShow } from '@tarojs/taro';
|
import { View, Text, Image } from '@tarojs/components';
|
import { useCallback, useState } from 'react';
|
import { getPayPwd, RobotaxiPaySettingStatus, setPayPwd } from '../../api/payment';
|
import { withRobotaxiWhitelist } from '../../../utils/whitelist';
|
import { showToast } from '../../components/toast';
|
import { withToast } from '../../components/toast/with-toast';
|
|
import './index.less';
|
|
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);
|
showToast({
|
title: '微信免密支付已关闭',
|
icon: 'none'
|
});
|
setTimeout(() => {
|
navigateBackToList();
|
}, 300);
|
} catch (error) {
|
showToast({
|
title: '关闭失败',
|
icon: 'none'
|
});
|
} finally {
|
setIsOperating(false);
|
}
|
};
|
|
useDidShow(() => {
|
refreshPayStatus()
|
.then((nextStatus) => {
|
if (!nextStatus) {
|
navigateBackToList();
|
}
|
})
|
.catch(() => {
|
showToast({
|
title: '查询支付设置失败',
|
icon: 'none'
|
});
|
});
|
});
|
|
return (
|
<View className='payment-setting-detail-page'>
|
<View className='payment-setting-detail-content'>
|
<Image className='payment-setting-detail-icon' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/pay-max-icon.png" />
|
<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>
|
);
|
}
|
|
export default withRobotaxiWhitelist(withToast(PaymentSettingDetail));
|
