front-end/jdApp/src/pagesOrder/refundMsg.vue

<style lang="scss" scoped>
	.app-content{
		height: calc(100vh - 30rpx * 2);
		padding: 30rpx;
		background: #FFFFFF;
		.radioBtn{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			border: 1px solid #ddd;
			border-radius: 50%;
			&.active{
				position: relative;
				border: 1px solid #3385ff;
				&:after{
					content: '';
					position: absolute;
					width: 18rpx;
					height: 18rpx;
					background: #3385ff;
					border-radius: 50%;
				}
			}
		}
		.refund-item-list{
			display: flex;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #dddddd;
			.refund-label{
				width: 200rpx;
				text{color: red;}
			}
			.list{
				margin-bottom: 10rpx;
				.list-title{
					height: 60rpx;
					padding-bottom: 20rpx;

				}
				.list-val{
					input{
						width: 150rpx;
						border: 1px solid #ddd;
					}
					text{
						padding: 0 30rpx;
					}
				}
			}
		}
		.refund-item{
			display: flex;
			padding: 20rpx 0;
			.refund-label{width: 200rpx;text{color: red;}}
			input{
				border: 1px solid #ddd;
			}
			textarea{
				width: calc(100% - 210rpx);
				border: 1px solid #ddd;
				height:150rpx;
			}
		}
		.btn-box{
			.btn{
				width: 200rpx;
				height: 60rpx;
				border: 1px solid #666666;
				border-radius: 10rpx;
				&.active{
					background: #3385ff;
					color: #fff;
					border: 1px 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" >{{refundType==1?'退货并退款':'仅退款'}}</view>
					</view>
				</view>
				<view class="refund-item-list" v-if="refundType==1">
					<view class="refund-label">选择商品：</view>
					<view>
						<view class="list" v-for="(res,i) in product" :key="i">
						<view class="flex list-title" >
							{{res.itemName}}  {{`￥${res.itemPrice}`}}
						</view>
						<view class="flex list-val">
							<input type="text" @focus="isMonitor = true" disabled v-model="res.bigNum"><text>扎</text>
							<input type="text" @focus="isMonitor = true" disabled v-model="res.smallNum"><text>支</text>
						</view>
					</view>
					</view>
				</view>
				<view class="flex refund-item">
					<view class="refund-label">订单原价：</view>
					<view class="list">{{parseFloat(prePrice)||0}}</view>
				</view>

				<view class="flex refund-item" v-if="discountType == 4">
					<view class="refund-label">红包优惠：</view>
					<view class="list">
						<text style="color:red;margin-right:20rpx;">-{{parseFloat(discountAmount) || 0}}</text>
						<text v-if="parseFloat(realPrice) == parseFloat(refundMoney)" style="color:red;">红包已退还</text>
					</view>
				</view>

				<view class="flex refund-item">
					<view class="refund-label">实付金额：</view>
					<view class="list">{{parseFloat(realPrice)||0}}</view>
				</view>

				<view class="flex refund-item">
					<view class="refund-label"><text></text>退款金额：</view>
					<input type="text" disabled v-model="refundMoney">
				</view>
		<view class=" refund-item">
			<view class="refund-label">备注：</view>
			<textarea disabled v-model="remark" />
		</view>
	</view>
</template>
<script>
import { refundDetail } from "@/api/refund/index";
export default {
	data() {
		return {
			isMonitor:true,
			product:'',
			refundMoney:0,
			refundType:1,
			remark:'',
			refundInfo:{},
			realPrice:0,
			prePrice:0,
			discountType:0,
			discountAmount:0
		};
	},
	onShow() {
	},
	methods: {
		init() {
			refundDetail({
				orderSn: this.option.orderSn
			}).then(res=>{
				this.refundInfo = res.data
				this.product = res.data.itemInfo;
				this.refundType = res.data.refundType;
				this.refundMoney = res.data.refundPrice;
				this.remark = res.data.remark;
				this.prePrice = res.data.orderInfo.prePrice
				this.discountType = res.data.orderInfo.discountType || 0
				this.discountAmount = res.data.orderInfo.discountAmount || 0
				if(this.discountType == 4){
					let realPrice = (Number(res.data.orderInfo.prePrice) - Number(res.data.orderInfo.discountAmount)).toFixed(2)
					this.realPrice = parseFloat(realPrice)
				}else{
					this.realPrice = parseFloat(res.data.orderInfo.realPrice)
				}
			})

		},
	}
};
</script>