169 lines
3.5 KiB
Vue
169 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
||
import { getSettlements } from '@/pagesMerchant/api'
|
||
import { SettlementStatus } from '@/typings/merchant'
|
||
import type { Settlement } from '@/typings/merchant'
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '结算记录',
|
||
},
|
||
})
|
||
|
||
const settlements = ref<Settlement[]>([])
|
||
const loading = ref(false)
|
||
|
||
// 状态配置
|
||
const statusConfig = {
|
||
[SettlementStatus.PENDING]: { label: '待结算', color: '#ff8f0d' },
|
||
[SettlementStatus.SETTLED]: { label: '已结算', color: '#00c05a' },
|
||
}
|
||
|
||
// 加载数据
|
||
async function loadData() {
|
||
loading.value = true
|
||
try {
|
||
const res = await getSettlements()
|
||
settlements.value = res.list
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="settlement-page">
|
||
<view v-if="settlements.length === 0" class="empty">
|
||
<text class="i-carbon-document"></text>
|
||
<text>暂无结算记录</text>
|
||
</view>
|
||
|
||
<view v-for="item in settlements" :key="item.id" class="settlement-card">
|
||
<view class="card-header">
|
||
<text class="settlement-no">{{ item.settlementNo }}</text>
|
||
<text class="status" :style="{ color: statusConfig[item.status].color }">
|
||
{{ statusConfig[item.status].label }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="card-body">
|
||
<view class="amount-row">
|
||
<text class="label">结算金额</text>
|
||
<text class="amount">¥{{ item.amount.toFixed(2) }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text>订单数：{{ item.orderCount }}笔</text>
|
||
<text>周期：{{ item.period }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-footer">
|
||
<text class="time">创建时间：{{ item.createTime }}</text>
|
||
<text class="time" v-if="item.settledTime">结算时间：{{ item.settledTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.settlement-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
padding: 20rpx;
|
||
width: 100%;
|
||
max-width: 540px;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
color: #999;
|
||
|
||
text:first-child {
|
||
font-size: 80rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.settlement-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 16rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
.settlement-no {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.card-body {
|
||
padding: 20rpx 0;
|
||
|
||
.amount-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #ff8f0d;
|
||
}
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-footer {
|
||
padding-top: 16rpx;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
|
||
.time {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
display: block;
|
||
|
||
& + .time {
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|