hn-hlw-app/pages/consult/drug-record-popup.vue

<template>
  <uni-popup ref="popup" type="bottom" :mask-click="false">
    <view :style="modeStyle">
      <view class="popup-head" @click="close()">
        就诊记录
        <view class="popup-close">
          <uni-icons size="22" color="#999" type="closeempty"></uni-icons>
        </view>
      </view>
      <view style="padding: 30rpx 0;background-color: #f0f0f0;">
        <scroll-view class="popup-content" style="height: 50vh;" scroll-y="true">
          <view style="padding:0 30rpx;">
            <empty-data v-if="list.length === 0" text="暂无诊疗记录" />
            <view v-for="item in list" :key="item.mdtrtId" class="record-item"
              :class="{ selected: item.mdtrtId === mdtrtId }" @click="selectRecord(item)">
              <view class="record-header">
                <view>
                  <text class="label">就诊时间：</text>
                  <text>{{ item.date || '' }}</text>
                </view>
                <view class="record-check">
                  <uni-icons v-if="item.mdtrtId === mdtrtId" type="checkbox-filled" size="20" color="#3c9cff" />
                  <uni-icons v-else type="circle" size="20" color="#999" />
                </view>
              </view>
              <view>
                <text class="label">就诊机构：</text>
                <text>{{ item.medinsName }}</text>
              </view>
              <view>
                <text class="label">用药：</text>
                <text>{{ item.drugsStr }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <footer-button text="确认" @onClick="confirm" />
    </view>
  </uni-popup>
</template>

<script setup>
import {
  ref,
  watch,
  computed
} from 'vue';
import { getRecent90daysDrugRecord } from "@/utils/api";
import footerButton from '@/components/footer-button.vue';
import emptyData from "@/components/empty.vue";

const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  patientId: {
    type: String,
    default: ''
  },
  old: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: () => ({})
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const popup = ref()
const mdtrtId = ref('');
const list = ref([]);
const modeStyle = computed(() => props.old ? {
  '--text-size-lg': '40rpx',
  '--text-size-md': '36rpx'
} : {
  '--text-size-lg': '32rpx',
  '--text-size-md': '28rpx'
})


function close() {
  emits('close')
}

function confirm() {
  const item = list.value.find(i => i.mdtrtId === mdtrtId.value && i.mdtrtId);
  if (item) {
    emits('confirm', item)
  } else {
    emits('confirm', null)
  }
}

function selectRecord(item) {
  mdtrtId.value = mdtrtId.value === item.mdtrtId ? '' : item.mdtrtId;
}

async function getList() {
  const res = await getRecent90daysDrugRecord(props.patientId);
  const recordList = res && Array.isArray(res.recordList) ? res.recordList : [];
  const drugList = res && Array.isArray(res.drugList) ? res.drugList : [];
  list.value = recordList.map(item => {
    return {
      ...item,
      drugList: drugList.map(i => ({
        drugName: i.hiListName,
        insurance_code: i.insuranceCode,
        spec: i.spec
      })),
      drugsStr: drugList.filter(drug => drug.mdtrtId === item.mdtrtId).map(drug => drug.hiListName).join('、')
    }
  }).filter(i => Boolean(i.drugsStr))
}

watch(() => props.visible, n => {
  if (n) {
    popup.value && popup.value.open();
    mdtrtId.value = props.record && props.record.mdtrtId ? props.record.mdtrtId : '';
    if (list.value.length === 0 && props.patientId) {
      getList();
    }
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.popup-head {
  position: relative;
  padding: 30rpx;
  font-weight: 600;
  font-size: var(--text-size-lg);
  text-align: center;
  color: #333;
  background: white;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.popup-close {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.record-item {
  padding: 20rpx;
  background: white;
  border-radius: 16rpx;
  font-size: var(--text-size-md);
  line-height: 1.8em;
  color: #333;
}

.record-item+.record-item {
  margin-top: 20rpx;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;

}

.label {
  color: #666;
}

.record-check {
  display: flex;
  align-items: center;
}

.record-detail-link {
  margin-top: 10rpx;
}

.detail-link {
  color: #3c9cff;
  cursor: pointer;
}
</style>