182 lines
3.9 KiB
Vue
182 lines
3.9 KiB
Vue
<template>
|
|
<u-popup
|
|
v-model="popupVisible"
|
|
mode="bottom"
|
|
border-radius="24"
|
|
:safe-area-inset-bottom="true"
|
|
:closeable="true"
|
|
@close="onPopupClose"
|
|
>
|
|
<view class="drawer-inner">
|
|
<view class="drawer-header">
|
|
<text class="drawer-title">选择待支付挂号</text>
|
|
</view>
|
|
<view v-if="!list.length" class="drawer-empty">暂无待支付挂号订单</view>
|
|
<scroll-view v-else scroll-y class="drawer-scroll">
|
|
<view
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
class="drawer-item"
|
|
@click="onSelect(item)"
|
|
>
|
|
<view class="item-main">
|
|
<view class="item-row">
|
|
<text class="item-label">就诊人</text>
|
|
<text class="item-value">{{ displayText(item.patient) }}</text>
|
|
</view>
|
|
<view class="item-row">
|
|
<text class="item-label">医生</text>
|
|
<text class="item-value">{{ displayText(item.doctor) }}</text>
|
|
</view>
|
|
<view class="item-row">
|
|
<text class="item-label">诊所</text>
|
|
<text class="item-value">{{ displayText(item.store) }}</text>
|
|
</view>
|
|
<view class="item-row">
|
|
<text class="item-label">挂号时间</text>
|
|
<text class="item-value">{{ displayText(item.created_at) }}</text>
|
|
</view>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#94A3B8" size="28"></u-icon>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* 待支付挂号订单选择抽屉
|
|
* 首页多条待付款挂号时，供用户选择具体订单前往支付
|
|
*/
|
|
export default {
|
|
name: 'UnpaidRegisterDrawer',
|
|
props: {
|
|
// v-model 控制抽屉显示隐藏
|
|
value: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 待支付挂号列表，字段来自 fetchUnpaidRegisterListApi
|
|
list: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
computed: {
|
|
popupVisible: {
|
|
get() {
|
|
return this.value;
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
/**
|
|
* 字段为空时显示占位符
|
|
* @param {string} val 展示值
|
|
*/
|
|
displayText(val) {
|
|
const text = val != null ? String(val).trim() : '';
|
|
return text || '--';
|
|
},
|
|
/**
|
|
* 关闭抽屉
|
|
*/
|
|
onPopupClose() {
|
|
this.$emit('input', false);
|
|
},
|
|
/**
|
|
* 选中某条挂号订单，通知父组件跳转支付
|
|
* @param {Object} item 挂号订单
|
|
*/
|
|
onSelect(item) {
|
|
if (!item || item.id == null) return;
|
|
this.$emit('select', item.id);
|
|
this.$emit('input', false);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drawer-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 70vh;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 24rpx 0;
|
|
}
|
|
|
|
.drawer-header {
|
|
padding-bottom: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.drawer-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.drawer-empty {
|
|
padding: 48rpx 0 64rpx;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.drawer-scroll {
|
|
max-height: 60vh;
|
|
min-height: 200rpx;
|
|
}
|
|
|
|
.drawer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 20rpx;
|
|
margin-bottom: 16rpx;
|
|
background: linear-gradient(90deg, rgba(65, 117, 238, 0.06) 0%, rgba(65, 117, 238, 0.02) 100%);
|
|
border: 1rpx solid rgba(65, 117, 238, 0.15);
|
|
border-radius: 16rpx;
|
|
|
|
&:active {
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
.item-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.item-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 10rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.item-label {
|
|
flex-shrink: 0;
|
|
width: 140rpx;
|
|
font-size: 26rpx;
|
|
color: #64748b;
|
|
}
|
|
|
|
.item-value {
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
color: #0f172a;
|
|
line-height: 1.5;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|