|
|
import { StandardProps } from '@tarojs/components/types/common';
|
|
|
import { View, Image, Text } from '@tarojs/components';
|
|
|
import './charging.scss';
|
|
|
// import chargingImage from '@/assets/images/charging/charging.gif'
|
|
|
import { AtButton } from 'taro-ui';
|
|
|
import { RzIcon } from '@/components/RzIcon/RzIcon';
|
|
|
import {
|
|
|
useEffect,
|
|
|
useRouter,
|
|
|
useState,
|
|
|
useCallback,
|
|
|
useDidShow,
|
|
|
} from '@tarojs/taro';
|
|
|
import {
|
|
|
queryEquipmentStatus,
|
|
|
QueryEquipmentStatusRes,
|
|
|
stopCharge,
|
|
|
getDefaultCar,
|
|
|
isThirdPartyStation,
|
|
|
} from '@/services/charging';
|
|
|
import { showModal, showModalOnlyWithConfirmBtn } from '@/utils/wechat-ui';
|
|
|
import classNames from 'classnames';
|
|
|
import {
|
|
|
contact,
|
|
|
getUserInfoFromStorage,
|
|
|
scanCodeAndNavToConfirmFee,
|
|
|
} from '@/utils/utils';
|
|
|
import { events } from '@/utils/event-bus';
|
|
|
import imgCharging from '@/assets/images/charging/img_charging.gif';
|
|
|
|
|
|
type ChargingProps = {} & StandardProps;
|
|
|
export const Charging: Taro.FC<ChargingProps> = () => {
|
|
|
const router = useRouter();
|
|
|
const [defaultCar, setDefaultCar] = useState('');
|
|
|
const [userType, setUserType] = useState('1');
|
|
|
const [selectedCar, setSelectedCar] = useState('');
|
|
|
const [getTicketMsg, setGetTicketMsg] = useState('');
|
|
|
|
|
|
const [realTimeInfo, setRealTimeInfo] = useState<QueryEquipmentStatusRes>({
|
|
|
chargeCurSoc: 0,
|
|
|
chargeDuration: 0,
|
|
|
chargeDegree: 0,
|
|
|
chargeBalance: 0,
|
|
|
chargePower: 0,
|
|
|
chargeCurr: 0,
|
|
|
chargeVolt: 0,
|
|
|
equipmentSn: '--',
|
|
|
connectorSn: '--',
|
|
|
connectorNo: 1,
|
|
|
equipmentName: '--',
|
|
|
equipmentNo: 1,
|
|
|
equipmentType: 1,
|
|
|
chargeOrderNo: '--',
|
|
|
orderState: 2,
|
|
|
continueChargeFlag: false,
|
|
|
equipmentId: 1,
|
|
|
isBarrierFlag: 0,
|
|
|
stationName: '',
|
|
|
});
|
|
|
|
|
|
const getRealtimeInfo = useCallback(async () => {
|
|
|
const res = await queryEquipmentStatus({
|
|
|
orderNo: router.params.orderNo,
|
|
|
connectorSn: router.params.connectorSn,
|
|
|
});
|
|
|
if (res) {
|
|
|
setRealTimeInfo(res);
|
|
|
if (res.orderState !== 2) {
|
|
|
Taro.redirectTo({
|
|
|
url: `/pages/order-detail/order-detail?isFromCharging=${true}&orderNo=${router.params.orderNo
|
|
|
}`,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}, [router]);
|
|
|
|
|
|
events.on('onSelectedCar', (plateNo) => {
|
|
|
setSelectedCar(plateNo);
|
|
|
});
|
|
|
|
|
|
//TODO: 需要判断这笔订单是否领取领取停车券的接口
|
|
|
//TODO: selectedCar 变化就去调用领券方法
|
|
|
useEffect(() => {
|
|
|
console.log('selectedCar', selectedCar);
|
|
|
}, [selectedCar]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
getRealtimeInfo();
|
|
|
const id = setInterval(async () => {
|
|
|
getRealtimeInfo();
|
|
|
}, 5000);
|
|
|
return () => clearInterval(id);
|
|
|
}, [getRealtimeInfo]);
|
|
|
|
|
|
useDidShow(() => {
|
|
|
getUserInfoFromStorage().then((res) => {
|
|
|
setUserType(res.userType);
|
|
|
if (res.userType === '1' && realTimeInfo.isBarrierFlag === 1) {
|
|
|
getDefaultCar().then((res) => {
|
|
|
if (res) {
|
|
|
setDefaultCar(res.plateNo);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
const handleStop = async () => {
|
|
|
const res = await showModal(
|
|
|
'提示',
|
|
|
'确定要停止充电吗？请停止充电后将充电枪放回原位。'
|
|
|
);
|
|
|
if (res.confirm) {
|
|
|
const { equipmentSn, connectorNo, equipmentId } = realTimeInfo;
|
|
|
const stopRes = await stopCharge({
|
|
|
equipmentSn,
|
|
|
connectorNo,
|
|
|
equipmentId,
|
|
|
orderNo: router.params.orderNo,
|
|
|
});
|
|
|
if (stopRes) {
|
|
|
//是否为合作道闸车场，如果是有免费停车时长，跳转到选车界面
|
|
|
const freeTimeRes = await isThirdPartyStation({
|
|
|
order_no: router.params.orderNo,
|
|
|
});
|
|
|
|
|
|
if (freeTimeRes.success) {
|
|
|
const freeRes = await showModalOnlyWithConfirmBtn(
|
|
|
'提示',
|
|
|
'请输入车辆信息领取免费停车时长！'
|
|
|
);
|
|
|
if (freeRes.confirm) {
|
|
|
Taro.redirectTo({
|
|
|
url: `/pages/select-free-plate/select-free-plate?order_no=${router.params.orderNo}`,
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
Taro.redirectTo({
|
|
|
url: `/pages/order-detail/order-detail?isFromCharging=${true}&orderNo=${router.params.orderNo}`,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleContinueCharge = () => {
|
|
|
scanCodeAndNavToConfirmFee();
|
|
|
};
|
|
|
|
|
|
const handleNavToMyCar = () => {
|
|
|
Taro.navigateTo({ url: `/pages/my-car/my-car` });
|
|
|
};
|
|
|
|
|
|
const handleNavToMyCarToSelectCar = () => {
|
|
|
Taro.navigateTo({ url: `/pages/my-car/my-car?isSelectCar=${true}` });
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<View className="charging">
|
|
|
{getTicketMsg && (
|
|
|
<View className="charging__tip">
|
|
|
<RzIcon value="warning" color="#FF6584" size="17"></RzIcon>
|
|
|
{userType === '1' ? (
|
|
|
<Text className="charging__tip-text">
|
|
|
{defaultCar + getTicketMsg}
|
|
|
</Text>
|
|
|
) : (
|
|
|
<Text className="charging__tip-text">
|
|
|
{selectedCar + getTicketMsg}
|
|
|
</Text>
|
|
|
)}
|
|
|
</View>
|
|
|
)}
|
|
|
<View className="charging__title1">
|
|
|
<Text className="charging__title-text">
|
|
|
站点名称：{realTimeInfo.stationName}
|
|
|
</Text>
|
|
|
</View>
|
|
|
<View className="charging__title">
|
|
|
<Text className="charging__title-text">
|
|
|
枪号：{realTimeInfo.equipmentNo}号桩 {realTimeInfo.connectorNo}号枪
|
|
|
</Text>
|
|
|
<Text className="charging__title-text">
|
|
|
桩号：{realTimeInfo.equipmentSn}
|
|
|
</Text>
|
|
|
</View>
|
|
|
<View className="charging__title2">
|
|
|
<Text className="charging__title-text">
|
|
|
订单号：{realTimeInfo.chargeOrderNo}
|
|
|
</Text>
|
|
|
</View>
|
|
|
|
|
|
{realTimeInfo.equipmentType === 1 ? (
|
|
|
<View className="charging__soc">
|
|
|
<Text className="charging__soc-text">
|
|
|
{realTimeInfo.chargeCurSoc}
|
|
|
</Text>
|
|
|
<Text className="charging__unit">%</Text>
|
|
|
</View>
|
|
|
) : (
|
|
|
<View className="charging__slow">
|
|
|
<Text className="charging__slow-text">充电中</Text>
|
|
|
</View>
|
|
|
)}
|
|
|
<Image
|
|
|
className="charging__animation"
|
|
|
src={imgCharging}
|
|
|
mode="widthFix"></Image>
|
|
|
{realTimeInfo.isBarrierFlag === 1 &&
|
|
|
(userType === '1' ? (
|
|
|
<View>
|
|
|
<View className="charging__plate" onClick={handleNavToMyCar}>
|
|
|
<Text className="charging__plate-text">
|
|
|
{defaultCar ? defaultCar : '设置车牌'}
|
|
|
</Text>
|
|
|
</View>
|
|
|
{/* <View className="charging__plate">
|
|
|
<Text className="charging__plate-tip">
|
|
|
{defaultCar
|
|
|
? '充电结束将自动获得停车券'
|
|
|
: '设置车牌，充电结束将自动获得停车券'}
|
|
|
</Text>
|
|
|
</View> */}
|
|
|
</View>
|
|
|
) : (
|
|
|
<View>
|
|
|
<View
|
|
|
className="charging__plate"
|
|
|
onClick={handleNavToMyCarToSelectCar}>
|
|
|
<Text className="charging__plate-text">
|
|
|
{selectedCar ? selectedCar : '选择车辆领取停车券'}
|
|
|
</Text>
|
|
|
</View>
|
|
|
{/* <View className="charging__plate">
|
|
|
<Text className="charging__plate-tip">
|
|
|
{selectedCar
|
|
|
? '充电结束将自动获得停车券'
|
|
|
: '选择车牌，充电结束将自动获得停车券'}
|
|
|
</Text>
|
|
|
</View> */}
|
|
|
</View>
|
|
|
))}
|
|
|
|
|
|
<View className="realtime-info">
|
|
|
<View className="grid">
|
|
|
{[
|
|
|
{ name: '时长/分', value: realTimeInfo.chargeDuration },
|
|
|
{ name: '度数/度', value: realTimeInfo.chargeDegree },
|
|
|
{ name: '费用/元', value: realTimeInfo.chargeBalance },
|
|
|
{ name: '功率/千瓦', value: realTimeInfo.chargePower },
|
|
|
{ name: '电流/安', value: realTimeInfo.chargeCurr },
|
|
|
{ name: '电压/伏', value: realTimeInfo.chargeVolt },
|
|
|
].map((item) => {
|
|
|
return (
|
|
|
<View className="grid__item" key={item.name}>
|
|
|
<Text className="grid__item-value">{item.value}</Text>
|
|
|
<Text className="grid__item-unit">{item.name}</Text>
|
|
|
</View>
|
|
|
);
|
|
|
})}
|
|
|
</View>
|
|
|
<View className="feedback" onClick={() => contact()}>
|
|
|
联系客服
|
|
|
</View>
|
|
|
<View className="btn-box">
|
|
|
{realTimeInfo.continueChargeFlag && (
|
|
|
<AtButton
|
|
|
className="btn"
|
|
|
type="primary"
|
|
|
circle
|
|
|
onClick={handleContinueCharge}>
|
|
|
继续充电
|
|
|
</AtButton>
|
|
|
)}
|
|
|
<AtButton
|
|
|
className={classNames(
|
|
|
{ btn: realTimeInfo.continueChargeFlag },
|
|
|
'btn--wide'
|
|
|
)}
|
|
|
type={realTimeInfo.continueChargeFlag ? 'secondary' : 'primary'}
|
|
|
circle
|
|
|
onClick={handleStop}>
|
|
|
结束充电
|
|
|
</AtButton>
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
Charging.config = {
|
|
|
navigationBarTitleText: '充电中',
|
|
|
};
|
