114 lines
4.1 KiB
Vue
114 lines
4.1 KiB
Vue
<template>
|
||
<clinic-salesperson-page-layout :title="pageTitle" :show-back="true">
|
||
<view class="page">
|
||
<view class="summary">
|
||
<view class="sum-row">
|
||
<text class="label">邀请分成比例</text>
|
||
<text class="val">{{ summary.inviter_split }}%</text>
|
||
</view>
|
||
<view class="sum-row">
|
||
<text class="label">累计带来收益</text>
|
||
<text class="val amount">¥{{ summary.invite_total_amount }}</text>
|
||
</view>
|
||
<view class="sum-row">
|
||
<text class="label">待结算 / 已结算</text>
|
||
<text class="val">¥{{ summary.invite_pending_amount }} / ¥{{ summary.invite_settled_amount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="!list.length && !loading" class="empty">暂无收益明细</view>
|
||
<view v-for="item in list" :key="item.id" class="row">
|
||
<view class="top">
|
||
<text class="order">{{ item.order_no }}</text>
|
||
<text class="status">{{ item.settlement_id > 0 ? '已结算' : '待结算' }}</text>
|
||
</view>
|
||
<text class="patient">{{ item.patient_name }} {{ item.patient_mobile }}</text>
|
||
<text class="drug">{{ item.drug_name }} ×{{ item.qty }}</text>
|
||
<view class="bottom">
|
||
<text class="amount">¥{{ item.commission_amount }}</text>
|
||
<text class="time">{{ item.created_at }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</clinic-salesperson-page-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import ClinicSalespersonPageLayout from '@/subPackages/sub_clinic_salesperson/components/clinic-salesperson-page-layout.vue'
|
||
import { getClinicSalespersonCommissionList } from '@/api/clinicSalesperson.js'
|
||
|
||
export default {
|
||
components: { ClinicSalespersonPageLayout },
|
||
data() {
|
||
return {
|
||
sourceSalespersonId: 0,
|
||
nickName: '',
|
||
summary: {
|
||
inviter_split: '0.00',
|
||
invite_total_amount: '0.00',
|
||
invite_pending_amount: '0.00',
|
||
invite_settled_amount: '0.00',
|
||
},
|
||
list: [],
|
||
loading: false,
|
||
}
|
||
},
|
||
computed: {
|
||
pageTitle() {
|
||
return this.nickName ? `${this.nickName} 的收益明细` : '收益明细'
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.sourceSalespersonId = Number(options.source_salesperson_id || 0)
|
||
this.nickName = decodeURIComponent(options.nick_name || '')
|
||
this.summary = {
|
||
inviter_split: options.inviter_split || '0.00',
|
||
invite_total_amount: options.invite_total_amount || '0.00',
|
||
invite_pending_amount: options.invite_pending_amount || '0.00',
|
||
invite_settled_amount: options.invite_settled_amount || '0.00',
|
||
}
|
||
this.loadList()
|
||
},
|
||
methods: {
|
||
async loadList() {
|
||
if (this.sourceSalespersonId <= 0) return
|
||
this.loading = true
|
||
try {
|
||
const wrap = await getClinicSalespersonCommissionList({
|
||
page: 1,
|
||
pageSize: 100,
|
||
commission_source: 1,
|
||
source_salesperson_id: this.sourceSalespersonId,
|
||
})
|
||
if (wrap && wrap.ok) this.list = wrap.data?.items || []
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page { padding: 24rpx; }
|
||
.summary {
|
||
background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-radius: 12rpx;
|
||
padding: 24rpx; margin-bottom: 20rpx;
|
||
}
|
||
.sum-row { display: flex; justify-content: space-between; margin-bottom: 12rpx; font-size: 26rpx; }
|
||
.sum-row:last-child { margin-bottom: 0; }
|
||
.label { color: #666; }
|
||
.val { color: #333; font-weight: 500; }
|
||
.val.amount { color: #4db6a8; font-weight: 600; }
|
||
.empty { text-align: center; color: #999; padding: 80rpx 0; }
|
||
.row { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
|
||
.top { display: flex; justify-content: space-between; align-items: center; }
|
||
.order { font-size: 26rpx; font-weight: 600; }
|
||
.status { font-size: 22rpx; color: #999; }
|
||
.patient { display: block; font-size: 24rpx; color: #666; margin-top: 8rpx; }
|
||
.drug { display: block; font-size: 24rpx; color: #666; margin-top: 4rpx; }
|
||
.bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 12rpx; }
|
||
.amount { font-size: 28rpx; color: #4db6a8; font-weight: 600; }
|
||
.time { font-size: 22rpx; color: #999; }
|
||
</style>
|