产品详情&&会员页面

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,18 @@
   "setting": {
     "compileHotReLoad": true
   },
-  "libVersion": "3.6.4"
+  "libVersion": "3.6.4",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/seckillSub/seckillIndex/index",
+          "pathName": "pages/productDetail/index",
+          "query": "id=1",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  }
 }

src/app.config.js

@@ -5,6 +5,8 @@ export default defineAppConfig({
     'pages/index/index',
     'pages/member/index',
     "pages/mine/index",
+    "pages/seckillIndex/index",
+    "pages/productDetail/index"
   ],
   subpackages: [
   ],

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='aspectFill' />
+      <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,57 @@
+// 猜你喜欢列表
+.product-card-list {
+    margin: 0 16px 0 16px;
+    border-radius: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 17px;
+    .product-card {
+        width: 352px;
+        background-color: #fff;
+        border-radius: 20px;
+        margin-bottom: 10px;
+        .product-img {
+            width: 352px;
+            height: 258px;
+        }
+
+        .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;
+                    .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,10 +1,12 @@
 import { View, Text, Image } from "@tarojs/components";
+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 seckillIcon from '../../../images/seckill/seckillIcon.png'
+const ProductList = (props) => {
+  const { isSeckill } = props;
   // 模拟商品数据
   const products = [
     {
@@ -36,16 +38,27 @@ const ProductList = () => {
     },
     // ... 其他商品数据
   ];
-
+  // 跳转产品详情
+  const toDetail = (id) => {
+    Taro.navigateTo({
+      url: `/pages/productDetail/index?id=${id}`
+    });
+  }
   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">
+          <View onClick={() => toDetail(product.id)} 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>
+                <Text className="self-tag">{!isSeckill ? '自营' : '鱼市秒杀'}</Text>
                 {product.name}
               </View>
               <View className="price-line">
@@ -54,14 +67,16 @@ const ProductList = () => {
                   <Text className="price">{product.price}</Text>
                   <Text className="original-price">¥{product.originalPrice}</Text>
                 </View>
-                <View className="add-btn">
-                  <Image 
-                    className="join-store-bg" 
-                    src={joinStoreBg}
-                    mode="aspectFit"
-                  />
-                  <Text className="btn-text">加入小店</Text>
-                </View>
+                {!isSeckill && (
+                  <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">
@@ -88,4 +103,8 @@ const ProductList = () => {
   );
 };
 
+ProductList.defaultProps = {
+  isSeckill: false
+};
+
 export default ProductList; 

src/components/index/ProductList/index.less

@@ -148,4 +148,14 @@
     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/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/member/index.jsx

@@ -1,24 +1,84 @@
-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 "./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 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 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>
       </View>
-    )
+    );
   }
 }

src/pages/member/index.less

@@ -0,0 +1,251 @@
+.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;
+            }
+        }
+    }
+}

src/pages/mine/index.config.js

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

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/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;
+    }
+}