114 lines
2.7 KiB
Vue
114 lines
2.7 KiB
Vue
<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>
|