forked from angelo/web-retail-h5
487 lines
11 KiB
Vue
487 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="refund-container">
|
|||
|
|
<!-- 导航栏 -->
|
|||
|
|
<u-navbar
|
|||
|
|
title="退款列表"
|
|||
|
|
:border-bottom="false"
|
|||
|
|
:background="{ backgroundColor: '#005bac' }"
|
|||
|
|
title-color="#fff"
|
|||
|
|
/>
|
|||
|
|
<view class="tips">
|
|||
|
|
<u-icon name="info-circle" color="#005bac" size="20"></u-icon>
|
|||
|
|
<text class="tips-text">如有疑问，请联系客服</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="date-filter">
|
|||
|
|
<view class="date-picker-container">
|
|||
|
|
<view class="date-input-wrapper" @click="showStartDatePicker = true">
|
|||
|
|
<text>{{ startDate || '开始时间' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="separator">至</text>
|
|||
|
|
<view class="date-input-wrapper" @click="showEndDatePicker = true">
|
|||
|
|
<text>{{ endDate || '结束时间' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<button class="search-button" @click="handleSearch">
|
|||
|
|
<u-icon name="search" color="#ffffff" size="20" />
|
|||
|
|
</button>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<u-empty
|
|||
|
|
mode="data"
|
|||
|
|
v-if="refundList.length === 0 && !loading"
|
|||
|
|
text="暂无退款记录"
|
|||
|
|
></u-empty>
|
|||
|
|
<!-- 退款列表 -->
|
|||
|
|
<view class="refund-list">
|
|||
|
|
<u-list @scrolltolower="loadMore" :show-scrollbar="false">
|
|||
|
|
<u-list-item v-for="(item, index) in refundList" :key="index">
|
|||
|
|
<view class="refund-item">
|
|||
|
|
<view class="refund-header">
|
|||
|
|
<view class="order-info">
|
|||
|
|
<text class="order-number"
|
|||
|
|
>订单编号：{{ item.businessCode }}</text
|
|||
|
|
>
|
|||
|
|
<text class="member-code">会员编号：{{ item.memberCode }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="refund-status"
|
|||
|
|
:class="getStatusClass(item.refundStatus)"
|
|||
|
|
>
|
|||
|
|
{{ getStatusText(item.refundStatus) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="refund-content">
|
|||
|
|
<view class="refund-amount">
|
|||
|
|
<text class="amount-label">退款金额</text>
|
|||
|
|
<text class="amount-value"
|
|||
|
|
>¥{{ stateFormat(item.refundMoney) }}</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<view class="refund-time">
|
|||
|
|
<text class="time-label">退款时间</text>
|
|||
|
|
<text class="time-value">{{
|
|||
|
|
formatDate(item.finishTime)
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-list-item>
|
|||
|
|
</u-list>
|
|||
|
|
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<u-loadmore :status="loadStatus" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-datetime-picker
|
|||
|
|
:show="showStartDatePicker"
|
|||
|
|
v-model="startDate"
|
|||
|
|
mode="date"
|
|||
|
|
@confirm="onStartDateConfirm"
|
|||
|
|
@cancel="showStartDatePicker = false"
|
|||
|
|
style="flex: 0"
|
|||
|
|
></u-datetime-picker>
|
|||
|
|
<u-datetime-picker
|
|||
|
|
:show="showEndDatePicker"
|
|||
|
|
v-model="endDate"
|
|||
|
|
mode="date"
|
|||
|
|
@confirm="onEndDateConfirm"
|
|||
|
|
@cancel="showEndDatePicker = false"
|
|||
|
|
style="flex: 0"
|
|||
|
|
></u-datetime-picker>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getRefundList } from '@/config/mine'
|
|||
|
|
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'RefundDetail',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 筛选条件
|
|||
|
|
startDate: '',
|
|||
|
|
endDate: '',
|
|||
|
|
showStartDatePicker: false,
|
|||
|
|
showEndDatePicker: false,
|
|||
|
|
maxDate: new Date().getTime(),
|
|||
|
|
|
|||
|
|
// 列表数据
|
|||
|
|
refundList: [],
|
|||
|
|
loading: false,
|
|||
|
|
loadStatus: 'loadmore',
|
|||
|
|
|
|||
|
|
// 分页参数
|
|||
|
|
currentPage: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
hasMore: true,
|
|||
|
|
|
|||
|
|
// 状态映射
|
|||
|
|
statusMap: {
|
|||
|
|
0: '退款申请中',
|
|||
|
|
1: '退款中',
|
|||
|
|
2: '已退款',
|
|||
|
|
3: '退款失败',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.loadRefundList()
|
|||
|
|
},
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
this.refreshList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 加载退款列表
|
|||
|
|
async loadRefundList(isLoadMore = false) {
|
|||
|
|
if (this.loading) return
|
|||
|
|
|
|||
|
|
this.loading = true
|
|||
|
|
this.loadStatus = 'loading'
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
pageNum: this.currentPage,
|
|||
|
|
pageSize: this.pageSize,
|
|||
|
|
startDate: this.startDate,
|
|||
|
|
endDate: this.endDate,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const res = await getRefundList(params)
|
|||
|
|
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const newList = res.rows || []
|
|||
|
|
|
|||
|
|
if (isLoadMore) {
|
|||
|
|
this.refundList = [...this.refundList, ...newList]
|
|||
|
|
} else {
|
|||
|
|
this.refundList = newList
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否还有更多数据
|
|||
|
|
this.hasMore = newList.length === this.pageSize
|
|||
|
|
this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
|
|||
|
|
|
|||
|
|
if (this.hasMore) {
|
|||
|
|
this.currentPage++
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$u.toast(res.message || '加载失败')
|
|||
|
|
this.loadStatus = 'loadmore'
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载退款列表失败：', error)
|
|||
|
|
this.$u.toast('加载失败，请重试')
|
|||
|
|
this.loadStatus = 'loadmore'
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
uni.stopPullDownRefresh()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
stateFormat(val) {
|
|||
|
|
if (val) {
|
|||
|
|
return Number(val)
|
|||
|
|
.toFixed(2)
|
|||
|
|
.replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
|
|||
|
|
return $1 + ','
|
|||
|
|
})
|
|||
|
|
.replace(/\.$/, '')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 加载更多
|
|||
|
|
loadMore() {
|
|||
|
|
if (this.hasMore && !this.loading) {
|
|||
|
|
this.loadRefundList(true)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 刷新列表
|
|||
|
|
refreshList() {
|
|||
|
|
this.currentPage = 1
|
|||
|
|
this.hasMore = true
|
|||
|
|
this.loadRefundList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 搜索
|
|||
|
|
handleSearch() {
|
|||
|
|
if (this.startDate && this.endDate && this.startDate > this.endDate) {
|
|||
|
|
this.$u.toast('开始日期不能大于结束日期')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.refreshList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 重置
|
|||
|
|
handleReset() {
|
|||
|
|
this.startDate = ''
|
|||
|
|
this.endDate = ''
|
|||
|
|
this.refreshList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onStartDateConfirm(e) {
|
|||
|
|
this.startDate = this.formatDate(new Date(e.value))
|
|||
|
|
this.startDateValue = e.value
|
|||
|
|
this.showStartDatePicker = false
|
|||
|
|
},
|
|||
|
|
onEndDateConfirm(e) {
|
|||
|
|
this.endDate = this.formatDate(new Date(e.value))
|
|||
|
|
this.endDateValue = e.value
|
|||
|
|
this.showEndDatePicker = false
|
|||
|
|
},
|
|||
|
|
// 格式化显示日期
|
|||
|
|
formatDate(dateString) {
|
|||
|
|
if (!dateString) return ''
|
|||
|
|
return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss')
|
|||
|
|
},
|
|||
|
|
// 获取状态文本
|
|||
|
|
getStatusText(status) {
|
|||
|
|
console.log(status)
|
|||
|
|
return this.statusMap[status] || '未知状态'
|
|||
|
|
},
|
|||
|
|
// 获取状态样式类
|
|||
|
|
getStatusClass(status) {
|
|||
|
|
const classMap = {
|
|||
|
|
0: 'status-pending',
|
|||
|
|
1: 'status-failed',
|
|||
|
|
2: 'status-success',
|
|||
|
|
3: 'status-cancelled',
|
|||
|
|
}
|
|||
|
|
return classMap[status] || 'status-default'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.refund-container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
margin: 16rpx 30rpx;
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
border-left: 3rpx solid #005bac;
|
|||
|
|
|
|||
|
|
.tips-text {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #005bac;
|
|||
|
|
font-weight: 400;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-section {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.date-filter {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.date-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border: 1px solid #e4e4e4;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
|
|||
|
|
.date-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-separator {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-list {
|
|||
|
|
padding: 10rpx 30rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-item {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
.refund-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.order-info {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.order-number {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-code {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-status {
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
&.status-pending {
|
|||
|
|
background-color: #fff7e6;
|
|||
|
|
color: #fa8c16;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-success {
|
|||
|
|
background-color: #f6ffed;
|
|||
|
|
color: #52c41a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-failed {
|
|||
|
|
background-color: #fff2f0;
|
|||
|
|
color: #ff4d4f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-cancelled {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #8c8c8c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-default {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-content {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.refund-amount,
|
|||
|
|
.refund-time {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
.amount-label,
|
|||
|
|
.time-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount-value {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #005bac;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-time {
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 响应式适配
|
|||
|
|
@media (max-width: 750rpx) {
|
|||
|
|
.filter-section {
|
|||
|
|
.date-filter {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
|
|||
|
|
.date-separator {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.date-filter {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15px 10px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
|
|||
|
|
.date-picker-container {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 4px;
|
|||
|
|
.date-input-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 6px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.separator {
|
|||
|
|
color: #999;
|
|||
|
|
margin: 0 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-button {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 36px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
background-color: #007aff;
|
|||
|
|
color: white;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 0;
|
|||
|
|
line-height: 1;
|
|||
|
|
border: none;
|
|||
|
|
&:after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|