feat: 切换城市

src/game_pages/list/index.module.scss

@@ -4,6 +4,79 @@
   }
 }
 
+.cqContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    // gap: 24px;
+
+    .tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+
+      .tip1 {
+        color: #000;
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+      }
+
+      .tip2 {
+        color: rgba(0, 0, 0, 0.65);
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    .qrcodeWrappper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      .qrcode {
+        width: 180px;
+        height: 180px;
+        // border-radius: 12px;
+        // border: 1px solid rgba(0, 0, 0, 0.06);
+        // background: lightgray 50% / cover no-repeat;
+        // box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.16);
+      }
+
+      .qrcodeTip {
+        color: rgba(0, 0, 0, 0.65);
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-top: -30px;
+      }
+    }
+  }
+}
+
 .listPage {
   background-color: #fefefe;
 
@@ -83,4 +156,4 @@
   transform: translateY(20px);
   pointer-events: none;
   /* 隐藏时不响应鼠标事件 */
-}
+}

src/game_pages/list/index.tsx

@@ -9,7 +9,7 @@ import Taro, {
 } from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
-import { View } from "@tarojs/components";
+import { View, Image, Text } from "@tarojs/components";
 import CustomerNavBar from "@/container/listCustomNavbar";
 import GuideBar from "@/components/GuideBar";
 import ListContainer from "@/container/listContainer";
@@ -19,7 +19,7 @@ import { updateUserLocation } from "@/services/userService";
 // import ShareCardCanvas from "@/components/ShareCardCanvas";
 import { useUserActions } from "@/store/userStore";
 import { useDictionaryStore } from "@/store/dictionaryStore";
-// import generateShareImage from '@/utils/share'
+import { saveImage } from "@/utils";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
@@ -47,6 +47,10 @@ const ListPage = () => {
     loadMoreMatches,
     fetchGetGamesCount,
     updateDistanceQuickFilter,
+    getCities,
+    getCityQrCode,
+    area,
+    cityQrCode,
   } = store;
 
   const {
@@ -104,6 +108,8 @@ const ListPage = () => {
   useEffect(() => {
     getLocation();
     fetchUserInfo();
+    getCities();
+    getCityQrCode();
   }, []);
 
   // 监听数据变化，如果是第一页就滚动到顶部
@@ -317,6 +323,44 @@ const ListPage = () => {
   //   })
   // }, [])
 
+  const area_city = area.at(-2);
+
+  function renderCityQrcode() {
+    let item = cityQrCode.find((item) => item.city_name === area_city);
+    if (!item) item = cityQrCode.find((item) => item.city_name === "其他");
+    return (
+      <View className={styles.cqContainer}>
+        {item ? (
+          <View className={styles.wrapper}>
+            <View className={styles.tips}>
+              <Text className={styles.tip1}>当前城市暂无球局</Text>
+              <Text className={styles.tip2}>
+                加入城市球友群，获得最新球局消息
+              </Text>
+            </View>
+            <View className={styles.qrcodeWrappper}>
+              <Image
+                className={styles.qrcode}
+                src={item.qr_code_url}
+                mode="widthFix"
+                onClick={() => {
+                  saveImage(item.qr_code_url);
+                }}
+              />
+              <Text className={styles.qrcodeTip}>
+                点击图片保存，使用微信扫码加入群聊
+              </Text>
+            </View>
+          </View>
+        ) : (
+          <View>
+            <Text>当前城市暂无球局, 敬请期待</Text>
+          </View>
+        )}
+      </View>
+    );
+  }
+
   return (
     <>
       {/* 自定义导航 */}
@@ -325,82 +369,69 @@ const ListPage = () => {
           showInput: isShowInputCustomerNavBar,
         }}
       />
-      <View ref={scrollContextRef}>
-        {/* 列表内容 */}
-        <View className={styles.listPage} style={{ paddingTop: totalHeight }}>
-          {/* 综合筛选 */}
-          {isShowFilterPopup && (
-            <View>
-              <FilterPopup
-                loading={loading}
-                onCancel={toggleShowPopup}
-                onConfirm={handleFilterConfirm}
-                onChange={handleUpdateFilterOptions}
-                filterOptions={filterOptions}
-                onClear={clearFilterOptions}
-                visible={isShowFilterPopup}
-                onClose={toggleShowPopup}
-                statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+      {area_city !== "上海" ? (
+        renderCityQrcode()
+      ) : (
+        <View ref={scrollContextRef}>
+          {/* 列表内容 */}
+          <View className={styles.listPage} style={{ paddingTop: totalHeight }}>
+            {/* 综合筛选 */}
+            {isShowFilterPopup && (
+              <View>
+                <FilterPopup
+                  loading={loading}
+                  onCancel={toggleShowPopup}
+                  onConfirm={handleFilterConfirm}
+                  onChange={handleUpdateFilterOptions}
+                  filterOptions={filterOptions}
+                  onClear={clearFilterOptions}
+                  visible={isShowFilterPopup}
+                  onClose={toggleShowPopup}
+                  statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+                />
+              </View>
+            )}
+            <View className={`${styles.listTopSearchWrapper}`}>
+              <SearchBar
+                handleFilterIcon={toggleShowPopup}
+                isSelect={filterCount > 0}
+                filterCount={filterCount}
+                onChange={handleSearchChange}
+                value={searchValue}
+                onInputClick={handleSearchClick}
+              />
+            </View>
+            {/* 筛选 */}
+            <View
+              className={styles.listTopFilterWrapper}
+              style={{
+                top: totalHeight - 1,
+              }}
+            >
+              <DistanceQuickFilter
+                cityOptions={distanceData}
+                quickOptions={quickFilterData}
+                onChange={handleDistanceOrQuickChange}
+                cityName="distanceFilter"
+                quickName="order"
+                cityValue={distanceQuickFilter?.distanceFilter}
+                quickValue={distanceQuickFilter?.order}
               />
             </View>
-          )}
-          <View className={`${styles.listTopSearchWrapper}`}>
-            <SearchBar
-              handleFilterIcon={toggleShowPopup}
-              isSelect={filterCount > 0}
-              filterCount={filterCount}
-              onChange={handleSearchChange}
-              value={searchValue}
-              onInputClick={handleSearchClick}
-            />
-          </View>
-          {/* 筛选 */}
-          <View
-            className={styles.listTopFilterWrapper}
-            style={{
-              top: totalHeight - 1,
-            }}
-          >
-            <DistanceQuickFilter
-              cityOptions={distanceData}
-              quickOptions={quickFilterData}
-              onChange={handleDistanceOrQuickChange}
-              cityName="distanceFilter"
-              quickName="order"
-              cityValue={distanceQuickFilter?.distanceFilter}
-              quickValue={distanceQuickFilter?.order}
-            />
-          </View>
 
-          {/* 列表内容 */}
-          <ListContainer
-            data={matches}
-            recommendList={recommendList}
-            loading={loading}
-            isShowNoData={isShowNoData}
-            error={error}
-            reload={refreshMatches}
-            loadMoreMatches={loadMoreMatches}
-          />
+            {/* 列表内容 */}
+            <ListContainer
+              data={matches}
+              recommendList={recommendList}
+              loading={loading}
+              isShowNoData={isShowNoData}
+              error={error}
+              reload={refreshMatches}
+              loadMoreMatches={loadMoreMatches}
+            />
+          </View>
         </View>
-      </View>
-      {/* 测试分享功能 */}
-          {/* <ShareCardCanvas data={
-            {
-              userAvatar: "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
-              userNickname: "华巴抡卡",
-              gameType: "单打",
-              skillLevel: "NTRP 2.5 - 3.0",
-              gameDate: "6月20日(周五)",
-              gameTime: "下午5点 2小时",
-              venueName: "因乐驰网球俱乐部(嘉定江桥万达店)",
-              venueImages: ["https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg",
-                 "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/63f62c80-ac44-4f3b-bb6c-d7f6e8ebf76d.jpg"
-                ],
-            }
-          }
-            onGenerated={handleShare}
-          /> */}
+      )}
       <GuideBar currentPage="list" />
     </>
   );