92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<template>
|
|
<view class="explore-cards">
|
|
<scroll-view class="explore-scroll" scroll-x show-scrollbar="false">
|
|
<view class="explore-track">
|
|
<view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
|
|
:class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
|
|
@tap="handleCardTap(item.raw, index)">
|
|
<video
|
|
v-if="item.coverImage && isMp4Video(item.coverImage)"
|
|
class="explore-card-image"
|
|
:src="item.coverImage"
|
|
autoplay
|
|
loop
|
|
muted
|
|
:controls="false"
|
|
:show-center-play-btn="false"
|
|
:show-play-btn="false"
|
|
:show-fullscreen-btn="false"
|
|
:show-mute-btn="false"
|
|
:enable-progress-gesture="false"
|
|
object-fit="cover"
|
|
/>
|
|
<image
|
|
v-else-if="item.coverImage"
|
|
class="explore-card-image"
|
|
:src="item.coverImage"
|
|
mode="aspectFill"
|
|
/>
|
|
|
|
<view class="explore-card-gradient" />
|
|
|
|
<view class="explore-card-content box-border w-full min-w-0">
|
|
<text class="explore-card-tag block w-full truncate">{{ item.tag }}</text>
|
|
<text class="explore-card-title block w-full truncate">{{ item.title }}</text>
|
|
<text v-if="item.subTitle" class="explore-card-desc block w-full truncate">
|
|
{{ item.subTitle }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="explore-card-arrow">
|
|
<text>→</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["didSelectItem"]);
|
|
|
|
const FALLBACK_TAGS = ["MUST VISIT", "CULTURE", "ADVENTURE", "NIGHTLIFE"];
|
|
const TONES = ["default", "culture", "adventure", "nightlife"];
|
|
|
|
const normalizedList = computed(() =>
|
|
props.list.map((item, index) => ({
|
|
raw: item,
|
|
id: item.id ?? item.tabContentId,
|
|
title: item.title || "",
|
|
subTitle: item.subTitle || "",
|
|
tag: item.tag || FALLBACK_TAGS[index % FALLBACK_TAGS.length],
|
|
coverImage: item.coverImage || "",
|
|
tone: TONES[index % TONES.length],
|
|
}))
|
|
);
|
|
|
|
const getItemKey = (item, index) => item.id ?? item.title ?? index;
|
|
|
|
const isMp4Video = (url) => {
|
|
if (typeof url !== "string") return false;
|
|
const resourcePath = url.trim().split(/[?#]/)[0];
|
|
return resourcePath.toLowerCase().endsWith(".mp4");
|
|
};
|
|
|
|
const handleCardTap = (item, index) => {
|
|
emit("didSelectItem", item, index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|