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

🦄 refactor:首页购物车50%

Browse Source
This commit is contained in:
Haiyi
2022-09-02 19:06:57 +08:00
parent 671b94b961
commit f75de04f83
7 changed files with 452 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/goodsItem/index.module.scss
+126
View File
@@ -0,0 +1,126 @@
.goodsBox {
display: flex;
margin-bottom: 32px;
// justify-content: space-between;
.pic {
width: 118px;
height: 118px;
border-radius: 8px;
margin-right: 32px;
}
.rightGoodbox {
padding-bottom: 31px;
border-bottom: 1px solid #efefef;
display: flex;
justify-content: space-between;
// margin-right: 32px;
width: 538px;
.leftFontsbox {
.title {
width: 260px;
height: 34px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.productName {
width: 260px;
height: 30px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.productNums {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.rightFontsbox {
.money {
display: flex;
justify-content: flex-end;
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F41A39;
margin-bottom: 14px;
}
.inputBox {
width: 189px;
height: 64px;
border-radius: 8px;
border: 1px solid #979797;
display: flex;
.reduceBox {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
.reduce {
width: 20px;
height: 3px;
background: #000000;
border-radius: 1px;
opacity: 0.8;
}
}
.numsBox {
width: 61px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.addBox {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 35px;
}
}
.addtine {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 35px;
border-radius: 8px;
border: 1px solid #979797;
float: right;
}
}
}
}
src/components/goodsItem/index.tsx
+52
View File
@@ -0,0 +1,52 @@
import { View, ScrollView, Image, Input } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
interface props {
clickAdd: (any) => void,
onInputEven: (a: any, c: any) => void,
value: {
showInput?: boolean,
nums?: string
}
}
export default memo((props: props) => {
return (
<View className={styles.goodsBox}>
<Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
<View className={styles.rightGoodbox}>
<View className={styles.leftFontsbox}>
<View className={styles.title}>001# 环保黑</View>
<View className={styles.productName}>0681# 26S全棉平纹</View>
<View className={styles.productNums}>剩:109件</View>
</View>
<View className={styles.rightFontsbox}>
<View className={styles.money}>¥37.50/kg</View>
{
props.value.showInput && <View className={styles.inputBox}>
<View className={styles.reduceBox}>
<View className={styles.reduce}>
</View>
</View>
<View className={styles.numsBox}>
<Input type='number' value={props.value.nums} onInput={($event) => props.onInputEven($event, props)}></Input>
</View>
<View className={styles.addBox}>
+
</View>
</View>
}
{
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd(props.value)}>+</View>
}
</View>
</View>
</View>
)
})
src/components/product/index.tsx
+16 -15
View File
@@ -1,39 +1,40 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { goLink } from "@/common/common"
import styles from './index.module.scss'
import styles from './index.module.scss'
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
import LabAndImg from "../LabAndImg"
import { useCallback, useMemo } from "react"
type Params = {
desStatus?: true|false,
productList?: any[]
desStatus?: true | false,
productList?: any[],
popupShow?: (any) => void
}
export default ({desStatus = true, productList = []}:Params) => {
export default ({ desStatus = true, productList = [], popupShow }: Params) => {
const labAndImgObj = useCallback((item) => {
return {lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
}, [productList])
return (
<View className={styles.products_list}>
{productList?.map(item => {
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
return <View className={styles.products_item} onClick={() => popupShow?.(item)}>
<View className={styles.item_img}>
<LabAndImg value={labAndImgObj(item)}/>
<LabAndImg value={labAndImgObj(item)} />
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag_g}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>{item.component}</View>
{desStatus&&<View className={styles.des}>{item.describe}</View>}
<View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag_g}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>{item.component}</View>
{desStatus && <View className={styles.des}>{item.describe}</View>}
</View>
</View>
})}
</View>
</View >
)
}
src/components/shoppingCart/index.module.scss
+91
View File
@@ -0,0 +1,91 @@
.shopcartBox {
padding-left: 32px;
.topTitle {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-top: 24px;
margin-bottom: 8px;
}
.selectFont {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 24px;
}
.line {
margin-bottom: 24px;
width: 686px;
height: 1px;
background: #000000;
opacity: 0.1;
}
.typeFont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.flexType {
display: flex;
align-items: center;
margin-bottom: 32px;
.activemodeFont {
margin-right: 16px;
width: 160px;
height: 68px;
background: rgba(51, 127, 255, 0.1);
border-radius: 8px;
border: 1px solid #337FFF;
box-sizing: border-box;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
line-height: 68px;
}
.modeFont {
margin-right: 16px;
width: 160px;
height: 68px;
background: #E9E9E9;
border-radius: 8px;
opacity: 0.4;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
box-sizing: border-box;
text-align: center;
line-height: 68px;
}
}
.kingFont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.searchBox {
width: 686px;
margin-bottom: 32px;
}
.scrollview {
height: 500px;
}
}
src/components/shoppingCart/index.tsx
+105
View File
@@ -0,0 +1,105 @@
import { View, ScrollView } from '@tarojs/components'
import { useCallback, forwardRef, useEffect, useMemo, useRef, useState, memo, useImperativeHandle, } from 'react'
import Search from '@/components/search'
import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import Goods from "@/components/goodsItem"
interface prosObj {
showPopup?: false | true,
closePopup?: () => void,
goodList?: any[],
typeList?: any[],
handCheck?: (any) => void
}
export default memo(forwardRef((props: prosObj, ref) => {
const {
showPopup = false,
closePopup,
goodList = [],
typeList = [],
handCheck
} = props
useImperativeHandle(ref, () => ({
Object: props,
typeList: typeList
}))
//判断选择的类型
const showModefont = useMemo(() => {
const modeObj = typeList.filter(item => {
return item.checked
})
if (modeObj[0].id === 0) {
return '条'
} else {
return '米'
}
}, [typeList])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
}, [])
//商品数据
// const [goodList, setGoodlist] = useState<any[]>(['a'])
//点击加
const addNums = (item) => {
console.log(item, 4444)
}
//输入框监听
const oninputEvent = useCallback((e, obj) => {
console.log(e, obj, '123123')
}, [])
return (
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
<View className={styles.shopcartBox}>
<View className={styles.topTitle}>0681# 26S全棉平纹</View>
<View className={styles.selectFont}>已选 1 种面料，1 个颜色，共 4 {showModefont}</View>
<View className={styles.line}></View>
<View className={styles.typeFont}>布料类型</View>
<View className={styles.flexType}>
{
typeList.map((item, index) => {
return (
<View onClick={() => { handCheck?.(item) }} key={index} className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>{item.name}</View>
)
})
}
</View>
<View className={styles.line}></View>
<View className={styles.kingFont}>颜色分类(33)</View>
<View className={styles.searchBox}>
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
</View>
<ScrollView
className={styles.scrollview}
scroll-y={true}
showScrollbar={false}
enhanced={true}
>
{
goodList.map((item, index) => {
return (
<Goods key={index} value={item} onInputEven={(e, obj) => oninputEvent(e, obj)} clickAdd={(item) => addNums(item)} ></Goods>
)
})
}
</ScrollView>
</View>
</Popup>
)
}))