first

pages/order/components/RefundCard.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="refund-wrapper" v-if="vdata.list.length > 0">
+		<view class="refund-title">退款记录</view>
+		<!-- 列表循环部分 start border-none 去掉边框类名 -->
+		<block v-for="(item, i) in vdata.list" :key="i">
+			<view class="refund-item border-none">
+				<view class="refund-money">
+					<view>退：￥{{ cal.cert2Dollar(item.refundAmount) }}</view>
+					<view>余：￥{{ calSubAmount(i) }}</view>
+				</view>
+				<view class="refund-time">{{ item.createdAt }}</view>
+			</view>
+		</block>
+		<!-- 列表循环部分end -->
+		<view v-if="props.refundBtn" class="refund-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="emits('refund')">发起退款</view>
+	</view>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { reqLoad, API_URL_REFUND_LIST } from '@/http/apiManager.js';
+import { onPageScroll, 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';
+
+const props = defineProps({
+	refundBtn: { type: Boolean, default: false },
+	orderInfo: {
+		type: Object,
+		default: () => {
+			return {};
+		}
+	}
+});
+
+const vdata = reactive({
+	list: []
+});
+
+// 刷新列表
+function refList(payOrderId) {
+	reqLoad.list(API_URL_REFUND_LIST, { payOrderId: payOrderId, state: 2, pageSize: -1 }).then(({ bizData }) => {
+		vdata.list = bizData.records;
+		emits('refRefundCountFunc', bizData.total);
+	});
+}
+
+function calSubAmount(index) {
+	let allRefundAmount = 0;
+
+	for (var i = index; i < vdata.list.length; i++) {
+		allRefundAmount += vdata.list[i].refundAmount;
+	}
+
+	return cal.cert2Dollar(props.orderInfo.amount - allRefundAmount);
+}
+
+const emits = defineEmits(['refund', 'refRefundCountFunc']);
+
+defineExpose({ refList });
+</script>
+
+<style lang="scss" scoped>
+.refund-wrapper {
+	padding: 0 75rpx;
+	padding-bottom: 70rpx;
+	box-sizing: border-box;
+	.refund-title {
+		margin: 70rpx 0 30rpx 0;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #fff;
+	}
+	.refund-item {
+		height: 160rpx;
+		border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
+
+		.refund-money {
+			display: flex;
+			justify-content: space-between;
+			margin: 30rpx 0 20rpx 0;
+			color: #fff;
+			font-size: 30rpx;
+			font-weight: 400;
+		}
+		.refund-time {
+			margin-bottom: 30rpx;
+			color: rgba(255, 255, 255, 0.65);
+			font-size: 30rpx;
+			font-weight: 400;
+		}
+	}
+	.border-none {
+		border: none;
+	}
+	.refund-button {
+		margin-top: 70rpx;
+		height: 110rpx;
+		font-size: 33rpx;
+		font-weight: 500;
+		color: #ff5b4c;
+		background-color: $J-bg-ff;
+		border-radius: $v-b-r20;
+	}
+}
+.touch-button {
+	opacity: 0.5;
+}
+</style>