但是目前 iphone12显示 没问题 但是iphone15pro的话。就执行兜底逻辑了 iPhone12pro的 getBottomSpace 为 0
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-restricted-properties */
/* eslint-disable no-plusplus */
/* eslint-disable no-cond-assign */
import React, { Component } from 'react'
import {
View, StyleSheet, Text, Dimensions, TouchableWithoutFeedback
} from '@mrn/react-native'
import { connect } from 'react-redux'
import { getBottomSpace } from 'react-native-iphone-x-helper'
import { LinearGradient } from '@mrn/mrn-components'
import { color } from '../../styles/text'
import { ShoppingCart, CartPoiInfo, getActivityRule, ActivityRuleItem, getTipInfo, TipInfo } from '../../api/multiPerson'
import { Tip } from '@roo/roo-mobile-rn'
import { RooDialog } from '@mrn/waimai-materials'
import isEmpty from '../../utils/collectionUtils'
import convertRichTextArray from '../../utils/stringUtils'
import MRNUtils from '@mrn/mrn-utils'
import judas from '../../utils/constant'
interface Props {
shopcart: ShoppingCart
poiInfo: CartPoiInfo
on
OrderPreViewPress: Function
}
interface State {
preTotalAndBoxPrice : number
}
const BottomSafeHeightiOS = getBottomSpace() ? 34 : 8
const {
width
} = Dimensions.get('screen')
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
},
remindTipContainer: {
height: 30,
left: 15,
right: 15,
b
orderTopLeftRadius:6,
b
orderTopRightRadius:6,
width: width - 30,
backgroundColor: '#fff1cf',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
TipText: {
color: color.wm_common_text_main,
fontSize: 12
},
TipRedText: {
color: '#fb4e44',
fontSize: 12
},
poiResetContainer: {
height: 50 + BottomSafeHeightiOS,
paddingBottom: BottomSafeHeightiOS,
width: '100%',
color: '#373737f3',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000000'
},
poiResetText: {
fontSize: 16,
color: '#ffffff'
},
shopCartContainer: {
height: 50 + BottomSafeHeightiOS,
width: '100%',
flexDirection: 'row',
paddingHorizontal: 15,
justifyContent: 'space-between'
},
shopcartRemindTipContainer: {
height: 15,
top: 0,
width: '100%',
backgroundColor: '#fff1cf',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
noFoodsContainer: {
height: 50,
width: '100%',
top: 0,
left: 15,
paddingLeft: 25,
paddingRight: 20,
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
b
orderRadius: 25,
overflow: 'hidden',
backgroundColor: '#000000'
},
foodsContainer: {
height: 50,
width: '100%',
top: 0,
left: 15,
paddingLeft: 25,
paddingRight: 15,
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
b
orderRadius: 25,
overflow: 'hidden',
backgroundColor: '#000000'
},
noFoodShipFeeTipText: {
fontSize: 12,
color: color.wm_common_text_hint
},
noFoodMinPriceText: {
fontSize: 16,
color: color.wm_common_text_hint
},
leftContainer: {
width: width - 153,
height: '100%',
flexDirection: 'column',
justifyContent: 'center'
},
rightContainer: {
width: 98,
height: '100%',
backgroundColor: '#000000',
alignItems: 'center',
justifyContent: 'center'
},
curPriceText: {
fontSize: 21,
color: '#ffffff'
},
originPriceText: {
fontSize: 14,
color: color.wm_common_text_hint,
marginLeft: 8,
marginTop: 6,
textDecorationLine: 'line-through'
},
shippingFeeText: {
fontSize: 12,
color: color.wm_common_text_hint,
marginTop: 2,
},
submitText: {
fontSize: 16,
color: color.wm_common_text_main,
width: '100%',
paddingTop: 16,
paddingRight: 5,
textAlign: 'center'
},
submitDisableText: {
fontSize: 16,
color: color.wm_common_text_auxiliary,
width: '100%',
paddingRight: 15,
textAlign: 'center'
}
})
export class ShopcartView extends Component<Props, State> {
_calculateDialog = null
constructor(props) {
super(props)
this.state = {
preTotalAndBoxPrice: 0
}
//getBottomSpace的返回值
const bottomSpace = getBottomSpace()
const windowSize = Dimensions.get('window')
const screenSize = Dimensions.get('screen')
setTimeout(() => {
RooDialog.alert({
header: '调试信息',
message: `getBottomSpace: ${bottomSpace}
窗口尺寸: ${windowSize.width}x${windowSize.height}
屏幕尺寸: ${screenSize.width}x${screenSize.height}
最终值: ${bottomSpace ? 34 : 8}`,
btnOptions: [{
title: '确定',
press: () => {}
}]
})
}, 1000) // 延迟1秒显示，确保组件已挂载
}
//监听购物车价格变化，上报埋点
UNSAFE_componentWillReceiveProps(nextProps, prevState) {
const { poiInfo, shopcart } = nextProps;
if (shopcart?.original_price && this.state.preTotalAndBoxPrice != shopcart?.original_price) {
MRNUtils.lxTrackMGEViewEvent('waimai', judas.WM_SHOPPING_CART_CACULATER_VIEW_BID, judas.MULTI_PERSON_
ORDER_ACTIVITY_PV_CID, {
poi_id: poiInfo?.poi_id_str,
shopcart_orig_price: shopcart?.original_price,
is_meet_min_price: (poiInfo?.min_price > shopcart?.original_price) ? 0 : 1
})
} else {
}
this.setState({
preTotalAndBoxPrice: shopcart?.original_price
})
}
///是否有商品
_hasSkuCount = (shopcart: ShoppingCart) => {
if (shopcart === undefined || shopcart.shopping_list === undefined || shopcart.shopping_list.length === 0) {
return false
}
for (let i = 0; i < shopcart.shopping_list.length; i
++) {
const shopcartItem = shopcart.shopping_list[i]
if (shopcartItem !== undefined && shopcartItem.product_list.length > 0) {
return true
}
}
return false
}
//金额小数格式化。小数位数超出max则四舍五入截断;默认小数位数最大为2，如2.005 --> 2.01 , 2.001 --> 2
_formatDoubleMoney = (money: number) => {
const decimal: number = 2
const multiple = Math.pow(10, decimal) //设置浮点数要扩大的倍数
//防止出现2.00499999的情况
const newMoney = Math.floor(money * multiple + 0.50001)
const newMoneyStr: string = `${newMoney / multiple}`
//去除小数点之后的0
const start: number = newMoneyStr.indexOf('.')
let end: number = newMoneyStr.length
if (start >= 0 && start < end) {
let c = ''
while ((start < end) && (((c = newMoneyStr.substr(end - 1, 1)) === '0') || (c === '.'))) {
--end
}
return newMoneyStr.substr(0, end)
} else {
return newMoneyStr
}
}
// 是否满足起送
_lessThanMinPrice = (shopcart: ShoppingCart, poiInfo: CartPoiInfo) => {
const
order_
purchase_threshold_info = shopcart?.
order_
purchase_threshold_info;
if (
order_
purchase_threshold_info && typeof
order_
purchase_threshold_info === 'object' && !Array.isArray(
order_
purchase_threshold_info) && Object.keys(
order_
purchase_threshold_info).length > 0) {
//
order_
purchase_threshold_info 是
一个非空对象
const {
order_over_
purchase_threshold = false} =
order_
purchase_threshold_info;
return !
order_over_
purchase_threshold;
}
return shopcart.original_price <= poiInfo.min_price
}
///去下单按钮的文案
_previewText = (shopcart: ShoppingCart, poiInfo: CartPoiInfo) => {
if (shopcart === undefined || poiInfo === undefined) {
return ''
} else {
const diffPrice = poiInfo.min_price - shopcart.original_price
const diffPriceNum: number = (diffPrice < 0.01 && diffPrice > -0.001) ? 0.01 : diffPrice
const diffPriceStr = diffPrice > 0 ? `¥${this._formatDoubleMoney(diffPrice)}` : (`¥${diffPriceNum}`)
let previewText: string
const
order_
purchase_threshold_info = shopcart?.
order_
purchase_threshold_info;
if (this._lessThanMinPrice(shopcart, poiInfo)) {
previewText = `差${diffPriceStr}起送`
if (
order_
purchase_threshold_info && typeof
order_
purchase_threshold_info === 'object' && !Array.isArray(
order_
purchase_threshold_info)
&& Object.keys(
order_
purchase_threshold_info).length > 0 && !
order_
purchase_threshold_info.
order_over_
purchase_threshold){
const { tips = '' } =
order_
purchase_threshold_info;
previewText = tips ? tips : `差${diffPriceStr}起送` // 兜底
}
} else if (this._hasSingleBuyProductInfo(shopcart)) {
const singleBuy = shopcart.single_buy_product_info.tips
if (singleBuy === undefined || singleBuy.length <= 0) {
previewText = '单点不配送'
} else {
previewText = singleBuy
}
} else {
previewText = '去结算'
}
return previewText
}
}
//获取拼单中已经点菜的人数
get
OrderDishUserCount = (shoppingCart: ShoppingCart): number => {
if (shoppingCart !== undefined && shoppingCart.shopping_list !== undefined && !isEmpty(shoppingCart.shopping_list)) {
return shoppingCart.shopping_list.filter(shoppingItem => shoppingItem.product_list !== undefined && !isEmpty(shoppingItem.product_list)).length
} else {
return 0
}
}
_doCalculate() {
const tipInfo = getTipInfo(this.props.shopcart)
var msg = "去结算后，其他人将不可加入或修改商品"
if (tipInfo && tipInfo.popText && tipInfo.popText != '') {
msg = tipInfo.popText
}
this._calculateDialog = RooDialog.open({
header: '确认去结算吗？',
message: msg,
btnOptions: [{
title: '
取消',
press: () => {
if (this._calculateDialog) {
this._calculateDialog.remove()
this._calculateDialog = null
}
},
}, {
title: '确定',
press: () => {
if (this._calculateDialog) {
this._calculateDialog.remove()
this._calculateDialog = null
}
this.props.on
OrderPreViewPress()
},
}],
})
}
// 是否都是单点不送商品
_hasSingleBuyProductInfo = (shopcart: ShoppingCart) => shopcart !== undefined && shopcart.single_buy_product_info !== undefined && shopcart.single_buy_product_info.only_single_buy
shopCartTipInfoRender = (shopcart: ShoppingCart) => {
const defaultRet = (shopcart.shopping_list !== undefined && shopcart.shopping_list.length > 1)
&& <View
style={styles.remindTipContainer}
>
<Text style={styles.TipText}>您的</Text>
<Text style={styles.TipRedText}>{shopcart.shopping_list.length - 1}</Text>
<Text style={styles.TipText}>位拼友已完成拼单</Text>
</View>
if (!shopcart.tip_info || shopcart.tip_info.length === 0) {
return defaultRet
} else {
const tipInfo = JSON.parse(shopcart.tip_info) as TipInfo
console.log("multi-person shoppcart TipInfo")
if (tipInfo !== undefined && typeof tipInfo.tipText !== undefined) {
const richTextInfos = convertRichTextArray(tipInfo.tipText,'#FF4A26' ,'#222426' )
if (richTextInfos !== undefined && richTextInfos.length > 0) {
return <View style={styles.remindTipContainer}>
{richTextInfos.map(content => (
<Text style={[styles.TipText, { color: content.text_color }]}>{content.text}</Text>
))}
</View>
} else {
return defaultRet
}
} else {
return defaultRet
}
}
};
render() {
const { shopcart, poiInfo } = this.props
///兜底处理
if (shopcart === undefined || poiInfo === undefined) {
return <View />
}
const hasSkuCount = this._hasSkuCount(shopcart)
const poiStatusRest: boolean = poiInfo.status === 3
const
order_
purchase_threshold_info = shopcart?.
order_
purchase_threshold_info;
const
orderOver
Purchase =
order_
purchase_threshold_info?.
order_over_
purchase_threshold || false;
const useShowPrice = shopcart?.exp_res?.use_show_price_switch_gray_control || false;
return (
<View
style={styles.container}
>
{this.shopCartTipInfoRender(shopcart)}
{///打烊View
poiStatusRest
&& <View style={styles.poiResetContainer}>
<Text style={styles.poiResetText}>本店打烊啦</Text>
</View>
}
{ ///无商品购物车样式的view
poiStatusRest === false && hasSkuCount === false
&& <View style={styles.shopCartContainer}>
{(shopcart.shopping_list !== undefined && shopcart.shopping_list.length > 1)
&& <View
style={styles.shopcartRemindTipContainer}
/>
}
<View style={styles.noFoodsContainer}>
<Text style={styles.noFoodShipFeeTipText}>{shopcart.shipping_fee_cart_tip}</Text>
<Text style={styles.noFoodMinPriceText}>
¥
{poiInfo.min_price}
起送
</Text>
</View>
</View>
}
{ ///正常购物车样式的view
poiStatusRest === false && hasSkuCount === true
&& <View style={styles.shopCartContainer}>
{(shopcart.shopping_list !== undefined && shopcart.shopping_list.length > 1)
&& <View
style={styles.shopcartRemindTipContainer}
/>
}
<View style={styles.foodsContainer}>
<View style={styles.leftContainer}>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.curPriceText}>
¥
{shopcart.price}
</Text>
{useShowPrice && shopcart.underline_price > 0 && <Text style={styles.originPriceText}>¥{shopcart.underline_price}</Text>}
{!useShowPrice && shopcart.original_price > shopcart.price + 0.0001 && <Text style={styles.originPriceText}>
¥
{this._formatDoubleMoney(shopcart.original_price)}
</Text>}
</View>
<Text style={styles.shippingFeeText}>{shopcart.shipping_fee_cart_tip}</Text>
</View>
<View style={styles.rightContainer}>
{ ///去结算渐变View 和 差X元起送
((
orderOver
Purchase || shopcart.original_price > poiInfo.min_price) && !this._hasSingleBuyProductInfo(shopcart)) ? <TouchableWithoutFeedback
onPress={() => {
this._doCalculate()
}}
>
<LinearGradient
colors={['#FFE74D', '#FFDD19']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={{ flex: 1, width: '100%' }}
>
<Text style={styles.submitText}>{this._previewText(shopcart, poiInfo)}</Text>
</LinearGradient>
</TouchableWithoutFeedback>
: <Text style={styles.submitDisableText}>{this._previewText(shopcart, poiInfo)}</Text>
}
</View>
</View>
</View>
}
</View>
)
}
}
const mapState = state => ({
shopcart: state.page.shopcart,
poiInfo: state.page.response.poi_info
})
const mapDispatch = () => ({})
// Use react-redux's connect
export default
connect(
mapState,
mapDispatch
)(ShopcartView)
我怎么处理呢？
本文介绍了一种通过继承PurchCancel类并调用其构造方法及run方法来实现取消采购订单的功能。具体步骤包括创建一个继承自PurchCancel的新类，并在其中设置必要的参数。
扫一扫
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
