react native 价格计算 退货退款流程

React Native 版本执行0.57的规则

涉及到优惠券、积分、礼品卡支付等抵现的情况，没有发货退邮费，发货后不退邮费，复杂的地方在于计算那一块

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Modal, Image, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { requestUrl, ImgUrl } from '../../network/Url';// 请求url
import GetImages from '../../components/ImageCropPicker';//打开相机
import Loading from '../../components/Loading';
import Fetch from '../../network/Fetch';
import { CachedImage } from "react-native-img-cache";

export default class SubmitReturns extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            isGetImages: false,//相机开关
            examineImage: [],//上传图片集合
            imgIndex: 0,//照片的张数
            urlImgArr: [], //七牛云返回的图片集合
            visibleInfos: false,
            appealCause: [],//申诉列表数据
            appealCauseVal: '', //选中的申诉value
            quantityArrIndex: 0,//当前选中的index
            quantityArrTxt: "",//当前选中的文案
            orderDeail: [],//订单详情数据
            checkedShop: false, //是否选中商品
            checkedShopNum: 0, //选中的商品数量
            verifyingPass: false, //是否验证通过显示确认提交
            shopPrice: 0, //退货商品总价
            orderId: '',//订单详情传入的ID
            goodsId: [],//订单详情ID集合
            postage: 0,//订单运费
            nextSubmit: false,//下一步确认
            order: {}, //订单信息
            sumGoodsPrice: 0, //总退款金额
            sumTakeIntegral: 0, //返还的积分
            giftPrice: 0, //礼品卡退款金额
        }
    }
    componentWillMount() {
        if (this.props.navigation.state.params) {
            this.setState({
                orderId: this.props.navigation.state.params.orderId
            })
        }
    }
    componentDidMount() {
        this._getAppealApply() //获取申请申诉信息
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBar
                    animated={true}//是否动画
                    hidden={false}//是否隐藏
                    backgroundColor={'#000'}//android 设置状态栏背景颜色
                    translucent={false}//android 设置状态栏是否为透明
                    showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                    networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                    statusBarStyle={"default"}//状态栏样式 default	默认（IOS为白底黑字、Android为黑底白字）
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={"提交退货"} leftClick={() => { goBack() }} />
                <ScrollView>
                    {/* 退货流程图 */}
                    <View style={styles.returnTxt}>
                        <Text style={styles.commonReturnTxt}>提交退货</Text>
                        <Image source={require('../../images/return_arraw.png')} />
                        <Text style={styles.commonReturnTxt}>退货审核</Text>
                        <Image source={require('../../images/return_arraw.png')} />
                        <Text style={[styles.commonReturnTxt, { width: Px2dp(50) }]}>签收退货商品</Text>
                        <Image source={require('../../images/return_arraw.png')} />
                        <Text style={styles.commonReturnTxt}>立即退款</Text>
                        <Image source={require('../../images/return_arraw.png')} />
                        <Text style={styles.commonReturnTxt}>退款到账</Text>
                    </View>
                    {/* 商品信息 */}
                    <View style={[styles.productInfo, !this.state.verifyingPass ? { paddingBottom: Px2dp(16) } : { paddingBottom: 0 }]}>
                        <Text style={styles.productInfoTit}>商品信息</Text>
                        {
                            this.state.orderDeail.map((item, index) => {
                                return (
                                    <View style={[styles.productInfoDetails, { paddingLeft: Px2dp(16), paddingRight: Px2dp(16) }]} key={index}>
                                        {/* {
                                            this.state.verifyingPass ?
                                                null :
                                                <TouchableOpacity activeOpacity={0.8} style={styles.radioBox} onPress={() => {
                                                    this.state.orderDeail[index].checked = !this.state.orderDeail[index].checked
                                                    let goodsId = this.state.goodsId
                                                    if (this.state.orderDeail[index].checked == true) {
                                                        goodsId.push(item.id)
                                                    }
                                                    this.setState({
                                                        orderDeail: this.state.orderDeail,
                                                        checkedShop: this.state.orderDeail[index].checked,
                                                        checkedShopNum: item.goods_num,
                                                        goodsId: goodsId
                                                    })
                                                }}>
                                                    <Image source={item.checked ? require('../../images/on_icon.png') : require('../../images/off_icon.png')} />
                                                </TouchableOpacity>
                                        } */}
                                        <CachedImage style={{ width: Px2dp(70), height: Px2dp(70) }} source={{ uri: item.list_image }} />
                                        <View style={styles.productInfoDetailsBox}>
                                            <Text numberOfLines={2} style={styles.productInfoDetailsTxt}>{item.goods_name}</Text>
                                            {/* <Text style={styles.productInfoDetailsGg}>规格：XX</Text> */}
                                        </View>
                                        <View style={styles.productInfoDetailsRt}>
                                            <Text style={styles.productInfoPrice}>¥{Number(item.price / 100).toFixed(2)}</Text>
                                            <Text style={styles.productInfoPriceNum}>x{item.goods_num}</Text>
                                        </View>
                                    </View>
                                )
                            })
                        }
                        {!this.state.verifyingPass ? //验证没有通过
                            //是否选中商品
                            <View>
                                {/* <View style={styles.quantity}>
                                        <Text style={styles.quantityTxt}>退货数量</Text>
                                        <View style={styles.handleBox}>
                                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                // 减少商品数量
                                                if (this.state.checkedShopNum > 0) {
                                                    this.state.checkedShopNum--
                                                }
                                            }} style={[styles.commonMake, this.state.checkedShopNum == 1 ? { borderColor: '#e0e0e0' } : null]}>
                                                <Image source={this.state.checkedShopNum == 1 ? require('../../images/minus_n_icon.png') : require('../../images/minus_y_icon.png')} />
                                            </TouchableOpacity>
                                            <View activeOpacity={0.8} style={styles.commonMake}>
                                                <Text style={styles.numTxt}>{this.state.checkedShopNum}</Text>
                                            </View>
                                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                // 增加商品数量
                                                if (this.state.checkedShopNum <= this.state.checkedShopNum) {
                                                    this.state.checkedShopNum++
                                                }
                                                // this._addShopNum(indexs, index)
                                            }} style={[styles.commonMake, this.state.checkedShopNum >= this.state.checkedShopNum ? { borderColor: '#e0e0e0' } : null]}>
                                                <Image source={this.state.checkedShopNum >= this.state.checkedShopNum ? require('../../images/add_num_n_icon.png') : require('../../images/add_num_icon.png')} />
                                            </TouchableOpacity>
                                        </View>
                                    </View> */}
                                <TouchableOpacity activeOpacity={0.8} style={styles.quantity} onPress={() => {
                                    this.setState({
                                        visibleInfos: true
                                    })
                                }}>
                                    <Text style={styles.quantityTxt}>退货原因</Text>
                                    <View style={styles.quantityRt}>
                                        <Text style={[styles.quantityRtxt, this.state.quantityArrTxt ? { color: Colors.text333 } : null]}>{this.state.quantityArrTxt ? this.state.quantityArrTxt : '请选择退货原因'}</Text>
                                        <Image source={require('../../images/arrow_right_gray.png')} />
                                    </View>
                                </TouchableOpacity>
                            </View>
                            : //验证通过显示
                            <View>
                                <View style={styles.checkedInfos}>
                                    <Text style={styles.checkedInfosTxt}>退货原因:{this.state.quantityArrTxt}</Text>
                                </View>
                                <View style={styles.flowLists}>
                                    <View style={styles.flowListItems}>
                                        <Text style={styles.flowListItemTxt}>优惠活动</Text>
                                        <Text style={styles.flowListItemTxt}>¥{Number(this.state.order.discount_amount / 100).toFixed(2)}</Text>
                                    </View>
                                    <View style={styles.flowListItems}>
                                        <Text style={styles.flowListItemTxt}>礼品卡支付</Text>
                                        <Text style={styles.flowListItemTxt}>¥{Number(this.state.order.gift_ment / 100).toFixed(2)}</Text>
                                    </View>
                                    <View style={styles.flowListItem}>
                                        <Text style={styles.flowListItemTxt}>积分支付</Text>
                                        <Text style={styles.flowListItemTxt}>{Number(this.state.sumTakeIntegral)}</Text>
                                    </View>
                                    <View style={styles.flowListItems}>
                                        <Text style={styles.flowListItemTxt}>实付</Text>
                                        <Text style={[styles.flowListItemTxt, { color: Colors.red }]}>¥{Number(this.state.order.payment / 100).toFixed(2)}</Text>
                                    </View>
                                </View>
                            </View>
                        }
                    </View>
                    {
                        this.state.verifyingPass ?
                            <View style={styles.flowList}>
                                {/* <View style={styles.flowListItems}>
                                    <Text style={styles.flowListItemTxt}>退货商品总价</Text>
                                    <Text style={styles.flowListItemTxt}>¥{Number(this.state.sumGoodsPrice / 100).toFixed(2)}</Text>
                                </View> */}
                                <View style={styles.flowListItems}>
                                    <Text style={styles.flowListItemTxt}>退货运费补贴</Text>
                                    <Text style={styles.flowListItemTxt}>¥{this.state.order.status == "c010102" ? Number(this.state.postage / 100).toFixed(2) : 0}</Text>
                                </View>
                                <View style={styles.flowListItems}>
                                    <Text style={styles.flowListItemTxt}>礼品卡退款金额</Text>
                                    <Text style={styles.flowListItemTxt}>¥{Number(this.state.giftPrice / 100).toFixed(2)}</Text>
                                </View>
                                <View style={styles.flowListItem}>
                                    <Text style={styles.flowListItemTxt}>退还积分</Text>
                                    <Text style={styles.flowListItemTxt}>{Number(this.state.sumTakeIntegral)}</Text>
                                </View>
                                <View style={[styles.flowListItem, { borderBottomWidth: 0 }]}>
                                    <Text style={styles.flowListItemTxt}>退款金额</Text>
                                    <Text style={styles.flowListItemTxts}>¥{(Number(this.state.sumGoodsPrice / 100) + Number(this.state.order.status == "c010102" ? this.state.postage / 100 : 0)).toFixed(2)}</Text>
                                </View>
                            </View> :
                            null
                    }
                    {/* 上传凭证 */}
                    {
                        // 点击下一步确认
                        this.state.nextStep ? this.state.examineImage.length > 0 ?
                            <View style={styles.upDate}>
                                <Text style={styles.productInfoTit}>上传凭证</Text>
                                <View style={styles.productInfoBox}>
                                    {
                                        this.state.examineImage.length > 0 &&
                                        this.state.examineImage.map((item, index) => {
                                            return (
                                                <View key={index} style={styles.upDateImg}>
                                                    <TouchableOpacity onPress={() => {
                                                        let examineImage = this.state.examineImage;
                                                        examineImage.splice(index, 1)
                                                        console.log(examineImage)
                                                        this.setState({
                                                            examineImage: examineImage
                                                        })
                                                    }} style={[styles.viewPoimg, {
                                                        justifyContent: 'center',
                                                        alignItems: 'center'
                                                    }]}>
                                                        {/* <Image source={require('../../images/deleteCopy.png')} /> */}
                                                    </TouchableOpacity>
                                                    <Image style={{
                                                        width: Px2dp(70),
                                                        height: Px2dp(70),
                                                    }} source={{ uri: "data:image/jpeg;base64," + item.data }} />
                                                </View>
                                            )
                                        })
                                    }
                                    {
                                        this.state.examineImage.length > 2 ?
                                            null :
                                            this.state.nextStep ? null :
                                                <TouchableOpacity activeOpacity={0.8} style={styles.upDateBox} onPress={() => {
                                                    this.setState({
                                                        isGetImages: true
                                                    })
                                                }}>
                                                    <Image style={{ marginBottom: Px2dp(5) }} source={require('../../images/Album.png')} />
                                                    <Text style={styles.upDateTxt}>上传凭证</Text>
                                                    <Text style={styles.upDateTxt}>（最多3张）</Text>
                                                </TouchableOpacity>
                                    }
                                </View>
                            </View> : null :
                            <View style={styles.upDate}>
                                <Text style={styles.productInfoTit}>上传凭证</Text>
                                <View style={styles.productInfoBox}>
                                    {
                                        this.state.examineImage.length > 0 &&
                                        this.state.examineImage.map((item, index) => {
                                            return (
                                                <View key={index} style={styles.upDateImg}>
                                                    <TouchableOpacity onPress={() => {
                                                        let examineImage = this.state.examineImage;
                                                        examineImage.splice(index, 1)
                                                        console.log(examineImage)
                                                        this.setState({
                                                            examineImage: examineImage
                                                        })
                                                    }} style={[styles.viewPoimg, {
                                                        justifyContent: 'center',
                                                        alignItems: 'center'
                                                    }]}>
                                                        <Image source={require('../../images/deleteCopy.png')} />
                                                    </TouchableOpacity>
                                                    <Image style={{
                                                        width: Px2dp(70),
                                                        height: Px2dp(70),
                                                    }} source={{ uri: "data:image/jpeg;base64," + item.data }} />
                                                </View>
                                            )
                                        })
                                    }
                                    {
                                        this.state.examineImage.length > 2 ?
                                            null :
                                            this.state.nextStep ? null :
                                                <TouchableOpacity activeOpacity={0.8} style={styles.upDateBox} onPress={() => {
                                                    this.setState({
                                                        isGetImages: true
                                                    })
                                                }}>
                                                    <Image style={{ marginBottom: Px2dp(5) }} source={require('../../images/Album.png')} />
                                                    <Text style={styles.upDateTxt}>上传凭证</Text>
                                                    <Text style={styles.upDateTxt}>（最多3张）</Text>
                                                </TouchableOpacity>
                                    }
                                </View>
                            </View>
                    }
                </ScrollView>
                {/* 下一步 */}
                <TouchableOpacity activeOpacity={0.8} style={styles.nextStep} onPress={() => {
                    this.nextStepSumbit()

                    if (this.state.verifyingPass) {
                        //验证通过提交申诉
                        this._appealApply()
                    }
                }}>
                    <Text style={styles.nextStepTxt}>{this.state.verifyingPass ? "确认提交" : "下一步"}</Text>
                </TouchableOpacity>
                {/* 选择退货原因 */}
                <Modal
                    visible={this.state.visibleInfos}
                    animationType='fade'
                    transparent={true}
                    onRequestClose={() => { this.setState({ visibleInfos: false }) }}
                >
                    <TouchableOpacity
                        onPress={() => { this.setState({ visibleInfos: false }) }}
                        activeOpacity={1}
                        style={styles.maskClick}
                    >
                        <TouchableOpacity
                            onPress={() => { }}
                            activeOpacity={1}
                        >
                            <View style={styles.OptionBox}>
                                <Text style={styles.OptionBoxTit}>选择原因</Text>
                                {
                                    this.state.appealCause.map((item, index) => {
                                        return (
                                            <TouchableOpacity key={index} activeOpacity={0.8} style={[styles.OptionBoxs, index == 3 ? { borderBottomWidth: 0, marginBottom: Px2dp(20) } : null]} onPress={() => {
                                                this.setState({
                                                    quantityArrIndex: index,
                                                    quantityArrTxt: item.label,
                                                    appealCauseVal: item.value,
                                                    visibleInfos: false
                                                })
                                            }}>
                                                <Text style={styles.OptionBoxTxt}>{item.label}</Text>
                                                {
                                                    this.state.quantityArrTxt == "" ?
                                                        <Image source={require('../../images/off_icon.png')} /> :
                                                        <Image source={this.state.quantityArrIndex == index ? require('../../images/on_icon.png') : require('../../images/off_icon.png')} />
                                                }
                                            </TouchableOpacity>
                                        )
                                    })
                                }
                                <TouchableOpacity activeOpacity={0.8} style={styles.closeImg} onPress={() => {
                                    this.setState({
                                        visibleInfos: false
                                    })
                                }}>
                                    <Image source={require('../../images/close.png')} />
                                </TouchableOpacity>
                            </View>
                        </TouchableOpacity>
                    </TouchableOpacity>
                </Modal>
                {this.state.isGetImages ?
                    <GetImages
                        maxNum={3 - this.state.examineImage.length}
                        dataClick={(data) => {
                            // 获取到的数据
                            let examineImage = this.state.examineImage;
                            if (data instanceof Array) {
                                examineImage = examineImage.concat(data);
                            } else {
                                examineImage.push(data);
                            }
                            if (examineImage.length > 3) {
                                examineImage = examineImage.splice(examineImage.length - 3)
                            }
                            this.setState({
                                isGetImages: false,
                                examineImage: examineImage
                            })
                        }}
                        cancelClick={() => {
                            // 关闭事件
                            this.setState({
                                isGetImages: false
                            })
                        }}
                    />
                    : null
                }
                {this.state.isLoading ? <Loading /> : null}
            </View>
        );
    }
    //上传本地图片到七牛云
    upDataQiNiuImg(pathsTmp, imgAry) {

        // that.setState({
        //     imgIndex: 0,
        //     subFlag: true
        // })
    }
    //下一步提交
    nextStepSumbit() {
        if (this.state.quantityArrTxt == '') {
            ToastShow({ "text": '请选择退款原因' })
        }
        else {
            this.setState({
                verifyingPass: true,
                nextStep: true

            })
            let imgArr = this.state.examineImage;
            let _this = this;
            if (imgArr.length > 0) {
                for (let i = 0; i < imgArr.length; i++) {
                    // 创建图片路径
                    let _time = parseInt(new Date().getTime());
                    let suiji = Math.floor(Math.random() * 1000)
                    let year = new Date().getFullYear();
                    let month = new Date().getMonth() + 1;
                    let day = new Date().getDate();
                    let path = year + '/' + month + '/' + day + '/' + _time + suiji + imgArr[i].path.substr(imgArr[i].path.lastIndexOf("."));
                    let formData = new FormData();
                    formData.append("file", { uri: IOS ? "file://" + imgArr[i].path : imgArr[i].path, type: 'application/octet-stream', name: path });
                    Fetch(requestUrl.uptoken, { 'key': path }).then(data => {
                        formData.append("key", path);
                        formData.append("token", data.upToken);
                        fetch("https://upload.qiniup.com", {
                            method: 'POST',
                            headers: {},
                            body: formData,
                            contentType: false,
                            processData: false,
                        }).then((response) => response.json())
                            .then((responseData) => {
                                let temp = _this.state.urlImgArr;
                                temp.push(ImgUrl + responseData.key);
                                _this.setState({
                                    urlImgArr: temp,
                                });
                            })
                            .catch((error) => {
                                console.log('error', error);
                            });
                    })
                }
            }
        }
    }
    //获取申请申诉信息
    _getAppealApply() {
        this.setState({
            isLoading: true
        })
        Fetch(requestUrl, {
            'userId': UserInfo.id,
            'orderId': this.state.orderId,
        }).then(data => {
            if (data.status == 'SUCCESS') {
                console.log(data)
                //整理订单详情数据结构
                var newArr = [];
                var goodsId = []
                newArr = data.data.orderDeail

                var sumGoodsPrice = 0; //总退款金额
                var sumTakeIntegral = 0;//返还的积分
                var giftPrice = 0;//礼品卡退款金额

                newArr.map((item) => {
                    let price = item.price; //商品单价
                    let goods_num = item.goods_num; //商品数量
                    let integralprice = item.integralprice;
                    let discount_amount = item.discount_amount; //商品优惠
                    let goodsPrice = (price * goods_num) - integralprice - discount_amount;
                    sumGoodsPrice += goodsPrice
                    sumTakeIntegral += item.take_integral
                })
                // 如果礼品金额大于总价
                if (data.data.order.gift_ment >= sumGoodsPrice) {
                    giftPrice = sumGoodsPrice;
                } else {
                    giftPrice = data.data.order.gift_ment;
                }
                this.setState({
                    isLoading: false,
                    orderDeail: newArr,
                    shopPrice: data.data.sum,
                    appealCause: data.data.appealCause,
                    postage: data.data.order.postage,
                    goodsId: goodsId,
                    order: data.data.order,
                    sumGoodsPrice: sumGoodsPrice,
                    sumTakeIntegral: sumTakeIntegral,
                    giftPrice: giftPrice
                })
                console.log(this.state.order)
            } else if (data.status == "ERROR") {
                ToastShow({ "text": '获取申请申诉信息失败' })
                this.setState({
                    isLoading: false,
                })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
    //提交申诉信息
    _appealApply() {
        this.setState({
            isLoading: true
        })
        Fetch(requestUrl, {
            'userId': UserInfo.id,
            'orderId': this.state.orderId,
            'openId': UserInfo.appOpenId ? UserInfo.appOpenId : '',
            'cause': this.state.appealCauseVal,
            'Instruction': this.state.quantityArrTxt,
            'imgPath': this.state.urlImgArr.length > 0 ? this.state.urlImgArr.join("|") : '',
            'goodsIds': this.state.goodsId
        }).then(data => {
            if (data.status == 'SUCCESS') {
                this.setState({
                    isLoading: false
                })
                this.props.navigation.navigate('ReturnDetails', { orderId: this.state.orderId });
            } else if (data.status == "ERROR") {
                ToastShow({ "text": '提交申诉信息失败' })
                this.setState({
                    isLoading: false,
                })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.mainBg,
    },
    //退货流程图
    returnTxt: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: Colors.white,
        marginTop: Px2dp(10),
        height: Px2dp(72),
        marginBottom: Px2dp(10),
        paddingLeft: Px2dp(29),
        paddingRight: Px2dp(28)
    },
    commonReturnTxt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        lineHeight: Px2dp(20),
        width: Px2dp(32),
    },
    //商品信息
    radioBox: {
        paddingLeft: Px2dp(16),
        justifyContent: "center",
        alignItems: 'center',
        paddingRight: Px2dp(8)
    },
    productInfo: {
        backgroundColor: Colors.white,
        // paddingBottom: Px2dp(16),
    },
    productInfoTit: {
        fontSize: Px2dp(16),
        color: Colors.text333,
        paddingLeft: Px2dp(16),
        paddingTop: Px2dp(16)
    },
    productInfoDetails: {
        marginTop: Px2dp(16),
        flexDirection: 'row',
    },
    productInfoDetailsBox: {
        marginLeft: Px2dp(8)
    },
    productInfoDetailsTxt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        width: Px2dp(160),
        lineHeight: Px2dp(20)
    },
    productInfoDetailsGg: {
        fontSize: Px2dp(12),
        color: Colors.text888,
        lineHeight: Px2dp(17),
        marginTop: Px2dp(8)
    },
    productInfoDetailsRt: {
        flex: 1
    },
    productInfoPrice: {
        fontSize: Px2dp(13),
        color: Colors.text666,
        lineHeight: Px2dp(18),
        marginBottom: Px2dp(6),
        textAlign: 'right'
    },
    productInfoPriceNum: {
        fontSize: Px2dp(13),
        color: Colors.text999,
        lineHeight: Px2dp(18),
        textAlign: 'right'
    },
    // 上传凭证
    upDate: {
        backgroundColor: Colors.white,
        marginTop: Px2dp(10),
        paddingBottom: Px2dp(16),
        paddingRight: Px2dp(16),
        paddingTop: Px2dp(16),
    },
    upDateBox: {
        width: Px2dp(76),
        height: Px2dp(76),
        borderColor: '#dadada',
        borderWidth: Px2dp(1),
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: Px2dp(16),
        marginTop: Px2dp(16),
        borderStyle: 'dotted',
        position: "relative"
    },
    upDateImg: {
        width: Px2dp(76),
        height: Px2dp(76),
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: Px2dp(16),
        marginTop: Px2dp(16),
        position: "relative"
    },
    upDateTxt: {
        fontSize: Px2dp(12),
        color: Colors.text999
    },
    productInfoBox: {
        flexDirection: "row",
        alignItems: 'center'
    },
    quantity: {
        flexDirection: 'row',
        alignItems: "center",
        paddingLeft: Px2dp(16),
        marginTop: Px2dp(16),
        paddingRight: Px2dp(16)
    },
    quantityTxt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        flex: 1
    },
    //操作商品数量
    handleBox: {
        flexDirection: 'row',
        alignItems: "center",
    },
    commonMake: {
        width: Px2dp(30),
        height: Px2dp(24),
        borderWidth: Pixel,
        borderColor: '#999',
        justifyContent: 'center',
        alignItems: 'center',
    },
    numTxt: {
        color: Colors.text888
    },
    quantityRt: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    quantityRtxt: {
        fontSize: Px2dp(14),
        lineHeight: Px2dp(20),
        color: Colors.text999,
        marginRight: Px2dp(8)
    },
    // 下一步
    nextStep: {
        width: SCREEN_WIDTH,
        height: Px2dp(44),
        backgroundColor: Colors.red,
        justifyContent: 'center',
        alignItems: "center",
        marginBottom: TabBar
    },
    nextStepTxt: {
        fontSize: Px2dp(15),
        color: Colors.white
    },
    viewPoimg: {
        position: 'absolute',
        paddingTop: Px2dp(10),
        paddingBottom: Px2dp(10),
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        top: Px2dp(-15),
        right: Px2dp(-20),
        zIndex: 9999
    },
    // 选择退货原因
    maskClick: {
        flex: 1,
        backgroundColor: Colors.maskColor,
        justifyContent: 'flex-end',
    },
    OptionBoxTit: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        marginTop: Px2dp(24),
        textAlign: "center",
        marginBottom: Px2dp(16)
    },
    OptionBoxs: {
        flexDirection: "row",
        alignItems: "center",
        borderColor: '#ececec',
        borderBottomWidth: Pixel,
        height: Px2dp(40)
    },
    OptionBox: {
        justifyContent: "center",
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        paddingBottom: TabBar,
        position: "relative",
        backgroundColor: Colors.white,
    },
    OptionBoxTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        flex: 1,
    },
    closeImg: {
        position: "absolute",
        top: Px2dp(16),
        right: Px2dp(6),
        padding: Px2dp(10),
        justifyContent: "center",
        alignItems: "center"
    },
    //验证通过后的数据
    checkedInfos: {
        paddingLeft: Px2dp(16),
    },
    checkedInfosTxt: {
        fontSize: Px2dp(12),
        color: Colors.text999,
        lineHeight: Px2dp(17),
        marginTop: Px2dp(8),
        marginBottom: Px2dp(10)
    },
    checkedInfosBox: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    checkedInfosBoxLt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        lineHeight: Px2dp(20)
    },
    flowList: {
        backgroundColor: Colors.white,
        marginTop: Px2dp(10),
        paddingRight: Px2dp(16),
        paddingLeft: Px2dp(16),
        paddingTop: Px2dp(6),
        paddingBottom: Px2dp(6)
    },
    flowLists: {
        backgroundColor: Colors.white,
        paddingRight: Px2dp(16),
        paddingLeft: Px2dp(16),
        // paddingBottom: Px2dp(6)
    },
    flowListItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: 'center',
        height: Px2dp(40),
        borderBottomWidth: Pixel,
        borderBottomColor: '#ececec'
    },
    flowListItems: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: 'center',
        height: Px2dp(40),
    },
    flowListItemTxt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        lineHeight: Px2dp(20)
    },
    flowListItemTxts: {
        fontSize: Px2dp(14),
        color: Colors.red,
        lineHeight: Px2dp(20)
    }
});