feat: 生成分享图

src/game_pages/detail/components/VenueInfo/index.tsx

@@ -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>
+  );
+}