feat: enhance PoiCompareCard and RecommendationListCard with improved layout, styles, and mock data; remove MultiPoiRecommendationCard from test page
This commit is contained in:
DEV_DSW
@@ -1,55 +1,141 @@
|
||||
<template>
|
||||
<view class="poi-compare-card">
|
||||
<CardShell v-if="!selectedItem" class="poi-compare-card__overview p-16" variant="soft">
|
||||
<view class="poi-compare-card__header flex flex-justify-between gap-12">
|
||||
<view>
|
||||
<view class="poi-compare-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
|
||||
<view class="poi-compare-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
|
||||
<view class="poi-compare-card w-full">
|
||||
<view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-24 overflow-hidden">
|
||||
<view class="poi-compare-card__head flex flex-items-center">
|
||||
<view class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
|
||||
{{ data.icon }}
|
||||
</view>
|
||||
<view class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
|
||||
{{ data.title }}
|
||||
</view>
|
||||
<BadgePill v-if="data.badge" :label="data.badge" tone="purple" />
|
||||
</view>
|
||||
<view class="poi-compare-card__grid grid grid-cols-2 gap-10">
|
||||
|
||||
<view class="poi-compare-card__columns grid grid-cols-2 gap-16">
|
||||
<view
|
||||
v-for="item in items"
|
||||
:key="item.id || item.title"
|
||||
class="poi-compare-card__option p-8 rounded-18 bg-F8FAFC"
|
||||
:key="item.id || item.name"
|
||||
class="poi-compare-card__place"
|
||||
:class="{ 'is-disabled': disabled }"
|
||||
@click="openDetail(item)"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<MediaFrame class="poi-compare-card__image h-108" :src="item.cover" />
|
||||
<view class="poi-compare-card__option-title color-1E293B font-size-13 font-900 ellipsis-1">{{ item.title }}</view>
|
||||
<view class="poi-compare-card__score color-7C3AED font-size-11 font-900">{{ item.score }}</view>
|
||||
<image
|
||||
class="poi-compare-card__image block w-full"
|
||||
:src="item.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view
|
||||
v-for="field in item.fields"
|
||||
:key="field.label"
|
||||
class="poi-compare-card__field"
|
||||
>
|
||||
<view class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
|
||||
{{ field.label }}
|
||||
</view>
|
||||
<view
|
||||
v-if="field.tone"
|
||||
class="poi-compare-card__chip font-size-12 font-900"
|
||||
:class="getToneClass(field.tone)"
|
||||
>
|
||||
{{ field.value }}
|
||||
</view>
|
||||
<view v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
|
||||
{{ field.value }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</CardShell>
|
||||
|
||||
<DetailShell
|
||||
v-else
|
||||
:title="selectedItem.title"
|
||||
:tag="selectedItem.score"
|
||||
tone="purple"
|
||||
@back="closeDetail"
|
||||
>
|
||||
<view class="poi-compare-card__detail p-16">
|
||||
<view
|
||||
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
|
||||
:class="{ 'is-disabled': disabled }"
|
||||
@click="openDetail"
|
||||
>
|
||||
{{ data.detailButtonText }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
|
||||
<view class="poi-compare-card__detail-head flex flex-items-center">
|
||||
<view
|
||||
v-for="row in selectedDetails"
|
||||
:key="row.label"
|
||||
class="poi-compare-card__row flex flex-justify-between gap-16 border-bottom-F1F5F9"
|
||||
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||
@click="closeDetail"
|
||||
>
|
||||
<view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-800">{{ row.label }}</view>
|
||||
<view class="poi-compare-card__row-value color-1E293B font-size-12 font-900">{{ row.value }}</view>
|
||||
‹
|
||||
</view>
|
||||
<view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
|
||||
{{ detail.title }}
|
||||
</view>
|
||||
<view class="poi-compare-card__compare-label color-94A3B8 font-size-12 font-900">
|
||||
{{ detail.compareLabel }}
|
||||
</view>
|
||||
</view>
|
||||
</DetailShell>
|
||||
|
||||
<view class="poi-compare-card__table">
|
||||
<view class="poi-compare-card__table-head poi-compare-card__table-row">
|
||||
<view></view>
|
||||
<view
|
||||
v-for="item in items"
|
||||
:key="item.id || item.name"
|
||||
class="poi-compare-card__table-title color-1E293B font-size-14 font-900"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-for="row in detail.rows"
|
||||
:key="row.label"
|
||||
class="poi-compare-card__table-row poi-compare-card__data-row"
|
||||
>
|
||||
<view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
|
||||
{{ row.label }}
|
||||
</view>
|
||||
<view
|
||||
v-for="cell in row.values"
|
||||
:key="row.label + '-' + cell.text"
|
||||
class="poi-compare-card__cell color-1E293B font-size-14 font-900"
|
||||
:class="getCellClass(cell.tone)"
|
||||
>
|
||||
{{ cell.text }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="poi-compare-card__recommend">
|
||||
<view class="poi-compare-card__recommend-title color-94A3B8 font-size-12 font-900">
|
||||
{{ detail.recommendTitle }}
|
||||
</view>
|
||||
<view class="poi-compare-card__tips">
|
||||
<view
|
||||
v-for="tip in detail.tips"
|
||||
:key="tip.text"
|
||||
class="poi-compare-card__tip flex gap-10"
|
||||
>
|
||||
<view class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
|
||||
<view class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
|
||||
{{ tip.text }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="poi-compare-card__actions grid grid-cols-2 gap-14">
|
||||
<view
|
||||
v-for="action in detail.actions"
|
||||
:key="action.id || action.text"
|
||||
class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
|
||||
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
|
||||
@click="handleAction(action)"
|
||||
>
|
||||
<text class="poi-compare-card__action-icon">{{ action.icon }}</text>
|
||||
<text>{{ action.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import CardShell from "../SharedVisual/CardShell.vue";
|
||||
import BadgePill from "../SharedVisual/BadgePill.vue";
|
||||
import MediaFrame from "../SharedVisual/MediaFrame.vue";
|
||||
import DetailShell from "../SharedVisual/DetailShell.vue";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@@ -62,22 +148,50 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["select", "back"]);
|
||||
const emit = defineEmits(["select", "back", "action"]);
|
||||
|
||||
const selectedItem = ref(null);
|
||||
const isDetail = ref(false);
|
||||
const items = computed(() => props.data.items || []);
|
||||
const selectedDetails = computed(() => selectedItem.value?.details || []);
|
||||
const detail = computed(() => props.data.detail || {});
|
||||
|
||||
const openDetail = (item) => {
|
||||
const getToneClass = (tone) => {
|
||||
const toneMap = {
|
||||
green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
|
||||
amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
|
||||
};
|
||||
return toneMap[tone] || "";
|
||||
};
|
||||
|
||||
const getCellClass = (tone) => {
|
||||
if (tone === "green") return "poi-compare-card__cell--green";
|
||||
return "";
|
||||
};
|
||||
|
||||
const getDotClass = (tone) => {
|
||||
if (tone === "blue") return "poi-compare-card__dot--blue";
|
||||
return "poi-compare-card__dot--green";
|
||||
};
|
||||
|
||||
const handleSelect = (item) => {
|
||||
if (props.disabled) return;
|
||||
selectedItem.value = item;
|
||||
emit("select", item);
|
||||
};
|
||||
|
||||
const openDetail = () => {
|
||||
if (props.disabled) return;
|
||||
isDetail.value = true;
|
||||
emit("select", { type: "detail", items: items.value });
|
||||
};
|
||||
|
||||
const closeDetail = () => {
|
||||
selectedItem.value = null;
|
||||
isDetail.value = false;
|
||||
emit("back");
|
||||
};
|
||||
|
||||
const handleAction = (action) => {
|
||||
if (props.disabled) return;
|
||||
emit("action", action);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user