调整我的小店加载状态

src/pages/memberSub/earningsOrder/index.jsx

@@ -15,7 +15,7 @@ export default class Index extends Component {
     page: 1, //页数
     loading: false, //加载状态
     totalPages: 1, // 添加总页数
-    isNoMore: false,
+    isNoMore: false, // 是否没有更多
     orderList: [], //订单列表
     userInfo: {}, //个人信息
   };

src/pages/memberSub/earningsOrder/index.less

@@ -210,6 +210,7 @@
                 justify-content: space-between;
 
                 .product-name {
+                    height: 80px;
                     font-size: 28px;
                     color: #000000;
                     line-height: 41px;

src/pages/memberSub/storeManagement/index.jsx

@@ -1,8 +1,15 @@
 import { Component } from "react";
 import { View, Text, Image, Button } from "@tarojs/components";
-import { AtIcon } from "taro-ui";
+import { AtIcon, AtActivityIndicator } from "taro-ui";
 import "./index.less";
-import { getMyShopList, getMyShopDetail, getShareShopDetail, getShareShopProductList, getShareJump,bindShareJump } from "../../../service";
+import {
+  getMyShopList,
+  getMyShopDetail,
+  getShareShopDetail,
+  getShareShopProductList,
+  getShareJump,
+  bindShareJump,
+} from "../../../service";
 import storeManagement from "../../../images/storeManagement/storeManagement.png";
 import storeManagementIcon from "../../../images/storeManagement/storeManagementIcon.png";
 import ProductCard from "../../../components/ProductCard"; //卡片模块
@@ -17,13 +24,16 @@ export default class Index extends Component {
     loading: false, //加载状态
     totalPages: 1, // 添加总页数
     isShare: false, // 是否是分享进入
-    shopId: '', // 店铺id
+    shopId: "", // 店铺id
+    isNoMore: false, // 是否没有更多
   };
   // 获取店铺详情
   getMyShopDetail = async () => {
-    const res = this.state.isShare ? await getShareShopDetail({
-      store_id: this.state.shopId
-    }) :  await getMyShopDetail();
+    const res = this.state.isShare
+      ? await getShareShopDetail({
+          store_id: this.state.shopId,
+        })
+      : await getMyShopDetail();
     this.setState({
       shopDetail: res,
     });
@@ -33,36 +43,44 @@ export default class Index extends Component {
     const { page } = this.state;
     this.setState({ loading: true });
 
-    const res = this.state.isShare ? await getShareShopProductList({
-      store_id: this.state.shopId,
-      page,
-      page_size: 10,
-      tag_name:'全部'
-    }) : await getMyShopList({
-      page,
-      page_size: 10,
-      tag_name:'全部'
-    });
+    const res = this.state.isShare
+      ? await getShareShopProductList({
+          store_id: this.state.shopId,
+          page,
+          page_size: 10,
+          tag_name: "全部",
+        })
+      : await getMyShopList({
+          page,
+          page_size: 10,
+          tag_name: "全部",
+        });
 
     this.setState((prevState) => ({
-      productList: isBack ? res.goods_list : [...prevState.productList, ...res.goods_list],
+      productList: isBack
+        ? res.goods_list
+        : [...prevState.productList, ...res.goods_list],
       totalPages: res.total_pages,
       loading: false,
+      isNoMore: res.total_pages <= page,
     }));
   };
 
   componentDidShow() {
     const { router } = Taro.getCurrentInstance();
     const params = router.params;
-    
-    this.setState({
-      isManager: JSON.parse(params.isManager), //是否是店长
-      isShare: params.isShare||false, // 是否是分享进入
-      shopId: params.shopId||'', // 店铺id
-    },()=>{
-      this.getMyShopDetail(); //获取店铺详情
-      this.getMyShopList(true); //获取店铺数据
-    });
+
+    this.setState(
+      {
+        isManager: JSON.parse(params.isManager), //是否是店长
+        isShare: params.isShare || false, // 是否是分享进入
+        shopId: params.shopId || "", // 店铺id
+      },
+      () => {
+        this.getMyShopDetail(); //获取店铺详情
+        this.getMyShopList(true); //获取店铺数据
+      }
+    );
   }
   // 页面上拉触底
   onReachBottom = () => {
@@ -82,38 +100,38 @@ export default class Index extends Component {
   };
   // 配置分享内容
   onShareAppMessage() {
-    const name = Taro.getStorageSync('userInfo').name;
+    const name = Taro.getStorageSync("userInfo").name;
     return {
       title: `${name}的店铺`,
       path: `/pages/memberSub/storeManagement/index?shopId=${this.state.shopDetail.id}&isShare=true&isManager=false`,
-      imageUrl: ''
-    }
+      imageUrl: "",
+    };
     return getShareJump({
-      share_type:2,
-      share_id: this.state.shopDetail.id
-    }).then(res=>{
+      share_type: 2,
+      share_id: this.state.shopDetail.id,
+    }).then((res) => {
       return {
         title: "店铺",
         path: `/pages/memberSub/storeManagement/index?shopId=${this.state.shopDetail.id}&isShare=true&isManager=false&&shareJump=${res.share_unique_value}`,
-        imageUrl: ''
-      }
-    })
+        imageUrl: "",
+      };
+    });
   }
   render() {
-    const { shopDetail, productList } = this.state;
+    const { shopDetail, productList, loading, isNoMore } = this.state;
     return (
       <View className="index">
         {/* 头部卡片 */}
         <View className="header-card">
           <Image className="bg-image" src={storeManagement} mode="widthFix" />
-          {/* 分享店铺 */}
+          {/* 分享���铺 */}
           {!this.state.isShare && (
-          <View className="share-shop">
-            <Button onClick={this.handleShare} openType="share">
-            <Text>分享店铺</Text>
-            <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
-            </Button>
-          </View>
+            <View className="share-shop">
+              <Button onClick={this.handleShare} openType="share">
+                <Text>分享店铺</Text>
+                <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
+              </Button>
+            </View>
           )}
           {/* 个人信息 */}
           <View className="user-info">
@@ -169,6 +187,25 @@ export default class Index extends Component {
             </View>
           )}
         </View>
+        {/* 加载中 */}
+        {loading && (
+          <View className="loading-container">
+            <AtActivityIndicator
+              content="加载中..."
+            isOpened={loading}
+            mode="center"
+            color="#fdf764"
+            />
+          </View>
+        )}
+        {/* 没有更多 */}
+        {isNoMore && (
+          <View className="no-more">
+            <View className="no-more-line">
+              <Text className="no-more-text">我是有底线的</Text>
+            </View>
+          </View>
+        )}
       </View>
     );
   }

src/pages/memberSub/storeManagement/index.less

@@ -4,6 +4,7 @@
     min-height: 100vh;
     background-color: #f9f9f9;
     padding-bottom: 150px;
+
     .header-card {
         width: 100%;
         height: 256px;
@@ -84,7 +85,7 @@
                 font-size: 22px;
                 line-height: 40px;
                 margin-right: 7px;
-            color: #FFFFFF;
+                color: #FFFFFF;
             }
         }
     }
@@ -98,6 +99,7 @@
         box-sizing: border-box;
         position: relative;
         z-index: 1;
+
         .product-list-title {
             display: flex;
             flex-direction: column;
@@ -122,59 +124,67 @@
             }
         }
     }
-        // 底部购买模块
-        .bottom-buy {
-            width: 100%;
-            background-color: #fff;
-            height: 126px;
-            padding: 19px 35px 19px 44px;
-            box-sizing: border-box;
-            position: fixed;
-            bottom: 0;
+
+    // 底部购买模块
+    .bottom-buy {
+        width: 100%;
+        background-color: #fff;
+        height: 126px;
+        padding: 19px 35px 19px 44px;
+        box-sizing: border-box;
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .bottom-buy-left {
             display: flex;
-            justify-content: space-between;
+            flex-direction: column;
             align-items: center;
-            .bottom-buy-left {
+
+            image {
+                width: 36px;
+                height: 36px;
+                margin-bottom: 7px;
+            }
+
+            .bottom-buy-text {
+                font-size: 22px;
+                line-height: 32px;
+                color: #000000;
+            }
+        }
+
+        .bottom-buy-right {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            border-radius: 60px;
+            overflow: hidden;
+
+            .bottom-buy-right-self,
+            .bottom-buy-right-share {
+                line-height: 43px;
+                font-size: 30px;
+                width: 100%;
                 display: flex;
-                flex-direction: column;
+                justify-content: center;
                 align-items: center;
+
                 image {
-                    width: 36px;
-                    height: 36px;
-                    margin-bottom: 7px;
-                }
-    
-                .bottom-buy-text {
-                    font-size: 22px;
-                    line-height: 32px;
-                    color: #000000;
+                    margin-right: 9px;
                 }
             }
-            .bottom-buy-right {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                border-radius: 60px;
-                overflow: hidden;
-                .bottom-buy-right-self,.bottom-buy-right-share{
-                    line-height: 43px;
-                    font-size: 30px;
-                    width: 100%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    image{
-                        margin-right: 9px;
-                    }
-                }
-                .bottom-buy-right-self{
-                    background-color: #fbe00f;
-                    color: #000000;
-                }
-                .bottom-buy-right-share{
-                    background-color: #ff1c14;
-                    color: #fff;
-                }
+
+            .bottom-buy-right-self {
+                background-color: #fbe00f;
+                color: #000000;
+            }
+
+            .bottom-buy-right-share {
+                background-color: #ff1c14;
+                color: #fff;
+            }
         }
     }
 }
@@ -191,11 +201,55 @@ Button {
     display: flex;
     justify-content: center;
     align-items: center;
+
     &::after {
-      border: none;
+        border: none;
+    }
+}
+
+.button-hover {
+    background-color: transparent !important;
+    /* 移除背景高亮 */
+    box-shadow: none !important;
+    /* 移除可能的阴影 */
+}
+// 加载中
+.loading-container {
+    width: 100%;
+    position: relative;
+    height: 60px;
+}
+// 没有更多
+.no-more {
+    padding: 20px 0;
+    
+    &-line {
+        position: relative;
+        text-align: center;
+        
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            width: 30%;
+            height: 1px;
+            background-color: #e5e5e5;
+        }
+        
+        &::before {
+            left: 10%;
+        }
+        
+        &::after {
+            right: 10%;
+        }
+    }
+    
+    &-text {
+        display: inline-block;
+        padding: 0 15px;
+        font-size: 24px;
+        color: #949494;
     }
-  }
-  .button-hover {
-    background-color: transparent !important; /* 移除背景高亮 */
-    box-shadow: none !important;             /* 移除可能的阴影 */
-  }
+}