hn-hlw-app/pages/consult/select-drug/my-drugs.vue

<template>
  <view class="my-drugs" :class="{ 'my-drugs--elder': elderMode }">
    <view class="selected-title" :class="{ 'selected-title--elder': elderMode }">已选药品</view>
    <scroll-view scroll-y="true" class="popup-wrapper" :class="{ 'popup-wrapper--elder': elderMode }">
      <view class="">
        <view v-for="drug in drugs" :key="drug._id" class="drug" :class="{ 'drug--elder': elderMode }">
          <view style="flex-grow: 1;">
            <view class="drug-name-bar" :class="{ 'drug-name-bar--elder': elderMode }">
              <view class="drug-name" :class="{ 'drug-name--elder': elderMode }">{{ drug.name }}</view>
              <view class="drug-quantity" :class="{ 'drug-quantity--elder': elderMode }"
                :style="drug.quantity > drug.recommended_quantity ? 'color:red;font-size:' + (elderMode ? '36rpx' : '30rpx') : ''">
                x {{ drug.quantity }} {{ drug.unit || '' }}
              </view>
            </view>
            <view v-if="drug.medication_proof_desc" class="drug-proof-tip" :class="{ 'drug-proof-tip--elder': elderMode }">{{ proofTipText }}</view>
            <view v-if="drug.quantity > drug.recommended_quantity" class="drug-spec drug-spec--error" :class="{ 'drug-spec--elder': elderMode }">
              已超过建议开药数量
            </view>
            <view v-if="drug.specification" class="drug-spec" :class="{ 'drug-spec--elder': elderMode }">药品规格：{{ drug.specification }}</view>
            <view v-if="drug.manufacturer" class="drug-spec" :class="{ 'drug-spec--elder': elderMode }">{{ drug.manufacturer }}</view>
            <view v-if="drug.memo" class="drug-memo" :class="{ 'drug-memo--elder': elderMode }">用法用量：{{ drug.memo }}</view>
            <view class="drug-action" :class="{ 'drug-action--elder': elderMode }">
              <view class="drug-action-item drug-action-item--active" :class="{ 'drug-action-item--elder': elderMode }" @click="edit(drug)">编辑</view>
              <view class="drug-action-item" :class="{ 'drug-action-item--elder': elderMode }" @click="remove(drug)">删除</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
import useDebounce from '@/hooks/useDebounce';

const emits = defineEmits(['edit', 'remove'])
const props = defineProps({
  drugs: { type: Array, default: () => [] }
})
const proofTipText = '*购买该药品需上传用药证明';

// 大字版状态管理
const elderMode = ref(false);

// 处理长辈模式变化
const handleElderModeChange = () => {
	try {
		const storedElderMode = uni.getStorageSync('elderMode');
		const newElderMode = storedElderMode === 'true' || storedElderMode === true;
		
		// 只在状态真正发生变化时才更新
		if (elderMode.value !== newElderMode) {
			elderMode.value = newElderMode;
		}
	} catch (error) {
		console.error('获取长辈模式状态失败:', error);
		if (elderMode.value !== false) {
			elderMode.value = false;
		}
	}
};

onMounted(() => {
	// 初始化时静默获取状态
	try {
		const storedElderMode = uni.getStorageSync('elderMode');
		elderMode.value = storedElderMode === 'true' || storedElderMode === true;
	} catch (error) {
		console.error('初始化长辈模式状态失败:', error);
		elderMode.value = false;
	}
	
	// 监听长辈模式变化事件
	uni.$on('elderModeChanged', handleElderModeChange);
});

onUnmounted(() => {
	// 移除事件监听
	uni.$off('elderModeChanged', handleElderModeChange);
});

const edit = useDebounce(data => {
  const drug = props.drugs.find(i => i._id === data._id);
  emits('edit', drug)
});

const remove = useDebounce(data => {
  // 使用自定义确认弹窗（仅在 select-drug 页面）
  uni.$emit('showConfirmPopup_selectDrug', {
    title: '提示',
    content: '确定删除该药品？',
    showCancel: true,
    cancelText: '取消',
    confirmText: '确定',
    onConfirm: () => {
      emits('remove', data);
    },
    onCancel: () => {}
  });
})

</script>
<style lang="scss" scoped>
@import '../drug.scss';

.my-drugs {
  background: white;
  padding-bottom: 10rpx;
  position: relative;
  z-index: 3;

  &--elder {
    padding-bottom: 20rpx;
  }
}

.popup-wrapper {
  max-height: 60vh;
  background: white;

  &--elder {
    max-height: 65vh;
  }
}

.selected-title {
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  background: white;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  border-bottom: 1px solid #e5e5e5;

  &--elder {
    padding: 40rpx 30rpx;
    font-size: 40rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
  }
}

.drug-spec--error {
  color: red !important;
}

.drug-proof-tip {
  color: #ff4757;
  font-size: 24rpx;
  line-height: 36rpx;
  margin-top: 8rpx;
  font-weight: 500;
}

// 大字版样式
.drug--elder {
  padding: 35rpx 30rpx;
}

.drug-name--elder {
  font-size: 38rpx;
  line-height: 70rpx;
  font-weight: 600;
}

.drug-spec--elder {
  font-size: 34rpx;
  line-height: 56rpx;
  margin-top: 4rpx;
}

.drug-memo--elder {
  font-size: 34rpx;
  line-height: 56rpx;
  margin-top: 4rpx;
}

.drug-proof-tip--elder {
  color: #ff4757;
  font-size: 32rpx; // 24 * 1.33
  line-height: 48rpx; // 36 * 1.33
  margin-top: 12rpx; // 8 * 1.5
  font-weight: 600;
}

.drug-quantity--elder {
  font-size: 36rpx;
  font-weight: 500;
  max-width: 250rpx;
}

.drug-action--elder {
  padding-top: 20rpx;
  margin-top: 20rpx;
}

.drug-action-item--elder {
  font-size: 34rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 50rpx;
  border-radius: 35rpx;
  font-weight: 500;

  &.drug-action-item--active {
    margin-right: 50rpx;
    font-weight: 600;
  }
}
</style>