front-end/hdApp/src/admin/order/refund.vue

<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: 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">
			<view class="refund-label"><text></text>选择商品：</view>
			<view>
				<template v-if="!$util.isEmpty(goodsInfoList)">
					<view class="list" v-for="(res,i) in goodsInfoList" :key="i">
						<view class="flex list-title" >
							<text class="product-name">{{res.name}}</text>
							<text class="product-num">{{ `${parseFloat(res.num)}` }}份</text>
							<text class="product-price">{{`${parseFloat(res.unitPrice)}`}}元/份</text>
						</view>
						<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;">份</text>
							<text style="color:green;margin-left:20upx;">可退{{Number(res.num)-Number(res.refundNum)}}份</text>
						</view>
					</view>
				</template>
				<template v-if="!$util.isEmpty(itemInfoList)">
					<view class="list" v-for="(res,i) in itemInfoList" :key="i">
						<view class="flex list-title" >
							<text class="product-name">{{res.name}}</text>
							<text class="product-num">{{ `${parseFloat(res.num)}` }}{{res.unitName}}</text>
							<text class="product-price">{{`${parseFloat(res.unitPrice)}`}}元/{{res.unitName}}</text>
						</view>
						<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.unitName}}</text>
							<text style="color:green;margin-left:20upx;">可退{{Number(res.num)-Number(res.refundNum)}}{{res.unitName}}</text>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="flex refund-item">
			<view class="refund-label">订单金额：</view>
			<view class="list">
				￥{{parseFloat(orderInfo.orderPrice)||0}}
				<text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">已退￥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
			</view>
		</view>
		<view class="flex refund-item">
			<view class="refund-label">可退金额：</view>
			<view class="list">￥{{coundRefundPrice}}</view>
		</view>
		<view class="flex refund-item">
			<view class="refund-label"><text></text>退款金额：</view>
			<input type="digit" v-model="refundMoney" @focus="refundMoney=''">
		</view>
		<view class="refund-item">
			<view class="refund-label">备注：</view>
			<textarea v-model="remark" />
		</view>
		<view class="flex-center btn-box" style="margin-bottom:50upx;margin-top:20upx;">
			<view class="flex-center btn" @tap="cancelRefund">取消</view>
			<view class="flex-center btn active" @tap="confirmRefund" style="margin-left: 80upx">确定</view>
		</view>
	</view>
</template>
<script>
import { getDetail,refund } from "@/api/order/index";
export default {
	name: "orderDetail",
	components: {},
	data() {
		return {
			product:[],
			goodsInfoList:[],
			itemInfoList:[],
			refundMoney:0,
			refundType:1,
			remark:'',
			orderInfo:{},
			coundRefundPrice:0
		};
	},
	onShow() {
	},
	computed:{
		refundPrice(){
			let price = 0
			if(!this.$util.isEmpty(this.goodsInfoList)){
				for (const item of this.goodsInfoList) {
					if(Number(item.refundCount)>0){
						let currentPrice = Number(item.refundCount)*Number(item.unitPrice)
						currentPrice.toFixed(2)
						price = Number(price) + Number(currentPrice)
						price.toFixed(2)
					}

				}
			}
			if(!this.$util.isEmpty(this.itemInfoList)){
				for (const item of this.itemInfoList) {
					if(Number(item.refundCount)>0){
						let currentPrice = Number(item.refundCount)*Number(item.unitPrice)
						currentPrice.toFixed(2)
						price = Number(price) + Number(currentPrice)
						price.toFixed(2)
					}

				}
			}
			this.refundMoney = parseFloat(price.toFixed(2))
			return price
		}
	},
	watch:{
	},
	methods: {
		cancelRefund(){
			uni.navigateBack({delta: 1});
		},
		confirmRefund(){
			let hasError = false
			let selectProduct = []
			let that = this
			if(!this.$util.isEmpty(this.goodsInfoList)){
				this.goodsInfoList.forEach(ele=>{
					let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0

					let currentNum = ele.num ? Number(ele.num) : 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 false
					}
					if(Number(ele.refundCount)>0){
						selectProduct.push({"productId":ele.goodsId,"num":ele.refundCount,"unitType":ele.unitType,unitName:ele.unitName,unitPrice:ele.unitPrice,property:0})
					}
				})
			}
			if(!this.$util.isEmpty(this.itemInfoList)){
				this.itemInfoList.forEach(ele=>{
					let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0

					let currentNum = ele.num ? Number(ele.num) : 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 false
					}
					if(Number(ele.refundCount)>0){
						selectProduct.push({"productId":ele.itemId,"num":ele.refundCount,"unitType":ele.unitType,unitName:ele.unitName,unitPrice:ele.unitPrice,property:1})
					}
				})
			}
			if(hasError){
				return
			}
			if(this.$util.isEmpty(selectProduct)&&this.refundType==1){
				uni.showToast({title:'请选择商品',icon:'none'})
				return;
			}
			let refundParams = {product:JSON.stringify(selectProduct),id: this.option.id,price:this.refundMoney,remark:this.remark,refundType:this.refundType,getOriginalItem:1}
			that.$util.confirmModal({content:'确认退款？'},() => {
				uni.showLoading({mask:true})
				refund(refundParams).then(res => {
					uni.hideLoading()
					if(res.code == 1){
						this.$util.pageTo({url:'/common/success',query:{titleType:1},type:2})
					}
				})
			})
		},
		async init() {
			const res = await getDetail({ id: this.option.id})
			this.orderInfo = res.data
			
			this.coundRefundPrice = Number(res.data.orderPrice) - Number(res.data.tkPrice)
			this.coundRefundPrice = this.coundRefundPrice.toFixed(2)
			this.coundRefundPrice = parseFloat(this.coundRefundPrice)

			this.goodsInfoList = res.data.goodsInfoList.map(ele=>{
				return {...ele,refundCount:null}
			})
			this.itemInfoList = res.data.itemInfoList.map(ele=>{
				return {...ele,refundCount:null}
			})
		}
	}
};
</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>