Merge branch 'master' of http://code.qutaovip.com/lihai/fish_app

* 'master' of http://code.qutaovip.com/lihai/fish_app:
  个人中心模块
  会员模块
  产品详情&&会员页面

project.config.json

@@ -7,7 +7,7 @@
     "urlCheck": true,
     "es6": false,
     "postcss": false,
-    "minified": false,
+    "minified": true,
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],

project.private.config.json

@@ -4,5 +4,39 @@
   "setting": {
     "compileHotReLoad": true
   },
-  "libVersion": "3.6.4"
+  "libVersion": "3.6.4",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/infoEdit/index",
+          "pathName": "pages/productSub/infoEdit/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/productManagement/index",
+          "pathName": "pages/productManagement/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/storeManagement/index",
+          "pathName": "pages/storeManagement/index",
+          "query": "isManager=true",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/productManagement/index",
+          "pathName": "pages/mine/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  }
 }

src/app.config.js

@@ -1,12 +1,31 @@
 
-import Taro from '@tarojs/taro'
 export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/member/index',
     "pages/mine/index",
+    "pages/seckillIndex/index",
+    "pages/productDetail/index",
+    "pages/storeManagement/index",
+    "pages/productManagement/index",
+    "pages/productClassify/index",
+    "pages/earningsDetail/index",
+    "pages/earningsOrder/index",
+    "pages/infoEdit/index",
+    "pages/userSpecification/index",
+    "pages/cashOut/index",
+    "pages/cashOutRecord/index",
+    "pages/statementRecords/index",
+    "pages/Alipay/index"
   ],
   subpackages: [
+    {
+      "root": "pages/productSub",
+      "pages": [
+        "infoEdit/index"
+      ],
+      independent: true
+    },
   ],
   navigateToMiniProgramAppIdList: [
     "ttf31985a46c214faf"

src/app.js

@@ -1,10 +1,15 @@
 import { Component } from 'react'
+import Taro from '@tarojs/taro'
 import './app.less'
 import 'taro-ui/dist/style/index.scss'
 
 class App extends Component {
 
-  componentDidMount () {}
+  componentDidMount () {
+    // 存储导航栏高度
+    const systemInfo = Taro.getSystemInfoSync()
+    Taro.navigationBarHeight = systemInfo.safeArea.top
+  }
 
   componentDidShow () {}
 

src/app.less

@@ -1,3 +1,4 @@
 body {
   background-color: #F9F9F9;
+  min-height: 100vh;
 }

src/components/Modal/index.jsx

@@ -0,0 +1,57 @@
+import { AtModal, AtModalContent } from "taro-ui";
+import { View, Image, Text } from "@tarojs/components";
+import "./index.less";
+import selectStep from "../../images/productDetail/selectStep.png";
+import xianyu from "../../images/productDetail/xianyu.png";
+import stepThree from "../../images/productDetail/stepThree.png";
+export default function Modal(props) {
+  return (
+    <AtModal isOpened={props.isOpened} closeOnClickOverlay={true}>
+      <AtModalContent>
+        <View className="container">
+          <View className="title">{props.title}</View>
+          <View className="content">
+            <View className="link-text">{props.linkText}</View>
+            <View className="steps">
+              <View className="step-item">
+                <View className="step-title">
+                  <Text className="number">1</Text>
+                  <Text className="desc">第一步说明文字</Text>
+                </View>
+                <View className="step-box">
+                    <View className="step-One">
+                        复制口令
+                    </View>
+                  <Image  className="step-img-one" src={selectStep} />
+                </View>
+              </View>
+              <View className="step-item">
+                <View className="step-title">
+                  <Text className="number">2</Text>
+                  <Text className="desc">第二步说明文字</Text>
+                </View>
+                <View className="step-box">
+                  <Image className="step-img-t" src={xianyu} />
+                  <Image className="step-img-two" src={selectStep} />
+                </View>
+              </View>
+              <View className="step-item">
+                <View className="step-title">
+                  <Text className="number">3</Text>
+                  <Text className="desc">第三步说明文字</Text>
+                </View>
+                <View className="step-box">
+                  <Image mode="heightFix" className="step-img-three" src={stepThree} />
+                </View>
+              </View>
+            </View>
+            {/* 复制口令 */}
+            <View className="copy-link">
+                复制口令
+            </View>
+          </View>
+        </View>
+      </AtModalContent>
+    </AtModal>
+  );
+}

src/components/Modal/index.less

@@ -0,0 +1,122 @@
+  .at-modal__container {
+    width: 610px !important;
+  }
+  .at-modal__content {
+    max-height: none !important;  // 移除最大高度限制
+    min-height: auto !important;  // 移除最小高度限制
+    height: auto !important;      // 高度自适应
+  }
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .title{
+        color: #000000;
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 46px;
+        margin-bottom: 20px;
+    }
+    .content{
+        width: 100%;
+        text-align: left;
+        .link-text{
+            font-size: 28px;
+            color: #3D3D3D;
+            line-height: 41px;
+        }
+        .steps {
+            margin-top: 33px;
+            
+            .step-item {
+                margin-bottom: 24px;
+                
+                .step-title {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 10px;
+                    
+                    .number {
+                        font-size: 22px;
+                        font-weight: bold;
+                        margin-right: 10px;
+                        color: #fff;
+                        line-height: 1;
+                        padding:6px 10px;
+                        background-color: #F6C71A;
+                        border-radius: 50%;
+                    }
+                    
+                    .desc {
+                        font-size: 24px;
+                        color: #3D3D3D;
+                        line-height: 35px;
+                        font-weight: 700;
+                    }
+                }
+                
+                .step-box {
+                    width: 482px;
+                    height: 146px;
+                    background: #ebebeb;
+                    border-radius: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-left: 45px;
+                    box-sizing: border-box;
+                    position: relative;
+                    .step-img-one {
+                        max-width: 111px;
+                        max-height: 111px;
+                        position: absolute;
+                        top: 48px;
+                        right: 98px;
+                    }
+                    .step-One{
+                        width: 390px;
+                        height: 56px;
+                        background-color: #ffe000;
+                        border-radius: 60px;
+                        color: #000000;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 20px;
+                        font-weight: 700;
+                    }
+                    .step-img-t{
+                        width: 192px;
+                        height: 116px;
+                    }
+                    .step-img-two{
+                        height: 111px;
+                        width: 111px;
+                        position: absolute;
+                        top: 59px;
+                        right: 125px;
+                    }
+                    .step-img-three{
+                        height: 100%;
+                    }
+                }
+            }
+        }
+        // 复制口令
+        .copy-link{
+            margin: 0 auto;
+            height: 88px;
+            width: 520px;
+            border-radius: 60px;
+            background-color: #ffe000;
+            color: #000000;
+            font-size: 28px;
+            font-weight: 700;
+            margin-top: 45px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}

src/components/ProductCard/index.jsx

@@ -0,0 +1,22 @@
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+
+const ProductCard = ({ product }) => {
+  return (
+    <View className='product-card'>
+      <Image className='product-img' src={product.imageUrl} mode='widthFix' />
+      <View className='product-content'>
+        <Text className='title'>{product.name}</Text>
+        <View className='price-row'>
+          <Text className='price'>
+            <Text className='currency'>¥</Text>
+            {product.price}
+          </Text>
+          <Text className='original-price'>¥{product.originalPrice}</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default ProductCard

src/components/ProductCard/index.less

@@ -0,0 +1,59 @@
+// 猜你喜欢列表
+.product-card-list {
+    margin: 0 16px 0 16px;
+    border-radius: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .product-card {
+        width: 332px;
+        background-color: #fff;
+        border-radius: 20px;
+        margin-bottom: 10px;
+        .product-img {
+            width: 100%;
+            height: 324px;
+            background-color: red;
+        }
+
+        .product-content {
+            padding: 0 16px 18px;
+
+            .title {
+                line-height: 41px;
+                font-size: 28px;
+                margin: 6px 0;
+                min-height: 82px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                white-space: normal;
+            }
+
+            .price-row {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                .price {
+                    color: #ff4d4f;
+                    font-size: 36px;
+                    line-height: 26px;
+                    margin-right: 10px;
+                    .currency {
+                        font-size: 22px;
+                    }
+                }
+
+                .original-price {
+                    color: #999;
+                    font-size: 26px;
+                    line-height: 38px;
+                    text-decoration: line-through;
+                }
+            }
+        }
+    }
+}

src/components/index/OperationArea/index.jsx

@@ -1,4 +1,5 @@
 import { View, Text, Image } from "@tarojs/components";
+import Taro from "@tarojs/taro";
 import "./index.less";
 
 const OperationArea = () => {
@@ -27,9 +28,20 @@ const OperationArea = () => {
     }
   ];
 
+  // 添加跳转方法
+  const handleNavigate = (type) => {
+    if (type === 'seckill') {
+      Taro.navigateTo({
+        url: '/pages/seckillIndex/index'
+      });
+    } else if (type === 'highCommission') {
+
+    }
+  };
+
   return (
-    <View className="operation-wrap">
-      <View className="operation-item">
+    <View className="operation-wrap" >
+      <View className="operation-item" onClick={() => handleNavigate('seckill')}>
         <View className="title">限时秒杀</View>
         <View className="product-list">
           {seckillProducts.map(product => (
@@ -46,7 +58,7 @@ const OperationArea = () => {
           ))}
         </View>
       </View>
-      <View className="operation-item">
+      <View className="operation-item" onClick={() => handleNavigate('highCommission')}>
         <View className="title-wrap">
           <Text className="title">高佣专项</Text>
           <Text className="tag">高佣金必囤爆品</Text>

src/components/index/ProductList/index.jsx

@@ -1,81 +1,151 @@
+import React, { useState, useEffect } from "react";
 import { View, Text, Image } from "@tarojs/components";
+import { AtCheckbox } from "taro-ui";
+import Taro from "@tarojs/taro";
 import "./index.less";
-import joinStoreBg from '../../../images/index/jionStore.png'
-import saveMoneyBg from '../../../images/index/save-money.png'
-import shareEarnBg from '../../../images/index/share-earn.png'
-
-const ProductList = () => {
+import joinStoreBg from "../../../images/index/jionStore.png";
+import saveMoneyBg from "../../../images/index/save-money.png";
+import shareEarnBg from "../../../images/index/share-earn.png";
+import seckillIcon from "../../../images/seckill/seckillIcon.png";
+const ProductList = (props) => {
+  const { isSeckill } = props; //是否是秒杀产品引用
+  const { isManagement } = props; //是否是管理产品引用
+  const { isManagementStatus } = props; //是否是管理状态引用
+  const { isSelectAll } = props; //是否是全选
+  const [selectedProducts, setSelectedProducts] = useState([]); // 管理选中的商品列表
   // 模拟商品数据
   const products = [
     {
       id: 1,
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
+      image:
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
       price: 99.99,
       originalPrice: 199.99,
       saveMoney: 10,
-      shareEarn: 20
+      shareEarn: 20,
     },
     {
-      id: 1,
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
+      id: 2,
+      image:
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
       price: 99.99,
       originalPrice: 199.99,
       saveMoney: 10,
-      shareEarn: 20
+      shareEarn: 20,
     },
     {
-      id: 1,
-      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
+      id: 3,
+      image:
+        "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
       name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
       price: 99.99,
       originalPrice: 199.99,
       saveMoney: 10,
-      shareEarn: 20
+      shareEarn: 20,
     },
-    // ... 其他商品数据
   ];
-
+  // 跳转产品详情
+  const toDetail = (id) => {
+    if (isManagementStatus) {
+      selectProduct(id);
+    } else {
+      Taro.navigateTo({
+        url: `/pages/productDetail/index?id=${id}`,
+      });
+    }
+  };
+  // 监听 isSelectAll 的变化
+  useEffect(() => {
+    if (isSelectAll) {
+      // 如果 isSelectAll 为 true，选中所有商品
+      setSelectedProducts(products.map((product) => product.id));
+    } else {
+      // 如果 isSelectAll 为 false，取消所有选中
+      setSelectedProducts([]);
+    }
+  }, [isSelectAll]); // 依赖项是 isSelectAll
+  // 单选
+  const selectProduct = (productId) => {
+    setSelectedProducts((prevSelected) => {
+      const isSelected = prevSelected.includes(productId);
+      if (isSelected) {
+        // 如果已经选中，则取消选择
+        return prevSelected.filter((id) => id !== productId);
+      } else {
+        // 如果未选中，则添加到选中列表
+        return [...prevSelected, productId];
+      }
+    });
+  };
   return (
     <View className="product-list-wrap">
+      {isSeckill && (
+        <View className="seckill-icon">
+          <Image src={seckillIcon} mode="aspectFit" />
+          <Text>每日疯抢 限时秒杀</Text>
+        </View>
+      )}
       {products.map((product, index) => (
         <View key={product.id}>
-          <View className="product-item">
-            <Image className="product-img" src={product.image} mode="aspectFill" />
-            <View className="product-info">
-              <View className="product-name" style={{"WebkitBoxOrient": "vertical"}}>
-                <Text className="self-tag">自营</Text>
-                {product.name}
-              </View>
-              <View className="price-line">
-                <View className="price-info">
-                  <Text className="symbol">¥</Text>
-                  <Text className="price">{product.price}</Text>
-                  <Text className="original-price">¥{product.originalPrice}</Text>
+          <View onClick={() => toDetail(product.id)} className="product-item">
+            {isManagement && isManagementStatus && (
+              <AtCheckbox
+                options={[{ value: product.id.toString(), label: "" }]} // 确保每个复选框的 options 是独立的
+                selectedList={selectedProducts.map((id) => id.toString())}
+                onChange={(selectedList) => selectProduct(product.id)} // 传递当前 product.id
+              />
+            )}
+            <View className="right">
+              <Image
+                className="product-img"
+                src={product.image}
+                mode="aspectFill"
+              />
+              <View className="product-info">
+                <View
+                  className="product-name"
+                  style={{ WebkitBoxOrient: "vertical" }}
+                >
+                  <Text className="self-tag">
+                    {!isSeckill ? "自营" : "鱼市秒杀"}
+                  </Text>
+                  {product.name}
                 </View>
-                <View className="add-btn">
-                  <Image 
-                    className="join-store-bg" 
-                    src={joinStoreBg}
-                    mode="aspectFit"
-                  />
-                  <Text className="btn-text">加入小店</Text>
-                </View>
-              </View>
-              <View className="profit-line">
-                <View className="save-money">
-                  <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
-                  <View className="content">
-                    <Text className="label">自购省</Text>
-                    <Text className="money">¥{product.saveMoney}</Text>
+                <View className="price-line">
+                  <View className="price-info">
+                    <Text className="symbol">¥</Text>
+                    <Text className="price">{product.price}</Text>
+                    <Text className="original-price">
+                      ¥{product.originalPrice}
+                    </Text>
                   </View>
+                  {!isSeckill && !isManagement && (
+                    <View className="add-btn">
+                      <Image
+                        className="join-store-bg"
+                        src={joinStoreBg}
+                        mode="aspectFit"
+                      />
+                      <Text className="btn-text">加入小店</Text>
+                    </View>
+                  )}
                 </View>
-                <View className="share-earn">
-                  <Image className="bg" src={shareEarnBg} mode="aspectFit" />
-                  <View className="content">
-                    <Text className="label">分享赚</Text>
-                    <Text className="money">¥{product.shareEarn}</Text>
+                <View className="profit-line">
+                  <View className="save-money">
+                    <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
+                    <View className="content">
+                      <Text className="label">自购省</Text>
+                      <Text className="money">¥{product.saveMoney}</Text>
+                    </View>
+                  </View>
+                  <View className="share-earn">
+                    <Image className="bg" src={shareEarnBg} mode="aspectFit" />
+                    <View className="content">
+                      <Text className="label">分享赚</Text>
+                      <Text className="money">¥{product.shareEarn}</Text>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -88,4 +158,8 @@ const ProductList = () => {
   );
 };
 
-export default ProductList; 
+ProductList.defaultProps = {
+  isSeckill: false,
+};
+
+export default ProductList;

src/components/index/ProductList/index.less

@@ -3,36 +3,62 @@
   background: #FFFFFF;
   border-radius: 16px;
   position: relative;
-  
+
   .product-item {
     padding: 27px 20px 27px 17px;
     display: flex;
-    
+    align-items: center;
+
+    // 单选框内容
+    .at-checkbox::after,
+    .at-checkbox::before {
+      content: none;
+    }
+    .at-checkbox__option-wrap {
+      padding: 0 15px 0 0;
+    }
+
+    .at-checkbox__option {
+      padding: 0;
+    }
+
+    .at-checkbox__option--selected .at-checkbox__icon-cnt {
+      background-color: #f6c71a;
+    }
+
+    .at-checkbox__icon-cnt {
+      margin-right: 0;
+    }
+
+    .right {
+      display: flex;
+    }
+
     .product-img {
       width: 260px;
       height: 256px;
       margin-right: 20px;
       flex-shrink: 0;
     }
-    
+
     .product-info {
       flex: 1;
       min-width: 0; // 解决flex布局下文本溢出问题
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       .product-name {
         font-size: 28px;
-        overflow : hidden;
+        overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         /* autoprefixer: ignore next */
         -webkit-box-orient: vertical;
-        
-        
+
+
         .self-tag {
-          display: inline-block;
           padding: 2px 8px;
           background: #FFD43A;
           border-radius: 4px;
@@ -43,40 +69,40 @@
           vertical-align: middle;
         }
       }
-      
+
       .price-line {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        
+
         .price-info {
           display: flex;
           align-items: baseline;
-          
+
           .symbol {
             font-size: 22px;
             color: #FF1D17;
           }
-          
+
           .price {
             font-size: 36px;
             color: #FF1D17;
             font-weight: bold;
             margin-right: 8px;
           }
-          
+
           .original-price {
             font-size: 26px;
             color: #999999;
             text-decoration: line-through;
           }
         }
-        
+
         .add-btn {
           position: relative;
           width: 158px;
           height: 58px;
-          
+
           .join-store-bg {
             width: 100%;
             height: 100%;
@@ -84,7 +110,7 @@
             top: 0;
             left: 0;
           }
-          
+
           .btn-text {
             padding-left: 8px;
             position: absolute;
@@ -99,22 +125,25 @@
           }
         }
       }
-      
+
       .profit-line {
         display: flex;
         gap: 20px;
-        .save-money{
-            color: #F6C71A;
+
+        .save-money {
+          color: #F6C71A;
         }
-        .share-earn{
-            color: #fff;
+
+        .share-earn {
+          color: #fff;
         }
+
         .save-money,
         .share-earn {
           position: relative;
           width: 192px;
           height: 84px;
-          
+
           .bg {
             width: 100%;
             height: 100%;
@@ -122,7 +151,7 @@
             top: 0;
             left: 0;
           }
-          
+
           .content {
             position: relative;
             z-index: 1;
@@ -132,7 +161,7 @@
             align-items: center;
             justify-content: center;
             font-size: 28px;
-            
+
             .label,
             .money {
               line-height: 41px;
@@ -142,10 +171,22 @@
       }
     }
   }
-  
+
   .divider {
     height: 1px;
     margin: 0 17px 0 20px;
     border-top: 1px dashed #D8D8D8;
   }
-} 
+
+  .seckill-icon {
+    padding: 18px 0 0 17px;
+    font-size: 26px;
+    font-weight: bold;
+
+    Image {
+      height: 26px;
+      width: 26px;
+      margin-right: 10px;
+    }
+  }
+}

src/pages/Alipay/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '支付宝'
+})

src/pages/Alipay/index.jsx

@@ -0,0 +1,55 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtInput } from "taro-ui";
+import "./index.less";
+import aliPayIcon from "../../images/aliPayIcon.png";
+export default class Index extends Component {
+  state = {
+    name: "", // 账户姓名
+    account: "", // 支付宝账户
+  };
+
+  handleChangeName(value) {
+    this.setState({ name: value });
+  }
+  handleChangeAccount(value) {
+    this.setState({ account: value });
+  }
+  render() {
+    return (
+      <View className="index">
+        {/* 支付宝信息 */}
+        <View className="alipay-info">
+          <AtInput
+            name="value"
+            title="账户姓名"
+            type="text"
+            placeholder="请输入账户姓名"
+            value={this.state.name}
+            onChange={this.handleChangeName.bind(this)}
+          />
+          <AtInput
+            name="value"
+            title="支付宝账户"
+            type="text"
+            placeholder="请输入支付宝账户"
+            value={this.state.account}
+            onChange={this.handleChangeAccount.bind(this)}
+          />
+        </View>
+        {/* 注意 */}
+        <View className="attention">
+          <View className="attention-top">
+            <Image src={aliPayIcon} className="attention-icon" />
+            注意：
+          </View>
+          <View className="attention-bottom">
+            所维护的支付宝账户所有人需要与提现认证提交的自然人为同一人，避免影响提现
+          </View>
+        </View>
+        {/* 提交 */}
+        <View className="submit">提交</View>
+      </View>
+    );
+  }
+}

src/pages/Alipay/index.less

@@ -0,0 +1,62 @@
+.index {
+    padding: 30px 16px;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+    min-height: 100vh;
+
+    .alipay-info {
+        padding: 0 17px;
+        border-radius: 20px;
+        background-color: #fff;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        .at-input__title {
+            font-size: 28px;
+            color: #000000;
+        }
+
+        .at-input {
+            margin-left: 0;
+        }
+    }
+
+    // 注意
+    .attention {
+        padding: 22px 41px 22px 19px;
+        box-sizing: border-box;
+        background-color: #fdf7e7;
+        border-radius: 20px;
+        margin-top: 20px;
+        font-size: 26px;
+        color: #A0A0A0;
+        line-height: 38px;
+
+        .attention-top {
+            display: flex;
+            align-items: center;
+
+            .attention-icon {
+                width: 38px;
+                height: 38px;
+                margin-right: 10px;
+            }
+        }
+    }
+    // 提交
+    .submit{
+        background-color: #f6c71a;
+        margin: 0 16px;
+        position: fixed;
+        bottom: 30px;
+        left: 0;
+        right: 0;
+        height: 88px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        color: #000000;
+        border-radius: 70px;
+    }
+}

src/pages/cashOut/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '提现'
+})

src/pages/cashOut/index.jsx

@@ -0,0 +1,54 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import { AtList, AtListItem } from "taro-ui"
+import './index.less'
+
+export default class Index extends Component {
+
+  render () {
+    return (
+      <View className='index'>  
+      {/* 提现 */}
+        <View className='cash-out'>
+          <View className='balance-section'>
+          <View className='balance-info'>
+            <Text className='label'>可提现金额</Text>
+            <View className='amount'>
+              <Text className='integer'>¥888.</Text>
+              <Text className='decimal'>00</Text>
+            </View>
+          </View>
+          <View className='action'>
+            <View className='withdraw-btn'>提现</View>
+          </View>
+        </View>
+      </View>
+      {/* 提现功能 */}
+      <View className='cash-out-function'>
+        <AtList>
+        <AtListItem title='提现认证' extraText='认证审核中' arrow='right' />
+        <AtListItem title='标题记录' extraText='' arrow='right' />
+        <AtListItem title='支付账户' extraText='需维护支付宝账户信息' arrow='right' />
+        <AtListItem title='标题结算单记录' extraText='6月结算单已出' arrow='right' />
+        </AtList>
+      </View>
+      {/* 结算单说明 */}
+      <View className='settlement-statement'>
+        <Text className='title'>结算单说明</Text>
+        <View className='contentBox'>
+        <View className='content indent'>1. 每月 <Text className='highlight'>27</Text>号 出上月结算单</View>
+        <View className='content sub-content'>收益可在当月27号至30号全天申请提现</View>
+        <View className='content sub-content'>错过需要等下个月,提现金额会在1-5个工作日到账</View>
+        <View className='content indent'>2. 会员需要在提现前完成 提现认证 并审核通过</View>
+        <View className='content sub-content'>维护完善 支付宝账户信息，否则将影响提现进行</View>
+        <View className='content indent'>3. 结算单收益:订单完成时间在上个月的总收益</View>
+        <View className='content sub-content'>上个月【已付款】但未完成订单可在下个月提现</View>
+        <View className='content indent'>4. 可提现金额已扣除各项税费，提现金额需大于1元</View>
+        <View className='content indent'>5. 本月未提现收益不会清 0</View>
+        <View className='content sub-content'>会累积到账户余额，下个月合并提现</View>
+        </View>
+      </View>
+      </View>
+    )
+  }
+}

src/pages/cashOut/index.less

@@ -0,0 +1,118 @@
+.index {
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    padding: 20px 16px 0 16px;
+    box-sizing: border-box;
+
+}
+
+.cash-out {
+    .balance-section {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #fff;
+        border-radius: 20px;
+        padding: 0 17px;
+        box-sizing: border-box;
+
+        .balance-info {
+            padding: 35px 0 25px 0;
+            box-sizing: border-box;
+
+            .label {
+                font-size: 28px;
+                color: #000000;
+                display: block;
+                margin-bottom: 11px;
+                line-height: 41px;
+                font-weight: 500;
+            }
+
+            .amount {
+                display: flex;
+                align-items: baseline;
+                font-weight: 700;
+                line-height: 70px;
+                color: #F6C71A;
+
+                .integer {
+                    font-size: 48px;
+                }
+
+                .decimal {
+                    font-size: 36px;
+                }
+            }
+        }
+
+        .action {
+            .withdraw-btn {
+                color: #F6C71A;
+                padding: 13px 53px;
+                line-height: 38px;
+                border-radius: 60px;
+                font-size: 26px;
+                border: 1px solid #F6C71A;
+            }
+        }
+    }
+}
+
+// 提现功能
+.cash-out-function {
+    margin-top: 20px;
+    border-radius: 20px;
+    background-color: #fff;
+    overflow: hidden;
+
+    .item-content__info-title {
+        font-weight: 500;
+        font-size: 28px;
+        color: #000000;
+    }
+    .item-extra__info{
+        font-size: 24px;
+    }
+    .at-list__item-extra{
+        max-width: 400px;
+    }
+    .at-list__item .item-extra__icon-arrow{
+        font-size: 32px;
+    }
+    .at-list__item{
+        padding: 31px 17px;
+    }
+}
+// 结算单说明
+.settlement-statement{
+    margin-top: 30px;
+    padding: 0 17px;
+    box-sizing: border-box;
+    .title{
+        font-size: 24px;
+        line-height: 35px;
+        color: #000000;
+    }
+    .contentBox{
+        margin-top: 10px;
+    }
+    .content{
+        font-size: 22px;
+        line-height: 32px;
+        color: #B5B5B5;
+        
+        &.indent {
+            padding-left: 24px;
+            text-indent: -24px;
+        }
+        
+        &.sub-content {
+            padding-left: 24px;
+        }
+
+        .highlight{
+            color: #EC8F2B;
+        }
+    }
+}

src/pages/cashOutRecord/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '提现记录'
+})

src/pages/cashOutRecord/index.jsx

@@ -0,0 +1,45 @@
+import { Component } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import wallet from '../../images/wallet.png'
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        {/* 提现记录 */}
+        <View className='cash-out-record'>
+          {/* 累计提现金额 */}
+          <View className='total-amount'>
+            <View className='left'>
+              <Image src={wallet} className='icon' />
+              <Text className='title'>累计提现金额</Text>
+            </View>
+            <View className='amount'>
+              <Text className='integer'>￥10000.</Text>
+              <Text className='decimal'>00</Text>
+            </View>
+          </View>
+          {/* 提现记录 */}
+          <View className='record-item'>
+            <View className='item-time'>2024-06-27 10:00:00</View>
+            <View className='item-amount'>
+              <View className='amount'>￥ 10000.00</View>
+              <View className='status'>提现成功</View>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/cashOutRecord/index.less

@@ -0,0 +1,84 @@
+.index {
+    background-color: #f9f9f9;
+    min-height: 100vh;
+    padding: 30px 16px 0 16px;
+    box-sizing: border-box;
+
+    .cash-out-record {
+        .total-amount {
+            height: 170px;
+            background-color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 17px;
+            box-sizing: border-box;
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .icon {
+                    width: 60px;
+                    height: 60px;
+                    margin-right: 10px;
+                }
+
+                .title {
+                    color: #000000;
+                    line-height: 41px;
+                    font-size: 28px;
+                }
+            }
+
+            .amount {
+                display: flex;
+                align-items: baseline;
+                color: #F6C71A;
+                font-weight: bold;
+
+                .integer {
+                    font-size: 48px;
+                }
+
+                .decimal {
+                    font-size: 36px;
+                }
+            }
+        }
+
+        // 提现记录
+        .record-item {
+            background-color: #fff;
+            padding: 46px 16px 0 16px;
+            box-sizing: border-box;
+            border-radius: 20px;
+            display: flex;
+            justify-content: space-between;
+            height: 170px;
+            margin-top: 26px;
+            .item-time {
+                font-size: 26px;
+                color: #000000;
+                line-height: 38px;
+            }
+
+            .item-amount {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                .status {
+                    font-size: 24px;
+                    color: #91A95B;
+                    line-height: 35px;
+                }
+
+                .amount {
+                    font-size: 28px;
+                    color: #000000;
+                    line-height: 41px;
+                }
+            }
+        }
+    }
+}

src/pages/earningsDetail/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '收益详情'
+})

src/pages/earningsDetail/index.jsx

@@ -0,0 +1,65 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <View className='earnings-list'>
+          <View className='earnings-list-item'>
+            <View className='item-line title-one'>
+              <Text className='title'>今天预估总收益</Text>
+              <Text className='money'>￥100.00</Text>
+            </View>
+            <View className='dotted-line'></View>
+            <View className='item-line title-two'>
+              <Text className='title'>预估推广收益</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='line'></View>
+            <View className='item-line title-two'>
+              <Text className='title'>预估推广收益</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+            <View className='item-line'>
+              <Text className='title'>惊喜红包</Text>
+              <Text className='money'>￥70.00</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}

src/pages/earningsDetail/index.less

@@ -0,0 +1,61 @@
+.index {
+    background-color: #f9f9f9;
+    padding: 20px 16px;
+    box-sizing: border-box;
+    min-height: 100vh;
+
+    .earnings-list {
+        .dotted-line{
+            width: 100%;
+            border: 1px dashed #D8D8D8;
+            margin: 6px 0 30px 0;
+        }
+        .line {
+            width: 100%;
+            border: 1px solid #D8D8D8;
+            margin: 9px 0 30px 0;
+        }
+        .earnings-list-item {
+            padding: 30px 17px 7px 17px;
+            box-sizing: border-box;
+            background-color: #fff;
+            border-radius: 20px;
+
+            .item-line {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 26px;
+                color: #BDBDBD;
+                margin-bottom: 20px;
+
+            }
+
+            .title-one {
+                .title {
+                    color: #000000;
+                    line-height: 43px;
+                    font-size: 30px;
+                }
+
+                .money {
+                    color: #FF1D17;
+                    font-size: 30px;
+                }
+            }
+
+            .title-two {
+                .title {
+                    color: #A19D99;
+                    font-size: 28px;
+                    line-height: 41px;
+                }
+
+                .money {
+                    color: #A19D99;
+                    font-size: 28px;
+                }
+            }
+        }
+    }
+}

src/pages/earningsOrder/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的小店'
+})

src/pages/earningsOrder/index.jsx

@@ -0,0 +1,159 @@
+import { Component } from "react";
+import { View, Text, Image, Picker } from "@tarojs/components";
+import { AtDivider } from "taro-ui";
+import "./index.less";
+import selectIcon from "../../images/productManagement/selectIcon.png";
+import vip from "../../images/earningsOrder/vip.png";
+import Taro from "@tarojs/taro";
+
+export default class Index extends Component {
+  state = {
+    current: 0,
+    productOptions: ["全部", "咸鱼商品", "自建商品"], //商品下拉选项
+    selectedProduct: "全部", //商品默认名称
+    timeOptions: ["全部时间", "一个月前", "一周前"], //下单时间下拉选项
+    selectTime: "下单时间", //下单时间
+    tabList: [
+      { title: "全部", num: 0 },
+      { title: "已付款", num: 0 },
+      { title: "已完成", num: 2 },
+      { title: "已结算", num: 10 },
+      { title: "无效", num: 0 },
+    ],
+  };
+
+  handleTabClick = (index) => {
+    this.setState({ current: index });
+  };
+  // 下单时间下拉选项
+  timeSelectOption = (e) => {
+    const selectTime = this.state.timeOptions[e.detail.value];
+    this.setState({ selectTime });
+  };
+  // 商品下拉选项
+  productSelectOption = (e) => {
+    const selectedProduct = this.state.productOptions[e.detail.value];
+    this.setState({ selectedProduct });
+  };
+  handleCopy = async (text) => {
+    try {
+      await Taro.setClipboardData({
+        data: text,
+      });
+      Taro.showToast({
+        title: "内容已复制",
+        icon: "success",
+        duration: 2000,
+      });
+    } catch (error) {
+      Taro.showToast({
+        title: "复制失败",
+        icon: "error",
+        duration: 2000,
+      });
+    }
+  };
+
+  render() {
+    const { current, tabList } = this.state;
+    return (
+      <View className="index">
+        {/* tab切换 */}
+        <View className="tab-container">
+          {tabList.map((tab, index) => (
+            <View
+              key={index}
+              className={`tab-item ${current === index ? "active" : ""}`}
+              onClick={() => this.handleTabClick(index)}
+            >
+              <Text>{tab.title}</Text>
+              {tab.num > 0 && <Text className="tag">{tab.num}</Text>}
+            </View>
+          ))}
+        </View>
+        {/* 下拉筛选 */}
+        <View className="filter-container">
+          <Picker
+            mode="selector"
+            range={this.state.timeOptions}
+            onChange={this.timeSelectOption}
+          >
+            <View className="filter-item">
+              <Text>{this.state.selectTime}</Text>
+              <Image src={selectIcon} className="select-icon" />
+            </View>
+          </Picker>
+          <Picker
+            mode="selector"
+            range={this.state.productOptions}
+            onChange={this.productSelectOption}
+          >
+            <View className="filter-item">
+              <Text>{this.state.selectedProduct}</Text>
+              <Image src={selectIcon} className="select-icon" />
+            </View>
+          </Picker>
+        </View>
+        {/* 订单列表 */}
+        <View className="order-list">
+          <View className="order-item">
+            {/* 头部信息 */}
+            <View className="order-header">
+              <View className="user-info">
+                <Image className="avatar" src="" />
+                <Text className="username">张三</Text>
+              </View>
+              <Text className="pay-status">已付款</Text>
+            </View>
+            <AtDivider content="" />
+            {/* 订单信息 */}
+            <View className="order-info">
+              <View className="order-details">
+                <View className="detail-item">
+                  <Text className="label">订单编号:</Text>
+                  <Text className="value">2024031512345</Text>
+                  <Text
+                    className="copy-text"
+                    onClick={() => this.handleCopy("2024031512345")}
+                  >
+                    复制
+                  </Text>
+                </View>
+                <View className="detail-item">
+                  <Text className="label">下单时间:</Text>
+                  <Text className="value">2024-03-15 12:34:56</Text>
+                </View>
+                <View className="detail-item">
+                  <Text className="label">订单类型:</Text>
+                  <Text className="value">普通订单</Text>
+                </View>
+              </View>
+              <View className="member-info">
+                <Image className="member-icon" src={vip} />
+                <Text className="member-text">闲鱼会员</Text>
+              </View>
+            </View>
+
+            {/* 产品信息 */}
+            <View className="product-info">
+              <Image className="product-image" src="" />
+              <View className="product-details">
+                <Text className="product-name">
+                  这是一个很长的产品名称这是一个很长的产品名称这是一个很长的产品名称
+                </Text>
+                <View className="promotion-info">
+                  <View className="tag">推广收入</View>
+                  <Text className="amount">¥99.99</Text>
+                </View>
+                <View className="payment-info">
+                  <Text className="label">实付金额:</Text>
+                  <Text className="amount">¥199.99</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}

src/pages/earningsOrder/index.less

@@ -0,0 +1,241 @@
+.index {
+    background-color: #f9f9f9; // ... 其他样式 ...
+    min-height: 100vh;
+}
+
+// tab切换
+.tab-container {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    padding: 22px 34px;
+    box-sizing: border-box;
+
+    .tab-item {
+        font-size: 26px;
+        color: #000000;
+
+        .tag {
+            margin-left: 4px;
+            font-size: 26px;
+            color: #fff;
+            background-color: #f6c71a;
+            border-radius: 20px;
+            padding: 2px 20px;
+            font-weight: normal;
+        }
+    }
+
+    .tab-item.active {
+        color: #F6C71A;
+        /* 高亮颜色 */
+        font-size: 28px;
+        font-weight: bold;
+    }
+}
+
+// 下拉筛选
+.filter-container {
+    border-top: 1px solid #F4F4F4;
+    background-color: #fff;
+    height: 70px;
+    padding: 0 134px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .filter-item {
+        display: flex;
+        align-items: center;
+        font-size: 26px;
+        color: #000000;
+
+        .select-icon {
+            width: 14px;
+            height: 14px;
+            margin-left: 4px;
+        }
+    }
+}
+
+// 订单列表样式
+.order-list {
+    padding: 24px;
+
+    .at-divider {
+        height: 0;
+        margin-bottom: 18px;
+    }
+
+    .order-item {
+        background: #FFFFFF;
+        border-radius: 20px;
+        padding: 0 18px 34px 18px;
+        margin-bottom: 24px;
+        box-sizing: border-box;
+
+        .order-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 98px;
+
+            .user-info {
+                display: flex;
+                align-items: center;
+
+                .avatar {
+                    width: 58px;
+                    height: 58px;
+                    background-color: red;
+                    border-radius: 50%;
+                    margin-right: 10px;
+                }
+
+                .username {
+                    font-size: 26px;
+                    color: #000000;
+                }
+            }
+
+            .pay-status {
+                color: #FB8E36;
+                font-size: 26px;
+            }
+        }
+
+        .order-info {
+            display: flex;
+            justify-content: space-between;
+            padding-bottom: 24px;
+
+            .order-details {
+                .detail-item {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 8px;
+
+                    .label {
+                        color: #999;
+                        font-size: 22px;
+                        margin-right: 12px;
+                        line-height: 32px;
+                    }
+
+                    .value {
+                        color: #999;
+                        font-size: 22px;
+                        line-height: 32px;
+                    }
+
+                    .copy-text {
+                        color: #F6C71A;
+                        font-size: 22px;
+                        margin-left: 30px;
+                        line-height: 32px;
+                    }
+                }
+            }
+
+            .member-info {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: center;
+
+                .member-icon {
+                    width: 58px;
+                    height: 49px;
+                }
+
+                .member-text {
+                    font-size: 18px;
+                    color: #E7BE78;
+                    line-height: 26px;
+                    margin-top: 4px;
+                }
+            }
+        }
+
+        .product-info {
+            display: flex;
+            padding-top: 20px;
+            height: 168px;
+
+            .product-image {
+                width: 297px;
+                height: 168px;
+                background-color: red;
+                border-radius: 8px;
+                margin-right: 16px;
+            }
+
+            .product-details {
+                flex: 1;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .product-name {
+                    font-size: 28px;
+                    color: #000000;
+                    line-height: 41px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    margin-bottom: 16px;
+                }
+
+                .promotion-info {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 16px;
+                    height: 30px;
+                    width: fit-content;
+                    border-radius: 10px;
+
+                    .tag {
+                        color: #F6C71A;
+                        font-size: 18px;
+                        z-index: 1;
+                        background-color: #fff;
+                        padding: 2px 6px;
+                        box-sizing: border-box;
+                        border: 1px solid #F6C71A;
+                    }
+
+                    .amount {
+                        color: #fff;
+                        font-size: 18px;
+                        z-index: 1;
+                        background-color: #f6c71a;
+                        padding: 2px 4px;
+                        box-sizing: border-box;
+                        border: 1px solid #F6C71A;
+                    }
+                }
+
+                .payment-info {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 500;
+
+                    .label {
+                        color: #000000;
+                        font-size: 22px;
+                        margin-right: 10px;
+                    }
+
+                    .amount {
+                        color: #000000;
+                        font-size: 22px;
+                    }
+                }
+            }
+        }
+    }
+}

src/pages/index/index.jsx

@@ -14,7 +14,6 @@ import backTopIcon from "../../images/index/back-top.png";
 export default class Index extends Component {
   state = {
     value: "",
-    navigationBarHeight: 0, // 添加一个状态来保存导航栏高度
     current: 0, // 添加当前选中的tab索引
     tabList: [
       // 添加模拟的tab数据
@@ -66,15 +65,7 @@ export default class Index extends Component {
       current: value,
     });
   }
-  componentDidMount() {
-    // 获取系统信息
-    const systemInfo = Taro.getSystemInfoSync();
-    // 获取 safeArea.top 作为导航栏的高度
-    const navigationBarHeight = systemInfo.safeArea.top;
-
-    // 设置导航栏高度到状态
-    this.setState({ navigationBarHeight });
-  }
+  componentDidMount() {}
 
   componentWillUnmount() {}
 
@@ -95,7 +86,7 @@ export default class Index extends Component {
       <View className="index">
         <View
           className="header"
-          style={{ paddingTop: this.state.navigationBarHeight + "px" }}
+          style={{ paddingTop: Taro.navigationBarHeight  + "px" }}
         >
           <View className="header-content">
             <Image

src/pages/index/index.less

@@ -58,6 +58,7 @@
       .at-tabs__header {
         background-color: transparent;
         height: 100%;
+        text-align: left;
       }
 
       .at-tabs__item {

src/pages/infoEdit/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑个人信息'
+})

src/pages/infoEdit/index.jsx

@@ -0,0 +1,76 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtInput } from "taro-ui";
+import "./index.less";
+
+export default class Index extends Component {
+  state = {
+    wxAccount: "",
+    nickName: "",
+    phone: "",
+  };
+  handleAccountChange (value) {
+    this.setState({
+      wxAccount: value,
+    });
+    return value;
+  }
+  handleNickNameChange (value) {
+    this.setState({
+      nickName: value,
+    });
+    return value;
+  }
+  handlePhoneChange (value) {
+    this.setState({
+      phone: value,
+    });
+    return value;
+  }
+  render() {
+    return (
+      <View className="index">
+        {/* 头像 */}
+        <View className="info-edit">
+          <Image
+            src="https://video-img.fyshark.com/1731495433480WechatIMG674.jpg"
+            className="info-edit-img"
+          />
+          <Text className="info-edit-title">更换头像</Text>
+        </View>
+        {/* 内容 */}
+        <View className="info-edit-content">
+          <AtInput
+            name="value"
+            title="微信账号"
+            type="text"
+            placeholder="请输入微信账号"
+            value={this.state.wxAccount}
+            onChange={this.handleAccountChange.bind(this)}
+          />
+          <AtInput
+            name="value"
+            title="鱼市昵称"
+            type="text"
+            placeholder="请输入鱼市昵称"
+            value={this.state.nickName}
+            onChange={this.handleNickNameChange.bind(this)}
+          />
+          <AtInput
+          border={false}  
+            name="value"
+            title="手机号"
+            type="text"
+            placeholder="请输入手机号"
+            value={this.state.phone}
+            onChange={this.handlePhoneChange.bind(this)}
+          />
+        </View>
+        {/* 提交按钮 */}
+        <View className="info-edit-submit">
+          <Text className="info-edit-submit-text">提交</Text>
+        </View>
+      </View>
+    );
+  }
+}

src/pages/infoEdit/index.less

@@ -0,0 +1,53 @@
+.index{
+    padding-top: 67px;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+    // 头像
+    .info-edit{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 36px;
+        .info-edit-img{
+            width: 210px;
+            height: 210px;
+            border-radius: 50%;
+            margin-bottom: 14px;
+        }
+        .info-edit-title{
+            line-height: 41px;
+            font-size: 28px;
+            color: #F09A31;
+        }
+    }
+    // 内容
+    .info-edit-content{
+        margin: 0 16px;
+        border-radius: 20px;
+        overflow: hidden;
+        padding: 0 20px;
+        background-color: #fff;
+        .at-input__title{
+            font-size: 28px;
+            color: #222222;
+        }
+    }
+    // 提交按钮
+    .info-edit-submit{
+        position: fixed;
+        bottom: 30px;
+        left: 0;
+        right: 0;
+        margin: 0 16px;
+        background-color: #f6c71a;
+        border-radius: 70px;
+        height: 88px;
+        font-size: 28px;
+        color: #000000;
+        font-weight: 700;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/pages/member/index.jsx

@@ -1,24 +1,113 @@
-import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtIcon } from "taro-ui";
+import Taro from "@tarojs/taro";
+import "./index.less";
+import vip from "../../images/member/vip.png";
+import home from "../../images/nav/home.png";
+import toDetail from "../../images/member/toDetail.png";
+import warning from "../../images/member/warning.png";
+import withdrawable from "../../images/member/withdrawable.png";
+import order from "../../images/member/order.png";
 export default class Index extends Component {
+  componentWillMount() {}
 
-  componentWillMount () { }
-
-  componentDidMount () { }
+  componentDidMount() {}
 
-  componentWillUnmount () { }
+  componentWillUnmount() {}
 
-  componentDidShow () { }
+  componentDidShow() {}
 
-  componentDidHide () { }
+  componentDidHide() {}
 
-  render () {
+  render() {
     return (
-      <View className='index'>
-        <Text>会员</Text>
+      <View className="member">
+        <View className="member-bg"></View>
+        <View className="member-content">
+          {/* 会员信息卡 */}
+          <View className="member-info-card">
+            <View className="member-info-card-header">
+              <Image className="avatar" src="" />
+              <View className="member-info-card-header-text">
+                <Text className="user-name">会员</Text>
+                <View className="member-info-card-header-text-level">
+                  <Text className="level-text">店长</Text>
+                  <Image className="level-icon" src={vip} />
+                </View>
+              </View>
+            </View>
+            {/* 我的小店 */}
+            <View onClick={() => Taro.navigateTo({ url: `/pages/storeManagement/index?isManager=${true}` })} className="my-shop">
+              <Image className="my-shop-icon" src={home} />
+              <Text className="my-shop-text">我的小店</Text>
+            </View>
+          </View>
+          {/* 预估收益 */}
+          <View className="estimated-income">
+            <Text className="estimated-income-title">预估收益</Text>
+            <View className="estimated-income-content">
+              <View className="income-item">
+                <Text className="amount">0.00</Text>
+                <Text className="label">今日预估收益</Text>
+              </View>
+              <View className="divider"></View>
+              <View className="income-item">
+                <Text className="amount">0.00</Text>
+                <Text className="label">累计收益</Text>
+              </View>
+            </View>
+            <view onClick={() => Taro.navigateTo({ url: `/pages/earningsDetail/index` })} className="estimated-income-detail">
+              收益详情
+              <Image className="to-detail" src={toDetail} />
+            </view>
+          </View>
+          {/* 可提现金额 */}
+          <View className="withdrawable-amount">
+            <View className="withdrawable-amount-header">
+              <Image className="withdrawable-amount-icon" src={withdrawable} />
+              <Text className="withdrawable-amount-title">可提现金额</Text>
+            </View>
+            <View className="withdrawable-amount-content">
+              <View className="left">
+                <Text className="amount">¥0.00</Text>
+                <View className="warning-icon-box">
+                  <Image className="warning-icon" src={warning} />
+                  <Text className="warning-text">未完成提现认证</Text>
+                </View>
+              </View>
+              <View className="right">点击提现</View>
+            </View>
+          </View>
+          {/* 今日订单 */}
+          <View className="today-order">
+            <View className="today-order-header">
+              <View className="today-order-header-left">
+                <Image className="today-order-icon" src={order} />
+                <Text className="today-order-title">今日订单</Text>
+              </View>
+              <View className="today-order-header-right">
+                历史订单
+                <AtIcon value='chevron-right' size='10' color='#A1A1A1'></AtIcon>
+              </View>
+            </View>
+            <View className="today-order-content">
+              <View className="order-item">
+                <Text className="label">订单总量</Text>
+                <Text className="amount">0</Text>
+              </View>
+              <View className="order-item">
+                <Text className="label">推广订单</Text>
+                <Text className="amount">0</Text>
+              </View>
+              <View className="order-item">
+                <Text className="label">购买历史</Text>
+                <Text className="amount">0</Text>
+              </View>
+            </View>
+          </View>
+        </View>
       </View>
-    )
+    );
   }
 }

src/pages/member/index.less

@@ -0,0 +1,318 @@
+.member {
+    position: relative;
+    min-height: 100vh;
+    background-color: #f9f9f9;
+
+    .member-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 750px;
+        height: 284px;
+        background: #FFE2AB;
+        border-radius: 0 0 0 150px;
+        z-index: 1;
+    }
+
+    .member-content {
+        position: relative;
+        padding: 0 16px;
+        z-index: 2;
+        padding-top: 18px;
+    }
+
+    //   会员信息卡
+    .member-info-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #fefaef;
+        border-radius: 20px;
+
+        .member-info-card-header {
+            height: 385px;
+            padding-top: 101px;
+            box-sizing: border-box;
+
+            .avatar {
+                width: 170px;
+                height: 170px;
+                border-radius: 50%;
+                background-color: red;
+            }
+
+            .member-info-card-header-text {
+                margin-top: 16px;
+                display: flex;
+                align-items: center;
+
+                .user-name {
+                    font-size: 34px;
+                    line-height: 40px;
+                    font-weight: 500;
+                    color: #000000;
+                }
+
+                .member-info-card-header-text-level {
+                    width: 100px;
+                    height: 36px;
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    padding-left: 45px;
+                    box-sizing: border-box;
+                    margin-left: 14px;
+
+                    .level-text {
+                        font-size: 16px;
+                        line-height: 40px;
+                        color: #000000;
+                        z-index: 1;
+                    }
+
+                    .level-icon {
+                        width: 100px;
+                        height: 36px;
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                    }
+                }
+            }
+        }
+
+        // 我的小店
+        .my-shop {
+            width: 100%;
+            height: 92px;
+            background-color: #fff5dc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            image {
+                height: 30px;
+                width: 30px;
+                margin-right: 10px;
+            }
+
+            text {
+                font-size: 24px;
+                line-height: 40px;
+                color: #000000;
+            }
+        }
+    }
+
+    // 预估收益
+    .estimated-income {
+        background: #FFFFFF;
+        border-radius: 20px;
+        padding: 24px;
+        margin-top: 16px;
+
+        &-title {
+            font-size: 28px;
+            color: #3D3D3D;
+            margin-bottom: 30px;
+            line-height: 40px;
+            font-weight: 700;
+        }
+
+        &-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 55px;
+            margin-top: 30px;
+
+            .income-item {
+                flex: 1;
+                text-align: center;
+                display: flex;
+                flex-direction: column;
+
+                .amount {
+                    font-size: 36px;
+                    font-weight: bold;
+                    color: #FF8119;
+                    line-height: 40px;
+
+                }
+
+                .label {
+                    font-size: 26px;
+                    color: #222222;
+                    line-height: 40px;
+                    margin-top: 11px;
+                }
+            }
+
+            .divider {
+                width: 0;
+                height: 80px;
+                border-left: 2px solid #D8D8D8;
+                margin: 0 20px;
+            }
+        }
+
+        &-detail {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            text-align: center;
+            font-size: 24px;
+            color: #E79945;
+            margin-top: 40px;
+
+            .to-detail {
+                width: 22px;
+                height: 21px;
+                margin-left: 8px;
+            }
+        }
+    }
+
+    // 可提现金额
+    .withdrawable-amount {
+        margin-top: 20px;
+        .withdrawable-amount-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            .withdrawable-amount-icon {
+                width: 36px;
+                height: 36px;
+            }
+
+            .withdrawable-amount-title {
+                font-size: 28px;
+                color: #000000;
+                line-height: 40px;
+                font-weight: 700;
+                margin-left: 10px;
+            }
+        }
+
+        .withdrawable-amount-content {
+            height: 90px;
+            width: 100%;
+            background-color: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 23px 0 15px;
+            box-sizing: border-box;
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .amount {
+                    font-size: 24px;
+                    color: #000000;
+                    line-height: 40px;
+                }
+
+                .warning-icon-box {
+                    display: flex;
+                    margin-left: 10px;
+                    align-items: center;
+                    padding: 0 14px;
+                    box-sizing: border-box;
+                    background-color: #fff4e7;
+                    border-radius: 26px;
+                    .warning-text {
+                        font-size: 24px;
+                        color: #FF8119;
+                        line-height: 40px;
+                    }
+                    .warning-icon {
+                        width: 24px;
+                        height: 24px;
+                        margin-right: 10px;
+                    }
+                }
+            }
+            .right{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 138px;
+                height: 44px;
+                background-color: #f7f3f3;
+                border-radius: 26px;
+                font-size: 22px;
+                line-height: 40px;
+            }
+        }
+    }
+
+    // 今日订单
+    .today-order {
+        margin-top: 20px;
+        .today-order-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            .today-order-header-left{
+                display: flex;
+                align-items: center;
+                .today-order-icon {
+                    width: 36px;
+                    height: 36px;
+                }
+    
+                .today-order-title {
+                    font-size: 28px;
+                    color: #000000;
+                    line-height: 40px;
+                    font-weight: 700;
+                    margin-left: 10px;
+                }
+            }
+            .today-order-header-right{
+                font-size: 22px;
+                color: #A1A1A1;
+                line-height: 40px;
+                margin-right: 10px;
+                display: flex;
+                align-items: center;
+            }
+        }
+        .today-order-content {
+            width: 100%;
+            height: 142px;
+            border-radius: 20px;
+            background-color: #fff;
+            padding: 0 20px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .order-item {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-between;
+
+                .label {
+                    font-size: 24px;
+                    color: #A1A1A1;
+                    line-height: 40px;
+                }
+
+                .amount {
+                    font-size: 28px;
+                    font-weight: 700;
+                    color: #000000;
+                    line-height: 40px;
+                }
+            }
+        }
+    }
+}

src/pages/mine/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '我的'
+  navigationBarTitleText: '鱼市'
 })

src/pages/mine/index.jsx

@@ -1,23 +1,54 @@
 import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import { AtList, AtListItem } from "taro-ui"
 import './index.less'
-
+import loginOut from '../../images/mine/loginOut.png'
+import edit from '../../images/mine/edit.png'
+import norm from '../../images/mine/norm.png'
 export default class Index extends Component {
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
+  handleLogout = () => {
+    Taro.showModal({
+      title: '',
+      content: '退出后，请重新登录!',
+      cancelText: '暂不退出',
+      confirmText: '退出登录',
+      cancelColor: '#000000',
+      confirmColor: '#F6C71A',
+      success: function (res) {
+        if (res.confirm) {
+          console.log('用户点击退出登录')
+        }
+      }
+    })
+  }
 
   render () {
     return (
       <View className='index'>
-        <Text>我的</Text>
+        {/* 个人信息 */}
+        <View className="info">
+          <Image src='' className="avatar" />
+          <View className="info-right">
+            <View className='user-info'>
+            <View className="name">张三</View>
+            <View className="account">138001</View>
+            </View>
+            <Image className='edit-icon' src={edit}></Image>
+          </View>
+        </View>
+        {/* 功能 */}
+        <View className='function'>
+          <AtList>
+            <AtListItem title='用户规范' arrow='right' thumb={norm}/>
+            <AtListItem 
+              title='退出登录' 
+              arrow='right' 
+              thumb={loginOut}
+              onClick={this.handleLogout}
+            />
+          </AtList>
+        </View>
       </View>
     )
   }

src/pages/mine/index.less

@@ -0,0 +1,73 @@
+.index {
+    background-color: #f5f5f5;
+    padding: 0 16px;
+    box-sizing: border-box;
+    min-height: 100vh;
+
+    .info {
+        height: 170px;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        box-sizing: border-box;
+        justify-content: space-between;
+
+        .avatar {
+            width: 116px;
+            height: 116px;
+            border-radius: 50%;
+            margin-right: 18px;
+            background-color: red;
+        }
+
+        .info-right {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+
+            .user-info {
+                color: #000000;
+
+                .name {
+                    font-size: 34px;
+                    line-height: 49px;
+                }
+
+                .account {
+                    font-size: 28px;
+                    line-height: 41px;
+                }
+            }
+
+            .edit-icon {
+                width: 28px;
+                height: 28px;
+            }
+        }
+    }
+
+    // 功能
+    .function {
+        border-radius: 20px;
+        overflow: hidden;
+        background-color: #ffffff;
+
+        .at-list__item .item-extra__icon-arrow {
+            font-size: 44px;
+        }
+
+        .at-list__item--thumb .item-thumb {
+            width: 40px;
+            height: 40px;
+        }
+
+        .item-content__info-title {
+            font-size: 28px;
+            color: #000000;
+        }
+        .at-list__item{
+            padding: 31px 17px;
+        }
+    }
+}

src/pages/productClassify/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品分类'
+})

src/pages/productClassify/index.jsx

@@ -0,0 +1,46 @@
+import { Component } from "react";
+import { View, Text } from "@tarojs/components";
+import { AtTabs, AtTabsPane } from "taro-ui";
+import "./index.less";
+import Taro from "@tarojs/taro";
+import ProductList from '../../components/index/ProductList'
+
+export default class Index extends Component {
+  state = {
+    current: 0, // 当前选中的标签页索引
+    tabList: [
+      { title: "全部商品" },
+      { title: "选项2" },
+      { title: "选项3" },
+      { title: "选项4" },
+    ], // 标签页列表
+  };
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
+  }
+  render() {
+    return (
+      <View className="index">
+        <AtTabs
+          current={this.state.current}
+          tabList={this.state.tabList}
+          onClick={this.handleClick.bind(this)}
+        >
+          {this.state.tabList.map((tab, index) => (
+            <AtTabsPane current={this.state.current} index={index} key={index}>
+              <View className="tab-content">
+                <ProductList />
+              </View>
+            </AtTabsPane>
+          ))}
+        </AtTabs>
+        {/* 底部按钮 */}
+        <View onClick={() => Taro.navigateBack()} className="bottom-button">
+          返回店铺首页
+        </View>
+      </View>
+    );
+  }
+}

src/pages/productClassify/index.less

@@ -0,0 +1,37 @@
+.index {
+    min-height: 100vh;
+    background-color: #f9f9f9;
+    padding-bottom: 100px;
+    padding-top: 80px;
+    .at-tabs__header{
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+    }
+    .at-tabs__item {
+        color: #787878;
+    }
+
+    .at-tabs__item--active {
+        color: #000000 !important;
+    }
+
+    .at-tabs__item-underline {
+        background-color: #f3e801;
+    }
+
+    .bottom-button {
+        width: 100%;
+        height: 88px;
+        background-color: #F6C71A;
+        font-weight: 700;
+        font-size: 28px;
+        color: #3D3D3D;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        bottom: 0;
+    }
+}

src/pages/productDetail/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationStyle: 'custom'
+})

src/pages/productDetail/index.jsx

@@ -0,0 +1,213 @@
+import { Component } from "react";
+import { View, Text, Swiper, SwiperItem, Image } from "@tarojs/components";
+import { AtIcon } from "taro-ui";
+import "./index.less";
+import Taro from "@tarojs/taro";
+import productDetailIcon from "../../images/productDetail/productDetailIcon.png";
+import like from "../../images/productDetail/like.png";
+import home from "../../images/nav/home.png";
+import selfBuy from "../../images/productDetail/selfBuy.png";
+import share from "../../images/productDetail/share.png";
+import ProductCard from "../../components/ProductCard"; //产品卡片
+import Modal from "../../components/Modal"; //弹窗
+
+export default class Index extends Component {
+  state = {
+    isShare: false, //是否是分享
+    isOpened: false, //是否打开弹窗
+    productList: [
+      {
+        id: 1,
+        name: "青岛大虾",
+        price: 99.9,
+        originalPrice: 159.9,
+        image: "https://example.com/img1.jpg",
+        sales: 1234,
+        tag: "热销",
+      },
+      {
+        id: 2,
+        name: "三文鱼刺身",
+        price: 158,
+        originalPrice: 198,
+        image: "https://example.com/img2.jpg",
+        sales: 856,
+        tag: "新品",
+      },
+      {
+        id: 3,
+        name: "帝王蟹",
+        price: 299,
+        originalPrice: 399,
+        image: "https://example.com/img3.jpg",
+        sales: 566,
+        tag: "限时",
+      },
+    ],
+  };
+
+  componentWillMount() {}
+
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  // 复制商品编号
+  handleCopy = (text) => {
+    Taro.setClipboardData({
+      data: text,
+      success: () => {
+        Taro.showToast({
+          title: "复制成功",
+          icon: "success",
+        });
+      },
+    });
+  };
+
+  // 添加跳转首页方法
+  handleToHome = () => {
+    Taro.switchTab({
+      url: "/pages/index/index",
+    });
+  };
+
+  // 立即购买
+  handleBuy = () => {
+    console.log(111);
+
+    this.setState({
+      isOpened: true,
+    });
+  };
+
+  // 添加返回方法
+  handleBack = () => {
+    const pages = Taro.getCurrentPages();
+    if (pages.length > 1) {
+      Taro.navigateBack();
+    }
+  };
+
+  render() {
+    return (
+      <View
+        className="index"
+        style={{ paddingTop: Taro.navigationBarHeight + "px" }}
+      >
+        {!this.state.isShare && (
+          <View className="back-btn" onClick={this.handleBack}>
+            <AtIcon value="chevron-left" size="24" color="#999999"></AtIcon>
+          </View>
+        )}
+        {/* 轮播图 */}
+        <Swiper className="swiper" autoplay circular>
+          <SwiperItem>
+            <Image className="swiper-img" src="图片地址1" mode="aspectFill" />
+          </SwiperItem>
+          {/* 可以添加更多 SwiperItem */}
+        </Swiper>
+
+        {/* 商品详情模块 */}
+        <View className="product-info">
+          {/* 商品名称 */}
+          <Text className="product-name">
+            <Text className="self-tag">自营</Text>
+            商品名称
+          </Text>
+
+          {/* 价格和标签行 */}
+          <View className="price-tag-row">
+            {/* 价格区域 */}
+            <View className="price-box">
+              <Text className="current-price">
+                <Text className="currency">¥</Text>
+                299
+              </Text>
+              <Text className="original-price">¥399</Text>
+            </View>
+            {/* 标签区域 */}
+            <View className="tag-box">
+              <Text className="tag">分享赚￥1.51</Text>
+            </View>
+          </View>
+
+          {/* 分割线 */}
+          <View className="divider" />
+
+          {/* 商品编号行 */}
+          <View className="product-number-row">
+            <Text className="number-label">商品编号：123456</Text>
+            <Text
+              className="copy-btn"
+              onClick={() => this.handleCopy("123456")}
+            >
+              复制
+            </Text>
+          </View>
+        </View>
+        {/* 商品标签模块 */}
+        <View className="product-tag-row">
+          <View className="tag-item">
+            <Image src={productDetailIcon} mode="aspectFit" />
+            <Text className="tag-text">渔市商品</Text>
+          </View>
+          <View className="tag-item">
+            <Image src={productDetailIcon} mode="aspectFit" />
+            <Text className="tag-text">品质保证</Text>
+          </View>
+          <View className="tag-item">
+            <Image src={productDetailIcon} mode="aspectFit" />
+            <Text className="tag-text">无忧售后</Text>
+          </View>
+        </View>
+        {/* 猜你喜欢 */}
+        <View className="guess-you-like">
+          <Image src={like} mode="aspectFit" />
+          <Text className="title">猜你喜欢</Text>
+        </View>
+        {/* 猜你喜欢产品列表 */}
+        <View className="product-card-list">
+          {this.state.productList.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </View>
+        {/* 底部购买模块 */}
+        <View className="bottom-buy">
+          <View onClick={this.handleToHome} className="bottom-buy-left">
+            <Image src={home} mode="aspectFit" />
+            <Text className="bottom-buy-text">首页</Text>
+          </View>
+          <View className="bottom-buy-right">
+            {!this.state.isShare ? (
+              <>
+                <View className="bottom-buy-right-self">
+                  <Image src={share} mode="aspectFit" />
+                  <Text className="bottom-buy-text">分享赚</Text>
+                </View>
+                <View className="bottom-buy-right-share">
+                  <Image src={selfBuy} mode="aspectFit" />
+                  <Text className="bottom-buy-text">自购省</Text>
+                </View>
+              </>
+            ) : (
+              <View onClick={this.handleBuy} className="bottom-buy-right-btn">
+                <Text className="bottom-buy-text">立即购买</Text>
+              </View>
+            )}
+          </View>
+        </View>
+        {/* 分享弹窗 */}
+        <Modal
+          linkText="阿拉山口监督卡监督卡就"
+          title="咸鱼口令已复制"
+          isOpened={this.state.isOpened}
+        />
+      </View>
+    );
+  }
+}

src/pages/productDetail/index.less

@@ -0,0 +1,249 @@
+.index {
+    background-color: #f9f9f9;
+    min-height: 100vh;
+    padding-bottom: 140px;
+
+    .swiper {
+        width: 100%;
+        height: 730px;
+        background-color: red;
+        .swiper-img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    //   商品详情
+    .product-info {
+        padding: 17px;
+        border-radius: 20px;
+        background-color: #fff;
+        margin: 16px 16px 0 16px;
+
+        .product-name {
+            font-size: 32px;
+            line-height: 46px;
+            font-weight: 700;
+
+            .self-tag {
+                display: inline-block;
+                padding: 2px 8px;
+                background: #FFD43A;
+                border-radius: 4px;
+                color: #803A04;
+                font-size: 24px;
+                line-height: 28px;
+                margin-right: 8px;
+                vertical-align: middle;
+            }
+        }
+
+        .price-tag-row {
+            margin-top: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .price-box {
+                .current-price {
+                    font-size: 36px;
+                    color: #FF1D17;
+                    margin-right: 7px;
+                    line-height: 35px;
+
+                    .currency {
+                        font-size: 24px;
+                    }
+                }
+
+                .original-price {
+                    font-size: 26px;
+                    line-height: 38px;
+                    color: #ABABAB;
+                    text-decoration: line-through;
+                }
+            }
+
+            .tag-box {
+                .tag {
+                    padding: 2px 17px;
+                    border-radius: 20px;
+                    font-size: 24px;
+                    line-height: 38px;
+                    border: 1px solid #FF1D17;
+                    color: #FF1D17;
+                }
+            }
+        }
+
+        .divider {
+            height: 1px;
+            background: #D8D8D8;
+            margin: 12px 0;
+        }
+
+        .product-number-row {
+            display: flex;
+            align-items: center;
+
+            .number-label {
+                color: #ABABAB;
+                font-size: 26px;
+                margin-right: 10px;
+            }
+
+            .copy-btn {
+                color: #FF311B;
+                font-size: 28px;
+            }
+        }
+    }
+
+    //   商品标签
+    .product-tag-row {
+        margin: 20px 16px 0 16px;
+        display: flex;
+        justify-content: space-between;
+        padding: 22px 17px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 20px;
+
+        .tag-item {
+            display: flex;
+            align-items: center;
+
+            .tag-text {
+                font-size: 24px;
+                color: #666666;
+                line-height: 35px;
+            }
+
+            image {
+                width: 24px;
+                height: 24px;
+                margin-right: 4px;
+            }
+        }
+    }
+
+    //   猜你喜欢
+    .guess-you-like {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px 0;
+        margin: 20px 16px 0 16px;
+        background-color: #fff;
+        border-radius: 20px;
+
+        image {
+            width: 34px;
+            height: 34px;
+            margin-right: 5px;
+        }
+
+        .title {
+            color: #000000;
+            line-height: 36px;
+            font-size: 31px;
+            font-weight: 500;
+        }
+    }
+
+    // 底部购买模块
+    .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;
+            flex-direction: column;
+
+            image {
+                width: 38px;
+                height: 36px;
+                margin-bottom: 7px;
+            }
+
+            .bottom-buy-text {
+                font-size: 22px;
+                line-height: 32px;
+                color: #000000;
+            }
+        }
+        .bottom-buy-right {
+            width: 576px;
+            height: 100%;
+            display: flex;
+            border-radius: 60px;
+            overflow: hidden;
+            .bottom-buy-right-self,.bottom-buy-right-share{
+                line-height: 43px;
+                font-size: 30px;
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                image{
+                    margin-right: 9px;
+                }
+            }
+            .bottom-buy-right-self{
+                background-color: #fbe00f;
+                color: #000000;
+                image{
+                    width: 47px;
+                    height: 46px;
+                }
+            }
+            .bottom-buy-right-share{
+                background-color: #ff1c14;
+                color: #fff;
+                image{
+                    width: 45px;
+                    height: 31px;
+                }
+            }
+        }
+        .bottom-buy-right-btn{
+            width: 586px;
+            height: 100%;
+            background: linear-gradient(90deg, #ff881b 0%, #fe6234 100%);
+            border-radius: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .bottom-buy-text{
+                color: #fff;
+                font-size: 28px;
+                line-height: 41px;
+                font-weight: 700;
+            }
+        }
+    }
+
+    .back-btn {
+        position: fixed;
+        left: 20px;
+        top: calc(20px + var(--taro-navigationBarHeight));
+        width: 72px;
+        height: 72px;
+        padding-right: 6px;
+        padding-top: 4px;
+        box-sizing: border-box;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+    }
+}

src/pages/productManagement/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '商品管理'
+})

src/pages/productManagement/index.jsx

@@ -0,0 +1,143 @@
+import { Component } from "react";
+import { View, Picker, Image, Text } from "@tarojs/components";
+import { AtTabs, AtTabsPane, AtCheckbox } from "taro-ui";
+import Taro from "@tarojs/taro";
+import "./index.less";
+import ProductList from "../../components/index/ProductList"; //商品列表
+import add from "../../images/productManagement/add.png";
+import back from "../../images/productManagement/back.png";
+import manger from "../../images/productManagement/manger.png";
+import selectIcon from "../../images/productManagement/selectIcon.png";
+import deleteIcon from "../../images/productManagement/delete.png";
+import toTop from "../../images/productManagement/toTop.png";
+export default class Index extends Component {
+  state = {
+    isManagementStatus: false, //是否是管理状态
+    current: 0, //tabs坐标
+    isSelectAll: false, //是否全选
+    selectedOption: "全部商品", //商品默认名称
+    tabList: [{ title: "在售中 (20)" }], //tabs标题
+    options: ["全部商品", "选项2", "选项3"], //商品下拉选项
+    checkedList: [""], //全选
+    checkboxOption: [
+      {
+        value: "allValue",
+        label: "全选",
+      },
+    ], //全选
+  };
+  // tabs切换
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
+  }
+  // 商品下拉选项
+  handleSelectOption = (e) => {
+    const selectedOption = this.state.options[e.detail.value];
+    this.setState({ selectedOption });
+  };
+  // 切换管理状态
+  changeManagement = (type) => {
+    if(type === 'management'){
+      this.setState({
+        isManagementStatus: true,
+      });
+    }else{
+      this.setState({
+        isManagementStatus: false,
+      });
+    }
+  };
+  // 全选
+  handleChange(value) {
+    this.setState({
+      checkedList: value,
+      isSelectAll:!this.state.isSelectAll
+    });
+  }
+  render() {
+    return (
+      <View className="index">
+        {/* tab分类 */}
+        <View className="tabs-list">
+          <AtTabs
+            tabList={this.state.tabList}
+            current={this.state.current}
+            scroll
+          >
+            <AtTabsPane current={this.state.current} index={0}>
+              {/* 内容 */}
+              <View className="tabs-content">
+                {/* 商品下拉分类 */}
+                <View className="product-category">
+                  <Picker
+                    mode="selector"
+                    range={this.state.options}
+                    onChange={this.handleSelectOption}
+                  >
+                    <View className="product-category-left">
+                      {this.state.selectedOption}
+                      <Image
+                        className="selectIcon"
+                        src={selectIcon}
+                        mode="aspectFit"
+                      />
+                    </View>
+                  </Picker>
+                  <View className="product-category-right">
+                    前6款商品将推荐给直属会员
+                  </View>
+                </View>
+                {/* 商品列表 */}
+                <ProductList isSelectAll={this.state.isSelectAll} isManagement={true} isManagementStatus={this.state.isManagementStatus}/>
+              </View>
+            </AtTabsPane>
+          </AtTabs>
+        </View>
+        {/* 底部购买模块 */}
+        {!this.state.isManagementStatus ? (
+          <View className="bottom-buy">
+            <View onClick={() => Taro.navigateBack()} className="bottom-buy-left">
+              <Image  src={back} mode="aspectFit" />
+              <Text className="bottom-buy-text">返回店铺</Text>
+            </View>
+            <View className="bottom-buy-right">
+              <View onClick={() => this.changeManagement('management')} className="bottom-buy-right-self">
+                <Image src={manger} mode="aspectFit" />
+                <Text className="bottom-buy-text">批量管理</Text>
+              </View>
+              <View onClick={() => Taro.navigateTo({ url: '/pages/productClassify/index' })} className="bottom-buy-right-share">
+                <Image src={add} mode="aspectFit" />
+                <Text className="bottom-buy-text">添加商品</Text>
+              </View>
+            </View>
+          </View>
+        ) : (
+          <View className="operation-product">
+            <View className="operation-product-top">
+              <View className="left">
+                <AtCheckbox
+                  options={this.state.checkboxOption}
+                  selectedList={this.state.checkedList}
+                  onChange={this.handleChange.bind(this)}
+                />
+              </View>
+              <View className="right">
+                <View className="item">
+                  <Image src={toTop} mode="aspectFit" />
+                  <Text>移至顶部</Text>
+                </View>
+                <View className="item">
+                  <Image src={deleteIcon} mode="aspectFit" />
+                  <Text>删除</Text>
+                </View>
+              </View>
+            </View>
+            <View onClick={() => this.changeManagement('finish')} className="operation-product-bottom">完成</View>
+          </View>
+        )}
+      </View>
+    );
+  }
+}

src/pages/productManagement/index.less

@@ -0,0 +1,197 @@
+.index {
+    background-color: #f9f9f9;
+    min-height: 100vh;
+    .tabs-list {
+        box-sizing: border-box;
+        box-sizing: border-box;
+        background-color: #fff;
+        .at-tabs__header {
+            background-color: transparent;
+            height: 57px;
+            text-align: left;
+        padding-left: 22px;
+
+        }
+  
+        .at-tabs__item {
+          color: #000;
+          font-size: 26px;
+          padding: 0;
+          margin-right: 34px;
+          height: 100%;
+          &--active {
+            color: #F6C71A;
+            font-size: 28px;
+          }
+        }
+  
+        .at-tabs__item-underline {
+          background-color: #F6C71A;
+          height: 4px;
+          border-radius: 2px;
+          bottom: 0;
+          width: 80px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        .at-tabs__underline {
+            display: none;
+        }
+        .tabs-content{
+            width: 100%;
+            border-radius: 0 0 20px 20px;
+            .product-category{
+                height: 74px;
+                width: 100%;
+                padding: 0 16px 0 37px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background-color: #f9f9f9;
+                .product-category-left{
+                    color: #666666;
+                    font-size: 26px;
+                    line-height: 38px;
+                    display: flex;
+                    align-items: center;
+                    .selectIcon{
+                        height: 16px;
+                        width: 16px;
+                        margin-left: 8px;
+                    }
+                }
+                .product-category-right{
+                    color: #E5A17C;
+                    line-height: 35px;
+                    font-size: 24px;
+                }
+            }
+        }
+      }
+      // 底部购买模块
+      .bottom-buy {
+        width: 100%;
+        background-color: #fff;
+        height: 126px;
+        padding: 19px 22px 19px 32px;
+        box-sizing: border-box;
+        position: fixed;
+        bottom: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .bottom-buy-left {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            image {
+                width: 38px;
+                height: 36px;
+                margin-right: 8px;
+            }
+
+            .bottom-buy-text {
+                font-size: 26px;
+                line-height: 38px;
+                color: #000000;
+            }
+        }
+        .bottom-buy-right {
+            width: 513px;
+            height: 100%;
+            display: flex;
+            border-radius: 60px;
+            overflow: hidden;
+            .bottom-buy-right-self,.bottom-buy-right-share{
+                line-height: 43px;
+                font-size: 30px;
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                image{
+                    margin-right: 9px;
+                }
+            }
+            .bottom-buy-right-self{
+                background-color: #fbe00f;
+                color: #000000;
+                image{
+                    width: 28px;
+                    height: 26px;
+                }
+            }
+            .bottom-buy-right-share{
+                background-color: #ff1c14;
+                color: #fff;
+                image{
+                    width: 28px;
+                    height: 28px;
+                }
+            }
+        }
+    }
+    // 操作按钮
+    .operation-product{
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        height: 176px;
+        background-color: #fff;
+        .operation-product-top{
+            height: 50%;
+            display: flex;
+            align-items: center;
+            padding: 0 63px 0 37px;
+            box-sizing: border-box;
+            justify-content: space-between;
+            .at-checkbox::after,.at-checkbox::before{
+                content: none;
+            }
+            .at-checkbox__option-wrap {
+                padding-top: 0;
+                padding-bottom: 0;
+              }
+            .at-checkbox__option{
+                padding: 0;
+            }
+            .at-checkbox__option--selected .at-checkbox__icon-cnt{
+                background-color: #f6c71a;
+            }
+            .at-checkbox__icon-cnt{
+                margin-right: 10px;
+            }
+            .at-checkbox__title{
+                color: #000000;
+            }
+            .right{
+                display: flex;
+                align-items: center;
+                .item{
+                    display: flex;
+                    align-items: center;
+                    color: #000000;
+                    font-size: 26px;
+                    margin-left: 49px;
+                    Image{
+                        width: 32px;
+                        height: 23px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+        .operation-product-bottom{
+            height: 50%;
+            background-color: #F6C71A;
+            font-size: 30px;
+            color: #3D3D3D;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}
+

src/pages/productSub/infoEdit/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑个人信息'
+})

src/pages/productSub/infoEdit/index.jsx

@@ -0,0 +1,25 @@
+import { Component } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import vip from '../../../images/index/back-top.png'
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Image src='https://video-img.fyshark.com/1731495433480WechatIMG674.jpg' className='vip-icon' />
+        <Text>编辑个人信息</Text>
+      </View>
+    )
+  }
+}

src/pages/productSub/infoEdit/index.less

@@ -0,0 +1,4 @@
+Image{
+    height: 200px;
+    width: 200px;
+}

src/pages/seckillIndex/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '鱼市秒杀'
+})

src/pages/seckillIndex/index.jsx

@@ -0,0 +1,28 @@
+import { Component } from "react";
+import { View, Image } from "@tarojs/components";
+import "./index.less";
+import seckillImg from "../../images/seckill/seckillTop.png";
+import ProductList from "../../components/index/ProductList";
+export default class Index extends Component {
+  componentWillMount() {}
+
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  render() {
+    return (
+      <View className="index">
+        <Image className="seckill" src={seckillImg} mode="aspectFill" />
+        {/* 商品列表 */}
+        <View className="product-list">
+          <ProductList isSeckill={true} />
+        </View>
+      </View>
+    );
+  }
+}

src/pages/seckillIndex/index.less

@@ -0,0 +1,11 @@
+.index{
+    width: 100%;
+    .seckill{
+        width: 100%;
+        height: 300px;
+        background-color: yellow;
+    }
+    .product-list{
+        margin-top: -71px;
+    }
+}

src/pages/statementRecords/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '结算单记录'
+})

src/pages/statementRecords/index.jsx

@@ -0,0 +1,49 @@
+import { Component } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import statementRecordsIcon from '../../images/statementRecordsIcon.png'
+export default class Index extends Component {
+
+
+  state = {
+    records: [
+      { month: '2020年06月结算单', amount: '70' },
+      { month: '2020年05月结算单', amount: '85' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+      { month: '2020年04月结算单', amount: '92' },
+    ]
+  }
+
+  render () {
+    return (
+      <View className='index'>
+        {/* 结算单记录列表 */}
+        <View className='record-list'>
+          {this.state.records.map((item, index) => (
+            <View className='record-item' key={index}>
+              <View className='left'>
+                <Image src={statementRecordsIcon} className='icon' />
+                <Text className='month'>{item.month}</Text>
+              </View>
+              <View className='right'>
+                <Text className='amount'>¥{item.amount}</Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    )
+  }
+}

src/pages/statementRecords/index.less

@@ -0,0 +1,48 @@
+.index {
+    background-color: #f9f9f9;
+    padding: 30px 16px;
+    min-height: 100vh;
+    box-sizing: border-box;
+    .record-list {
+        background-color: #fff;
+        padding: 0 17px;
+        border-radius: 20px;
+        overflow: hidden;
+
+        .record-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 100px;
+            border-bottom: 1px solid #D8D8D8;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .icon {
+                    height: 52px;
+                    width: 52px;
+                    margin-right: 10px;
+                }
+
+                .month {
+                    color: #444444;
+                    font-size: 28px;
+                }
+            }
+
+            .right {
+                .amount {
+                    color: #666666;
+                    font-size: 28px;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}

src/pages/storeManagement/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '店铺管理'
+})

src/pages/storeManagement/index.jsx

@@ -0,0 +1,115 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import { AtIcon } from "taro-ui";
+import "./index.less";
+import storeManagement from "../../images/storeManagement/storeManagement.png";
+import storeManagementIcon from "../../images/storeManagement/storeManagementIcon.png";
+import ProductCard from "../../components/ProductCard"; //卡片模块
+import Taro from "@tarojs/taro";
+
+export default class Index extends Component {
+  state = {
+    isManager: true,
+    productList: [
+      {
+        id: 1,
+        name: "青岛大虾",
+        price: 99.9,
+        originalPrice: 159.9,
+        image: "https://example.com/img1.jpg",
+        sales: 1234,
+        tag: "热销",
+      },
+      {
+        id: 2,
+        name: "三文鱼刺身",
+        price: 158,
+        originalPrice: 198,
+        image: "https://example.com/img2.jpg",
+        sales: 856,
+        tag: "新品",
+      },
+      {
+        id: 3,
+        name: "帝王蟹",
+        price: 299,
+        originalPrice: 399,
+        image: "https://example.com/img3.jpg",
+        sales: 566,
+        tag: "限时",
+      },
+    ],
+  };
+
+  componentWillMount() {}
+
+  componentDidMount() {
+    const { router } = Taro.getCurrentInstance();
+    const params = router.params;
+    this.setState({
+      isManager: params.isManager,
+    });
+  }
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  render() {
+    return (
+      <View className="index">
+        {/* 头部卡片 */}
+        <View className="header-card">
+          <Image className="bg-image" src={storeManagement} mode="widthFix" />
+          {/* 分享店铺 */}
+          <View className="share-shop">
+            <Text>分享店铺</Text>
+            <AtIcon value="chevron-right" size="10" color="#fff"></AtIcon>
+          </View>
+          {/* 个人信息 */}
+          <View className="user-info">
+            <View className="avatar-wrapper">
+              <Image className="avatar" src="" />
+              <View className="change-avatar-btn">更换头像</View>
+            </View>
+            <View className="info-content">
+              <Text className="name">张三</Text>
+              <Text className="desc">这里是店铺介绍文字内容</Text>
+            </View>
+          </View>
+        </View>
+        {/* 商品列表 */}
+        <View className="product-list">
+          <View className="product-list-title">
+            <Text className="title">店长推荐</Text>
+            <Text className="icon"></Text>
+          </View>
+          <View className="product-card-list">
+            {this.state.productList.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </View>
+          {/* 底部购买模块 */}
+          {this.state.isManager && (
+            <View className="bottom-buy">
+              <View className="bottom-buy-left">
+                <Image src={storeManagementIcon} mode="aspectFit" />
+                <Text className="bottom-buy-text">浏览店铺</Text>
+              </View>
+              <View className="bottom-buy-right">
+                <View className="bottom-buy-right-self">
+                  <Text className="bottom-buy-text">店铺模版</Text>
+                </View>
+                <View onClick={() => Taro.navigateTo({ url:'/pages/productManagement/index' })} className="bottom-buy-right-share">
+                  <Text  className="bottom-buy-text">商品管理</Text>
+                </View>
+              </View>
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+}

src/pages/storeManagement/index.less

@@ -0,0 +1,184 @@
+.index {
+    padding: 18px 16px 0 16px;
+    box-sizing: border-box;
+    background-color: #f9f9f9;
+    padding-bottom: 150px;
+    .header-card {
+        width: 100%;
+        height: 256px;
+        position: relative;
+        padding: 80px 0 0 17px;
+        box-sizing: border-box;
+
+        .bg-image {
+            width: 100%;
+            height: 256px;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        .user-info {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+
+            .avatar-wrapper {
+                position: relative;
+                width: 116px;
+                height: 116px;
+                margin-right: 28px;
+
+                .avatar {
+                    width: 116px;
+                    height: 116px;
+                    border-radius: 50%;
+                    background-color: red;
+                }
+
+                .change-avatar-btn {
+                    position: absolute;
+                    bottom: -6px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 85px;
+                    height: 26px;
+                    background: #3d3d3d;
+                    border-radius: 13px;
+                    color: #FFFFFF;
+                    font-size: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .info-content {
+                display: flex;
+                flex-direction: column;
+                color: #FFFFFF;
+
+                .name {
+                    font-size: 34px;
+                    line-height: 40px;
+                    margin-bottom: 14px;
+                }
+
+                .desc {
+                    font-size: 18px;
+                    line-height: 40px;
+                    opacity: 0.8;
+                }
+            }
+        }
+
+        .share-shop {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            color: #FFFFFF;
+            font-size: 14px;
+            justify-content: center;
+            align-items: center;
+
+            Text {
+                font-size: 22px;
+                line-height: 40px;
+                margin-right: 7px;
+            }
+        }
+    }
+
+    // 产品列表
+    .product-list {
+        background-color: #fff;
+        border-radius: 20px;
+        margin-top: -20px;
+        padding: 30px 0;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+        .product-list-title {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 24px;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+
+            .title {
+                color: #000000;
+                font-size: 28px;
+                font-weight: 700;
+                line-height: 41px;
+                margin-bottom: 15px;
+            }
+
+            .icon {
+                width: 76px;
+                height: 12px;
+                background: linear-gradient(180deg, #FBE00F 0%, #FFCC19 100%);
+                border-radius: 10px 10px 0px 0px;
+            }
+        }
+    }
+        // 底部购买模块
+        .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;
+                flex-direction: column;
+                align-items: center;
+                image {
+                    width: 36px;
+                    height: 36px;
+                    margin-bottom: 7px;
+                }
+    
+                .bottom-buy-text {
+                    font-size: 22px;
+                    line-height: 32px;
+                    color: #000000;
+                }
+            }
+            .bottom-buy-right {
+                width: 550px;
+                height: 100%;
+                display: flex;
+                border-radius: 60px;
+                overflow: hidden;
+                .bottom-buy-right-self,.bottom-buy-right-share{
+                    line-height: 43px;
+                    font-size: 30px;
+                    width: 50%;
+                    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;
+                }
+        }
+    }
+}

src/pages/userSpecification/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '用户规范'
+})

src/pages/userSpecification/index.jsx

@@ -0,0 +1,24 @@
+import { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+
+export default class Index extends Component {
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Text>用户规范</Text>
+      </View>
+    )
+  }
+}