hn-hlw-app/components/custom-message/rx-open-fail-card.vue

<template>
  <view class="rx-fail-card border shadow-lg rounded" :style="elderVarStyle">
    <view class="fail-title-row">
      <view class="warning-icon">!</view>
      <text class="fail-title">{{ errorSource }}</text>
    </view>
    <view class="reason-row">
      <text class="reason-label">原因：</text>
      <text class="reason-text">{{ reason }}</text>
    </view>
  </view>
</template>
<script setup>
import { computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import useElder from "@/hooks/useElder";

const { elderVarStyle } = storeToRefs(useElder());

const props = defineProps({
  extension: {
    type: [Object, String],
    default: () => ({}),
  },
});

const ext = computed(() => {
  if (props.extension && typeof props.extension === 'object') {
    return props.extension;
  }

  if (typeof props.extension !== 'string') return {};
  const value = props.extension.trim();
  if (!value) return {};

  try {
    const data = JSON.parse(value);
    return data && typeof data === 'object' ? data : { reason: String(data || '') };
  } catch (e) {
    return { reason: value };
  }
});

const reason = computed(() => {
  const value = ext.value && ext.value.reason;
  return typeof value === 'string' && value.trim()
    ? value.trim()
    : '未获取到失败原因，请稍后重试。';
});

const errorSource = computed(() => {
  return ext.value && ext.value.source === 'HIS' ? '处方开具失败' : '服务暂未响应';
});

onMounted(() => {
  uni.$emit('autoRxFail');
})

</script>
<style scoped>
.rx-fail-card {
  box-sizing: border-box;
  max-width: 100%;
  margin-bottom: 30rpx;
  padding: 24rpx 30rpx;
  background: #fff;
}

.fail-title-row {
  display: flex;
  align-items: center;
}

.warning-icon {
  flex-shrink: 0;
  width: 30rpx;
  height: 30rpx;
  color: #fff;
  background: #f04438;
  border-radius: 50%;
  font-size: 22rpx;
  font-weight: 700;
  line-height: 30rpx;
  text-align: center;
}

.fail-title {
  margin-left: 12rpx;
  color: #f04438;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
}

.reason-row {
  display: flex;
  align-items: flex-start;
  margin-top: 18rpx;
  color: #4b5563;
  font-size: var(--text-base);
  line-height: 1.75;
}

.reason-label {
  flex-shrink: 0;
  color: #374151;
}

.reason-text {
  flex: 1;
  min-width: 0;
  color: #4b5563;
  word-break: break-all;
}
</style>