Merge branch 'feat/liujie'

src/app.scss

@@ -1,4 +1,11 @@
 // @font-face {
 //   font-family: 'PoetsenOne';
 //   src: url('./static/asserts/fonts/PoetsenOne-Regular.ttf') format('truetype');
-// }
+// }
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/other/57dc951f-f10e-45b7-9157-0b1e468187fd.ttf")
+    format("truetype");
+  font-display: swap;
+}

src/app.ts

@@ -25,6 +25,17 @@ class App extends Component<AppProps> {
       resolve({ event: 'agree' }); // 同意隐私协议
     });
 
+    // Taro.loadFontFace({
+    //   family: 'Quicksand',
+    //   source: 'url("https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/other/57dc951f-f10e-45b7-9157-0b1e468187fd.ttf")',
+    //   global: true, // 全局生效
+    //   success(res) {
+    //     console.log('字体加载成功', res);
+    //   },
+    //   fail(err) {
+    //     console.error('字体加载失败', err);
+    //   }
+    // })
   }
 
   componentDidMount() {

src/components/GameManagePopup/index.tsx

@@ -10,6 +10,7 @@ import CommonPopup from "../CommonPopup";
 import styles from "./index.module.scss";
 import detailService, { MATCH_STATUS } from "@/services/detailService";
 import { useUserInfo } from "@/store/userStore";
+import dayjs from "dayjs";
 
 const CancelPopup = forwardRef((props, ref) => {
   const { detail } = props;
@@ -185,6 +186,12 @@ export default forwardRef(function GameManagePopup(props, ref) {
     detail.match_status
   );
 
+  const inTwoHours = dayjs(detail.start_time).diff(dayjs(), "hour") < 2;
+
+  const hasOtherParticiappants = (detail.participants || [])
+    .filter((item) => item.status === "joined")
+    .some((item) => item.user.id !== userInfo.id);
+
   return (
     <>
       <CommonPopup
@@ -194,17 +201,20 @@ export default forwardRef(function GameManagePopup(props, ref) {
         zIndex={1001}
         enableDragToClose={false}
         onClose={onClose}
+        style={{ minHeight: "unset" }}
       >
         <View className={styles.container}>
-          <View className={styles.button} onClick={handleEditGame}>
+          {!inTwoHours && !hasOtherParticiappants && (
-            编辑活动
+            <View className={styles.button} onClick={handleEditGame}>
-          </View>
+              编辑活动
+            </View>
+          )}
           {finished && (
             <View className={styles.button} onClick={handleRepubGame}>
               重新发布
             </View>
           )}
-          {!finished && (
+          {!inTwoHours && !hasOtherParticiappants && (
             <View className={styles.button} onClick={handleCancelGame}>
               取消活动
             </View>

src/config/images.js

@@ -42,8 +42,8 @@ export default {
     ICON_DETAIL_NOTICE: require('@/static/detail/icon-notice.svg'),
     ICON_DETAIL_APPLICATION_ADD: require('@/static/detail/icon-application-add.svg'),
     ICON_DETAIL_COMMENT: require('@/static/detail/icon-comment.svg'),
-    ICON_DETAIL_COMMENT_DARK: require('@/static/detail/icon-comment-dark.svg'),
+    ICON_DETAIL_COMMENT_LIGHT: require('@/static/detail/icon-comment-light.svg'),
-    ICON_DETAIL_SHARE: require('@/static/detail/icon-share-dark.svg'),
+    ICON_DETAIL_SHARE: require('@/static/detail/icon-share-light.svg'),
     ICON_GUIDE_BAR_PUBLISH: require('@/static/common/guide-bar-publish.svg'),
     ICON_NAVIGATOR_BACK: require('@/static/common/navigator-back.svg'),
     ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'),

src/game_pages/detail/components/GameInfo/index.module.scss

@@ -30,6 +30,7 @@
         color: #fff;
         background: #536272;
         flex-shrink: 0;
+        font-family: "Quicksand";
 
         .month {
           width: 100%;
@@ -42,6 +43,7 @@
           align-items: center;
           // border-bottom: 1px solid rgba(255, 255, 255, 0.08);
           background: #7b828b;
+          font-weight: 600;
         }
 
         .day {
@@ -52,6 +54,7 @@
           box-sizing: border-box;
           flex-direction: column;
           align-items: center;
+          font-weight: 700;
           // border: 0.5px solid rgba(255, 255, 255, 0.08);
           // background: rgba(255, 255, 255, 0.25);
           // background-color: #536272;

src/game_pages/detail/components/OrganizerInfo/index.module.scss

@@ -146,7 +146,7 @@
           gap: 6px;
           flex: 0 0 auto;
           border-radius: 20px;
-          border: 1px solid rgba(33, 178, 0, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.1);
           background: rgba(255, 255, 255, 0.16);
           padding: 12px 0 12px 15px;
           box-sizing: border-box;
@@ -218,8 +218,8 @@
                 font-size: 11px;
                 font-style: normal;
                 font-weight: 500;
-                line-height: 20px; /* 181.818% */
+                line-height: 20px;
-                letter-spacing: -0.23px;
+                letter-spacing: 1px;
                 display: flex;
                 height: 20px;
                 padding: 6px 8px;
@@ -229,6 +229,17 @@
                 border-radius: 999px;
                 // border: 0.5px solid rgba(0, 0, 0, 0.16);
                 background: rgba(255, 255, 255, 0.12);
+
+                & > .weaktip {
+                  color: rgba(255, 255, 255, 0.25);
+                }
+
+                & > .spearator {
+                  width: 1px;
+                  height: 8px;
+                  border-radius: 99px;
+                  background: rgba(255, 255, 255, 0.25);
+                }
               }
             }
           }

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

@@ -1,6 +1,7 @@
 import Taro from "@tarojs/taro";
 import dayjs from "dayjs";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
+import classnames from "classnames";
 import { calculateDistance } from "@/utils";
 import { useUserInfo } from "@/store/userStore";
 import * as LoginService from "@/services/loginService";
@@ -43,7 +44,7 @@ function genRecommendGames(games, location, avatar) {
       checkedApplications: current_players,
       levelRequirements:
         skill_level_max !== skill_level_min
-          ? `${skill_level_min || "-"}至${skill_level_max || "-"}`
+          ? `${skill_level_min || "-"}-${skill_level_max || "-"}`
           : skill_level_min === "1"
           ? "无要求"
           : `${skill_level_min}以上`,
@@ -234,16 +235,20 @@ export default function OrganizerInfo(props) {
                       }
                     >
                       <View
-                        className={
+                        className={classnames(
                           styles[
                             "recommend-games-list-item-addon-message-applications"
-                          ]
+                          ],
-                        }
+                          styles.joinMsg
+                        )}
                       >
-                        <Text>
+                        <Text>已加入</Text>
-                          报名人数 {game.checkedApplications}/
+                        <View>
-                          {game.applications}
+                          <Text>{game.checkedApplications}</Text>
-                        </Text>
+                          <Text className={styles.weaktip}>
+                            /{game.applications}
+                          </Text>
+                        </View>
                       </View>
                       <View
                         className={
@@ -253,8 +258,10 @@ export default function OrganizerInfo(props) {
                         }
                       >
                         <Text>{game.levelRequirements}</Text>
+                        <View className={styles.spearator} />
+                        <Text>{game.playType}</Text>
                       </View>
-                      <View
+                      {/* <View
                         className={
                           styles[
                             "recommend-games-list-item-addon-message-play-type"
@@ -262,7 +269,7 @@ export default function OrganizerInfo(props) {
                         }
                       >
                         <Text>{game.playType}</Text>
-                      </View>
+                      </View> */}
                     </View>
                   </View>
                 </View>

src/game_pages/detail/components/StickyBottom/index.module.scss

@@ -20,8 +20,10 @@
     justify-content: center;
     gap: 16px;
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(255, 255, 255, 0.25);
-    background: #fff;
+    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.25) inset;
+    backdrop-filter: blur(6px);
+    color: #fff;
 
     .sticky-bottom-bar-share {
       display: flex;
@@ -35,7 +37,6 @@
       }
 
       &-text {
-        color: rgba(0, 0, 0, 0.85);
         font-size: 10px;
         font-style: normal;
         font-weight: 500;
@@ -61,7 +62,6 @@
       }
 
       &-text {
-        color: rgba(0, 0, 0, 0.85);
         font-size: 10px;
         font-style: normal;
         font-weight: 500;
@@ -82,11 +82,11 @@
     flex: 1 0 0;
     border-radius: 16px;
     // border: 1px solid rgba(0, 0, 0, 0.06);
-    background: #fff;
+    // background: #fff;
     overflow: hidden;
 
-    &.disabled {
+    &.disabled > .sticky-bottom-bar-join-game {
-      background-color: #b4b4b4;
+      background: #b4b4b4;
       color: rgba(60, 60, 67, 0.6);
       pointer-events: none;
     }
@@ -94,24 +94,72 @@
     .sticky-bottom-bar-join-game {
       margin-left: auto;
       // width: 151px;
+      height: 100%;
+      padding-bottom: 14px;
+      box-sizing: border-box;
       display: flex;
-      align-items: center;
+      align-items: flex-end;
       justify-content: center;
       flex: 1;
+      font-family: "Quicksand";
+      font-style: italic;
+      font-size: 20px;
+      border-radius: 16px 0 0 16px;
+      border: 2px solid rgba(0, 0, 0, 0.06);
+      background: linear-gradient(95deg, #fff 20.85%, #eaeaea 73.29%);
+      box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+      backdrop-filter: blur(16px);
+      color: #000;
 
-      &-price {
+      // &-price {
-        font-family: "PoetsenOne";
+      //   font-size: 28px;
-        font-size: 28px;
+      //   font-weight: 400;
+      //   line-height: 24px; /* 114.286% */
+      //   letter-spacing: -0.56px;
+      //   color: #000;
+      // }
+
+      & .crrrencySymbol {
+        width: 8px;
+        height: 16px;
+        line-height: 16px;
+        // margin-top: 5px;
+      }
+
+      & > .integer {
+        font-feature-settings: "liga" off, "clig" off;
+        font-family: "DingTalk JinBuTi";
+        font-size: 20px;
+        // font-style: normal;
         font-weight: 400;
-        line-height: 24px; /* 114.286% */
+        line-height: 20px;
-        letter-spacing: -0.56px;
+      }
-        color: #000;
+
+      & > .decimalPart {
+        font-feature-settings: "liga" off, "clig" off;
+        font-family: "DingTalk JinBuTi";
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+      }
+
+      & > .btnText {
+        font-feature-settings: "liga" off, "clig" off;
+        font-family: "DingTalk JinBuTi";
+        // font-style: italic;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: -1px;
+        margin-left: 8px;
       }
     }
 
     .game_manage {
       width: 100px;
       margin-left: auto;
+      font-family: "Quicksand";
+      font-style: italic;
       height: 100%;
       display: flex;
       align-items: center;
@@ -119,6 +167,18 @@
       background: #000;
       color: #fff;
       pointer-events: all;
+      border-radius: 0 16px 16px 0;
+      border-top: 2px solid rgba(255, 255, 255, 0.06);
+      border-right: 2px solid rgba(255, 255, 255, 0.06);
+      border-bottom: 2px solid rgba(255, 255, 255, 0.06);
+      background: radial-gradient(
+        223.82% 178.84% at -64.5% 0%,
+        #525252 16.88%,
+        #222 54.19%,
+        #000 100%
+      );
+      // box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+      backdrop-filter: blur(16px);
     }
   }
 }

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

@@ -8,6 +8,7 @@ import { EvaluateCallback, EvaluateScene } from "@/store/evaluateStore";
 import { MATCH_STATUS, IsSubstituteSupported } from "@/services/detailService";
 import { GameManagePopup, NTRPEvaluatePopup } from "@/components";
 import img from "@/config/images";
+import RMB_ICON from "@/static/detail/rmb.svg";
 import { toast, navto } from "../../utils/helper";
 import styles from "./index.module.scss";
 
@@ -87,7 +88,18 @@ export default function StickyButton(props) {
     if (!user_action_status) {
       return;
     }
-    const displayPrice = is_organizer ? 0 : price;
+    const priceStrArr = price.toString().split(".");
+    const displayPrice = is_organizer ? (
+      <>
+        <Text className={styles.integer}>0</Text>
+        {/* <Text className={styles.decimalPart}>.00</Text> */}
+      </>
+    ) : (
+      <>
+        <Text className={styles.integer}>{priceStrArr[0]}</Text>
+        <Text className={styles.decimalPart}>.{priceStrArr[1]}</Text>
+      </>
+    );
     // user_action_status.can_assess = true;
     // user_action_status.can_join = false;
     // console.log(user_action_status, "user_action");
@@ -132,17 +144,35 @@ export default function StickyButton(props) {
     }
     if (waiting_start) {
       return {
-        text: () => <Text>¥{displayPrice} 已加入</Text>,
+        text: () => (
+          <>
+            <Image className={styles.crrrencySymbol} src={RMB_ICON} />
+            {displayPrice}
+            <Text className={styles.btnText}>已加入</Text>
+          </>
+        ),
         action: () => toast("已加入"),
       };
     } else if (is_substituting) {
       return {
-        text: () => <Text>¥{displayPrice} 已加入候补</Text>,
+        text: () => (
+          <>
+            <Image className={styles.crrrencySymbol} src={RMB_ICON} />
+            {displayPrice}
+            <Text className={styles.btnText}>已加入候补</Text>
+          </>
+        ),
         action: () => toast("已加入候补"),
       };
     } else if (can_pay) {
       return {
-        text: () => <Text>¥{price} 继续支付</Text>,
+        text: () => (
+          <>
+            <Image src={RMB_ICON} />
+            {price}
+            <Text className={styles.btnText}>继续支付</Text>
+          </>
+        ),
         action: async () => {
           const res = await OrderService.getUnpaidOrder(id);
           if (res.code === 0) {
@@ -154,19 +184,37 @@ export default function StickyButton(props) {
       };
     } else if (can_substitute) {
       return {
-        text: () => <Text>¥{displayPrice} 我要候补</Text>,
+        text: () => (
+          <>
+            <Image className={styles.crrrencySymbol} src={RMB_ICON} />
+            {displayPrice}
+            <Text className={styles.btnText}>我要候补</Text>
+          </>
+        ),
         action: handleJoinGame,
       };
     } else if (can_join) {
       return {
         text: () => {
-          return <Text>¥{displayPrice} 立即加入</Text>;
+          return (
+            <>
+              <Image className={styles.crrrencySymbol} src={RMB_ICON} />
+              {displayPrice}
+              <Text className={styles.btnText}>立即加入</Text>
+            </>
+          );
         },
         action: handleJoinGame,
       };
     } else if (can_assess) {
       return {
-        text: () => <Text>¥{displayPrice} 立即加入</Text>,
+        text: () => (
+          <>
+            <Image className={styles.crrrencySymbol} src={RMB_ICON} />
+            {displayPrice}
+            <Text className={styles.btnText}>立即加入</Text>
+          </>
+        ),
         action: handleSelfEvaluate,
       };
     }
@@ -190,7 +238,7 @@ export default function StickyButton(props) {
 
   if (typeof ActionText === "string") {
     ActionText = () => {
-      return <Text>{text as string}</Text>;
+      return <Text className={styles.btnText}>{text as string}</Text>;
     };
   }
 
@@ -220,7 +268,7 @@ export default function StickyButton(props) {
           >
             <Image
               className={styles["sticky-bottom-bar-comment-icon"]}
-              src={img.ICON_DETAIL_COMMENT_DARK}
+              src={img.ICON_DETAIL_COMMENT_LIGHT}
             />
             <Text className={styles["sticky-bottom-bar-comment-text"]}>
               {commentCount > 0 ? commentCount : "评论"}

src/static/detail/icon-comment-light.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M13.75 15.8333H9.16669V12.5H15V9.16663H18.3334V15.8333H16.25L15 17.0833L13.75 15.8333Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M1.66669 2.5H15V12.5H7.08335L5.41669 14.1667L3.75002 12.5H1.66669V2.5Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.91669 7.5H8.33335" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
+  <path d="M10.8333 7.5H11.25" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
+  <path d="M5 7.5H5.41667" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
+</svg>

src/static/detail/icon-share-light.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M9.16665 0.833374L16.6666 8.33337L9.16665 15.4167V10.8334C3.33331 10.8334 0.833313 17.0834 0.833313 17.0834C0.833313 10 2.91665 5.41671 9.16665 5.41671V0.833374Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/static/detail/rmb.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.73598 5.13596H0.251982L0.395982 3.93596H2.30398L0.227982 -4.43459e-05H1.91998L3.61198 3.56396L6.10798 -4.43459e-05H7.84798L4.87198 3.93596H6.71998L6.57598 5.13596H4.15198L4.05598 5.97596H6.46798L6.32398 7.17596H3.91198L3.68398 9.01196H2.26798L2.49598 7.17596H-1.75685e-05L0.143982 5.97596H2.63998L2.73598 5.13596Z" fill="black"/>
+</svg>