退款问题

ghsApp/src/pagesOrder/refund.vue

@@ -1,100 +1,14 @@
-<style lang="scss" scoped>
-	.app-content{
-		height: calc(100vh - 30upx * 2);
-		padding: 30upx;
-		background: #FFFFFF;
-		font-size: 30upx;
-		.radioBtn{
-			width: 30upx;
-			height: 30upx;
-			margin-right: 10upx;
-			border: 1upx solid #ddd;
-			border-radius: 50%;
-			&.active{
-				position: relative;
-				border: 1upx solid #3385ff;
-				&:after{
-					content: '';
-					position: absolute;
-					width: 18upx;
-					height: 18upx;
-					background: #3385ff;
-					border-radius: 50%;
-				}
-			}
-		}
-		.refund-item-list{
-			display: flex;
-			padding-bottom: 30upx;
-			border-bottom: 1upx solid #dddddd;
-			.refund-label{
-				width: 200upx;
-				text{color: red;}
-			}
-			.list{
-				margin-bottom: 10upx;
-				.list-title{
-					height: 60upx;
-					padding-bottom: 20upx;
-					.product-name{
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						width:310upx;
-						margin-right:20upx;
-					}
-				}
-				.list-val{
-					input{
-						width: 150upx;
-						border: 1upx solid #ddd;
-					}
-					text{
-						padding: 0 30upx;
-					}
-				}
-			}
-		}
-		.refund-item{
-			display: flex;
-			padding: 18upx 0;
-			.refund-label{
-				width: 200upx;
-				text{
-					color: red;
-				}
-			}
-			input{
-				border: 1upx solid #ddd;
-			}
-			textarea{
-				width: calc(100% - 210upx);
-				height:150upx;
-				border: 1upx solid #ddd;
-			}
-		}
-		.btn-box{
-			.btn{
-				width: 200upx;
-				height: 60upx;
-				border: 1upx solid #666666;
-				border-radius: 10upx;
-				&.active{
-					background: #3385ff;
-					color: #fff;
-					border: 1upx solid #3385ff;
-				}
-			}
-		}
-	}
-</style>
 <template>
 	<view class="app-content">
 		<view class="flex refund-item">
 			<view class="refund-label">退款方式：</view>
 			<view class="flex list">
-				<view class="flex" @tap="refundType=1" ><view class="flex-center radioBtn" :class="refundType==1?'active':''"></view>退货并退款</view>
-				<view style="margin-left: 20upx" class="flex" @tap="refundType=2"><view class="flex-center radioBtn" :class="refundType==1?'':'active'"></view>仅退款</view>
+				<view class="flex" @tap="refundType=1" >
+					<view class="flex-center radioBtn" :class="refundType==1?'active':''">
+					</view>退货并退款</view>
+				<view style="margin-left: 30upx" class="flex" @tap="refundType=2">
+					<view class="flex-center radioBtn" :class="refundType==1?'':'active'">
+						</view>仅退款</view>
 			</view>
 		</view>
 		<view class="refund-item-list" v-if="refundType==1">
@@ -102,29 +16,28 @@
 			<view>
 				<view class="list" v-for="(res,i) in product" :key="i">
 				<view class="flex list-title" >
-					<text class="product-name">{{res.name}}</text> {{ `${parseFloat(res.num)}` }}扎 {{`￥${parseFloat(res.price)}`}}
+					<text class="product-name">{{res.name}}</text>
+					<text class="product-num">{{ `${parseFloat(res.num)}` }}{{res.xhUnitName}}</text>
+					<text class="product-price">{{`￥${parseFloat(res.xhUnitPrice)}`}}/{{res.xhUnitName}}</text>
 				</view>
-				<view class="flex list-val">
-					<input type="number" @blur="inputFun" v-model="res.big"><text>扎</text>
-					<input type="number" @blur="inputFun" v-model="res.small"><text>支</text>
+				<view class="flex list-val" style="font-size:26upx;font-weight:bold;">
+					<input type="number" placeholder="退货数" v-model="res.refundCount" placeholder-style="color:#CCCCCC" />
+					<text style="margin-left:10upx;">{{res.xhUnitName}}</text>
+					<text style="color:green;margin-left:20upx;">可退{{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
 				</view>
 			</view>
 			</view>
 		</view>
 		<view class="flex refund-item">
-			<view class="refund-label">订单原价：</view>
-			<view class="list">￥{{parseFloat(orderInfo.prePrice)||0}}</view>
-		</view>
-		<view class="flex refund-item" v-if="orderInfo.discountType == 4">
-			<view class="refund-label">红包优惠：</view>
+			<view class="refund-label">订单金额：</view>
 			<view class="list">
-				<text style="color:red;margin-right:20upx;">-￥{{parseFloat(orderInfo.discountAmount) || 0}}</text>
-				<text v-if="parseFloat(orderInfo.realPrice) == parseFloat(refundMoney)" style="color:red;">红包将退还客户</text>
+				￥{{parseFloat(orderInfo.prePrice)||0}}
+				<text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">已退￥{{orderInfo.tkPrice}}</text>
 			</view>
 		</view>
 		<view class="flex refund-item">
-			<view class="refund-label">实付金额：</view>
-			<view class="list">￥{{parseFloat(orderInfo.realPrice)||0}}</view>
+			<view class="refund-label">可退金额：</view>
+			<view class="list">￥{{parseFloat(orderInfo.prePrice)||0}}</view>
 		</view>
 		<view class="flex refund-item">
 			<view class="refund-label"><text></text>退款金额：</view>
@@ -134,12 +47,9 @@
 			<view class="refund-label">备注：</view>
 			<textarea v-model="remark" />
 		</view>
-		<view class="refund-item">
-			<view style="color:#CCCCCC;">每个订单只能发起一次退款</view>
-		</view>
 		<view class="flex-center btn-box" style="margin-bottom:50upx;margin-top:20upx;">
-			<view class="flex-center btn" @tap="retreatPage">取消</view>
-			<view class="flex-center btn active" @tap="refundFun" style="margin-left: 50upx">确定</view>
+			<view class="flex-center btn" @tap="cancelRefund">取消</view>
+			<view class="flex-center btn active" @tap="confirmRefund" style="margin-left: 80upx">确定</view>
 		</view>
 	</view>
 </template>
@@ -157,82 +67,67 @@ export default {
 	data() {
 		return {
 			ORDER_STATUS,
-			isMonitor:true,
 			product:[],
 			refundMoney:0,
 			refundType:1,
 			remark:'',
-			refundPrice:0,
-			orderInfo:{},
-			discount:1
+			orderInfo:{}
 		};
 	},
 	onShow() {
 	},
 	computed:{
-	},
-	watch:{
-		product: {
-			handler(newVal) {
-				if(this.refundType == 2){
-					return
-				}
-				this.refundPrice = 0
-				if(!this.$util.isEmpty(newVal)){
-					newVal.forEach(ele=>{
-						let unitPrice = ele.unitPrice;
-						let big = ele.big * unitPrice;
-						let small = (ele.small * ele.smallUnitPrice).toFixed(2);
-						this.refundPrice = (Number(this.refundPrice) + big + Number(small)).toFixed(2);
-					})
-				}
-				let mayRefundMoney = parseFloat((this.refundPrice * this.discount).toFixed(2))
-				if(Number(mayRefundMoney) > Number(this.orderInfo.realPrice)){
-					mayRefundMoney = parseFloat(this.orderInfo.realPrice)
+		refundPrice(){
+			let price = 0
+			if(this.product){
+				for (const item of this.product) {
+					if(Number(item.refundCount)>0){
+						let currentPrice = Number(item.refundCount)*Number(item.xhUnitPrice)
+						currentPrice.toFixed(2)
+						price = Number(price) + Number(currentPrice)
+						price.toFixed(2)
+					}
 				}
-				this.refundMoney = Number(mayRefundMoney) == 0 ? null : Number(mayRefundMoney)
-			},
-			deep: true
+			}
+			this.refundMoney = price
+			return price
 		}
 	},
+	watch:{
+	},
 	methods: {
-		retreatPage(){
+		cancelRefund(){
 			uni.navigateBack({delta: 1});
 		},
-		refundFun(){
-			let product = [];
-			let hasError = false;
+		confirmRefund(){
+			let hasError = false
+			let product = []
 			let that = this
 			this.product.forEach(ele=>{
-				if(ele.big>0||ele.small>0){
-					product.push({"productId":ele.productId,"bigNum":ele.big?ele.big:0,"smallNum":ele.small?ele.small:0});
-				}
-				if(!this.$util.isEmpty(ele.big) && ele.big <= 0){
-					uni.showToast({title:'数量填写有误',icon:'none'})
+				let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0
+				let currentNum = ele.xhNum ? Number(ele.xhNum) : 0
+				let hasRefundNum = ele.refundNum ? Number(ele.refundNum) : 0
+				let couldRefundNum = Number(currentNum) - Number(hasRefundNum)
+				if(Number(currentRefundCont) > Number(couldRefundNum)){
+					uni.showToast({title:ele.name+'超过可退数量',icon:'none'})
 					hasError = true;
-					return;
+					return false
 				}
-				if(!this.$util.isEmpty(ele.small) && ele.small <= 0){
-					uni.showToast({title:'数量填写有误',icon:'none'})
-					hasError = true
-					return;					
+				if(Number(ele.refundCount)>0){
+					product.push({"productId":ele.productId,"num":ele.refundCount,"unitType":ele.unitType})
 				}
 			})
 			if(hasError){
 				return
 			}
-			if(this.refundMoney<=0){
-				uni.showToast({title:'退款金额不能小于0',icon:'none'});return;
-			}
 			if(this.$util.isEmpty(product)&&this.refundType==1){
 				uni.showToast({title:'请选择商品',icon:'none'})
 				return;
 			}
-			let parameter = {id:this.option.id,product:JSON.stringify(product),price:this.refundMoney,remark:this.remark,refundType:this.refundType,getOriginalItem:1};
-
+			let refundParams = {id:this.option.id,product:JSON.stringify(product),price:this.refundMoney,remark:this.remark,refundType:this.refundType,getOriginalItem:1};
 			that.$util.confirmModal({content:'确认退款？'},() => {
 				uni.showLoading({title: "提交中",mask:true})
-				refund(parameter).then(res => {
+				refund(refundParams).then(res => {
 					if(res.code == 1){
 						uni.hideLoading()
 						uni.navigateTo({url:'/common/success',query:{titleType:1}})
@@ -240,31 +135,125 @@ export default {
 				})
 			})
 		},
-		inputFun(e){
-			this.product.forEach(ele=>{
-				if(Number(ele.big)>Number(ele.bigNum)){
-					uni.showToast({title:'不能大于总数量',icon:'none'})
-					ele.big = ele.bigNum;
-				}
-				if(Number(ele.small)>Number(ele.smallNum)){
-					uni.showToast({title:'不能大于总数量',icon:'none'})
-					ele.small = ele.smallNum;
-				}
-			})
-		},
-		selectProduct(index){
-			this.product[index].isActive = !this.product[index].isActive;
-		},
 		async init() {
-			const res = await getDetail({
-				id: this.option.id,getOriginalItem:1
-			});
+			//getOriginalItem 取原有的花材结构（小菊的花材结构有变化）
+			const res = await getDetail({ id: this.option.id,getOriginalItem:1 })
 			this.orderInfo = res.data
-			this.discount = parseFloat((this.orderInfo.realPrice / this.orderInfo.prePrice).toFixed(2))
 			this.product = res.data.product.map(ele=>{
-				return {...ele,isActive:false,big:null,small:null}
+				return {...ele,refundCount:null}
 			})
-		},
+		}
 	}
 };
-</script>
+</script>
+<style lang="scss" scoped>
+	.app-content{
+		height: calc(100vh - 30upx * 2);
+		padding: 30upx;
+		background: #FFFFFF;
+		font-size: 30upx;
+		.radioBtn{
+			width: 30upx;
+			height: 30upx;
+			margin-right: 10upx;
+			border: 1upx solid #ddd;
+			border-radius: 50%;
+			&.active{
+				position: relative;
+				border: 1upx solid #3385ff;
+				&:after{
+					content: '';
+					position: absolute;
+					width: 18upx;
+					height: 18upx;
+					background: #3385ff;
+					border-radius: 50%;
+				}
+			}
+		}
+		.refund-item-list{
+			display: flex;
+			padding-bottom: 30upx;
+			padding-top: 30upx;
+			border-top: 1upx solid #e6e4e4;
+			border-bottom: 1upx solid #e6e4e4;
+			.refund-label{
+				width: 200upx;
+				color:#666666;
+				font-size:26upx;
+				text{color: red;}
+			}
+			.list{
+				margin-bottom: 10upx;
+				.list-title{
+					height: 60upx;
+					padding-bottom: 20upx;
+					font-size:26upx;
+					font-weight:bold;
+					.product-name{
+						overflow: hidden;
+						text-overflow:ellipsis;
+						white-space: nowrap;
+						width:190upx;
+					}
+					.product-price{
+						overflow: hidden;
+						text-overflow:ellipsis;
+						white-space: nowrap;
+						width:130upx;
+						margin-left:10upx;
+					}
+					.product-num{
+						width:90upx;
+						overflow: hidden;
+						text-overflow:ellipsis;
+						white-space: nowrap;
+						margin-left:10upx;
+					}
+				}
+				.list-val{
+					input{
+						width: 200upx;
+						border: 1upx solid #ddd;
+						text-align: center;
+						font-weight: normal;
+					}
+				}
+			}
+		}
+		.refund-item{
+			display: flex;
+			padding: 18upx 0;
+			.refund-label{
+				width: 200upx;
+				color:#666666;
+				font-size:26upx;
+				text{
+					color: red;
+				}
+			}
+			input{
+				border: 1upx solid #ddd;
+			}
+			textarea{
+				width: calc(100% - 210upx);
+				height:150upx;
+				border: 1upx solid #ddd;
+			}
+		}
+		.btn-box{
+			.btn{
+				width: 220upx;
+				height: 90upx;
+				border: 1upx solid #666666;
+				border-radius: 10upx;
+				color:#666666;
+				&.active{
+					background: #3385ff;
+					color: #fff;
+					border: 1upx solid #3385ff;
+				}
+			}
+		}
+	}
+</style>