xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车完成

Browse Source
This commit is contained in:
czm 2022-04-07 17:31:49 +08:00
parent 64ed1aaad6
commit df850ed826
18 changed files with 637 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.scss
View File

@ -2,4 +2,5 @@
@import './styles/iconfont.scss';
page{
height: 100%;
}

3
src/app.tsx
View File

@ -1,10 +1,11 @@
import { MovableArea, View } from '@tarojs/components'
import './app.scss'
const App = ({ children }) => {
return (
<>
{children}
{children}
</>
)
}

20
src/components/checkbox/index.module.scss Normal file
View File

@ -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;
}
}

32
src/components/checkbox/index.tsx Normal file
View File

@ -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 (
<>
<View className={classnames(styles.checkbox_item, selected&&styles.checkbox_item_select)} onClick={() => onSelectEven()}>
{selected&&<View className={classnames('iconfont', 'icon-tick_gou', styles.miconfont)}></View>}
</View>
</>
)
}

19
src/components/moveBtn/index.module.scss Normal file
View File

@ -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;
}
}

30
src/components/moveBtn/index.tsx Normal file
View File

@ -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 (
<MovableArea className={styles.movableItem}>
{children}
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x='650rpx' y={screenHeight+'rpx'}>
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
</MovableView>}
</MovableArea>
)
}

91
src/components/popup/index.module.scss Normal file
View File

@ -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);
}
}

56
src/components/popup/index.tsx Normal file
View File

@ -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 (
<>
<View className={style.drawer_main}>
<View catchMove={true} className={`${style.drawer} ${show?style.drawer_active:''}` }>
<View
className={classnames(style.drawer_mask, {[style.drawer_mask_active]: show})}
onClick={() => onClose?.(false)}
>
<View
className={classnames(style.drawer_container, style['drawer_container_'+position], {[style.drawer_container_active]: show})}
onClick={(e) => e.stopPropagation()}
>
{showTitle&&<View className={style.drawer_container_title}>{title}</View>}
{showIconButton&&<View className={style.common_close_btn_icon}>
<CloseBtnIcon onClose={() => onClose?.(false)}/>
</View>}
<View className={style.drawer_container_context}>
{children}
</View>
<View className="common_safe_area_y"></View>
</View>
</View>
</View>
</View>
</>
)
})

189
src/components/shopCart/index.module.scss Normal file
View File

@ -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;
}
}
}
}

125
src/components/shopCart/index.tsx Normal file
View File

@ -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<any[]>([])
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 (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<View className={styles.header}>
<View onClick={selectAll}>全选</View>
<View>
<text className={classnames('iconfont', 'icon-lajixiang', styles.miconfont)}></text>
删除勾选项
</View>
</View>
<View className={styles.search}>
{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 className={styles.con}>
{list.length > 0&&<ScrollView scrollY className={styles.scroll}>
<View className={styles.product_list}>
{list.map((item, index) => {
return <View key={index} className={styles.product_item}>
<View className={styles.checkbox}>
<MCheckbox status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
</View>
<View className={styles.img}>
<Image src="https://bpic.588ku.com//back_origin_min_pic/22/01/11/aa3da17bab9a6556564028e4f1d77874.jpg!/fw/750/quality/99/unsharp/true/compress/true"/>
</View>
<View className={styles.des}>
<View className={styles.title}>{item.title}</View>
<View className={styles.subtitle}>0770# 21S单面平纹(食毛)</View>
<View className={styles.tag}>剪板</View>
</View>
<View className={styles.count}>
<View className={styles.price}><text>￥</text>40.5<text>/kg</text></View>
<View className={styles.long}>×12m</View>
</View>
</View>
})}
</View>
</ScrollView>||
<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}>
<View className={styles.icon}>
<View className={classnames('iconfont', 'icon-gouwuche', styles.miconfont)}></View>
</View>
<View className={styles.price_con}>
<View className={styles.price_real}><text>￥</text>200</View>
<View className={styles.price_forecast}>预估金额</View>
</View>
<View className={styles.goPay}>
去结算
</View>
</View>
</View>
</Popup>
</View>
)
}

11
src/components/test.tsx
View File

@ -1,11 +0,0 @@
import { View } from "@tarojs/components"
export default () => {
return (
<>
<View>
abc
</View>
</>
)
}

14
src/pages/index/components/product/index.module.scss
View File

@ -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;

86
src/pages/index/components/product/index.tsx
View File

@ -2,78 +2,26 @@ import { Image, View } from "@tarojs/components"
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.products_list}>
<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"/>
{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>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</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>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<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>
<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>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<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>
<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>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<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>
<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>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<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>
<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>
<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
})}
</View>
)
}

8
src/pages/index/index.module.scss
View File

@ -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;
}
}

42
src/pages/index/index.tsx
View File

@ -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 (
<View className={styles.main}>
<Swiper/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}}/>
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
<Swiper/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}}/>
</View>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<Product/>
</SideBar>
</View>
<View className='common_safe_area_y'></View>
<ShopCart show={showShopCart} onClose={() => setShowShopCart(false)}/>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<Product/>
</SideBar>
</View>
<MovableArea className={styles.movableItem}>
<MovableView className={styles.moveBtn}>拖动</MovableView>
</MovableArea>
<View className='common_safe_area_y'></View>
</View>
</MoveBtn>
)
}

3
src/pages/shopCart/index.config.ts Normal file
View File

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

4
src/pages/shopCart/index.module.scss Normal file
View File

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

10
src/pages/shopCart/index.tsx Normal file
View File

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