front-end/ghsApp/src/pagesOrder/refund.vue

<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>
		</view>
		<view class="refund-item-list" v-if="refundType==1">
			<view class="refund-label"><text></text>选择商品：</view>
			<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)}`}}
				</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>
			</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="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>
			</view>
		</view>
		<view class="flex refund-item">
			<view class="refund-label">实付金额：</view>
			<view class="list">￥{{parseFloat(orderInfo.realPrice)||0}}</view>
		</view>
		<view class="flex refund-item">
			<view class="refund-label"><text></text>退款金额：</view>
			<input type="digit" v-model="refundMoney">
		</view>
		<view class="refund-item">
			<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>
	</view>
</template>
<script>
import stepStatus from "./components/stepStatus";
import TuiListCell from "@/components/plugin/list-cell";
import { getDetail,refund } from "@/api/order/index";
import { ORDER_STATUS } from "@/utils/declare";
export default {
	name: "orderDetail",
	components: {
		stepStatus,
		TuiListCell
	},
	data() {
		return {
			ORDER_STATUS,
			isMonitor:true,
			product:[],
			refundMoney:0,
			refundType:1,
			remark:'',
			refundPrice:0,
			orderInfo:{},
			discount:1
		};
	},
	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)
				}
				this.refundMoney = Number(mayRefundMoney) == 0 ? null : Number(mayRefundMoney)
			},
			deep: true
		}
	},
	methods: {
		retreatPage(){
			uni.navigateBack({delta: 1});
		},
		refundFun(){
			let product = [];
			let hasError = false;
			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'})
					hasError = true;
					return;
				}
				if(!this.$util.isEmpty(ele.small) && ele.small <= 0){
					uni.showToast({title:'数量填写有误',icon:'none'})
					hasError = true
					return;					
				}
			})
			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};

			that.$util.confirmModal({content:'确认退款？'},() => {
				uni.showLoading({title: "提交中",mask:true})
				refund(parameter).then(res => {
					if(res.code == 1){
						uni.hideLoading()
						uni.navigateTo({url:'/common/success',query:{titleType:1}})
					}
				})
			})
		},
		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
			});
			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}
			})
		},
	}
};
</script>