import Taro from '@tarojs/taro';
|
import { View, Text, Image } from '@tarojs/components';
|
import { useEffect, useState } from 'react';
|
import './css-folder/cancel-popup.less'
|
|
type Props = {
|
show?: boolean;
|
cancelType?: number;
|
startSite?: any;
|
endSite?: any;
|
waitMinutes?: number;
|
discountAmount?: number;
|
onClose?: () => void;
|
onConfirm?: () => void;
|
}
|
|
export default function CancelPopup({ show = false, cancelType = 1, startSite, endSite, waitMinutes, discountAmount, onClose, onConfirm }: Props) {
|
const [visible, setVisible] = useState(false);
|
const [animationData, setAnimationData] = useState<any>();
|
const cachedStartSite = startSite || Taro.getStorageSync('startSite') || {};
|
const cachedEndSite = endSite || Taro.getStorageSync('endSite') || {};
|
const startSiteName = cachedStartSite?.name || cachedStartSite?.address || '-';
|
const endSiteName = cachedEndSite?.name || cachedEndSite?.address || '-';
|
const waitMinutesValue = typeof waitMinutes === 'number' && !Number.isNaN(waitMinutes) ? waitMinutes : 2;
|
const discountAmountValue = typeof discountAmount === 'number' && !Number.isNaN(discountAmount) ? discountAmount : 0;
|
|
const STATUS_MAP = {
|
1: {
|
title: `${waitMinutesValue}分钟内预计有车，确定取消吗？`,
|
tip: `本单限时优惠${discountAmountValue}元，重新叫车可能等待更久`,
|
},
|
2: {
|
title: '正在为您重新派车中...',
|
tip: '当前车辆无法继续服务',
|
},
|
3: {
|
title: '附近没有空余车辆，已为您取消订单',
|
tip: '当前运力紧张，建议您稍后重新发起订单',
|
},
|
4: {
|
title: '订单已取消',
|
tip: '已为您取消订单，期待您下次体验',
|
},
|
}
|
|
useEffect(() => {
|
if (show && !visible) {
|
setVisible(true);
|
const animation = Taro.createAnimation({
|
duration: 300,
|
timingFunction: 'ease-out'
|
});
|
animation.translateY(0).step();
|
setAnimationData(animation.export());
|
} else if (!show && visible) {
|
const animation = Taro.createAnimation({
|
duration: 300,
|
timingFunction: 'ease-in'
|
});
|
animation.translateY(500).step();
|
setAnimationData(animation.export());
|
|
setTimeout(() => {
|
setVisible(false);
|
}, 300);
|
}
|
}, [show]);
|
|
if (!visible) return null;
|
|
return (
|
<View className='cancel-popup' catchMove>
|
<View className='cancel-mask'></View>
|
<View className='cancel-content' animation={animationData}>
|
<View className='cancel-box'>
|
<Image onClick={onClose} className='cancel-icon' src={require('../../../assets/close-icon.png')} />
|
</View>
|
<View className='cancel-tip-box'>
|
<View className='cancel-tip-box-title'>{STATUS_MAP[cancelType].title}</View>
|
{
|
((discountAmountValue > 0 && cancelType === 1) || cancelType !== 1) &&
|
<View className='cancel-tip-box-desc color1'>
|
本单限时优惠{discountAmountValue}元，重新叫车可能等待更久
|
</View>
|
}
|
<View className={`cancel-tip-box-desc ${cancelType === 4 && 'color1'}`}>{STATUS_MAP[cancelType].tip}</View>
|
</View>
|
{
|
[3, 4].includes(cancelType) ?
|
<View>
|
<View className='cancel-site-box'>
|
<View className='cancel-site-box-icon'>
|
<View className='cancel-site-box-icon-start'></View>
|
<Image src={require('../../../assets/dotted-line.png')} />
|
<View className='cancel-site-box-icon-end'></View>
|
</View>
|
<View className='cancel-site-box-content'>
|
<View>{startSiteName}</View>
|
<View>{endSiteName}</View>
|
</View>
|
</View>
|
<View className='cancel-btn-box'>
|
<View className='cancel-btn-again' onClick={onConfirm}>再来一单</View>
|
</View>
|
</View>
|
:
|
<View className='cancel-btn-box'>
|
<View className='cancel-btn-cancel' onClick={onConfirm}>确认取消</View>
|
<View className='cancel-btn-again' onClick={onClose}>再等等</View>
|
</View>
|
}
|
</View>
|
</View>
|
)
|
}
|
