shangfutong-ui/jeepay-ui-uapp-merchant/pages/order/refund.vue

<template>
	<view class="refund-wrapper">
		<JeepayCustomNavbar textColor="#fff" :transparent="true" title="订单退款" backCtrl="back" />
		<view class="refund-main">
			<view class="refund-title">退款金额</view>
			<view class="refund-money">
				<input type="digit" v-model="vdata.refundAmount" :maxlength="vdata.maxLength" id="" @input="inputChange" />
				<view class="icon-unit">(元)</view>
			</view>
			<view class="sure-refund">
				<text>可退 {{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount) }}</text>
				<view class="all-refund" @tap="vdata.refundAmount = cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount, true)">全部退款</view>
			</view>
			<view class="refund-title">退款原因</view>
			<view class="refund-reason">
				<input type="text" placeholder="请输入退款原因" placeholder-style=" color: rgba(255,255,255,0.35)" v-model="vdata.refundRemark" />
			</view>

			<view class="refund-info">
				<view class="info-title">订单金额</view>
				<view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
			</view>

			<view class="refund-info">
				<view class="info-title">已退金额</view>
				<view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.refundAmount) }}</view>
			</view>

			<view class="refund-info">
				<view class="info-title">剩余金额</view>
				<view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount) }}</view>
			</view>

			<view class="confirm-refund flex-center" hover-class="touch-button" hover-stay-time="150" @tap="confirmRefund">确认退款</view>
		</view>
	</view>
	<confirmRefundPopup ref="refundPopup" />
</template>

<script setup>
import { reactive, ref } from 'vue';
import { reqLoad, API_URL_PAY_ORDER_LIST, $payOrderRefund } from '@/http/apiManager.js';
import confirmRefundPopup from './components/confirmRefundPopup.vue';
import { onLoad } from '@dcloudio/uni-app';
import cal from '@/commons/utils/cal.js';
import datamap from '@/commons/utils/datamap.js';
import infoBox from '@/commons/utils/infoBox.js';
import ent from '@/commons/utils/ent.js';
import go from '@/commons/utils/go.js';
import emit from '@/commons/utils/emit.js';
onLoad((options) => {
	reqLoad.getById(API_URL_PAY_ORDER_LIST, options.payOrderId).then(({ bizData }) => {
		vdata.orderInfo = bizData;
	});
});
const refundPopup = ref(null);
const vdata = reactive({
	orderInfo: {},
	refundModel: 1,
	refundAmount: 0,
	refundRemark: '', // 退款原因
	maxLength: 15
});

// 确认退款
function confirmRefund() {
	if (isNaN(vdata.refundAmount) || vdata.refundAmount <= 0) {
		return infoBox.showToast('请输入退款金额');
	}

	if (parseFloat(vdata.refundAmount) > cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount, true)) {
		return infoBox.showToast('退款金额超限');
	}

	if (!vdata.refundRemark) {
		return infoBox.showToast('请输入退款原因');
	}

	// TODO 调起 支付密码弹层  发起请求。

	refundPopup.value.open(vdata.refundAmount, refundPost);
}
// 只能输入小数点后两位
const inputChange = (e) => {
	const value = e.detail.value;
	if (!value.includes('.')) return (vdata.maxLength = 15); //不包含小数点
	vdata.maxLength = value.split('.')[0].length + 3;
};
const refundPost = (payPassword) => {
	console.log('payPassword', payPassword);
	$payOrderRefund(vdata.orderInfo.payOrderId, vdata.refundAmount, vdata.refundRemark, payPassword, vdata.refundModel)
		.then(({ bizData }) => {
			infoBox.showSuccessToast('退款已申请').then(() => {
				// 刷新订单数据
				emit.pageEmit(emit.ENAME_REF_PAY_ORDER);
				refundPopup.value.close();
				go.back();
			});
		})
		.catch((err) => {
			refundPopup.value.clearInput();
		});
};
</script>

<style lang="scss" scoped>
.refund-wrapper {
	min-height: 100vh;
	background: linear-gradient(135deg, rgba(255, 91, 76, 1) 0%, rgba(203, 41, 114, 1) 100%);
	.refund-main {
		padding: 0 60rpx;
		.refund-title {
			margin: 50rpx 0 10rpx 0;
			font-size: 30rpx;
			color: rgba(255, 255, 255, 0.7);
		}
		.refund-money {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			min-height: 130rpx;
			color: #fff;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.25);
			input {
				height: 100rpx;
				font-size: 60rpx;
				font-weight: 500;
			}
			.icon-unit {
				transform: translateY(-33rpx);
				font-size: 30rpx;
				font-weight: 500;
			}
		}
		.sure-refund {
			display: flex;
			margin: 30rpx 0 20rpx 0;
			color: rgba(255, 255, 255, 0.6);
			font-size: 30rpx;
			font-weight: 400;
			.all-refund {
				margin-left: 30rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
		.refund-reason {
			display: flex;
			align-items: center;
			margin-bottom: 66rpx;
			height: 120rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.25);
			input {
				font-size: 30rpx;
				font-weight: 400;
				color: #fff;
			}
		}
		.refund-info {
			display: flex;
			justify-content: space-between;
			margin: 44rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			.info-title {
				color: rgba(255, 255, 255, 0.7);
			}
			.info-text {
				color: #fff;
				font-weight: 500;
			}
		}
		.confirm-refund {
			margin-top: 74rpx;
			height: 110rpx;
			border-radius: $v-b-r20;
			background-color: #fff;
			color: #dd3b65;
			font-size: 33rpx;
			font-weight: 500;
		}
	}
}
</style>