feat: enhance PoiCompareCard and RecommendationListCard with improved layout, styles, and mock data; remove MultiPoiRecommendationCard from test page

This commit is contained in:
DEV_DSW
2026-05-13 15:04:37 +08:00
parent c9bb057ae1
commit aa50d9f90d
7 changed files with 529 additions and 141 deletions

View File

@@ -1,55 +1,141 @@
<template> <template>
<view class="poi-compare-card"> <view class="poi-compare-card w-full">
<CardShell v-if="!selectedItem" class="poi-compare-card__overview p-16" variant="soft"> <view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-24 overflow-hidden">
<view class="poi-compare-card__header flex flex-justify-between gap-12"> <view class="poi-compare-card__head flex flex-items-center">
<view> <view class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
<view class="poi-compare-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view> {{ data.icon }}
<view class="poi-compare-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view> </view>
<view class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</view> </view>
<BadgePill v-if="data.badge" :label="data.badge" tone="purple" />
</view> </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 <view
v-for="item in items" v-for="item in items"
:key="item.id || item.title" :key="item.id || item.name"
class="poi-compare-card__option p-8 rounded-18 bg-F8FAFC" class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }" :class="{ 'is-disabled': disabled }"
@click="openDetail(item)" @click="handleSelect(item)"
> >
<MediaFrame class="poi-compare-card__image h-108" :src="item.cover" /> <image
<view class="poi-compare-card__option-title color-1E293B font-size-13 font-900 ellipsis-1">{{ item.title }}</view> class="poi-compare-card__image block w-full"
<view class="poi-compare-card__score color-7C3AED font-size-11 font-900">{{ item.score }}</view> :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>
</view> </view>
</CardShell>
<DetailShell <view
v-else class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
:title="selectedItem.title" :class="{ 'is-disabled': disabled }"
:tag="selectedItem.score" @click="openDetail"
tone="purple" >
@back="closeDetail" {{ data.detailButtonText }}
> </view>
<view class="poi-compare-card__detail p-16"> </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 <view
v-for="row in selectedDetails" class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
:key="row.label" @click="closeDetail"
class="poi-compare-card__row flex flex-justify-between gap-16 border-bottom-F1F5F9"
> >
<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>
</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> </view>
</template> </template>
<script setup> <script setup>
import { computed, ref } from "vue"; 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({ const props = defineProps({
data: { 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 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; if (props.disabled) return;
selectedItem.value = item;
emit("select", item); emit("select", item);
}; };
const openDetail = () => {
if (props.disabled) return;
isDetail.value = true;
emit("select", { type: "detail", items: items.value });
};
const closeDetail = () => { const closeDetail = () => {
selectedItem.value = null; isDetail.value = false;
emit("back"); emit("back");
}; };
const handleAction = (action) => {
if (props.disabled) return;
emit("action", action);
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@@ -1,29 +1,115 @@
export default { export default {
title: "两个目的地怎么选", icon: "",
subtitle: "按距离、拍照和亲子友好度对比", title: "小七对比:卧龙潭 vs 鸳鸯湖",
badge: "对比", detailButtonText: "查看详细对比",
items: [ items: [
{ {
id: "compare-1", id: "wolongtan",
title: "翠谷瀑布", name: "卧龙潭",
score: "更适合拍照", image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=700&q=80",
cover: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=800&q=80", fields: [
details: [ {
{ label: "优势", value: "景观集中、出片快" }, label: "景观类型",
{ label: "距离", value: "约 500m" }, value: "深潭观景",
{ label: "建议", value: "上午优先前往" }, },
{
label: "额外付费",
value: "免费",
tone: "green",
},
{
label: "开放时间",
value: "08:0018:00",
},
], ],
}, },
{ {
id: "compare-2", id: "yuanyanghu",
title: "水上森林", name: "鸳鸯湖",
score: "更适合慢游", image: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=700&q=80",
cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&q=80", fields: [
details: [ {
{ label: "优势", value: "路线平缓、停留舒服" }, label: "景观类型",
{ label: "距离", value: "约 1.2km" }, value: "湖泊划船",
{ label: "建议", value: "下午光线更柔和" }, },
{
label: "额外付费",
value: "需付费",
tone: "amber",
},
{
label: "开放时间",
value: "08:0017:30",
},
], ],
}, },
], ],
detail: {
title: "详细对比",
compareLabel: "卧龙潭 vs 鸳鸯湖",
rows: [
{
label: "景观类型",
values: [
{
text: "深潭观景",
},
{
text: "湖泊划船",
tone: "green",
},
],
},
{
label: "额外付费",
values: [
{
text: "免费",
},
{
text: "需付费",
tone: "green",
},
],
},
{
label: "开放时间",
values: [
{
text: "08:0018:00",
},
{
text: "08:0017:30",
tone: "green",
},
],
},
],
recommendTitle: "小七推荐",
tips: [
{
tone: "green",
text: "拍照 / 打卡 → 选卧龙潭,碧绿深潭配青山,随手出片。",
},
{
tone: "blue",
text: "带小孩 / 慢玩 → 选鸳鸯湖,划船探险,时间充裕不赶路。",
},
],
actions: [
{
id: "go-wolongtan",
text: "去卧龙潭",
icon: "↗",
targetId: "wolongtan",
primary: true,
},
{
id: "go-yuanyanghu",
text: "去鸳鸯湖",
icon: "↗",
targetId: "yuanyanghu",
},
],
},
}; };

View File

@@ -2,55 +2,233 @@
width: 100%; width: 100%;
} }
.poi-compare-card__overview { .poi-compare-card__overview,
.poi-compare-card__detail-card {
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
} }
.poi-compare-card__header { .poi-compare-card__overview {
margin-bottom: 14px; padding: 24px 26px;
box-sizing: border-box;
}
.poi-compare-card__head {
min-width: 0;
}
.poi-compare-card__mark {
width: 34px;
height: 34px;
margin-right: 12px;
border: 1px solid #fde68a;
color: #f59e0b;
font-size: 22px;
line-height: 1;
background: #fffbeb;
box-sizing: border-box;
} }
.poi-compare-card__title { .poi-compare-card__title {
min-width: 0;
line-height: 24px;
} }
.poi-compare-card__subtitle { .poi-compare-card__columns {
margin-top: 4px; margin-top: 28px;
} }
.poi-compare-card__grid { .poi-compare-card__place {
min-width: 0;
} }
.poi-compare-card__option { .poi-compare-card__place:active,
} .poi-compare-card__primary:active,
.poi-compare-card__action:active {
.poi-compare-card__option:active {
opacity: 0.86; opacity: 0.86;
} }
.poi-compare-card__option.is-disabled { .poi-compare-card__place.is-disabled,
.poi-compare-card__primary.is-disabled,
.poi-compare-card__action.is-disabled {
opacity: 0.55; opacity: 0.55;
} }
.poi-compare-card__image { .poi-compare-card__image {
margin-bottom: 8px; height: 140px;
border-radius: 18px;
} }
.poi-compare-card__option-title { .poi-compare-card__field {
margin-top: 12px;
} }
.poi-compare-card__score { .poi-compare-card__field-label {
margin-top: 4px; line-height: 16px;
} }
.poi-compare-card__detail { .poi-compare-card__field-value {
margin-top: 5px;
line-height: 18px;
} }
.poi-compare-card__row { .poi-compare-card__chip {
padding: 12px 0; display: inline-flex;
align-items: center;
min-height: 22px;
margin-top: 5px;
padding: 0 10px;
border-radius: 999px;
line-height: 22px;
}
.poi-compare-card__chip--green {
box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.02);
}
.poi-compare-card__chip--amber {
box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.02);
}
.poi-compare-card__primary {
height: 52px;
margin-top: 28px;
border-radius: 16px;
}
.poi-compare-card__detail-head {
min-width: 0;
height: 70px;
padding: 0 28px;
border-bottom: 1px solid #f1f5f9;
box-sizing: border-box;
}
.poi-compare-card__back {
width: 34px;
height: 34px;
margin-right: 14px;
color: #64748b;
font-size: 28px;
line-height: 1;
background: #f8fafc;
}
.poi-compare-card__detail-title {
min-width: 0;
line-height: 24px;
}
.poi-compare-card__compare-label {
max-width: 142px;
text-align: right;
line-height: 16px;
}
.poi-compare-card__table {
padding: 18px 12px 0;
}
.poi-compare-card__table-row {
display: grid;
grid-template-columns: 29% 35.5% 35.5%;
align-items: stretch;
}
.poi-compare-card__table-head {
min-height: 36px;
}
.poi-compare-card__table-title {
display: flex;
align-items: center;
justify-content: center;
line-height: 18px;
}
.poi-compare-card__data-row {
border-top: 1px solid #f1f5f9;
} }
.poi-compare-card__row-label { .poi-compare-card__row-label {
display: flex;
align-items: center;
min-height: 52px;
padding-left: 14px;
background: #fff;
line-height: 18px;
box-sizing: border-box;
} }
.poi-compare-card__row-value { .poi-compare-card__cell {
text-align: right; display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
text-align: center;
line-height: 18px;
background: #f8fafc;
}
.poi-compare-card__cell--green {
background: #ecfdf5;
}
.poi-compare-card__recommend {
padding: 20px 30px 0;
}
.poi-compare-card__recommend-title {
line-height: 16px;
}
.poi-compare-card__tips {
margin-top: 20px;
padding: 18px 16px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #f8fafc;
}
.poi-compare-card__tip + .poi-compare-card__tip {
margin-top: 14px;
}
.poi-compare-card__dot {
width: 8px;
height: 8px;
margin-top: 8px;
}
.poi-compare-card__dot--green {
background: #10b981;
}
.poi-compare-card__dot--blue {
background: #3b82f6;
}
.poi-compare-card__tip-text {
line-height: 22px;
}
.poi-compare-card__actions {
padding: 26px 30px 26px;
}
.poi-compare-card__action {
height: 54px;
border-radius: 16px;
box-sizing: border-box;
}
.poi-compare-card__action--secondary {
border: 1px solid #e2e8f0;
background: #fff;
}
.poi-compare-card__action-icon {
margin-right: 8px;
font-size: 18px;
line-height: 18px;
} }

View File

@@ -1,36 +1,45 @@
<template> <template>
<CardShell class="recommendation-list-card p-16" variant="soft"> <view class="recommendation-list-card w-full">
<view class="recommendation-list-card__header flex flex-justify-between gap-12"> <scroll-view
<view> class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full"
<view class="recommendation-list-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view> scroll-x
<view class="recommendation-list-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view> :show-scrollbar="false"
</view> enhanced
<BadgePill v-if="data.badge" :label="data.badge" tone="blue" /> >
</view>
<view class="recommendation-list-card__list flex flex-col gap-10">
<view <view
v-for="item in items" v-for="item in items"
:key="item.id || item.title" :key="item.id || item.title"
class="recommendation-list-card__item flex gap-12 p-10 rounded-18 bg-F8FAFC" class="recommendation-list-card__item inline-block bg-white rounded-20 overflow-hidden"
:class="{ 'is-disabled': disabled }" :class="{ 'is-disabled': disabled }"
@click="handleSelect(item)" @click="handleSelect(item)"
> >
<MediaFrame class="recommendation-list-card__thumb w-72 h-72 flex-shrink-0" :src="item.cover" /> <image
<view class="recommendation-list-card__content flex-full"> class="recommendation-list-card__image block w-full"
<view class="recommendation-list-card__name color-1E293B font-size-14 font-900 ellipsis-1">{{ item.title }}</view> :src="item.image"
<view class="recommendation-list-card__desc color-64748B font-size-11 font-700 ellipsis-2">{{ item.description }}</view> mode="aspectFill"
<view class="recommendation-list-card__meta color-2563EB font-size-10 font-900">{{ item.meta }}</view> />
<view class="recommendation-list-card__body p-16">
<view class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
{{ item.title }}
</view>
<view class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
<text class="recommendation-list-card__pin"></text>
<text>{{ item.distance }}</text>
</view>
<view
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
@click.stop="handleSelect(item)"
>
{{ getActionText(item) }}
</view>
</view> </view>
</view> </view>
</view> </scroll-view>
</CardShell> </view>
</template> </template>
<script setup> <script setup>
import { computed } from "vue"; import { computed } from "vue";
import CardShell from "../SharedVisual/CardShell.vue";
import BadgePill from "../SharedVisual/BadgePill.vue";
import MediaFrame from "../SharedVisual/MediaFrame.vue";
const props = defineProps({ const props = defineProps({
data: { data: {
@@ -47,6 +56,10 @@ const emit = defineEmits(["select"]);
const items = computed(() => props.data.items || []); const items = computed(() => props.data.items || []);
const getActionText = (item) => {
return (item.action && item.action.text) || "";
};
const handleSelect = (item) => { const handleSelect = (item) => {
if (props.disabled) return; if (props.disabled) return;
emit("select", item); emit("select", item);

View File

@@ -1,21 +1,22 @@
export default { export default {
title: "为你推荐",
subtitle: "按距离和热度排序",
badge: "3 个地点",
items: [ items: [
{ {
id: "list-1", id: "waterfall",
title: "水上森林步道", title: "翠谷瀑布",
description: "轻松步行即可到达,适合拍照和短途散步。", image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=700&q=80",
meta: "距你 620m", distance: "1.2km",
cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80", action: {
text: "查看详情",
},
}, },
{ {
id: "list-2", id: "forest",
title: "游客中心咖啡吧", title: "水上森林",
description: "可补水休息,靠近返程接驳点。", image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=700&q=80",
meta: "步行 5 分钟", distance: "2.5km",
cover: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=600&q=80", action: {
text: "查看详情",
},
}, },
], ],
}; };

View File

@@ -1,21 +1,18 @@
.recommendation-list-card { .recommendation-list-card {
padding: 4px 0 8px;
} }
.recommendation-list-card__header { .recommendation-list-card__scroll {
margin-bottom: 12px; padding-bottom: 2px;
}
.recommendation-list-card__title {
}
.recommendation-list-card__subtitle {
margin-top: 4px;
}
.recommendation-list-card__list {
} }
.recommendation-list-card__item { .recommendation-list-card__item {
width: 200px;
margin-right: 14px;
vertical-align: top;
border: 1px solid #f1f5f9;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
box-sizing: border-box;
} }
.recommendation-list-card__item:active { .recommendation-list-card__item:active {
@@ -26,21 +23,31 @@
opacity: 0.55; opacity: 0.55;
} }
.recommendation-list-card__thumb { .recommendation-list-card__image {
height: 110px;
} }
.recommendation-list-card__content { .recommendation-list-card__body {
min-width: 0; box-sizing: border-box;
} }
.recommendation-list-card__name { .recommendation-list-card__name {
line-height: 22px;
} }
.recommendation-list-card__desc { .recommendation-list-card__distance {
margin-top: 5px;
line-height: 16px; line-height: 16px;
} }
.recommendation-list-card__meta { .recommendation-list-card__pin {
margin-top: 7px; font-size: 13px;
line-height: 13px;
}
.recommendation-list-card__button {
height: 36px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #f8fafc;
box-sizing: border-box;
} }

View File

@@ -31,15 +31,6 @@
/> />
</view> </view>
<view class="test-page__section">
<view class="test-page__section-title">MultiPoiRecommendationCard</view>
<MultiPoiRecommendationCard
:data="multiPoiRecommendationCardMock"
@select="handleEvent('MultiPoiRecommendationCard', 'select', $event)"
@action="handleEvent('MultiPoiRecommendationCard', 'action', $event)"
/>
</view>
<view class="test-page__section"> <view class="test-page__section">
<view class="test-page__section-title">PoiCompareCard</view> <view class="test-page__section-title">PoiCompareCard</view>
<PoiCompareCard <PoiCompareCard
@@ -119,8 +110,6 @@ import PoiDetailCard from "../ChatModule/PoiDetailCard/index.vue";
import poiDetailCardMock from "../ChatModule/PoiDetailCard/mocks"; import poiDetailCardMock from "../ChatModule/PoiDetailCard/mocks";
import RecommendationListCard from "../ChatModule/RecommendationListCard/index.vue"; import RecommendationListCard from "../ChatModule/RecommendationListCard/index.vue";
import recommendationListCardMock from "../ChatModule/RecommendationListCard/mocks"; import recommendationListCardMock from "../ChatModule/RecommendationListCard/mocks";
import MultiPoiRecommendationCard from "../ChatModule/MultiPoiRecommendationCard/index.vue";
import multiPoiRecommendationCardMock from "../ChatModule/MultiPoiRecommendationCard/mocks";
import PoiCompareCard from "../ChatModule/PoiCompareCard/index.vue"; import PoiCompareCard from "../ChatModule/PoiCompareCard/index.vue";
import poiCompareCardMock from "../ChatModule/PoiCompareCard/mocks"; import poiCompareCardMock from "../ChatModule/PoiCompareCard/mocks";
import RoutePlanCard from "../ChatModule/RoutePlanCard/index.vue"; import RoutePlanCard from "../ChatModule/RoutePlanCard/index.vue";