nianxx-h5/src/pages/home/components/RoutePlanCard/index.vue

<template>
  <div class="route-plan-card w-full">
    <div v-if="!detailOpen"
      class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
      :class="{ 'is-disabled': disabled }" @click="openDetail">
      <img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
      <div class="route-plan-card__body flex-full">
        <div class="route-plan-card__title color-1E293B text-[18px] font-900 truncate">
          {{ data.title }}
        </div>
        <div class="route-plan-card__tags flex flex-items-center">
          <div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag text-[12px] font-900"
            :class="getTagClass(tag.tone)">
            {{ tag.text }}
          </div>
        </div>
      </div>
      <div class="flex-shrink-0">
        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
      </div>
    </div>

    <div v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
      <div class="route-plan-card__detail-head flex flex-items-center">
        <div class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
          @click="closeDetail">
          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
        </div>
        <div class="route-plan-card__detail-title color-1E293B text-[18px] font-900 truncate flex-full">
          {{ data.title }}
        </div>
        <div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
          {{ detail.badge }}
        </div>
      </div>

      <div class="route-plan-card__timeline">
        <template v-for="(node, index) in nodes" :key="node.id || node.title">
          <div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
            <div
              class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 text-[12px] font-900">
              {{ index + 1 }}
            </div>
            <div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
              <img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
              <div class="route-plan-card__node-body flex-full">
                <div class="route-plan-card__node-title color-1E293B text-[16px] font-900 truncate">
                  {{ node.title }}
                </div>
                <div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 truncate">
                  {{ node.description }}
                </div>
                <div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-900">
                  {{ node.tag }}
                </div>
              </div>
            </div>
          </div>

          <div v-if="connectors[index]" class="route-plan-card__connector">
            <div class="route-plan-card__connector-line"></div>
            <div class="route-plan-card__connector-arrow"></div>
            <div
              class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B text-[12px] font-900">
              <span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
              <span>{{ connectors[index].text }}</span>
            </div>
          </div>
        </template>
      </div>

      <div v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
        <div class="route-plan-card__tips-title color-64748B text-[14px] font-900">
          {{ detail.tipsTitle }}
        </div>
        <div v-for="tip in tips" :key="tip"
          class="route-plan-card__tip flex flex-items-center color-334155 text-[13px] font-900">
          <div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
          <div>{{ tip }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["select", "back"]);

const detailOpen = ref(false);
const detail = computed(() => props.data.detail || {});
const summaryTags = computed(() => props.data.summaryTags || []);
const nodes = computed(() => detail.value.nodes || []);
const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);

const getTagClass = (tone) => {
  if (tone === "green") return "color-047857 bg-ECFDF5";
  return "color-64748B bg-F1F5F9";
};

const openDetail = () => {
  if (props.disabled) return;
  detailOpen.value = true;
  emit("select", props.data);
};

const closeDetail = () => {
  detailOpen.value = false;
  emit("back");
};

const handleSelect = (node) => {
  if (props.disabled) return;
  emit("select", node);
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>