98 lines
3.6 KiB
Vue
98 lines
3.6 KiB
Vue
<template>
|
|
<page-layout :is-platform="ctx.isPlatform" title="结算详情" :show-back="true">
|
|
<view class="page" v-if="detail">
|
|
<view class="card">
|
|
<text class="no">{{ detail.settlement_no }}</text>
|
|
<view class="row"><text>结算方式</text><text>{{ detail.settlement_type_text }}</text></view>
|
|
<view class="row"><text>结算金额</text><text class="amount">¥{{ detail.amount }}</text></view>
|
|
<view class="row"><text>明细数</text><text>{{ detail.record_count }}</text></view>
|
|
<view class="row"><text>时间</text><text>{{ detail.created_at_text }}</text></view>
|
|
<view v-if="detail.remark" class="row"><text>备注</text><text>{{ detail.remark }}</text></view>
|
|
</view>
|
|
|
|
<view v-if="proofImages.length" class="proof-section">
|
|
<text class="section-title">结算凭证</text>
|
|
<view class="proof-list">
|
|
<image
|
|
v-for="(url, idx) in proofImages"
|
|
:key="url"
|
|
class="proof-img"
|
|
:src="url"
|
|
mode="aspectFill"
|
|
@click="previewProof(idx)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="lines.length" class="lines-section">
|
|
<text class="section-title">明细</text>
|
|
<view v-for="(line, idx) in lines" :key="idx" class="line-row">
|
|
<text class="line-order">{{ line.order_no }}</text>
|
|
<text class="line-drug">{{ line.drug_info }}</text>
|
|
<text class="line-amount">¥{{ line.commission_amount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import PageLayout from '../components/PageLayout.vue';
|
|
import { getSalespersonManageContext, resolveManageMode } from '../common/context.js';
|
|
|
|
export default {
|
|
components: { PageLayout },
|
|
data() {
|
|
return {
|
|
ctx: getSalespersonManageContext('clinic'),
|
|
detail: null,
|
|
lines: [],
|
|
proofImages: [],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.ctx = getSalespersonManageContext(resolveManageMode(options));
|
|
this.loadDetail(Number(options.id || 0), Number(options.store_id || 0));
|
|
},
|
|
methods: {
|
|
async loadDetail(id, storeId) {
|
|
if (!id) return;
|
|
const params = { id };
|
|
if (storeId > 0) params.store_id = storeId;
|
|
const wrap = await this.ctx.api.getSettlementDetail(params);
|
|
if (!wrap || !wrap.ok) return;
|
|
this.detail = wrap.data;
|
|
this.lines = (wrap.data && wrap.data.lines) ? wrap.data.lines : (wrap.data.records || []);
|
|
const proofs = wrap.data && wrap.data.proof_images;
|
|
if (Array.isArray(proofs)) {
|
|
this.proofImages = proofs;
|
|
} else if (typeof proofs === 'string' && proofs) {
|
|
try { this.proofImages = JSON.parse(proofs); } catch (e) { this.proofImages = [proofs]; }
|
|
} else {
|
|
this.proofImages = [];
|
|
}
|
|
},
|
|
previewProof(idx) {
|
|
uni.previewImage({ urls: this.proofImages, current: this.proofImages[idx] });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page { padding: 24rpx; }
|
|
.card { background: #fff; border-radius: 20rpx; padding: 28rpx; margin-bottom: 24rpx; }
|
|
.no { display: block; font-size: 32rpx; font-weight: 600; margin-bottom: 20rpx; }
|
|
.row { display: flex; justify-content: space-between; font-size: 26rpx; margin-bottom: 12rpx; color: #666; }
|
|
.amount { color: #F97316; font-weight: 600; }
|
|
.section-title { font-size: 28rpx; font-weight: 600; margin-bottom: 16rpx; display: block; }
|
|
.proof-list { display: flex; flex-wrap: wrap; gap: 16rpx; margin-bottom: 24rpx; }
|
|
.proof-img { width: 200rpx; height: 200rpx; border-radius: 12rpx; }
|
|
.line-row {
|
|
background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 12rpx;
|
|
}
|
|
.line-order { display: block; font-size: 26rpx; font-weight: 600; }
|
|
.line-drug { font-size: 24rpx; color: #666; display: block; margin: 8rpx 0; }
|
|
.line-amount { font-size: 26rpx; color: #F97316; }
|
|
</style>
|