front-end/ghsApp/src/admin/order/scanPayRefund.vue

<template>
<view class="app-content scan-pay-refund">
	<view class="card">
		<view class="row"><text class="label">订单金额</text><text class="val">¥{{ parseFloat(info.actPrice || 0) }}</text></view>
		<view class="row"><text class="label">已退金额</text><text class="val">¥{{ parseFloat(info.tkPrice || 0) }}</text></view>
		<view class="row"><text class="label">可退金额</text><text class="val price">¥{{ parseFloat(canRefundPrice) }}</text></view>
		<text class="tip online-tip" v-if="canOnlineRefund">此单线上付款，提交后钱会原路自动退回给客户</text>
	</view>

	<view class="card">
		<view class="form-label">退款金额</view>
		<view class="input-wrap">
			<input class="input" type="digit" v-model="refundMoney" placeholder="请输入退款金额" />
			<text class="unit">元</text>
		</view>
		<view class="form-label">备注</view>
		<textarea class="textarea" v-model="remark" placeholder="选填" maxlength="200" />
	</view>

	<view class="footer">
		<button class="admin-button-com bule middle" @click="confirmRefund">确认退款</button>
	</view>
</view>
</template>
<script>
import { getScanPayDetail, scanPayRefund } from "@/api/order";
export default {
	name: "scanPayRefund",
	data() {
		return {
			id: 0,
			info: {},
			canRefundPrice: 0,
			refundMoney: '',
			remark: ''
		};
	},
	computed: {
		canOnlineRefund() {
			const pw = Number(this.info.payWay);
			return pw === 0 || pw === 1;
		}
	},
	onLoad(option) {
		this.id = option.id || 0;
		this.loadDetail();
	},
	methods: {
		loadDetail() {
			if (!this.id) return;
			getScanPayDetail({ id: this.id }).then(res => {
				if (res.code != 1 || this.$util.isEmpty(res.data)) return;
				const data = res.data;
				this.info = data.info || {};
				this.canRefundPrice = data.canRefundPrice || 0;
				this.refundMoney = String(this.canRefundPrice > 0 ? this.canRefundPrice : '');
			});
		},
		confirmRefund() {
			const price = Number(this.refundMoney);
			if (!price || price <= 0) {
				return this.$msg('请填写退款金额');
			}
			if (price > Number(this.canRefundPrice)) {
				return this.$msg('退款金额超过可退金额');
			}
			let title = '确认退款 ¥' + price + ' ？';
			if (this.canOnlineRefund) {
				title = '提交后钱会原路退回给客户，确认退款 ¥' + price + ' ？';
			}
			uni.showModal({
				title: '确认退款',
				content: title,
				success: (res) => {
					if (res.confirm) this.submitRefund(price);
				}
			});
		},
		submitRefund(price) {
			scanPayRefund({ id: this.id, price, remark: this.remark }).then(res => {
				if (res.code == 1) {
					this.$msg('退款成功');
					setTimeout(() => {
						this.$util.pageTo({ url: '/admin/order/scanPayDetail', query: { id: this.id }, type: 2 });
					}, 500);
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.scan-pay-refund {
	padding-bottom: 120upx;
	background: #f9fbfc;
	min-height: 100%;
}
.card {
	margin: 20upx;
	padding: 30upx;
	background: #fff;
	border-radius: 12upx;
}
.row {
	display: flex;
	justify-content: space-between;
	padding: 16upx 0;
	font-size: 28upx;
	.label { color: #666; }
	.val { color: #333; }
	.price { color: #3385ff; font-weight: 600; }
}
.tip {
	display: block;
	margin-top: 16upx;
	padding: 16upx;
	font-size: 24upx;
	border-radius: 8upx;
}
.online-tip {
	background: #fff7e6;
	color: #ad760d;
}
.form-label {
	margin-top: 10upx;
	font-size: 28upx;
	color: #333;
}
.input-wrap {
	display: flex;
	align-items: center;
	margin-top: 16upx;
	padding: 0 20upx;
	height: 80upx;
	background: #f5f7fa;
	border-radius: 8upx;
}
.input { flex: 1; font-size: 32upx; }
.unit { color: #999; font-size: 28upx; }
.textarea {
	width: 100%;
	margin-top: 16upx;
	padding: 20upx;
	min-height: 160upx;
	background: #f5f7fa;
	border-radius: 8upx;
	font-size: 28upx;
	box-sizing: border-box;
}
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20upx 30upx 40upx;
	background: #fff;
}
</style>