You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
344 lines
7.5 KiB
344 lines
7.5 KiB
<template>
|
|
<!-- 商家账单详情 -->
|
|
<view class="page1">
|
|
<view class="title">
|
|
<view class="title-sreach">
|
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="left" size="28"></uni-icons>
|
|
</view>
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
|
账单详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<view class="summary-card">
|
|
<view class="summary-date">{{query.billTime || '-'}}</view>
|
|
<view class="summary-row">
|
|
<view>
|
|
<text>结算金额</text>
|
|
<view>￥{{formatMoney(query.totalSettlementAmount)}}</view>
|
|
</view>
|
|
<view>
|
|
<text>记录数</text>
|
|
<view>{{query.recordCount || 0}} 笔</view>
|
|
</view>
|
|
</view>
|
|
<view class="summary-mini">
|
|
<view>结算基数：￥{{formatMoney(query.totalBaseAmount)}}</view>
|
|
<view>平台服务费：￥{{formatMoney(query.totalCommissionAmount)}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="record-list">
|
|
<view class="record-card" v-for="item in detailList" :key="item.id" @tap="goOrderDetail(item)">
|
|
<view class="record-head">
|
|
<view>
|
|
<view class="record-title">{{item.type == 2 ? '退款/售后扣款' : '正常结算'}}</view>
|
|
<view class="record-sub">订单号：{{item.orderNumber || item.orderId || '-'}}</view>
|
|
</view>
|
|
<view class="record-amount" :class="{'negative': item.type == 2}">
|
|
{{item.type == 2 ? '-' : ''}}￥{{formatMoney(absAmount(item.settlementAmount))}}
|
|
</view>
|
|
</view>
|
|
<view class="record-grid">
|
|
<view>
|
|
<text>结算基数</text>
|
|
<view>￥{{formatMoney(item.baseAmount)}}</view>
|
|
</view>
|
|
<view>
|
|
<text>平台抽佣</text>
|
|
<view>￥{{formatMoney(item.commissionAmount)}}</view>
|
|
</view>
|
|
<view>
|
|
<text>抽佣比例</text>
|
|
<view>{{formatMoney(item.commissionRate)}}%</view>
|
|
</view>
|
|
<view>
|
|
<text>生成时间</text>
|
|
<view>{{formatDateTime(item.createTime)}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="record-footer">
|
|
<text>查看订单详情</text>
|
|
<uni-icons type="right" size="15" color="#9aa6a2"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="empty-state" v-if="!loading && detailList.length === 0">暂无账单明细</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: {},
|
|
loading: false,
|
|
query: {
|
|
shopId: '',
|
|
regionId: '',
|
|
billTime: '',
|
|
status: 0,
|
|
recordCount: 0,
|
|
totalSettlementAmount: 0,
|
|
totalBaseAmount: 0,
|
|
totalCommissionAmount: 0
|
|
},
|
|
detailList: []
|
|
}
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
onLoad(option) {
|
|
this.query = {
|
|
shopId: option.shopId || uni.getStorageSync('shopId') || '',
|
|
regionId: option.regionId || this.getRegionId(),
|
|
billTime: option.billTime || '',
|
|
status: Number(option.status || 0),
|
|
recordCount: Number(option.recordCount || 0),
|
|
totalSettlementAmount: option.totalSettlementAmount || 0,
|
|
totalBaseAmount: option.totalBaseAmount || 0,
|
|
totalCommissionAmount: option.totalCommissionAmount || 0
|
|
}
|
|
this.getDetailList()
|
|
},
|
|
methods: {
|
|
getRegionId() {
|
|
const area = uni.getStorageSync('area')
|
|
if (!area) return ''
|
|
if (typeof area === 'object') return area.id || ''
|
|
try {
|
|
return JSON.parse(area).id || ''
|
|
} catch (e) {
|
|
return ''
|
|
}
|
|
},
|
|
getDetailList() {
|
|
if (!this.query.shopId || !this.query.billTime) return
|
|
this.loading = true
|
|
this.tui.request('/mall/admin/settlement/detailList', 'POST', {
|
|
regionId: this.query.regionId,
|
|
shopId: this.query.shopId,
|
|
settlementDate: this.query.billTime,
|
|
status: this.query.status
|
|
}, false, false).then((res) => {
|
|
this.loading = false
|
|
if (res.code == 200) {
|
|
this.detailList = Array.isArray(res.result) ? res.result : []
|
|
} else {
|
|
this.tui.toast(res.message || '获取账单明细失败')
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
toAmount(value) {
|
|
const amount = parseFloat(value)
|
|
return isNaN(amount) ? 0 : amount
|
|
},
|
|
absAmount(value) {
|
|
return Math.abs(this.toAmount(value))
|
|
},
|
|
formatMoney(value) {
|
|
return this.toAmount(value).toFixed(2)
|
|
},
|
|
formatDateTime(value) {
|
|
if (!value) return '-'
|
|
const date = new Date(value)
|
|
if (isNaN(date.getTime())) return value
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|
},
|
|
goOrderDetail(item) {
|
|
if (!item || !item.orderId) {
|
|
this.tui.toast('未找到订单信息')
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '/package2/shop/orderDetail?id=' + item.orderId
|
|
})
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 200rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.back-btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.title-name {
|
|
padding-top: 110rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
width: 92%;
|
|
margin: -90rpx auto 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.summary-card,
|
|
.record-card {
|
|
background: #fff;
|
|
border-radius: 28rpx;
|
|
box-shadow: 0 14rpx 34rpx rgba(0, 35, 28, 0.08);
|
|
}
|
|
|
|
.summary-card {
|
|
padding: 28rpx;
|
|
margin-bottom: 22rpx;
|
|
background: linear-gradient(135deg, #00231C 0%, #14564a 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.summary-date {
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.summary-row > view {
|
|
flex: 1;
|
|
}
|
|
|
|
.summary-row text {
|
|
color: rgba(255,255,255,0.72);
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.summary-row view view {
|
|
margin-top: 8rpx;
|
|
color: #e3ff96;
|
|
font-size: 40rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.summary-mini {
|
|
margin-top: 20rpx;
|
|
color: rgba(255,255,255,0.76);
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.record-card {
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.record-head,
|
|
.record-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.record-title {
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.record-sub {
|
|
margin-top: 8rpx;
|
|
color: #7a8582;
|
|
font-size: 23rpx;
|
|
max-width: 420rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-amount {
|
|
color: #0b9b73;
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.record-amount.negative {
|
|
color: #f0441f;
|
|
}
|
|
|
|
.record-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16rpx;
|
|
margin-top: 20rpx;
|
|
padding: 18rpx;
|
|
border-radius: 22rpx;
|
|
background: #f7faf8;
|
|
}
|
|
|
|
.record-grid text {
|
|
color: #7a8582;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.record-grid view view {
|
|
margin-top: 6rpx;
|
|
font-weight: 800;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-footer {
|
|
margin-top: 18rpx;
|
|
padding-top: 18rpx;
|
|
border-top: 1rpx solid #eef2ef;
|
|
color: #0b9b73;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 80rpx 0;
|
|
text-align: center;
|
|
color: #9aa6a2;
|
|
}
|
|
</style>
|
|
|