diff --git a/src/app.scss b/src/app.scss
index fdf4521..c393d5e 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -2,4 +2,5 @@
@import './styles/iconfont.scss';
page{
height: 100%;
+
}
\ No newline at end of file
diff --git a/src/app.tsx b/src/app.tsx
index 336c908..c9fd660 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,10 +1,11 @@
+import { MovableArea, View } from '@tarojs/components'
import './app.scss'
const App = ({ children }) => {
return (
<>
- {children}
+ {children}
)
}
diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss
new file mode 100644
index 0000000..4ee8afc
--- /dev/null
+++ b/src/components/checkbox/index.module.scss
@@ -0,0 +1,20 @@
+.checkbox_item{
+ width: 40px;
+ height: 40px;
+ border: 1px solid #707070;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 40px;
+}
+.checkbox_item_select{
+ background-color: $color_main;
+ border: 0;
+ color: #fff;
+ width: 44px;
+ height: 44px;
+ text-align: center;
+ line-height: 44px;
+ .miconfont{
+ font-size: 26px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx
new file mode 100644
index 0000000..0dc5ee7
--- /dev/null
+++ b/src/components/checkbox/index.tsx
@@ -0,0 +1,32 @@
+import { View } from "@tarojs/components"
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import styles from "./index.module.scss"
+
+type params = {
+ onSelect?: () => void,
+ onClose?: () => void,
+ status?: false|true
+}
+export default ({onSelect, onClose, status = false}: params) => {
+ const [selected, SetSelected] = useState(false)
+ const onSelectEven = () => {
+ let res = !selected
+ if(res) {
+ onSelect?.()
+ } else {
+ onClose?.()
+ }
+ SetSelected(res)
+ }
+ useEffect(() => {
+ SetSelected(status)
+ }, [status])
+ return (
+ <>
+ onSelectEven()}>
+ {selected&&}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/moveBtn/index.module.scss b/src/components/moveBtn/index.module.scss
new file mode 100644
index 0000000..9400687
--- /dev/null
+++ b/src/components/moveBtn/index.module.scss
@@ -0,0 +1,19 @@
+.movableItem{
+ width: 100%;
+ height: 100%;
+}
+.moveBtn{
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ border: 2px solid #cde5ff;
+ box-shadow: 0px 0px 20px 0px rgba(104,180,255,0.70);
+ background-color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .shop_icon{
+ font-size: 50px;
+ color: $color_main;
+ }
+}
\ No newline at end of file
diff --git a/src/components/moveBtn/index.tsx b/src/components/moveBtn/index.tsx
new file mode 100644
index 0000000..bb87e8b
--- /dev/null
+++ b/src/components/moveBtn/index.tsx
@@ -0,0 +1,30 @@
+import { MovableArea, MovableView, View } from "@tarojs/components"
+import Taro, { useReady } from "@tarojs/taro"
+import { ReactElement, useState } from "react"
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+type param = {
+ children?: ReactElement|null,
+ onClick?: () => void
+}
+export default ({children = null, onClick}:param) => {
+ const [screenHeight, setScreenHeight] = useState(0)
+ const [showMoveBtn, setShowMoveBtn] = useState(false)
+ useReady(() => {
+ const res = Taro.getSystemInfoSync()
+ if(res.screenHeight) {
+ let ratio = 750 / res.screenWidth;
+ setScreenHeight(res.screenHeight*ratio - 460)
+ }
+ setShowMoveBtn(true)
+ })
+ return (
+
+ {children}
+ {showMoveBtn&&
+
+ }
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/popup/index.module.scss b/src/components/popup/index.module.scss
new file mode 100644
index 0000000..0ed250b
--- /dev/null
+++ b/src/components/popup/index.module.scss
@@ -0,0 +1,91 @@
+$am-ms: 200ms;
+.drawer_main{
+ .drawer {
+ position:fixed;
+ left: 0;
+ top:0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ height: 100vh;
+ margin: 0 auto;
+ z-index: 1000;
+ visibility: hidden;
+ transition: visibility $am-ms ease-in-out;
+ .drawer_mask{
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.6);
+ z-index: 1011;
+ opacity: 0;
+ transition: opacity $am-ms ease-in;
+ .drawer_container{
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ background-color: #fff;
+ z-index: 1012;
+ transition: transform $am-ms ease-in-out;
+ .drawer_container_title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 80px;
+ font-size: 29px;
+ color: #000000;
+ padding-top: 10px;
+ }
+ .common_close_btn_icon{
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+ }
+ .drawer_container_active{
+ transform: translate3d(0, 0, 0);
+ }
+ }
+ .drawer_mask_active{
+ opacity: 1;
+ }
+ }
+ .drawer_active {
+ visibility:visible;
+ }
+
+ .drawer_container_bottom{
+ bottom: 0;
+ left: 0;
+ min-height: 200px;
+ width: 100vw;
+ border-radius: 20px 20px 0px 0px;
+ transform: translate3d(0, 100%, 0);
+ }
+
+ .drawer_container_top{
+ top: 0;
+ left: 0;
+ min-height: 200px;
+ width: 100vw;
+ border-radius: 0 0 20px 20px;
+ transform: translate3d(0, -100%, 0);
+ }
+
+ .drawer_container_right{
+ bottom: 0;
+ right: 0;
+ height: 100vh;
+ min-width: 300px;
+ border-radius: 20px 0 0 20px;
+ transform: translate3d(100%, 0, 0);
+ }
+
+}
+
+
diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx
new file mode 100644
index 0000000..a71b45a
--- /dev/null
+++ b/src/components/popup/index.tsx
@@ -0,0 +1,56 @@
+import { View } from "@tarojs/components";
+import style from "./index.module.scss"
+import classnames from "classnames";
+import { memo, ReactNode, useMemo } from "react";
+import CloseBtnIcon from "@/components/closeBtn"
+
+interface Params {
+ title?: string,
+ show?: false|true,
+ showTitle?: false|true,
+ onClose?:(boolean) => void,
+ children?: ReactNode,
+ IconButton?: ReactNode,
+ showIconButton?: false|true,
+ position?: 'bottom'|'top'|'right'
+}
+export default memo((
+ {
+ title = '标题',
+ show = false,
+ showTitle = true,
+ onClose,
+ showIconButton = false,
+ children,
+ position = 'bottom'
+ }:Params) => {
+
+
+ return (
+ <>
+
+
+ onClose?.(false)}
+ >
+ e.stopPropagation()}
+ >
+ {showTitle&&{title}}
+ {showIconButton&&
+ onClose?.(false)}/>
+ }
+
+
+ {children}
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss
new file mode 100644
index 0000000..c16b533
--- /dev/null
+++ b/src/components/shopCart/index.module.scss
@@ -0,0 +1,189 @@
+.shop_cart_main{
+ .header{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ padding: 30px;
+ font-size: $font_size;
+ box-sizing: border-box;
+ color: $color_font_two;
+ .miconfont{
+ font-size: 30px;
+ margin-right: 10px;
+ }
+ }
+ .search{
+ display: flex;
+ justify-content: space-between;
+ padding: 0 20px;
+ .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;
+ }
+ }
+ .con{
+ padding:30px 20px 0;
+ box-sizing: border-box;
+ height: 70vh;
+ .scroll{
+ height: 100%;
+ }
+ .product_list{
+ padding-bottom: 115px;
+ .product_item{
+ display: flex;
+ justify-content: space-between;
+ &:nth-child(n+2) {
+ margin-top: 30px;
+ }
+ .checkbox{
+ display: flex;
+ align-items: center;
+
+ }
+ .img{
+ width: 126px;
+ height: 126px;
+ margin-left: 20px;
+ image{
+ width: 100%;
+ height: 100%;
+ border-radius: 10px;
+ }
+ }
+ .des{
+ flex:1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: 20px;
+ .title{
+ font-size: $font_size;
+ color: $color_font_one;
+ }
+ .subtitle{
+ color: $color_font_two;
+ font-size: $font_size_medium;
+ }
+ .tag{
+ font-size: $font_size_min;
+ color: #fff;
+ background-color: $color_main;
+ border-radius: 10px;
+ width: 65px;
+ height: 33px;
+ text-align: center;
+ line-height: 33px;
+ }
+ }
+ }
+ .count{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .price{
+ font-size: $font_size;
+ font-weight: 700;
+ color: $color_font_one;
+ text{
+ font-size: $font_size_min;
+ }
+ }
+ .long{
+ color: $color_main;
+ font-size: $font_size_medium;
+ }
+ }
+ }
+ .empty{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .title{
+ color: $color_font_two;
+ font-size: $font_size_min;
+ }
+ .btn{
+ width: 222px;
+ height: 68px;
+ background-color: $color_main;
+ font-size: $font_size;
+ text-align: center;
+ line-height: 68px;
+ margin-top: 42px;
+ color: #fff;
+ border-radius: 50px;
+ }
+ }
+ }
+ .buy_btn{
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ .buy_con{
+ width: 702px;
+ height: 95px;
+ background-color: $color_font_one;
+ border-radius: 50px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 0;
+ box-sizing: border-box;
+ .icon{
+ width: 100px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .miconfont{
+ font-size: 39px;
+ color: #fff;
+ }
+ }
+ .price_con{
+ flex:1;
+ .price_real{
+ font-size: $font_size;
+ color: #fff;
+ text{
+ font-size: $font_size_min;
+ }
+ }
+ .price_forecast{
+ font-size: $font_size_min;
+ color: $color_font_two;
+ margin-top: 10px;
+ }
+ }
+ .goPay{
+ width: 200px;
+ height: 95px;
+ background-color: $color_main;
+ border-radius: 0px 50px 50px 0px;
+ text-align: center;
+ line-height: 95px;
+ font-size: 32px;
+ color:#fff;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx
new file mode 100644
index 0000000..c513caa
--- /dev/null
+++ b/src/components/shopCart/index.tsx
@@ -0,0 +1,125 @@
+import { Checkbox, Image, ScrollView, View } from "@tarojs/components"
+import Popup from "@/components/popup"
+import classnames from "classnames";
+import MCheckbox from "@/components/checkbox";
+import styles from "./index.module.scss"
+import { useEffect, useState } from "react";
+
+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([])
+ useEffect(() => {
+ for(let i = 0; i < 20; i++) {
+ setList((e) => [...e, {
+ title:`${i}#薄荷绿`,
+ subtitle: '0770# 21S单面平纹(食毛)',
+ tag: '剪板',
+ select: i%2?true: false
+ }])
+ }
+ }, [])
+
+ const [showPopup, setShowPopup] = useState(false)
+ useEffect(() => {
+ setShowPopup(show)
+ }, [show])
+
+ const selectAll = () => {
+ console.log('123123')
+ list.map(item => {
+ item.select = true
+ })
+ 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)
+ }
+
+ return (
+
+ closePopup()}>
+
+ 全选
+
+
+ 删除勾选项
+
+
+
+ {selectList.map((item, index) => {
+ return selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}
+ })}
+
+
+
+ {list.length > 0&&
+
+ {list.map((item, index) => {
+ return
+
+ selectCallBack(item)} onClose={() => colseCallBack(item)}/>
+
+
+
+
+
+ {item.title}
+ 0770# 21S单面平纹(食毛)
+ 剪板
+
+
+ ￥40.5/kg
+ ×12m
+
+
+ })}
+
+
+ ||
+
+ 暂未选择商品
+ 去选购
+ }
+
+
+
+
+
+
+
+ ￥200
+ 预估金额
+
+
+ 去结算
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/test.tsx b/src/components/test.tsx
deleted file mode 100644
index 10817d4..0000000
--- a/src/components/test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { View } from "@tarojs/components"
-
-export default () => {
- return (
- <>
-
- abc
-
-
- )
-}
\ No newline at end of file
diff --git a/src/pages/index/components/product/index.module.scss b/src/pages/index/components/product/index.module.scss
index f8a815c..7c8931e 100644
--- a/src/pages/index/components/product/index.module.scss
+++ b/src/pages/index/components/product/index.module.scss
@@ -18,11 +18,25 @@
.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;
diff --git a/src/pages/index/components/product/index.tsx b/src/pages/index/components/product/index.tsx
index 8b70b14..ced2691 100644
--- a/src/pages/index/components/product/index.tsx
+++ b/src/pages/index/components/product/index.tsx
@@ -2,78 +2,26 @@ import { Image, View } from "@tarojs/components"
import styles from './index.module.scss'
export default () => {
+
return (
-
-
-
+ {new Array(10).fill('').map(item => {
+ return
+
+
+ 230色
+
+
+ 0770#21S单面平纹(食毛)
+
+ 160cm
+ 110g
+
+ 67.6%棉24%涤纶6.4%氨纶
+ 产品描述产品描述产品描述产品描述产品描述
+
-
- 0770#21S单面平纹(食毛)
-
- 160cm
- 110g
-
- 67.6%棉24%涤纶6.4%氨纶
- 产品描述产品描述产品描述产品描述产品描述
-
-
-
-
-
-
-
- 0770#21S单面平纹(食毛)
-
- 160cm
- 110g
-
- 67.6%棉24%涤纶6.4%氨纶
- 产品描述产品描述产品描述产品描述产品描述
-
-
-
-
-
-
-
- 0770#21S单面平纹(食毛)
-
- 160cm
- 110g
-
- 67.6%棉24%涤纶6.4%氨纶
- 产品描述产品描述产品描述产品描述产品描述
-
-
-
-
-
-
-
- 0770#21S单面平纹(食毛)
-
- 160cm
- 110g
-
- 67.6%棉24%涤纶6.4%氨纶
- 产品描述产品描述产品描述产品描述产品描述
-
-
-
-
-
-
-
- 0770#21S单面平纹(食毛)
-
- 160cm
- 110g
-
- 67.6%棉24%涤纶6.4%氨纶
- 产品描述产品描述产品描述产品描述产品描述
-
-
+ })}
)
}
diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss
index e0a6c4f..3e1e5c9 100644
--- a/src/pages/index/index.module.scss
+++ b/src/pages/index/index.module.scss
@@ -1,6 +1,6 @@
.main{
background-color: $color_bg_one;
- min-height: 100%;
+ height: 100vh;
display: flex;
flex-direction: column;
.search{
@@ -25,11 +25,5 @@
flex:1;
height: 0;
}
- .movable{
- position: fixed;
- height: 100vh;
- width: 100vh;
- z-index: 0;
- }
}
\ No newline at end of file
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index dd95c9a..0139661 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,9 +1,12 @@
-import { Image, MovableArea, MovableView, View} from '@tarojs/components'
+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 MoveBtn from '@/components/moveBtn'
+import ShopCart from '@/components/shopCart'
import styles from './index.module.scss'
+import { useState } from 'react'
export default () => {
const tabs_list = [
@@ -25,26 +28,27 @@ export default () => {
{title:'平纹系列', value: 16},
{title:'平纹系列', value: 17},
]
+
+ const [showShopCart, setShowShopCart] = useState(false)
+
return (
-
-
-
- 我的收藏
-
-
+ setShowShopCart(!showShopCart)}>
+
+
+
+ 我的收藏
+
+
+
+
+
+
+
+
+
+ setShowShopCart(false)}/>
-
-
-
-
-
-
-
- 拖动
-
-
-
-
+
)
}
diff --git a/src/pages/shopCart/index.config.ts b/src/pages/shopCart/index.config.ts
new file mode 100644
index 0000000..0b7f3f1
--- /dev/null
+++ b/src/pages/shopCart/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+ navigationBarTitleText: '电子商城'
+}
diff --git a/src/pages/shopCart/index.module.scss b/src/pages/shopCart/index.module.scss
new file mode 100644
index 0000000..3905f86
--- /dev/null
+++ b/src/pages/shopCart/index.module.scss
@@ -0,0 +1,4 @@
+.shop_cart_main{
+
+
+}
\ No newline at end of file
diff --git a/src/pages/shopCart/index.tsx b/src/pages/shopCart/index.tsx
new file mode 100644
index 0000000..cf8e8e7
--- /dev/null
+++ b/src/pages/shopCart/index.tsx
@@ -0,0 +1,10 @@
+import {View} from '@tarojs/components'
+import styles from './index.module.scss'
+
+export default () => {
+ return (
+ <>
+ 购物车
+
+ )
+}