106 lines
3.1 KiB
TypeScript
106 lines
3.1 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;
|
|
|
|
function showScreenShot() {
|
|
setVisible(true);
|
|
}
|
|
function onClose() {
|
|
setVisible(false);
|
|
}
|
|
|
|
function previewImage(current_url) {
|
|
Taro.previewImage({
|
|
current: current_url,
|
|
urls: venue_image_list || [],
|
|
});
|
|
}
|
|
return (
|
|
<View className={styles["detail-page-content-venue"]}>
|
|
{/* venue detail title and venue ordered status */}
|
|
<View className={styles["venue-detail-title"]}>
|
|
<Text>场馆详情</Text>
|
|
{venue_image_list?.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"]}>
|
|
{venue_image_list?.length > 0 &&
|
|
venue_image_list.map((url, index) => {
|
|
return (
|
|
<View
|
|
className={styles["venue-screenshot-image-item"]}
|
|
onClick={previewImage.bind(null, url)}
|
|
key={index}
|
|
>
|
|
<Image
|
|
className={styles["venue-screenshot-image-item-image"]}
|
|
mode="aspectFill"
|
|
src={url}
|
|
/>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
</ScrollView>
|
|
</CommonPopup>
|
|
</View>
|
|
);
|
|
}
|