150 lines
3.5 KiB
Vue
150 lines
3.5 KiB
Vue
<template>
|
||
<uni-popup ref="popup" type="center" :mask-click="false">
|
||
<view class="recommended-disease-popup" :class="{ 'recommended-disease-popup--elder': elderMode }"
|
||
:style="elderVarStyle">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择诊断</text>
|
||
<uni-icons type="closeempty" color="#999" :size="elderMode ? 30 : 22" @click="close" />
|
||
</view>
|
||
<view class="popup-tip">根据所选药品为您推荐以下诊断，请选择后确认</view>
|
||
<scroll-view scroll-y class="disease-options">
|
||
<view v-for="disease in diseases" :key="disease" class="disease-option"
|
||
:class="{ 'disease-option--selected': selections.includes(disease) }" @click="toggle(disease)">
|
||
<uni-icons :type="selections.includes(disease) ? 'checkbox-filled' : 'circle'"
|
||
:color="selections.includes(disease) ? themeColor : '#999'" :size="elderMode ? 28 : 20" />
|
||
<text>{{ disease }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="popup-footer">
|
||
<view class="popup-button popup-button--cancel" @click="close">取消</view>
|
||
<view class="popup-button popup-button--confirm" @click="confirm">确定</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue';
|
||
import { themeColor } from '@/utils/theme-config';
|
||
|
||
const emits = defineEmits(['close', 'confirm']);
|
||
const props = defineProps({
|
||
visible: { type: Boolean, default: false },
|
||
diseases: { type: Array, default: () => [] },
|
||
elderMode: { type: Boolean, default: false },
|
||
elderVarStyle: { type: String, default: '' },
|
||
});
|
||
|
||
const popup = ref();
|
||
const selections = ref([]);
|
||
|
||
function toggle(disease) {
|
||
selections.value = selections.value.includes(disease)
|
||
? selections.value.filter(item => item !== disease)
|
||
: [...selections.value, disease];
|
||
}
|
||
|
||
function close() {
|
||
emits('close');
|
||
}
|
||
|
||
function confirm() {
|
||
if (!selections.value.length) {
|
||
uni.showToast({ title: '请选择诊断', icon: 'none' });
|
||
return;
|
||
}
|
||
emits('confirm', selections.value);
|
||
}
|
||
|
||
watch(() => props.visible, visible => {
|
||
if (visible) {
|
||
selections.value = [];
|
||
popup.value && popup.value.open();
|
||
} else {
|
||
popup.value && popup.value.close();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.recommended-disease-popup {
|
||
width: 650rpx;
|
||
max-height: 75vh;
|
||
padding: 32rpx 30rpx 28rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.recommended-disease-popup--elder {
|
||
width: 690rpx;
|
||
padding: 42rpx 36rpx 36rpx;
|
||
}
|
||
|
||
.popup-header,
|
||
.popup-footer,
|
||
.disease-option {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.popup-header {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: var(--text-base, 32rpx);
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.popup-tip {
|
||
margin: 18rpx 0;
|
||
font-size: var(--text-sm, 26rpx);
|
||
line-height: 1.5;
|
||
color: #999;
|
||
}
|
||
|
||
.disease-options {
|
||
max-height: 55vh;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
.disease-option {
|
||
gap: 16rpx;
|
||
min-height: 84rpx;
|
||
padding: 0 8rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
font-size: var(--text-base, 30rpx);
|
||
color: #333;
|
||
}
|
||
|
||
.disease-option--selected {
|
||
color: $theme-brown-primary;
|
||
}
|
||
|
||
.popup-footer {
|
||
gap: 20rpx;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.popup-button {
|
||
flex: 1;
|
||
height: 76rpx;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
font-size: var(--text-base, 30rpx);
|
||
}
|
||
|
||
.popup-button--cancel {
|
||
border: 1rpx solid $theme-brown-border;
|
||
color: $theme-brown-secondary;
|
||
}
|
||
|
||
.popup-button--confirm {
|
||
color: #fff;
|
||
background: $theme-brown-primary;
|
||
}
|
||
</style>
|