84 lines
3.5 KiB
Vue
84 lines
3.5 KiB
Vue
<template>
|
||
<view class="mt-6">
|
||
<view class="mb-3 flex items-end justify-between">
|
||
<view>
|
||
<text class="block text-[18px] font-semibold tracking-[0.02em] text-[#24211f]">我的出行记录</text>
|
||
<text class="mt-1 block text-[11px] leading-5 text-[#9a9189]">用车需求与最近浏览集中在这里</text>
|
||
</view>
|
||
<text class="text-[11px] text-[#b18a76]">{{ items.length + 1 }} 项</text>
|
||
</view>
|
||
|
||
<view class="overflow-hidden rounded-[16px] border border-[#e2d9d0] bg-white shadow-[0_8px_20px_rgba(80,58,45,0.05)]">
|
||
<button
|
||
class="m-0 flex w-full items-center gap-3 border-b border-[#eee7e0] px-3 py-3 text-left"
|
||
@click="emit('open-vehicle')"
|
||
>
|
||
<view class="flex h-14 w-16 shrink-0 items-center justify-center rounded-[10px] bg-[#f4e5dc]">
|
||
<uni-icons type="car" :size="24" color="#a45a3d" />
|
||
</view>
|
||
<view class="min-w-0 flex-1">
|
||
<text class="block truncate text-[14px] font-medium text-[#2b2724]">用车需求</text>
|
||
<text class="mt-1 block text-[10px] leading-4 text-[#a19890]">填写专属出行方案</text>
|
||
</view>
|
||
<uni-icons type="right" :size="15" color="#b3a79e" />
|
||
</button>
|
||
|
||
<template v-if="items.length">
|
||
<button
|
||
v-for="(item, index) in items"
|
||
:key="`${item.type}-${item.id}`"
|
||
class="m-0 flex w-full items-center gap-3 px-3 py-3 text-left"
|
||
:class="index < items.length - 1 ? 'border-b border-[#eee7e0]' : ''"
|
||
@click="emit('select', item)"
|
||
>
|
||
<view class="h-14 w-16 shrink-0 overflow-hidden rounded-[10px] bg-[#f1ece6]">
|
||
<image v-if="item.image" class="h-full w-full" :src="item.image" mode="aspectFill" />
|
||
<view v-else class="flex h-full w-full items-center justify-center">
|
||
<uni-icons type="image" :size="20" color="#b8aaa0" />
|
||
</view>
|
||
</view>
|
||
<view class="min-w-0 flex-1">
|
||
<text class="block truncate text-[14px] font-medium text-[#2b2724]">{{ item.title }}</text>
|
||
<text class="mt-1 block text-[10px] leading-4 text-[#a19890]">{{ typeLabel(item.type) }}</text>
|
||
</view>
|
||
<uni-icons type="right" :size="15" color="#b3a79e" />
|
||
</button>
|
||
</template>
|
||
|
||
<view v-else class="border-t border-dashed border-[#d8cec5] bg-white/70 px-5 py-6 text-center">
|
||
<view class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-[#f4eee8]">
|
||
<uni-icons type="eye" :size="20" color="#a45a3d" />
|
||
</view>
|
||
<text class="mt-3 block text-[14px] font-medium text-[#4a413a]">暂无浏览记录</text>
|
||
<text class="mt-1 block text-[11px] leading-5 text-[#9a9189]">去看看玩法，收藏下一段旅程</text>
|
||
<button
|
||
class="m-0 mx-auto mt-4 flex min-h-[36px] items-center justify-center rounded-full bg-[#a45a3d] px-5 text-[12px] font-medium text-white"
|
||
@click="emit('explore')"
|
||
>
|
||
去看看玩法
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { RecentlyViewedItem, RecentlyViewedType } from "@/lib/recentlyViewed";
|
||
|
||
defineProps<{
|
||
items: RecentlyViewedItem[];
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
"open-vehicle": [];
|
||
select: [item: RecentlyViewedItem];
|
||
explore: [];
|
||
}>();
|
||
|
||
function typeLabel(type: RecentlyViewedType) {
|
||
if (type === "wanfa-route") return "玩法路线";
|
||
if (type === "team-building") return "团队共创";
|
||
return "客片案例";
|
||
}
|
||
</script>
|