商品分享和骨架屏

project.private.config.json

@@ -10,6 +10,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/memberSub/earningsOrder/index",
+          "pathName": "pages/memberSub/earningsOrder/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/productManagement/index",
           "pathName": "pages/memberSub/storeManagement/index",
           "query": "",

src/api/request.js

@@ -42,18 +42,18 @@ export default async (options = { method: 'GET', data: {} }) => {
       case 200:
         return data;
       case 400:
-        Taro.showToast({
-          title: '传参有误',
-          icon: 'none',
-          mask: true,
-        });
+        // Taro.showToast({
+        //   title: '传参有误',
+        //   icon: 'none',
+        //   mask: true,
+        // });
         throw new Error('传参有误');
       case 422:
-        Taro.showToast({
-          title: 'Validation Error',
-          icon: 'none',
-          mask: true,
-        });
+        // Taro.showToast({
+        //   title: 'Validation Error',
+        //   icon: 'none',
+        //   mask: true,
+        // });
         throw new Error('Validation Error');
       case 500:
         Taro.showToast({

src/common/share.js

@@ -0,0 +1,12 @@
+const shareConfig = {
+    title: '默认分享标题',
+    path: '/pages/index/index',
+    imageUrl: '',
+  };
+  
+  export const setShareContent = (config) => {
+    Object.assign(shareConfig, config);
+  };
+  
+  export const getShareContent = () => shareConfig;
+  

src/components/Skeleton/index.jsx

@@ -0,0 +1,39 @@
+import { View } from '@tarojs/components'
+import './index.less'
+
+const Skeleton = ({ isSkeletonShow }) => {
+  return (
+    <View className="skeleton" style={{ display: isSkeletonShow ? 'block' : 'none' }}>
+      {/* 轮播图占位 */}
+      <View className="skeleton-carousel"></View>
+
+      {/* 列表分类 */}
+      <View className="skeleton-category">
+        {[...Array(5)].map((_, index) => (
+          <View key={index} className="skeleton-category-item"></View>
+        ))}
+      </View>
+
+      {/* 运营区域 */}
+      <View className="skeleton-operation">
+        <View className="skeleton-operation-item"></View>
+        <View className="skeleton-operation-item"></View>
+      </View>
+
+      {/* 商品列表 */}
+      <View className="skeleton-product">
+        <View className="skeleton-product-image"></View>
+        <View className="skeleton-product-info">
+          <View className="skeleton-product-title"></View>
+          <View className="skeleton-product-price"></View>
+          <View className="skeleton-product-buttons">
+            <View className="skeleton-product-button"></View>
+            <View className="skeleton-product-button"></View>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default Skeleton

src/components/Skeleton/index.less

@@ -0,0 +1,116 @@
+@keyframes skeleton-fade {
+    0% {
+        background-color: #e0e0e0;
+    }
+
+    50% {
+        background-color: #f0f0f0;
+    }
+
+    100% {
+        background-color: #e0e0e0;
+    }
+}
+
+.skeleton {
+    padding: 16px;
+    margin-top: -360px;
+    position: relative;
+}
+
+.skeleton-carousel {
+    width: 100%;
+    height: 350px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    margin-bottom: 16px;
+}
+
+.skeleton-category {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 17px;
+    margin-bottom: 16px;
+    height: 160px;
+    align-items: center;
+}
+
+.skeleton-category-item {
+    width: 126px;
+    height: 126px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+}
+
+.skeleton-operation {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 26px;
+    height: 200px;
+}
+
+.skeleton-operation-item {
+    width: calc(50% - 8px);
+    height: 200px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+}
+
+.skeleton-product {
+    display: flex;
+    margin-bottom: 16px;
+}
+
+.skeleton-product-image {
+    width: 260px;
+    height: 260px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    margin-right: 16px;
+}
+
+.skeleton-product-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.skeleton-product-title {
+    width: 100%;
+    height: 20px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    margin-bottom: 8px;
+}
+
+.skeleton-product-price {
+    width: 50%;
+    height: 20px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    margin-bottom: 16px;
+}
+
+.skeleton-product-buttons {
+    display: flex;
+    justify-content: space-between;
+}
+
+.skeleton-product-button {
+    width: 200px;
+    height: 90px;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+}
+
+.skeleton-carousel,
+.skeleton-category-item,
+.skeleton-operation-item,
+.skeleton-product-image,
+.skeleton-product-title,
+.skeleton-product-price,
+.skeleton-product-button {
+    animation: skeleton-fade 1.5s infinite ease-in-out;
+    background-size: 200px 100%;
+}

src/components/index/CategoryList/index.jsx

@@ -1,13 +1,26 @@
 import { View, Image, Text } from "@tarojs/components";
 import "./index.less";
+import Taro from "@tarojs/taro";
 
 const CategoryList = (props) => {
   const { categoryList } = props; //分类列表引用
+  const handleCategoryClick = (jpath, type_jpath) => {
+    if (type_jpath == 2) {
+      return;
+    }
+    Taro.navigateTo({
+      url: jpath,
+    });
+  };
   return (
     <View className="category-wrap">
       <View className="category-list">
-        {categoryList.map(item => (
-          <View key={item.id} className="category-item">
+        {categoryList.map((item) => (
+          <View
+            onClick={() => handleCategoryClick(item.jpath, item.type_jpath)}
+            key={item.id}
+            className="category-item"
+          >
             <Image className="category-icon" src={item.img} mode="aspectFit" />
             <Text className="category-name">{item.name}</Text>
           </View>
@@ -17,4 +30,4 @@ const CategoryList = (props) => {
   );
 };
 
-export default CategoryList; 
+export default CategoryList;

src/components/index/CategoryList/index.less

@@ -4,11 +4,10 @@
   .category-list {
     display: flex;
     flex-wrap: wrap;
-    // justify-content: space-between;
     background: #FFFFFF;
     border-radius: 20px;
     padding: 25px 17px 22px 17px;
-    gap: 50px;
+    gap: 0 50px;
     .category-item {
       width: 96px;
       display: flex;

src/components/index/ProductList/index.jsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import { View, Text, Image, Button } from "@tarojs/components";
 import { AtCheckbox, AtActivityIndicator } from "taro-ui";
+import { setShareContent } from "../../../common/share";
 import Taro from "@tarojs/taro";
 import "./index.less";
 import joinStoreBg from "../../../images/index/jionStore.png";
@@ -88,8 +89,12 @@ const ProductList = forwardRef((props, ref) => {
   // 分享商品 
   const shareProduct = (product, e) => {
     e.stopPropagation(); // 防止事件穿透
-    // 调用父组件的回调函数，传递商品信息
-    props.onShareProduct && props.onShareProduct(product);
+    props.onShareProduct && props.onShareProduct();
+    setShareContent({
+      title: product.item_title,
+      path: `/pages/indexSub/productDetail/index?id=${product.id}&&isShare=${true}`,
+      imageUrl: product.image_url,
+    });
   };
   return (
     <View className="product-list-wrap">

src/pages/index/index.jsx

@@ -3,7 +3,9 @@ import { Component } from "react";
 import { View, Image, Swiper, SwiperItem, Text } from "@tarojs/components";
 import { AtTabs } from "taro-ui";
 import { getHomeData, getProductList } from "../../service";
+import { getShareContent } from "../../common/share";
 import "./index.less";
+import Skeleton from "../../components/skeleton"; //骨架屏
 import SearchBar from "../../components/index/SearchBar"; //搜索框
 import CategoryList from "../../components/index/CategoryList"; //分类列表
 import OperationArea from "../../components/index/OperationArea"; //运营区域
@@ -11,7 +13,6 @@ import RecommendList from "../../components/index/RecommendList"; //邀请人推
 import ProductList from "../../components/index/ProductList"; //商品列表
 import myStoreIcon from "../../images/index/myStore.png";
 import backTopIcon from "../../images/index/back-top.png";
-
 export default class Index extends Component {
   state = {
     current: 0, // 添加当前选中的tab索引
@@ -21,7 +22,6 @@ export default class Index extends Component {
     page: 1, // 添加页码
     totalPages: 1, // 添加总页数
     loading: false, // 添加加载状态
-    shareInfo: {}, // 分享信息
   };
   // 获取首页数据
   getHomeData = async () => {
@@ -103,22 +103,15 @@ export default class Index extends Component {
   };
 
   // 分享商品
-  handleShareProduct = (product) => {
-    this.setState({ shareInfo: product }, () => {
-      Taro.showShareMenu({
-        withShareTicket: true,
-        menus: ["shareAppMessage"],
-      });
+  handleShareProduct = () => {
+    Taro.showShareMenu({
+      withShareTicket: true,
+      menus: ["shareAppMessage"],
     });
   };
   // 配置分享内容
   onShareAppMessage() {
-      let shareInfo = this.state.shareInfo;
-      return {
-        title: shareInfo.item_title,
-        path: `/pages/indexSub/productDetail/index?id=${shareInfo.id}&&isShare=${true}`,
-        imageUrl: shareInfo.image_url,
-      };
+    return getShareContent();
   }
   render() {
     const { homeData, productList, loading } = this.state;
@@ -180,6 +173,8 @@ export default class Index extends Component {
             </Swiper>
           </View>
         </View>
+        {/* 骨架屏 */}
+        <Skeleton isSkeletonShow={!homeData.banner&&!productList.length>0}/>
         {/* 分类列表组件 */}
         {homeData.icon && <CategoryList categoryList={homeData.icon} />}
         {/* 运营区域 */}

src/pages/index/index.less

@@ -2,7 +2,7 @@
   background-color: #f9f9f9;
   min-height: 100vh;
   padding-bottom: 40px;
-
+  box-sizing: border-box;
   .header {
     width: 100%;
     position: relative;

src/pages/indexSub/highCommission/index.jsx

@@ -4,6 +4,7 @@ import "./index.less";
 import seckillImg from "../../../images/seckill/seckillTop.png";
 import ProductList from "../../../components/index/ProductList";
 import { getRecommendProductList } from "../../../service";
+import { getShareContent } from "../../../common/share";
 export default class Index extends Component {
   state = {
     productList: [], //推荐商品列表
@@ -31,6 +32,17 @@ export default class Index extends Component {
       loading: false,
     }));
   };
+  // 分享商品
+  handleShareProduct = () => {
+      Taro.showShareMenu({
+        withShareTicket: true,
+        menus: ["shareAppMessage"],
+    });
+  };
+  // 配置分享内容
+  onShareAppMessage() {
+    return getShareContent();
+  }
   // 页面上拉触底
   onReachBottom = () => {
     const { page, totalPages, loading } = this.state;
@@ -51,6 +63,7 @@ export default class Index extends Component {
             isSeckill={true}
             productList={this.state.productList}
             loading={this.state.loading}
+            handleShareProduct={this.handleShareProduct}
           />
         </View>
       </View>

src/pages/indexSub/seckillIndex/index.jsx

@@ -4,6 +4,7 @@ import "./index.less";
 import seckillImg from "../../../images/seckill/seckillTop.png";
 import ProductList from "../../../components/index/ProductList";
 import { getRecommendProductList } from "../../../service";
+import { getShareContent } from "../../../common/share";
 export default class Index extends Component {
   state = {
     productList: [], //推荐商品列表
@@ -31,6 +32,17 @@ export default class Index extends Component {
       loading: false,
     }));
   };
+  // 分享商品
+  handleShareProduct = () => {
+    Taro.showShareMenu({
+      withShareTicket: true,
+      menus: ["shareAppMessage"],
+    });
+  };
+  // 配置分享内容
+  onShareAppMessage() {
+    return getShareContent();
+  }
   // 页面上拉触底
   onReachBottom = () => {
     const { page, totalPages, loading } = this.state;
@@ -51,6 +63,7 @@ export default class Index extends Component {
             isSeckill={true}
             productList={this.state.productList}
             loading={this.state.loading}
+            onShareProduct={this.handleShareProduct}
           />
         </View>
       </View>

src/pages/memberSub/productClassify/index.jsx

@@ -9,6 +9,7 @@ import {
   addShopProduct,
   getAllTags,
 } from "../../../service";
+import { getShareContent } from "../../../common/share";
 export default class Index extends Component {
   state = {
     current: 0, // 当前选中的标签页索引
@@ -28,7 +29,7 @@ export default class Index extends Component {
       () => {
         Taro.pageScrollTo({
           scrollTop: 0,
-          duration: 300
+          duration: 300,
         });
         this.getBrowseShopProductList(true);
       }
@@ -89,6 +90,17 @@ export default class Index extends Component {
       }
     });
   };
+  // 分享商品
+  handleShareProduct = () => {
+    Taro.showShareMenu({
+      withShareTicket: true,
+      menus: ["shareAppMessage"],
+    });
+  };
+  // 配置分享内容
+  onShareAppMessage() {
+    return getShareContent();
+  }
   // 页面上拉触底
   onReachBottom = () => {
     const { page, totalPages, loading } = this.state;
@@ -113,6 +125,7 @@ export default class Index extends Component {
           loading={this.state.loading}
           productList={this.state.productList}
           isProductClassify={true}
+          onShareProduct={this.handleShareProduct}
           onAddProduct={(productId, index) =>
             this.onAddProduct(productId, index)
           }

src/pages/memberSub/productManagement/index.jsx

@@ -7,8 +7,9 @@ import {
   getMyShopList,
   deleteShopProduct,
   updateProductSort,
-  getAllTags
+  getAllTags,
 } from "../../../service";
+import { getShareContent } from "../../../common/share";
 import ProductList from "../../../components/index/ProductList"; //商品列表
 import add from "../../../images/productManagement/add.png";
 import back from "../../../images/productManagement/back.png";
@@ -46,13 +47,16 @@ export default class Index extends Component {
   // 获取所有闲鱼tags
   getAllTags = async () => {
     const res = await getAllTags();
-    const arr = Object.values(res).map(item => item.name);
-    this.setState({
-      options: arr,
-    },()=>{
-      this.getMyShopList(true);
-    });
-  }
+    const arr = Object.values(res).map((item) => item.name);
+    this.setState(
+      {
+        options: arr,
+      },
+      () => {
+        this.getMyShopList(true);
+      }
+    );
+  };
   // 获取商品列表
   getMyShopList = async (isDelete) => {
     const { page } = this.state;
@@ -83,10 +87,10 @@ export default class Index extends Component {
   // 商品下拉选项
   handleSelectOption = (e) => {
     const selectedOption = this.state.options[e.detail.value];
-    this.setState({ selectedOption, page: 1, isNoMore: false },()=>{
+    this.setState({ selectedOption, page: 1, isNoMore: false }, () => {
       Taro.pageScrollTo({
         scrollTop: 0,
-        duration: 300
+        duration: 300,
       });
       this.getMyShopList(true);
     });
@@ -131,7 +135,8 @@ export default class Index extends Component {
       goods_ids: this.state.selectedProducts,
     });
     if (res.success == true) {
-      this.setState((prevState) => ({
+      this.setState(
+        (prevState) => ({
           productList: prevState.productList.filter(
             (item) => !this.state.selectedProducts.includes(item.id)
           ),
@@ -199,6 +204,17 @@ export default class Index extends Component {
       });
     }
   };
+  // 分享商品
+  handleShareProduct = () => {
+    Taro.showShareMenu({
+      withShareTicket: true,
+      menus: ["shareAppMessage"],
+    });
+  };
+  // 配置分享内容
+  onShareAppMessage() {
+    return getShareContent();
+  }
   // 页面上拉触底
   onReachBottom = () => {
     const { page, totalPages, loading } = this.state;
@@ -262,6 +278,7 @@ export default class Index extends Component {
                     loading={this.state.loading}
                     onDeleteProductSelect={this.onDeleteProductSelect}
                     isNoMore={this.state.isNoMore}
+                    onShareProduct={this.handleShareProduct}
                   />
                 )}
               </View>