| | |
| | | const AC_SWITCH_LOADING_ICON = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-switch-loading-v3.png'; |
| | | const AC_TOGGLE_FAIL_TEXT = '空调开关操作失败,请重试'; |
| | | const AC_TEMP_FAIL_TEXT = '温度设置失败,请重试'; |
| | | const AC_TEMP_MIN_TIP_TEXT = '已到空调最低设定温度'; |
| | | const AC_TEMP_MAX_TIP_TEXT = '已到空调最高设定温度'; |
| | | |
| | | type Props = { |
| | | tripStatus: TripStatus; |
| | |
| | | |
| | | const canToggleSwitch = tripStatus === TripStatus.VehicleApproaching && !isTogglingAc; |
| | | const canAdjustTemperature = canToggleSwitch && acStatusLoaded && acSwitchOn && typeof tempStatus === 'number'; |
| | | const tempButtonIconSuffix = acSwitchOn ? '' : '-no'; |
| | | const isAtMinTemperature = typeof tempStatus === 'number' && tempStatus <= TEMP_MIN; |
| | | const isAtMaxTemperature = typeof tempStatus === 'number' && tempStatus >= TEMP_MAX; |
| | | const decreaseButtonDisabled = !canAdjustTemperature || isAtMinTemperature; |
| | | const increaseButtonDisabled = !canAdjustTemperature || isAtMaxTemperature; |
| | | const decreaseButtonIconSuffix = decreaseButtonDisabled ? '-no' : ''; |
| | | const increaseButtonIconSuffix = increaseButtonDisabled ? '-no' : ''; |
| | | const tempTextDisabledClassName = acSwitchOn ? '' : 'color-000-25'; |
| | | |
| | | useEffect(() => { |
| | |
| | | }); |
| | | }; |
| | | |
| | | const handleDecreaseTemperature = () => { |
| | | if (!canAdjustTemperature) { |
| | | return; |
| | | } |
| | | if (isAtMinTemperature) { |
| | | Taro.showToast({ title: AC_TEMP_MIN_TIP_TEXT, icon: 'none' }); |
| | | return; |
| | | } |
| | | handleTempChange(-0.5); |
| | | }; |
| | | |
| | | const handleIncreaseTemperature = () => { |
| | | if (!canAdjustTemperature) { |
| | | return; |
| | | } |
| | | if (isAtMaxTemperature) { |
| | | Taro.showToast({ title: AC_TEMP_MAX_TIP_TEXT, icon: 'none' }); |
| | | return; |
| | | } |
| | | handleTempChange(0.5); |
| | | }; |
| | | |
| | | const handleToggleAcSwitch = async () => { |
| | | if (!canToggleSwitch) { |
| | | return; |
| | |
| | | <View className="car-card-temp-num-btn"> |
| | | { |
| | | canAdjustTemperature ? |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-down${tempButtonIconSuffix}.png`} onClick={() => handleTempChange(-0.5)} /> |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-down${decreaseButtonIconSuffix}.png`} onClick={handleDecreaseTemperature} /> |
| | | : |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-down${tempButtonIconSuffix}.png`} /> |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-down${decreaseButtonIconSuffix}.png`} /> |
| | | } |
| | | </View> |
| | | <View className="car-card-temp-num-text"> |
| | |
| | | <View className="car-card-temp-num-btn"> |
| | | { |
| | | canAdjustTemperature ? |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-up${tempButtonIconSuffix}.png`} onClick={() => handleTempChange(0.5)} /> |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-up${increaseButtonIconSuffix}.png`} onClick={handleIncreaseTemperature} /> |
| | | : |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-up${tempButtonIconSuffix}.png`} /> |
| | | <Image className="car-card-temp-num-btn-img" src={`https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/T-up${increaseButtonIconSuffix}.png`} /> |
| | | } |
| | | </View> |
| | | </View> |
| | | <View className={`car-card-temp-switch ${acSwitchOn ? 'car-card-temp-switch-open' : ''}`.trim()} onClick={handleToggleAcSwitch}> |
| | | { |
| | | isTogglingAc ? |
| | | <Image className="car-card-temp-switch-img" style={{ visibility: 'hidden' }} src={AC_SWITCH_OPEN_ICON} /> |
| | | : |
| | | acSwitchOn ? |
| | | <Image className="car-card-temp-switch-img" src={AC_SWITCH_CLOSE_ICON} /> |
| | | <View className="car-card-temp-switch-icon"> |
| | | { |
| | | isTogglingAc ? |
| | | <> |
| | | <Image className="car-card-temp-switch-img" style={{ visibility: 'hidden' }} src={AC_SWITCH_OPEN_ICON} /> |
| | | <Image |
| | | className="car-card-temp-switch-img car-card-temp-switch-img-spinning" |
| | | style={{ position: 'absolute', left: 0, top: 0 }} |
| | | src={AC_SWITCH_LOADING_ICON} |
| | | /> |
| | | </> |
| | | : |
| | | <Image className="car-card-temp-switch-img" src={AC_SWITCH_OPEN_ICON} /> |
| | | } |
| | | {!isTogglingAc && <View className="car-card-temp-switch-text">空调开关</View>} |
| | | {isTogglingAc && <View className="car-card-temp-switch-text" style={{ visibility: 'hidden' }}>空调开关</View>} |
| | | {isTogglingAc && <Image className="car-card-temp-switch-img car-card-temp-switch-img-spinning" style={{ position: 'absolute' }} src={AC_SWITCH_LOADING_ICON} />} |
| | | acSwitchOn ? |
| | | <Image className="car-card-temp-switch-img" src={AC_SWITCH_CLOSE_ICON} /> |
| | | : |
| | | <Image className="car-card-temp-switch-img" src={AC_SWITCH_OPEN_ICON} /> |
| | | } |
| | | </View> |
| | | <View className="car-card-temp-switch-text">空调开关</View> |
| | | </View> |
| | | </View> |
| | | </View> |