页面

src/app.config.ts

@@ -1,6 +1,10 @@
 export default {
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/search/index',
+    'pages/user/index',
+    'pages/searchList/index',
+    'pages/details/index',
   ],
   window: {
     backgroundTextStyle: 'light',
@@ -15,7 +19,7 @@ export default {
         text: '首页'
       },
       {
-        pagePath: 'pages/index/index',
+        pagePath: 'pages/user/index',
         text: '我的'
       }
     ],

src/components/closeBtn/index.tsx

@@ -11,7 +11,7 @@ export default memo(({onClose, styleObj = {}}:Params) => {
     return (
         <View 
             style={styleObj}
-            className={`iconfont icon-a-cuowuwrong ${style.icon_a_cuowuwrong_self}`}
+            className={`iconfont icon-cuo ${style.icon_a_cuowuwrong_self}`}
             onClick={onClose}
         ></View>
     )

src/components/dotLoading/index.module.scss

@@ -0,0 +1,45 @@
+.load_box{
+    height:40px;
+	line-height:40px;
+	position:relative;
+	text-align:center;
+    .load_box_item {
+        width:5px;
+        height:5px;
+        margin:0 1px;
+        display:inline-block;
+        vertical-align:middle;
+        background:#9b59b6;
+        animation:load_more_box 1.5s  infinite ease-in-out;
+        &:nth-child(2) {
+            animation-delay:.2s;
+        }
+        &:nth-child(3) {
+            animation-delay:.4s;
+        }
+        &:nth-child(4) {
+            animation-delay:.6s;
+        }
+        &:nth-child(5) {
+            animation-delay:.8s;
+        }
+    }
+}
+@keyframes load_more_box {
+	0% {
+        height:5px;
+        background:$color_font_two;
+    }
+    25% {
+        height:30px;
+        background:$color_main;
+    }
+    50% {
+        height:5px;
+        background:$color_font_two;
+    }
+    100% {
+        height:5px;
+        background:$color_font_two;
+    }
+}

src/components/dotLoading/index.tsx

@@ -0,0 +1,17 @@
+import { View } from "@tarojs/components";
+import { memo } from "react";
+import styles from './index.module.scss'
+
+export default memo(() => {
+    return (
+        <>
+            <View className={styles.load_box}>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+                <View className={styles.load_box_item}></View>
+            </View>
+        </>
+    )
+})

src/components/infiniteScroll/index.module.scss

@@ -0,0 +1,15 @@
+
+.scroll_main{
+    height: 100%;
+    .infinite_scroll{
+        font-size: $font_size_medium;
+        color: $color_font_two;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        .loading_more{
+            display: flex;
+            align-items: center;
+        }
+    }
+}

src/components/infiniteScroll/index.tsx

@@ -0,0 +1,41 @@
+import { ScrollView, View } from "@tarojs/components"
+import { memo, ReactNode, useState } from "react"
+import style from "./index.module.scss"
+import DotLoading from "@/components/dotLoading"
+
+type Params = {
+    styleObj?: Object,
+    selfonScrollToLower?: () => void,
+    hasMore?: false|true,
+    children?: ReactNode,
+    lowerThresholdNum?: number,
+    
+}
+export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5}: Params) => {
+    const scrollToLower = () => {
+        selfonScrollToLower?.()
+    }
+    return (
+        <>
+            <ScrollView 
+                style={styleObj}  
+                className={style.scroll_main} 
+                scrollY 
+                onScrollToLower={() => scrollToLower()}
+                lowerThreshold={lowerThresholdNum}
+            >
+                <View>
+                    {children}
+                </View>
+                <View className={style.infinite_scroll}>
+                    {
+                        hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
+                        <View>没有更多了</View>
+                    }
+                </View>
+                <View className="common_safe_area_y"></View>
+            </ScrollView>
+            
+        </>
+    )
+})

src/components/loading/index.module.scss

@@ -0,0 +1,43 @@
+.loading {
+    display: inline-block;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    z-index: 2000;
+    &__ring {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      margin: 2px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: #6190e8 transparent transparent;
+      border-radius: 50%;
+      animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  
+      height: 100%;
+      width: 100%;
+  
+      &:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+      &:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+      &:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+    }
+  }
+  
+  @keyframes loading {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+  
+    to {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }

src/components/loading/index.tsx

@@ -0,0 +1,25 @@
+import { View } from "@tarojs/components"
+import { memo, useMemo } from "react"
+import style from './index.module.scss'
+export default memo(({width=60, color='#6190e8'}:{width?:number, color?:string}) => {
+    const styleObj = useMemo(() => {
+        let obj = {}
+        if(width > 0) 
+            obj = {width: width + 'rpx', height:width + 'rpx'}
+        if(color)
+            obj = {...obj, borderColor: color+' transparent transparent'}
+        return obj
+        
+    }, [width, color])
+    console.log('loading:::')
+    return (
+        <View className={style.loading} 
+            style={styleObj}
+        >
+            <View style={styleObj} className={style.loading__ring}></View>
+            <View style={styleObj} className={style.loading__ring}></View>
+            <View style={styleObj} className={style.loading__ring}></View>
+        </View>
+    )
+    
+})

src/components/loadingCard/index.module.scss

@@ -0,0 +1,13 @@
+
+.loadingCard_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    .loading_text{
+        font-size: 26px;
+        margin-top: 20px;
+        color: $color_font_two;
+    }
+}

src/components/loadingCard/index.tsx

@@ -0,0 +1,23 @@
+import { View } from "@tarojs/components"
+import Loading from "@/components/loading"
+import style from "./index.module.scss"
+import { memo } from "react";
+
+type Params = {
+    styleLoading?: Object,
+    title?: string
+}
+export default memo(({
+    styleLoading = {},
+    title = "加载中..."
+}:Params) => {
+    console.log('loadingCard:::')
+    return (
+        <>
+            <View className={style.loadingCard_main}>
+                <Loading/>
+                <View className={style.loading_text}>{title}</View>
+            </View>
+        </>
+    )
+})

src/components/moveBtn/index.tsx

@@ -1,6 +1,6 @@
 import { MovableArea, MovableView, View } from "@tarojs/components"
 import Taro, { useReady } from "@tarojs/taro"
-import { ReactElement, useState } from "react"
+import { ReactElement, useEffect, useRef, useState } from "react"
 import classnames from "classnames";
 import styles  from './index.module.scss'
 
@@ -11,18 +11,25 @@ type param = {
 export default ({children = null, onClick}:param) => {
     const [screenHeight, setScreenHeight] = useState(0)
     const [showMoveBtn, setShowMoveBtn] = useState(false)
+    const screenWidthRef = useRef(0)
     useReady(() => {
         const res = Taro.getSystemInfoSync()
         if(res.screenHeight) {
-            let ratio = 750 / res.screenWidth;
+            let ratio = 750 / res.screenWidth
             setScreenHeight(res.screenHeight*ratio - 460)
+            screenWidthRef.current = res.screenWidth/2
         }
         setShowMoveBtn(true)
     })
+
+    const dragEnd = (e) => {
+
+    }
+
     return (
         <MovableArea className={styles.movableItem}>
             {children}
-            {showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x='650rpx' y={screenHeight+'rpx'}>
+            {showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="750rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
               <View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
             </MovableView>}
         </MovableArea>

src/components/product/index.module.scss

@@ -0,0 +1,79 @@
+
+.products_list{
+    padding: 0 20px 20px 20px;
+    box-sizing: border-box;
+    height: 100%;
+}
+.products_item{
+    width: 100%;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    &:nth-child(n+2){
+        margin-top: 16px;
+    }
+    .item_img{
+        width: 198px;
+        height: 198px;
+        position: relative;
+        image{
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+        }
+        .num{
+            width: 100px;
+            height: 36px;
+            font-size: $font_size_min;
+            position: absolute;
+            right:0;
+            bottom: 0;
+            background: rgba($color: #fff, $alpha: 0.3);
+            border-radius: 36px 0px 10px 0px;
+            color: #fff;
+            text-align: center;
+            line-height: 36px;
+        }
+    }
+    .item_con{
+        padding-left: 15px;
+        font-size: $font_size;
+        flex:1;
+        .title{
+            font-size: $font_size;
+            color: #707070;
+            text{
+                color: $color_font_one;
+                font-weight: bold;
+            }
+        }
+        .tag_list{
+            display: flex;
+            margin-top: 16px;
+            .tag{
+                padding: 3px 10px;
+                background-color: #CDE5FF;
+                font-size: $font_size_min;
+                border-radius: 5px;
+                color: $color_main;
+                &:nth-child(2) {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .introduce{
+            font-size: $font_size_medium;
+            color: $color_font_two;
+            margin-top: 16px;
+        }
+        .des{
+            font-size:$font_size_medium;
+            color: #707070;
+            margin-top: 16px;
+            @include common_ellipsis($params:2);
+        }
+    }
+}

src/components/product/index.tsx

@@ -0,0 +1,30 @@
+import { Image, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+
+type params = {
+    desStatus?: true|false
+}
+export default ({desStatus = true}: params) => {
+
+    return (
+        <View className={styles.products_list}>
+            {new Array(10).fill('').map(item => {
+                return <View className={styles.products_item}>
+                    <View className={styles.item_img}>
+                        <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
+                        <View className={styles.num}>230色</View>
+                    </View>
+                    <View className={styles.item_con}>
+                    <View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
+                    <View className={styles.tag_list}>
+                        <View className={styles.tag}>160cm</View>
+                        <View className={styles.tag}>110g</View>
+                    </View>
+                    <View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
+                    {desStatus&&<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>}
+                    </View>
+                </View>
+            })}
+        </View>
+    )
+}

src/components/search/index.module.scss

@@ -5,9 +5,6 @@
     .icon_a_sousuo1_self{
         font-size: 37px;
         color: $color_font_two;
-        margin-right: 20px;
-        position: absolute;
-        left: 10px;
     }
     .search_con{
         position: relative;
@@ -20,7 +17,7 @@
             width: 100%;
             height: 60px;
             border-radius: 50px;
-            padding: 0 60px 0 60px;
+            padding: 0 60px;
             box-sizing: border-box;
             &::-webkit-input-placeholder { /* WebKit browsers */
                 color: #999;
@@ -40,8 +37,27 @@
         .search_closeBtn{
             position: absolute;
             right: 10px;
+        }
         
     }
+    .btn{
+        width: 100px;
+        font-size: $font_size_medium;
+        color: $color_font_two;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+    .icon_inner{
+        margin-right: 20px;
+        position: absolute;
+        left: 10px;
+        margin-right: 0;
+        
+    }
+    .icon_out{
+        margin-right: 10px;
     }
     
 }

src/components/search/index.tsx

@@ -1,15 +1,19 @@
 import { Input, View } from "@tarojs/components";
 import styles from "./index.module.scss"
 import CloseBtn from "@/components/closeBtn"
-import { memo, useState } from "react";
+import classnames from "classnames";
+import { memo, useEffect, useState } from "react";
 
 type Params = {
-    clickOnSearch?: () => void
+    clickOnSearch?: (val: string) => void
     disabled?: false|true,
     placeholder?: string,
     changeOnSearch?:(any) => void,
     showIcon?: false|true,
-    style?: Object
+    placeIcon?: 'out'|'inner',
+    style?: Object,
+    showBtn?: false|true,
+    btnStyle?: Object
 }
 
 export default memo(({
@@ -18,7 +22,10 @@ export default memo(({
     disabled = false,
     placeholder = '输入搜索内容',
     showIcon = true,
-    style = {}
+    showBtn = false,
+    style = {},
+    btnStyle = {},
+    placeIcon = 'inner'
 }:Params) => {
     const [inputCon , setInputCon] = useState('')
     
@@ -32,16 +39,22 @@ export default memo(({
         setInputCon('')
         changeOnSearch?.('')
     }
+
+    const onSearch = () => {
+        clickOnSearch?.(inputCon)
+    }
+
     return (
         <>
-            <View className={styles.search_main} onClick={() => clickOnSearch?.()} style={style}>
+            <View className={styles.search_main} onClick={() => onSearch()} style={style}>
                 <View className={styles.search_con}>
-                    {showIcon&&<View className={`iconfont icon-sousuo  ${styles.icon_a_sousuo1_self}`}></View>}
+                    {showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
                     <Input placeholderStyle='color:#ABABAB; font-size:26rpx' disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
                     {!!inputCon&&<View className={styles.search_closeBtn}>
                         <CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
                     </View>}
                 </View>
+                {showBtn&&<View style={btnStyle} className={styles.btn} onClick = {() => onSearch()}>搜索</View>}
             </View>
         </>
     )

src/components/shopCart/index.module.scss

@@ -1,4 +1,9 @@
 .shop_cart_main{
+    .popup_con{
+        display: flex;
+        flex-direction: column;
+        height: 80vh;
+    }
     .header{
         width: 100%;
         display: flex;
@@ -35,14 +40,15 @@
         }
     }
     .con{
-        padding:30px 20px 0;
+        padding:30px 20px 100px 0;
         box-sizing: border-box;
-        height: 70vh;
+        flex:1;
+        height: 0;
         .scroll{
             height: 100%;
         }
         .product_list{
-            padding-bottom: 115px;
+            padding-bottom: 20px;
             .product_item{
                 display: flex;
                 justify-content: space-between;

src/components/shopCart/index.tsx

@@ -1,9 +1,12 @@
-import { Checkbox, Image, ScrollView, View } from "@tarojs/components"
+import {Image, ScrollView, View } from "@tarojs/components"
 import Popup from "@/components/popup"
 import classnames from "classnames";
 import MCheckbox from "@/components/checkbox";
+import LoadingCard from "@/components/loadingCard";
+import InfiniteScroll from "@/components/infiniteScroll";
 import styles from "./index.module.scss"
 import { useEffect, useState } from "react";
+import Taro from "@tarojs/taro";
 
 type param = {
     show?: true|false,
@@ -17,15 +20,19 @@ export default ({show = false, onClose}: param) => {
     }
 
     const [list, setList] = useState<any[]>([])
+    const [loading, setLoading] = useState(false)
+
     useEffect(() => {
+        let lists:any[] = []
         for(let i = 0; i < 20; i++) {
-            setList((e) => [...e, {
+            lists = [...lists, {
                 title:`${i}#薄荷绿`,
                 subtitle: '0770# 21S单面平纹(食毛)',
                 tag: '剪板',
                 select: i%2?true: false
-            }])
+            }]
         }
+        setList([...lists])
     }, [])
 
     const [showPopup, setShowPopup] = useState(false)
@@ -33,11 +40,13 @@ export default ({show = false, onClose}: param) => {
         setShowPopup(show)
     }, [show])
 
+
+    const [selectStatus, setSelectStatus] = useState(false)
     const selectAll = () => {
-        console.log('123123')
         list.map(item => {
-            item.select = true
+            item.select = !selectStatus
         })
+        setSelectStatus(!selectStatus)
         setList([...list])
     }
 
@@ -59,12 +68,30 @@ export default ({show = false, onClose}: param) => {
         setShowPopup(false)
     }
 
+    const delSelect = () => {
+        Taro.showModal({
+            content: '删除所选商品？',
+            success: function (res) {
+                if (res.confirm) {
+                    Taro.showToast({
+                        title: '成功',
+                        icon: 'success',
+                        duration: 2000
+                    })
+                } else if (res.cancel) {
+                console.log('用户点击取消')
+                }
+            }
+        })
+    }
+    
     return (
         <View className={styles.shop_cart_main}>
             <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
+                <View className={styles.popup_con}>
                     <View className={styles.header}>
-                    <View onClick={selectAll}>全选</View>
+                        <View onClick={selectAll}>{!selectStatus?'全选':'反选'}</View>
-                    <View>
+                        <View onClick={delSelect}>
                             <text className={classnames('iconfont', 'icon-lajixiang', styles.miconfont)}></text>
                             删除勾选项
                         </View>
@@ -76,7 +103,8 @@ export default ({show = false, onClose}: param) => {
                     
                     </View>
                     <View className={styles.con}>
-                    {list.length > 0&&<ScrollView scrollY className={styles.scroll}>
+                        {loading&&<LoadingCard/>}
+                        {!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}}>
                             <View className={styles.product_list}>
                                 {list.map((item, index) => {
                                     return <View key={index} className={styles.product_item}>
@@ -98,12 +126,12 @@ export default ({show = false, onClose}: param) => {
                                     </View>
                                 })}
                             </View>
-                        
+                        </InfiniteScroll>}
-                    </ScrollView>||
+                        {!loading&&list.length > 0&&<View className={styles.empty}>
-                    <View className={styles.empty}>
                             <View className={styles.title}>暂未选择商品</View>
                             <View className={styles.btn}>去选购</View>
                         </View>}
+                        
                     </View>
                     <View className={styles.buy_btn}>
                         <View className={styles.buy_con}>
@@ -119,6 +147,7 @@ export default ({show = false, onClose}: param) => {
                             </View>
                         </View>
                     </View>
+                </View>
             </Popup>
         </View>
     )

src/components/sideBar/index.tsx

@@ -3,7 +3,7 @@ import { memo, ReactNode, useRef, useState } from "react"
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { useReady } from "@tarojs/taro";
-import { useCallback } from "react";
+import InfiniteScroll from "../infiniteScroll";
 
 type ListProps = {
     title: string,
@@ -51,8 +51,10 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
     }
 
     useReady(() => {
+        Taro.nextTick(() => {
             let query = Taro.createSelectorQuery();
             query.select('.side_bar_select').boundingClientRect(rect=>{
+                console.log('rect::',rect)
                 let clientHeight = rect.height;
                 let clientWidth = rect.width;
                 let ratio = 750 / clientWidth;
@@ -61,20 +63,12 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
                 init()
             }).exec();
         })
+    })
 
-    const formatTitle = useCallback((title = '') => {
+    //触底事件
-        let arr: ReactNode[]= []
+    const onScrolltolower  = () => {
-        let str = ''
+        console.log('触底了')
-        for (let i = 1; i <= title.length; i++) {
-            str += title[i-1]
-            if(i == title.length|| i%2 == 0) {
-                const node = <View className={styles.title_list}>{str}</View>
-                arr.push(node)
-                str = ''
     }
-        }
-        return arr
-    }, [])
 
     return (
         <>
@@ -90,7 +84,6 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
                                     key={item.value}
                                     style={{height:heightItem+'rpx'}}
                                 >
-                                    {/* {formatTitle(item.title)} */}
                                     <View className={styles.title_con}>
                                         {item.title}
                                     </View>
@@ -101,10 +94,9 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
                     <View className="common_safe_area_y"></View>
                 </ScrollView>
                 <View className={styles.sideBar_con}>
-                    <ScrollView className={styles.sideBar_con_scroll} style={{height}} scrollY>
+                    <InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
                         {children}
-                        <View className="common_safe_area_y"></View>
+                    </InfiniteScroll>
-                    </ScrollView>
                 </View>
             </View>
             

src/components/swiper/index.tsx

@@ -1,14 +1,16 @@
 import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
 import styles  from './index.module.scss'
 
 type item = {title:string, img:string, url:string, id:number}
 
 type params = {
   list?: item[]
-  swiperOnClick?: (val: item) => void
+  swiperOnClick?: (val: item) => void,
+  style?: Object
 }
 export default (props:params) => {
-    let {list = [], swiperOnClick} = props
+    let {list = [], swiperOnClick, style = {}} = props
     list = [
         {
             title:'数据', 
@@ -19,9 +21,12 @@ export default (props:params) => {
     ]
     const goLink = (item) => {
         swiperOnClick?.(item)
+        Taro.navigateTo({
+            url:'/pages/search/index'
+        })
     }
     return (
-        <View className={styles.swiper_con}>
+        <View className={styles.swiper_con} style={style}>
             <Swiper
                 className={styles.xswiper}
                 indicatorColor='#ccc'

src/pages/details/components/shopCart/index.module.scss

@@ -0,0 +1,104 @@
+.shop_cart_main{
+    .popup_con{
+        display: flex;
+        flex-direction: column;
+        height: 80vh;
+    }
+    .header{
+        color: $color_font_one;
+        font-size: 32px;
+        font-weight: 700;
+        padding: 20px;
+    }
+    .search{
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        .search_title{
+            font-size: $font_size;
+            color: #000;
+            width: 160px;
+        }
+        .search_list{
+            display: flex;
+            justify-content: space-between;
+            flex:1;
+        }
+        .search_item{
+            width: 148px;
+            height: 55px;
+            text-align: center;
+            line-height: 55px;
+            color: $color_font_two;
+            font-size: $font_size_medium;
+            background-color: #f0f0f0;
+            border-radius: 50px;
+        }
+        .search_item_select{
+            border: 2px solid $color_main;
+            background-color: #ecf5ff;
+            color: $color_main;
+            width: 144px;
+            height: 51px;
+        }
+    }
+    .colorFind{
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+        .title{
+            font-size: 26px;
+        }
+        .miconfont{
+            font-size: 36px;
+            color: $color_font_two;
+        }
+    }
+    .color_con{
+        .item {
+            display: flex;
+            justify-content: space-between;
+            padding: 0 20px;
+            margin-bottom: 40px;
+            .item_color{
+                width: 156.5px;
+                height: 156.5px;
+                border-radius: 20px;
+                background-color: red;
+            }
+            .item_con{
+                flex:1;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                padding: 20px 0 20px 20px;
+                .title{
+                    font-size: $font_size_big;
+                    font-weight: 700;
+                }
+                .num{
+                    font-size: $font_size;
+                    color: $color_main;
+                }
+            }
+            .btn_con{
+                display: flex;
+                align-items: flex-end;
+                .btn{
+                    width: 116px;
+                    height: 64px;
+                    background-color: $color_main;
+                    border-radius: 40px 0px 16px 0px;
+                    font-size: $font_size_medium;
+                    text-align: center;
+                    line-height: 64px;
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .buy_btn{
+        height: 151px;
+        width: 100%;
+    }
+}

src/pages/details/components/shopCart/index.tsx

@@ -0,0 +1,149 @@
+import {Image, ScrollView, View } from "@tarojs/components"
+import Popup from "@/components/popup"
+import classnames from "classnames";
+import MCheckbox from "@/components/checkbox";
+import LoadingCard from "@/components/loadingCard";
+import InfiniteScroll from "@/components/infiniteScroll";
+import styles from "./index.module.scss"
+import { useEffect, useState } from "react";
+import Taro from "@tarojs/taro";
+
+type param = {
+    show?: true|false,
+    onClose?: () => void
+}
+export default ({show = false, onClose}: param) => {
+    const selectList = ['剪板', '散剪', '大货']
+    const [selectIndex, setSelectIndex] = useState(0)
+    const selectProduct = (index:number) => {
+        setSelectIndex(index)
+    }
+
+    const [list, setList] = useState<any[]>([])
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        let lists:any[] = []
+        for(let i = 0; i < 20; i++) {
+            lists = [...lists, {
+                title:`${i}#薄荷绿`,
+                subtitle: '0770# 21S单面平纹(食毛)',
+                tag: '剪板',
+                select: i%2?true: false
+            }]
+        }
+        setList([...lists])
+    }, [])
+
+    const [showPopup, setShowPopup] = useState(false)
+    useEffect(() => {
+        setShowPopup(show)
+    }, [show])
+
+
+    const [selectStatus, setSelectStatus] = useState(false)
+    const selectAll = () => {
+        list.map(item => {
+            item.select = !selectStatus
+        })
+        setSelectStatus(!selectStatus)
+        setList([...list])
+    }
+
+    //checkbox选中回调
+    const selectCallBack = (item) => {
+        item.select = true
+        setList([...list])
+    }
+
+    //checkbox关闭回调
+    const colseCallBack = (item) => {
+        item.select = false
+        setList([...list])
+    }
+
+    //popup关闭
+    const closePopup = () => {
+        onClose?.()
+        setShowPopup(false)
+    }
+
+    const delSelect = () => {
+        Taro.showModal({
+            content: '删除所选商品？',
+            success: function (res) {
+                if (res.confirm) {
+                    Taro.showToast({
+                        title: '成功',
+                        icon: 'success',
+                        duration: 2000
+                    })
+                } else if (res.cancel) {
+                console.log('用户点击取消')
+                }
+            }
+        })
+    }
+    
+    return (
+        <View className={styles.shop_cart_main}>
+            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
+                <View className={styles.popup_con}>
+                    <View className={styles.header}>0770# 21S单面平纹(食毛)</View>
+                    <View className={styles.search}>
+                        <View className={styles.search_title}>下单类型:</View>
+                        <View className={styles.search_list}>
+                            {selectList.map((item, index) => {
+                                return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}</View>
+                            })}
+                        </View>
+                    </View>
+                    <View className={styles.colorFind}>
+                        <View className={styles.title}>颜色分类 (13)</View>
+                        <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
+                    </View>
+                    <View className={styles.color_con}>
+                        <View className={styles.item}>
+                            <View className={styles.item_color}></View>
+                            <View className={styles.item_con}>
+                                <View className={styles.title}>1#薄荷绿</View>
+                                <View className={styles.num}>¥25.5/m</View>
+                            </View>
+                            <View className={styles.btn_con}>
+                                <View className={styles.btn}>添加</View>
+                            </View>
+                        </View>
+                        <View className={styles.item}>
+                            <View className={styles.item_color}></View>
+                            <View className={styles.item_con}>
+                                <View className={styles.title}>1#薄荷绿</View>
+                                <View className={styles.num}>¥25.5/m</View>
+                            </View>
+                            <View className={styles.btn_con}>
+                                <View className={styles.btn}>添加</View>
+                            </View>
+                        </View>
+                        <View className={styles.item}>
+                            <View className={styles.item_color}></View>
+                            <View className={styles.item_con}>
+                                <View className={styles.title}>1#薄荷绿</View>
+                                <View className={styles.num}>¥25.5/m</View>
+                            </View>
+                            <View className={styles.btn_con}>
+                                <View className={styles.btn}>添加</View>
+                            </View>
+                        </View>
+                    </View>
+                    <View className={styles.buy_btn}>
+                        <View className={styles.icon}>
+                            <View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
+                        </View>
+                        <View className={styles.goPay}>
+                            去结算
+                        </View>
+                    </View>
+                </View>
+            </Popup>
+        </View>
+    )
+}

src/pages/details/components/swiper/index.module.scss

@@ -0,0 +1,27 @@
+.swiper{
+    height: 450px;
+    width: 100%;
+    position: relative;
+    .swiper_item{
+        height: 100%;
+        width: 100%;
+    }
+    .image_item{
+        width: 100%;
+        height: 100%;
+        image{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .page{
+        font-size: $font_size_min;
+        padding: 5px 20px;
+        background-color: rgba(0,0,0,0.3);
+        color: #fff;
+        border-radius: 50px;
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+    }
+}

src/pages/details/components/swiper/index.tsx

@@ -0,0 +1,36 @@
+import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
+import { useMemo, useState } from "react"
+import styles  from './index.module.scss'
+
+type item = {title:string, img:string, url:string, id:number}
+
+type params = {
+    list?: item[]
+  }
+export default ({list = []}: params) => {
+    
+    const [pageIndex, setPageIndex] = useState(1)
+
+    const pageCount = useMemo(() => {
+        return list.length
+    },[list])
+
+    const swiperChange = (e) => {
+        setPageIndex(e.detail.current + 1)
+    }
+
+    return (
+        <View className={styles.swiper}>
+            <Swiper className={styles.swiper_item} circular={true} onChange={(e) => swiperChange(e)}>
+            {list.map(item => {
+                return <SwiperItem>
+                <View className={styles.image_item} >
+                    <Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'></Image>
+                </View>
+                </SwiperItem>
+            })}
+            </Swiper>
+            <View className={styles.page}>{pageIndex+'/'+pageCount}</View>
+        </View>
+    )
+}

src/pages/details/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '详情'
+}

src/pages/details/index.module.scss

@@ -0,0 +1,127 @@
+.main{
+    min-height: 100%;
+    background-color: $color_bg_one;
+    padding-bottom: 100px;
+    .product_header{
+        padding: 0 20px;
+        display: flex;
+        align-items: center;
+        height: 163.57px;
+        background-color: #fff;
+        .title{
+            flex:1;
+            .name{
+                font-size: 32px;
+                font-weight: 700;
+                color: $color_font_one;
+                @include common_ellipsis(1);
+            }
+            .des{
+                font-size: $font_size_medium;
+                color: $color_font_three;
+                @include common_ellipsis(1);
+                margin-top: 20px;
+            }
+        }
+        .share, .collect {
+            width: 76px;
+            font-size: $font_size_min;
+            text-align: center;
+            color: $color_font_three;
+            .text{
+                margin-top: 10px;
+            }
+        }
+        .miconfont{
+            font-size: 27px;
+        }
+    }
+    .des_data{
+        background-color: #fff;
+        padding: 20px;
+        margin-top: 16px;
+        .title{
+            font-size: $font_size;
+            font-weight: 700;
+            color: $color_font_one;
+            margin-bottom: 20px;
+        }
+        .con{
+            display: grid;
+            grid-template-columns: 260px auto;
+            grid-template-rows: 50px 50px;
+            font-size: $font_size_medium;
+            color: $color_font_three;
+        }
+    }
+    .product_color{
+        background-color: #fff;
+        margin-top: 16px;
+        padding: 30px 20px 0;
+        color: $color_font_one;
+        font-size: $font_size_medium;
+        .title{
+            
+        }
+        .list{
+            margin-top: 30px;
+            display: grid;
+            grid-template-columns: auto auto auto ;
+            justify-content: space-between;
+            .item {
+                width:210px;
+                margin-bottom: 20px;
+                .item_color{
+                    width:210px;
+                    height: 210px;
+                    background-color: red;
+                    border-radius: 20px;
+                }
+                .item_name{
+                    text-align: center;
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+    .product_detail{
+        // padding: 20px;
+        background-color: #fff;
+        margin-top: 16px;
+    }
+    .product_buy{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height:95px;
+        width: 100vw;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        background-color: #fff;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+        .buy_cart{
+            width: 150px;
+            color: $color_font_three;
+            text-align: center;
+            .text{
+                font-size: $font_size_min;
+            }
+            .miconfont{
+                font-size: 36px;
+            }
+        }
+        .buy_btn{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 297px;
+            height: 100%;
+            background-color: $color_main;
+            font-size: $font_size;
+            color: #fff;
+            
+        }
+    }
+}

src/pages/details/index.tsx

@@ -0,0 +1,87 @@
+
+import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
+import Taro from '@tarojs/taro';
+import classnames from "classnames";
+import DesSwiper from './components/swiper';
+import ShopCart from './components/shopCart';
+import styles  from './index.module.scss'
+type item = {title:string, img:string, url:string, id:number}
+
+type params = {
+  list?: item[]
+  swiperOnClick?: (val: item) => void,
+  style?: Object
+}
+export default (props:params) => {
+
+  const list = [
+    {
+        title:'数据', 
+        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
+        url:'', 
+        id:1
+    },
+    {
+        title:'数据', 
+        img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d', 
+        url:'', 
+        id:2
+    }
+]
+
+  const html = `<h1>这里是详情</h1>
+    <div style="font-size:13px">你好啊啊</div>
+    <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
+  `
+  return (
+    <View className={styles.main}>
+      <DesSwiper list={list}/>
+      <View className={styles.product_header}>
+        <View className={styles.title}>
+          <View className={styles.name}>0770# 21S单面平纹(食毛)</View>
+          <View className={styles.des}>面料描述，疯狂描述。。。</View>
+        </View>
+        <View className={styles.share}>
+          <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
+          <View className={styles.text}>分享</View>
+        </View>
+        <View className={styles.collect}>
+          <View className={classnames('iconfont icon-sousuo', styles.miconfont)}></View>
+          <View className={styles.text}>收藏</View>
+        </View>
+      </View>
+      <View className={styles.des_data}>
+        <View className={styles.title}>详情参数</View>
+        <View className={styles.con}>
+          <View>编号:0770</View>
+          <View>幅宽:160cm</View>
+          <View>克重:160g</View>
+          <View>成分:67.6%棉24%涤纶6.4%氨纶%氨纶</View>
+        </View>
+      </View>
+      <View className={styles.product_color}>
+        <View className={styles.title}>色号 (10)</View>
+        <View className={styles.list}>
+          {new Array(10).fill('').map(item => {
+            return <View className={styles.item}>
+              <View className={styles.item_color}></View>
+              <View className={styles.item_name}>1#</View>
+            </View>
+          })}
+        </View>
+      </View>
+      <View className={styles.product_detail}>
+          <RichText nodes={html}></RichText>
+      </View>
+      <View className={styles.product_buy}>
+        <View className={styles.buy_cart}>
+          <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
+          <View className={styles.text}>购物车</View>
+        </View>
+        <View className={styles.buy_btn}>开始下单</View>
+      </View>
+      <ShopCart show={true}/>
+      <View className='common_safe_area_y'></View>
+    </View>
+  )
+}

src/pages/index/components/product/index.module.scss

@@ -2,7 +2,7 @@
 .products_list{
     padding: 0 20px 20px 20px;
     box-sizing: border-box;
-    
+    height: 100%;
 }
 .products_item{
     width: 100%;

src/pages/index/index.tsx

@@ -2,7 +2,7 @@ import {View} from '@tarojs/components'
 import Swiper from '@/components/swiper'
 import Search from '@/components/search'
 import SideBar from '@/components/sideBar'
-import Product from './components/product'
+import Product from '@/components/product'
 import MoveBtn from '@/components/moveBtn'
 import ShopCart from '@/components/shopCart'
 import styles  from './index.module.scss'

src/pages/search/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '搜索'
+}

src/pages/search/index.module.scss

@@ -0,0 +1,72 @@
+.main{
+    .search{
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+        padding-bottom: 50px;
+    }
+    
+    .hot {
+        padding: 0 20px;
+        .hot_header {
+            width:100%;
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size_medium;
+            .hot_header_title {
+                font-size: $font_size;
+                color: $color_font_one;
+                font-weight: 700;
+            }
+            .hot_header_up{
+                color: $color_main;
+            }
+        }
+        .list{
+            display: flex;
+            font-size:  $font_size_medium;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            .item{
+                margin-right: 20px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                background-color: #F0F0F0;
+                color: $color_font_three;
+                border-radius: 50px;
+            }
+        }
+    }
+    .history {
+        padding: 0 20px;
+        .history_header {
+            width:100%;
+            display: flex;
+            justify-content: space-between;
+            font-size: $font_size_medium;
+            .history_header_title {
+                font-size: $font_size;
+                color: $color_font_one;
+                font-weight: 700;
+            }
+            .miconfont{
+                font-size: 30px;
+                color: $color_font_three;
+            }
+        }
+        .list{
+            display: flex;
+            font-size:  $font_size_medium;
+            flex-wrap: wrap;
+            padding: 20px 0;
+            .item{
+                margin-right: 20px;
+                margin-bottom: 20px;
+                padding: 10px 20px;
+                background-color: #F0F0F0;
+                color: $color_font_three;
+                border-radius: 50px;
+            }
+        }
+    }
+}

src/pages/search/index.tsx

@@ -0,0 +1,43 @@
+
+import { View } from '@tarojs/components'
+import Search from '@/components/search'
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+export default () => {
+  return (
+    <View className={styles.main}>
+      <View className={styles.search}>
+        <Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true}/>
+      </View>
+      <View className={styles.hot}>
+        <View className={styles.hot_header}>
+          <View className={styles.hot_header_title}>热门面料</View>
+          <View className={styles.hot_header_up}>高级搜索</View>
+        </View>
+        <View className={styles.list}>
+          <View className={styles.item}>9265</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>26s</View>
+        </View>
+      </View>
+      <View className={styles.history}>
+        <View className={styles.history_header}>
+          <View className={styles.history_header_title}>历史搜索</View>
+          <View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
+        </View>
+        <View className={styles.list}>
+          <View className={styles.item}>9265</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>全棉双卫衣</View>
+          <View className={styles.item}>26s</View>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/searchList/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '搜索'
+}

src/pages/searchList/index.module.scss

@@ -0,0 +1,13 @@
+.main{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: $color_bg_one;
+    .search{
+        padding: 20px;
+    }
+    .list{
+        flex:1;
+        height: 0;
+    }
+}

src/pages/searchList/index.tsx

@@ -0,0 +1,21 @@
+import { View } from "@tarojs/components"
+import classnames from "classnames";
+import Search from '@/components/search'
+import Product from '@/components/product'
+import InfiniteScroll from '@/components/infiniteScroll'
+import styles  from './index.module.scss'
+
+export default () => {
+    return (
+        <View className={styles.main}>
+            <View className={styles.search}>
+                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
+            </View>
+            <View className={styles.list}>
+                <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
+                    <Product desStatus={false}/>
+                </InfiniteScroll>
+            </View>
+        </View>
+    )
+}

src/pages/shopCart/index.config.ts

@@ -1,3 +0,0 @@
-export default {
-  navigationBarTitleText: '电子商城'
-}

src/pages/shopCart/index.module.scss

@@ -1,4 +0,0 @@
-.shop_cart_main{
-   
-    
-}

src/pages/shopCart/index.tsx

@@ -1,10 +0,0 @@
-import {View} from '@tarojs/components'
-import styles  from './index.module.scss'
-
-export default () => {
-  return (
-    <>
-      <View className={styles.shop_cart_main}>购物车</View>
-    </>
-  )
-}

src/pages/user/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '我的'
+}

src/pages/user/index.module.scss

@@ -0,0 +1,4 @@
+.main{
+    
+    
+}

src/pages/user/index.tsx

@@ -0,0 +1,13 @@
+import { View } from '@tarojs/components'
+import Search from '@/components/search'
+import styles  from './index.module.scss'
+
+export default () => {
+  return (
+    <View className={styles.main}>
+      <View className={styles.search}>
+        <Search disabled={true} style={{width: '263rpx'}}/>
+      </View>
+    </View>
+  )
+}

src/styles/common.scss

@@ -2,8 +2,10 @@
 $color_bg_one: #F8F8F8;
 $color_font_one: #3C3C3C;
 $color_font_two: #ABABAB;
+$color_font_three: #707070;
 $color_main: #007AFF;
 
+$font_size_big: 32px;
 $font_size: 28px;
 $font_size_medium: 24px;
 $font_size_min: 22px;

src/styles/iconfont.scss

@@ -1,7 +1,7 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2987621 */
   src: 
-       url('iconfont.ttf?t=1649229905782') format('truetype');
+       url('iconfont.ttf?t=1649647915734') format('truetype');
 }
 
 .iconfont {
@@ -12,6 +12,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-cuo:before {
+  content: "\e6c9";
+}
+
+.icon-jiantou:before {
+  content: "\e63c";
+}
+
+.icon-fenlei-pressed-41:before {
+  content: "\e63b";
+}
+
+.icon-gouxuan:before {
+  content: "\e63a";
+}
+
+.icon-a-wode-pressed_wodefuben:before {
+  content: "\e637";
+}
+
 .icon-sousuo:before {
   content: "\e633";
 }