109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
|
import { View, Text, Image, ScrollView } from "@tarojs/components";
|
|
import Taro from "@tarojs/taro";
|
|
import { CommonPopup } from "@/components";
|
|
import img from "@/config/images";
|
|
import styles from "./index.module.scss";
|
|
import { insertDotInTags } from "@/utils/helper";
|
|
|
|
// 场馆信息
|
|
export default function VenueInfo(props) {
|
|
const { detail } = props;
|
|
const [visible, setVisible] = useState(false);
|
|
const {
|
|
venue_description,
|
|
venue_description_tag = [],
|
|
venue_image_list = [],
|
|
} = detail;
|
|
|
|
// 统一为 URL 数组：接口可能是 { id, url }[] 或 string[]
|
|
const screenshot_urls = (venue_image_list || []).map((item) =>
|
|
typeof item === "string" ? item : (item?.url ?? "")
|
|
).filter(Boolean);
|
|
|
|
function showScreenShot() {
|
|
setVisible(true);
|
|
}
|
|
function onClose() {
|
|
setVisible(false);
|
|
}
|
|
|
|
function previewImage(current_url: string) {
|
|
Taro.previewImage({
|
|
current: current_url,
|
|
urls: screenshot_urls,
|
|
});
|
|
}
|
|
return (
|
|
<View className={styles["detail-page-content-venue"]}>
|
|
{/* venue detail title and venue ordered status */}
|
|
<View className={styles["venue-detail-title"]}>
|
|
<Text>场馆详情</Text>
|
|
{screenshot_urls.length > 0 ? (
|
|
<>
|
|
<Text>·</Text>
|
|
<View
|
|
className={styles["venue-reserve-status"]}
|
|
onClick={showScreenShot}
|
|
>
|
|
<Text>查看订场截图</Text>
|
|
<Image
|
|
className={styles["venue-reserve-screenshot"]}
|
|
src={img.ICON_DETAIL_ARROW_RIGHT}
|
|
/>
|
|
</View>
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
</View>
|
|
{/* venue detail content */}
|
|
<View className={styles["venue-detail-content"]}>
|
|
{/* venue detail tags */}
|
|
<View className={styles["venue-detail-content-tags"]}>
|
|
{insertDotInTags(venue_description_tag).map((tag, index) => (
|
|
<View
|
|
key={index}
|
|
className={styles["venue-detail-content-tags-tag"]}
|
|
>
|
|
<Text>{tag}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
{/* venue remarks */}
|
|
<View className={styles["venue-detail-content-remarks"]}>
|
|
<Text>{venue_description}</Text>
|
|
</View>
|
|
</View>
|
|
<CommonPopup
|
|
visible={visible}
|
|
onClose={onClose}
|
|
round
|
|
hideFooter
|
|
position="bottom"
|
|
zIndex={1001}
|
|
>
|
|
<View className={styles["venue-screenshot-title"]}>预定截图</View>
|
|
<ScrollView scrollY className={styles["venue-screenshot-scroll-view"]}>
|
|
<View className={styles["venue-screenshot-image-list"]}>
|
|
{screenshot_urls.length > 0 &&
|
|
screenshot_urls.map((url, index) => (
|
|
<View
|
|
className={styles["venue-screenshot-image-item"]}
|
|
onClick={() => previewImage(url)}
|
|
key={index}
|
|
>
|
|
<Image
|
|
className={styles["venue-screenshot-image-item-image"]}
|
|
mode="aspectFill"
|
|
src={url}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
</CommonPopup>
|
|
</View>
|
|
);
|
|
}
|