143 lines
4.6 KiB
Vue
143 lines
4.6 KiB
Vue
<template>
|
|
<view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<page-container
|
|
v-if="visible"
|
|
:show="visible"
|
|
:overlay="false"
|
|
@leave="close"
|
|
/>
|
|
<!-- #endif -->
|
|
<u-popup
|
|
v-model="visible"
|
|
mode="bottom"
|
|
border-radius="24"
|
|
height="80%"
|
|
z-index="10080"
|
|
@close="close"
|
|
>
|
|
<view class="drawer">
|
|
<view class="header">
|
|
<text class="title">传方详情</text>
|
|
<u-icon name="close" size="36" @click="close"></u-icon>
|
|
</view>
|
|
<scroll-view scroll-y class="body">
|
|
<view v-if="loading" class="tip">加载中...</view>
|
|
<template v-else-if="detail">
|
|
<view class="section">
|
|
<view class="row"><text class="label">状态</text><u-tag :text="detail.status_text" size="mini" :type="statusType" /></view>
|
|
<view class="row"><text class="label">方式</text><text>{{ detail.transfer_mode_text }}</text></view>
|
|
<view class="row"><text class="label">收货人</text><text>{{ detail.patient_name }} {{ detail.patient_mobile }}</text></view>
|
|
<view class="row"><text class="label">地址</text><text>{{ detail.patient_address || '—' }}</text></view>
|
|
<view v-if="detail.remark" class="row"><text class="label">备注</text><text>{{ detail.remark }}</text></view>
|
|
<view v-if="detail.status === 3 && detail.exception_message" class="row exception">
|
|
<text class="label">异常</text><text>{{ detail.exception_message }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="detail.drug_text_lines && detail.drug_text_lines.length" class="section">
|
|
<text class="section-title">药方</text>
|
|
<text v-for="(line, i) in detail.drug_text_lines" :key="i" class="drug-line">{{ line }}</text>
|
|
</view>
|
|
<view v-if="detail.prescription_images && detail.prescription_images.length" class="section">
|
|
<text class="section-title">处方图片</text>
|
|
<view class="img-row">
|
|
<image
|
|
v-for="(img, idx) in detail.prescription_images"
|
|
:key="idx"
|
|
:src="img"
|
|
mode="aspectFill"
|
|
class="thumb"
|
|
@click="preview(img)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="section">
|
|
<text class="time">{{ detail.transfer_time_text }}</text>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getClinicSalespersonTransferPrescriptionDetail } from '@/api/clinicSalesperson.js'
|
|
|
|
/**
|
|
* 传方详情抽屉
|
|
*/
|
|
export default {
|
|
name: 'TransferDetailDrawer',
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
loading: false,
|
|
detail: null,
|
|
}
|
|
},
|
|
computed: {
|
|
statusType() {
|
|
const map = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'error' }
|
|
return map[Number(this.detail?.status)] || 'info'
|
|
},
|
|
},
|
|
methods: {
|
|
async open(id) {
|
|
this.visible = true
|
|
this.loading = true
|
|
this.detail = null
|
|
try {
|
|
const wrap = await getClinicSalespersonTransferPrescriptionDetail(id)
|
|
if (wrap && wrap.ok) {
|
|
this.detail = wrap.data
|
|
}
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
close() {
|
|
this.visible = false
|
|
},
|
|
preview(url) {
|
|
const urls = this.detail?.prescription_images || []
|
|
uni.previewImage({ urls, current: url })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drawer { height: 100%; display: flex; flex-direction: column; background: #f5f5f5; }
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 28rpx 32rpx;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
.title { font-size: 32rpx; font-weight: 600; }
|
|
.body { flex: 1; height: 0; padding: 24rpx; }
|
|
.tip { text-align: center; color: #999; padding: 40rpx; }
|
|
.section {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.section-title { font-size: 28rpx; font-weight: 600; display: block; margin-bottom: 12rpx; }
|
|
.row {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
margin-bottom: 12rpx;
|
|
line-height: 1.5;
|
|
}
|
|
.label { color: #86909c; width: 120rpx; flex-shrink: 0; }
|
|
.exception .label, .exception text:last-child { color: #ef4444; }
|
|
.drug-line { display: block; font-size: 26rpx; color: #008771; margin-bottom: 8rpx; }
|
|
.img-row { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
|
.thumb { width: 160rpx; height: 160rpx; border-radius: 8rpx; }
|
|
.time { font-size: 24rpx; color: #999; }
|
|
</style>
|