feat: 生成分享图
This commit is contained in:
115
src/game_pages/detail/components/VenueInfo/index.module.scss
Normal file
115
src/game_pages/detail/components/VenueInfo/index.module.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
.detail-page-content-venue {
|
||||
padding: 24px 15px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.venue-detail-title {
|
||||
display: flex;
|
||||
height: 31px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
padding-bottom: 6px;
|
||||
color: #fff;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
.venue-reserve-status {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
.venue-reserve-screenshot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.venue-detail-content {
|
||||
padding: 16px 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-tag {
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
text-overflow: ellipsis;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
|
||||
&-remarks {
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
// font-feature-settings: 'liga' off, 'clig' off;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 160% */
|
||||
}
|
||||
}
|
||||
|
||||
.venue-screenshot-title {
|
||||
display: flex;
|
||||
padding: 18px 20px 10px 20px;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 150% */
|
||||
letter-spacing: -0.23px;
|
||||
}
|
||||
|
||||
.venue-screenshot-scroll-view {
|
||||
max-height: calc(100vh - 260px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.venue-screenshot-image-list {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px 10px;
|
||||
|
||||
.venue-screenshot-image-item {
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 9px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
.venue-screenshot-image-item-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 9px;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
105
src/game_pages/detail/components/VenueInfo/index.tsx
Normal file
105
src/game_pages/detail/components/VenueInfo/index.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
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?.length > 0 ? venue_image_list.map((c) => c.url) : [],
|
||||
});
|
||||
}
|
||||
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((item) => {
|
||||
return (
|
||||
<View
|
||||
className={styles["venue-screenshot-image-item"]}
|
||||
onClick={previewImage.bind(null, item.url)}
|
||||
>
|
||||
<Image
|
||||
className={styles["venue-screenshot-image-item-image"]}
|
||||
mode="aspectFill"
|
||||
src={item.url}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</CommonPopup>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user