feat: 订单列表 & 球局详情头像

src/game_pages/detail/index.scss

@@ -162,7 +162,6 @@
         &-image {
           width: 28px;
           height: 28px;
-          border-radius: 50%;
         }
       }
 
@@ -690,9 +689,11 @@
               background: rgba(255, 255, 255, 0.16);
               flex: 0 0 auto;
 
-              &-avatar {
+              .participants-list-item-avatar {
                 width: 60px;
                 height: 60px;
+                border-radius: 50%;
+                overflow: hidden;
               }
 
               &-name {
@@ -836,6 +837,8 @@
         &-avatar {
           width: 40px;
           height: 40px;
+          border-radius: 50%;
+          object-fit: cover;
         }
 
         &-message {
@@ -1012,6 +1015,8 @@
                 &-avatar {
                   width: 20px;
                   height: 20px;
+                  border-radius: 50%;
+                  object-fit: cover;
                 }
 
                 &-message {

src/game_pages/detail/index.tsx

@@ -38,8 +38,8 @@ function insertDotInTags(tags: string[]) {
 }
 
 function GameTags(props) {
-  const { userInfo } = props;
-  const { avatar_url } = userInfo;
+  const { userInfo, handleViewUserInfo } = props;
+  const { avatar_url, id } = userInfo;
   const tags = [
     {
       name: "🕙 急招",
@@ -64,7 +64,9 @@ function GameTags(props) {
         {/* network image mock */}
         <Image
           className="detail-page-content-avatar-tags-avatar-image"
+          mode="aspectFill"
           src={avatar_url}
+          onClick={handleViewUserInfo.bind(null, id)}
         />
       </View>
       <View className="detail-page-content-avatar-tags-tags">
@@ -596,6 +598,7 @@ function VenueInfo(props) {
                 >
                   <Image
                     className="venue-screenshot-image-item-image"
+                    mode="aspectFill"
                     src={item.url}
                   />
                 </View>
@@ -661,7 +664,7 @@ function GamePlayAndRequirement(props) {
 
 // 参与者
 function Participants(props) {
-  const { detail = {}, handleJoinGame } = props;
+  const { detail = {}, handleJoinGame, handleViewUserInfo } = props;
   const participants = detail.participants || [];
   const {
     participant_count,
@@ -724,9 +727,11 @@ function Participants(props) {
                   participant_user_id === organizer_id ? "组织者" : "参与者";
                 return (
                   <View key={participant.id} className="participants-list-item">
-                    <Avatar
+                    <Image
                       className="participants-list-item-avatar"
+                      mode="aspectFill"
                       src={avatar_url}
+                      onClick={handleViewUserInfo.bind(null, participant_user_id)}
                     />
                     <Text className="participants-list-item-name">
                       {nickname || "未知"}
@@ -808,7 +813,7 @@ function genRecommendGames(games, location, avatar) {
       avatar,
       applications: max_players,
       checkedApplications: current_players,
-      levelRequirements: `NTRP ${genNTRPRequirementText(skill_level_min, skill_level_max)}`,
+      levelRequirements: skill_level_max !== skill_level_min ? `${skill_level_min || '-'}至${skill_level_max || '-'}` : skill_level_min === 1 ? '无要求' : `${skill_level_min}以上`,
       playType: play_type,
     };
   });
@@ -819,6 +824,7 @@ function OrganizerInfo(props) {
     userInfo,
     currentLocation: location,
     onUpdateUserInfo = () => {},
+    handleViewUserInfo,
   } = props;
   const {
     id,
@@ -855,11 +861,11 @@ function OrganizerInfo(props) {
     }
   };
 
-  const viewOtherPage = () => {
-      Taro.navigateTo({
-        url: `/user_pages/other/index?userid=${id}`,
-      });
-  };
+  function handleViewGame(gameId) {
+    Taro.navigateTo({
+      url: `/game_pages/detail/index?id=${gameId}&from=current`
+    })
+  }
 
   return (
     <View className="detail-page-content-organizer-recommend-games">
@@ -869,7 +875,7 @@ function OrganizerInfo(props) {
       </View>
       {/* organizer avatar and name */}
       <View className="organizer-avatar-name">
-        <Avatar className="organizer-avatar-name-avatar" src={avatar_url} onClick={viewOtherPage} />
+        <Image className="organizer-avatar-name-avatar" src={avatar_url} mode="aspectFill" onClick={handleViewUserInfo.bind(null, id)} />
         <View className="organizer-avatar-name-message">
           <Text className="organizer-avatar-name-message-name">{nickname}</Text>
           <View className="organizer-avatar-name-message-stats">
@@ -909,7 +915,7 @@ function OrganizerInfo(props) {
       </View>
       {/* recommend games by organizer */}
       <View className="organizer-recommend-games">
-        <View className="organizer-recommend-games-title" onClick={() => {}}>
+        <View className="organizer-recommend-games-title" onClick={handleViewUserInfo.bind(null, id)}>
           <Text>TA的更多活动</Text>
           <Image
             className="organizer-recommend-games-title-arrow"
@@ -919,7 +925,7 @@ function OrganizerInfo(props) {
         <ScrollView className="recommend-games-list" scrollX>
           <View className="recommend-games-list-content">
             {recommendGames.map((game, index) => (
-              <View key={index} className="recommend-games-list-item">
+              <View key={index} className="recommend-games-list-item" onClick={handleViewGame.bind(null, game.id)}>
                 {/* game title */}
                 <View className="recommend-games-list-item-title">
                   <Text>{game.title}</Text>
@@ -943,9 +949,11 @@ function OrganizerInfo(props) {
                 </View>
                 {/* organizer avatar、applications、level requirements、play type */}
                 <View className="recommend-games-list-item-addon">
-                  <Avatar
+                  <Image
                     className="recommend-games-list-item-addon-avatar"
+                    mode="aspectFill"
                     src={game.avatar}
+                    onClick={(e) => { e.stopPropagation(); handleViewUserInfo(id) }}
                   />
                   <View className="recommend-games-list-item-addon-message">
                     <View className="recommend-games-list-item-addon-message-applications">
@@ -1049,6 +1057,12 @@ function Index() {
     }
   }
 
+  function handleViewUserInfo(userId) {
+    Taro.navigateTo({
+       url: `/user_pages/other/index?userid=${userId}`
+    })
+  }
+
   console.log("detail", detail);
   const backgroundImage = detail?.image_list?.[0]
     ? { backgroundImage: `url(${detail?.image_list?.[0]})` }
@@ -1079,7 +1093,7 @@ function Index() {
       {/* content */}
       <View className="detail-page-content">
         {/* avatar and tags */}
-        <GameTags detail={detail} userInfo={userInfo} />
+        <GameTags detail={detail} userInfo={userInfo} handleViewUserInfo={handleViewUserInfo} />
         {/* title */}
         <View className="detail-page-content-title">
           <Text className="detail-page-content-title-text">{detail.title}</Text>
@@ -1091,7 +1105,7 @@ function Index() {
         {/* gameplay requirements */}
         <GamePlayAndRequirement detail={detail} />
         {/* participants */}
-        <Participants detail={detail} handleJoinGame={handleJoinGame} />
+        <Participants detail={detail} handleJoinGame={handleJoinGame} handleViewUserInfo={handleViewUserInfo} />
         {/* supplemental notes */}
         <SupplementalNotes detail={detail} />
         {/* organizer and recommend games by organizer */}
@@ -1100,6 +1114,7 @@ function Index() {
           userInfo={userInfo}
           currentLocation={currentLocation}
           onUpdateUserInfo={onUpdateUserInfo}
+          handleViewUserInfo={handleViewUserInfo}
         />
         {/* sticky bottom action bar */}
         <StickyButton