feat: 生成分享图

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

@@ -0,0 +1,188 @@
+import Taro from "@tarojs/taro";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import { calculateDistance } from "@/utils";
+import { View, Image, Text, Map } from "@tarojs/components";
+import img from "@/config/images";
+import styles from "./index.module.scss";
+
+dayjs.locale("zh-cn");
+
+// 球局信息
+export default function GameInfo(props) {
+  const { detail, currentLocation } = props;
+  const {
+    latitude,
+    longitude,
+    location,
+    location_name,
+    start_time,
+    end_time,
+    weather,
+  } = detail || {};
+
+  const [{ iconDay, tempMax, tempMin }] = weather || [{}];
+
+  const openMap = () => {
+    Taro.openLocation({
+      latitude, // 纬度（必填）
+      longitude, // 经度（必填）
+      name: location_name, // 位置名（可选）
+      address: location, // 地址详情（可选）
+      scale: 15, // 地图缩放级别（1-28）
+    });
+  };
+
+  const [c_latitude, c_longitude] = currentLocation;
+  const distance =
+    latitude && longitude
+      ? calculateDistance(c_latitude, c_longitude, latitude, longitude) / 1000
+      : 0;
+
+  const startTime = dayjs(start_time);
+  const endTime = dayjs(end_time);
+  const game_length = endTime.diff(startTime, "minutes") / 60;
+
+  const startMonth = startTime.format("M");
+  const startDay = startTime.format("D");
+  const theDayOfWeek = startTime.format("dddd");
+  const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`;
+  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
+
+  return (
+    <View className={styles["detail-page-content-game-info"]}>
+      {/* Date and Weather */}
+      <View className={styles["detail-page-content-game-info-date-weather"]}>
+        {/* Calendar and Date time */}
+        <View
+          className={
+            styles["detail-page-content-game-info-date-weather-calendar-date"]
+          }
+        >
+          {/* Calendar */}
+          <View
+            className={
+              styles[
+                "detail-page-content-game-info-date-weather-calendar-date-calendar"
+              ]
+            }
+          >
+            <View className={styles.month}>{startMonth}月</View>
+            <View className={styles.day}>{startDay}</View>
+          </View>
+          {/* Date time */}
+          <View
+            className={
+              styles[
+                "detail-page-content-game-info-date-weather-calendar-date-date"
+              ]
+            }
+          >
+            <View className={styles.date}>{startDate}</View>
+            <View className={styles["venue-time"]}>
+              {gameRange} （{game_length}小时）
+            </View>
+          </View>
+        </View>
+        {/* Weather */}
+        <View
+          className={
+            styles["detail-page-content-game-info-date-weather-weather"]
+          }
+        >
+          {/* Weather icon */}
+          <View
+            className={
+              styles["detail-page-content-game-info-date-weather-weather-icon"]
+            }
+          >
+            {/*<Image className="weather-icon" src={img.ICON_WEATHER_SUN} />*/}
+            <i className={`qi-${iconDay}`}></i>
+          </View>
+          {/* Weather text and temperature */}
+          <View
+            className={
+              styles[
+                "detail-page-content-game-info-date-weather-weather-text-temperature"
+              ]
+            }
+          >
+            {tempMin && tempMax && (
+              <Text>
+                {tempMin}℃ - {tempMax}℃
+              </Text>
+            )}
+          </View>
+        </View>
+      </View>
+      {/* Place */}
+      <View className={styles["detail-page-content-game-info-place"]}>
+        {/* venue location message */}
+        <View className={styles["location-message"]}>
+          {/* location icon */}
+          <View className={styles["location-message-icon"]}>
+            <Image
+              className={styles["location-message-icon-image"]}
+              src={img.ICON_DETAIL_MAP}
+            />
+          </View>
+          {/* location message */}
+          <View className={styles["location-message-text"]}>
+            {/* venue name and distance */}
+            {distance ? (
+              <View
+                className={styles["location-message-text-name-distance"]}
+                onClick={openMap}
+              >
+                <Text>{location_name || "-"}</Text>
+                <Text>·</Text>
+                <Text>{distance.toFixed(1)}km</Text>
+                <Image
+                  className={
+                    styles["location-message-text-name-distance-arrow"]
+                  }
+                  src={img.ICON_DETAIL_ARROW_RIGHT}
+                />
+              </View>
+            ) : (
+              ""
+            )}
+            {/* venue address */}
+            <View className={styles["location-message-text-address"]}>
+              <Text>{location || "-"}</Text>
+            </View>
+          </View>
+        </View>
+        {/* venue map */}
+        <View className={styles["location-map"]}>
+          {longitude && latitude && (
+            <Map
+              className={styles["location-map-map"]}
+              longitude={c_longitude}
+              latitude={c_latitude}
+              markers={[
+                {
+                  id: 1,
+                  latitude,
+                  longitude,
+                  iconPath: require("@/static/detail/icon-stark.svg"),
+                  width: 16,
+                  height: 16,
+                },
+              ]}
+              includePoints={[
+                { latitude, longitude },
+                { latitude: c_latitude, longitude: c_longitude },
+              ]}
+              includePadding={{ left: 50, right: 50, top: 50, bottom: 50 }}
+              onError={() => {}}
+              // hide business msg
+              showLocation
+              theme="dark"
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}