105 lines
2.0 KiB
Vue
105 lines
2.0 KiB
Vue
<template>
|
|
<u-popup v-model="show" mode="bottom" border-radius="16">
|
|
<view class="modal">
|
|
<view class="title">拒诊原因</view>
|
|
<view class="list">
|
|
<view
|
|
v-for="(item, idx) in reasons"
|
|
:key="idx"
|
|
class="item"
|
|
:class="{ active: selected === refuseLabel(item) }"
|
|
@click="selected = refuseLabel(item)"
|
|
>
|
|
{{ refuseLabel(item) }}
|
|
</view>
|
|
</view>
|
|
<view class="actions">
|
|
<button class="btn cancel" @click="close">取消</button>
|
|
<button class="btn ok" :disabled="!selected" @click="confirm">确定</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import { refuseReceptionListApi } from '@/api/reception.js';
|
|
|
|
export default {
|
|
name: 'RefuseReceptionModal',
|
|
data() {
|
|
return {
|
|
show: false,
|
|
reasons: [],
|
|
selected: ''
|
|
};
|
|
},
|
|
methods: {
|
|
refuseLabel(item) {
|
|
if (!item) return '';
|
|
if (typeof item === 'string') return item;
|
|
return item.name || item.value || item.label || '';
|
|
},
|
|
async open() {
|
|
this.selected = '';
|
|
this.show = true;
|
|
try {
|
|
const res = await refuseReceptionListApi();
|
|
const list = (res && res.result) || (res && res.data && res.data.result) || res || [];
|
|
this.reasons = Array.isArray(list) ? list : [];
|
|
} catch (e) {
|
|
console.error(e);
|
|
this.reasons = [];
|
|
}
|
|
},
|
|
close() {
|
|
this.show = false;
|
|
},
|
|
async confirm() {
|
|
if (!this.selected) return;
|
|
this.$emit('confirm', this.selected);
|
|
this.show = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal {
|
|
padding: 24rpx;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.list {
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
}
|
|
.item {
|
|
padding: 20rpx;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
background: #f5f5f5;
|
|
font-size: 28rpx;
|
|
}
|
|
.item.active {
|
|
background: #e8f7f4;
|
|
border: 1rpx solid #6acdbb;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 16rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
.btn {
|
|
min-width: 160rpx;
|
|
}
|
|
.ok {
|
|
background: #6acdbb;
|
|
color: #fff;
|
|
}
|
|
</style>
|