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: '', //选中的申诉valuequantityArrIndex: 0,//当前选中的indexquantityArrTxt: "",//当前选中的文案orderDeail: [],//订单详情数据checkedShop: false, //是否选中商品checkedShopNum: 0, //选中的商品数量verifyingPass: false, //是否验证通过显示确认提交shopPrice: 0, //退货商品总价orderId: '',//订单详情传入的IDgoodsId: [],//订单详情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}><StatusBaranimated={true}//是否动画hidden={false}//是否隐藏backgroundColor={'#000'}//android 设置状态栏背景颜色translucent={false}//android 设置状态栏是否为透明showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slidenetworkActivityIndicatorVisible={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 : {this.state.orderDeail[index].checked = !this.state.orderDeail[index].checkedlet goodsId = this.state.goodsIdif (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})}}>} */}<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>{/* 规格：XX */}</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>{/* 退货数量 {// 减少商品数量if (this.state.checkedShopNum > 0) {this.state.checkedShopNum--}}} style={[styles.commonMake, this.state.checkedShopNum == 1 ? { borderColor: '#e0e0e0' } : null]}>{this.state.checkedShopNum} {// 增加商品数量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]}>= this.state.checkedShopNum ? require('../../images/add_num_n_icon.png') : require('../../images/add_num_icon.png')} /> */}<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}>{/* 退货商品总价¥{Number(this.state.sumGoodsPrice / 100).toFixed(2)} */}<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'}]}>{/*  */}</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>{/* 选择退货原因 */}<Modalvisible={this.state.visibleInfos}animationType='fade'transparent={true}onRequestClose={() => { this.setState({ visibleInfos: false }) }}><TouchableOpacityonPress={() => { this.setState({ visibleInfos: false }) }}activeOpacity={1}style={styles.maskClick}><TouchableOpacityonPress={() => { }}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 ?<GetImagesmaxNum={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.orderDeailvar 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 += goodsPricesumTakeIntegral += 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)}
});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！