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

🦄 refactor:首页加入购物车

Browse Source
This commit is contained in:
Haiyi
2022-09-05 18:09:35 +08:00
parent f75de04f83
commit 1bf5d3f69e
13 changed files with 612 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BottomCustomer/index.module.scss
+60
View File
@@ -0,0 +1,60 @@
.bottomBox {
width: 100%;
height: 132px;
background: #FFFFFF;
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
display: flex;
padding-top: 16px;
align-items: center;
justify-content: space-between;
overflow: hidden;
.leftBottom {
display: flex;
align-items: center;
margin-left: 12px;
.nowFont {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.selctFont {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #236AFF;
margin-left: 10px;
}
}
.button {
margin-right: 50px;
width: 256px;
height: 80px;
background: #4581FF;
border-radius: 40px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
.activeButton {
margin-right: 50px;
width: 256px;
height: 80px;
background: #68b4ff;
border-radius: 40px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 80px;
}
}
src/components/BottomCustomer/index.tsx
+36
View File
@@ -0,0 +1,36 @@
import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro from '@tarojs/taro'
type prosObj = {
isDisabled: boolean,
handSure?: () => void,
clientId?: Number,
clientName?: string
}
export default memo((props: prosObj) => {
const {
isDisabled = true,
handSure,
clientName = ''
} = props
const navTo = () => {
Taro.navigateTo({
url: '/pages/customerPage/index?clientId=' + props?.clientId
})
}
return (
<View className={styles.bottomBox}>
<View className={styles.leftBottom} onClick={() => { navTo() }}>
<View className={styles.nowFont}>当前客户：</View>
<View className={styles.selctFont}>{clientName === '' ? '请选择客户 >' : clientName}</View>
</View>
<Button className={classnames(isDisabled ? styles.activeButton : styles.button)} disabled={isDisabled} onClick={() => { handSure?.() }}> 加入购物车</Button >
</View >
)
})
src/components/goodsItem/index.module.scss
+2
View File
@@ -30,6 +30,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: 0, 124, 247;
}
.productName {
@@ -96,6 +97,7 @@
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
}
.addBox {
src/components/goodsItem/index.tsx
+33 -11
View File
@@ -6,9 +6,19 @@ import classnames from "classnames";
interface props {
clickAdd: (any) => void,
onInputEven: (a: any, c: any) => void,
clickReduce: (any) => void,
handPlus: (any) => void,
modeFont?: number
value: {
showInput?: boolean,
nums?: string
nums?: string,
bulk_price?: Number | 0,
length_cut_price?: Number,
weight_cut_price?: Number,
code?: string,
rgb?: { r: number, g: number, b: number },
name?: string,
roll?: number | string
}
}
@@ -16,34 +26,46 @@ interface props {
export default memo((props: props) => {
const type = useMemo(() => {
if (props.modeFont === 0) {
return 'number'
} else {
return 'type'
}
}, [props.modeFont])
return (
<View className={styles.goodsBox}>
<Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
{
props.value?.rgb?.r == 0 && props.value?.rgb?.g == 0 && props.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
}
{
(props.value?.rgb?.r != 0 || props.value?.rgb?.g != 0 || props.value?.rgb?.b != 0) &&
<View className={styles.pic} style={{ backgroundColor: `rgb(${props.value.rgb?.r} ${props.value.rgb?.g} ${props.value.rgb?.b})` }}></View>
}
<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 className={styles.title}>{props.value.code} {props.value.name}环保黑</View>
{/* <View className={styles.productName}>0681# 26S全棉平纹</View> */}
<View className={styles.productNums}>剩:{props.value?.roll}件</View>
</View>
<View className={styles.rightFontsbox}>
<View className={styles.money}>¥37.50/kg</View>
<View className={styles.money}>¥{props.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'}</View>
{
props.value.showInput && <View className={styles.inputBox}>
<View className={styles.reduceBox}>
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
<View className={styles.reduce}>
</View>
</View>
<View className={styles.numsBox}>
<Input type='number' value={props.value.nums} onInput={($event) => props.onInputEven($event, props)}></Input>
<Input type={type as any} value={props.value.nums} onInput={($event) => props.onInputEven($event, props.value)}></Input>
</View>
<View className={styles.addBox}>
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
+
</View>
</View>
}
{
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd(props.value)}>+</View>
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd?.(props.value)}>+</View>
}
</View>
</View>
src/components/shoppingCart/index.module.scss
+37 -5
View File
@@ -72,12 +72,33 @@
}
}
.kingFont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
.flexFonts {
display: flex;
margin-bottom: 24px;
align-items: center;
.kingFont {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.danwei {
margin-left: 16px;
width: 148px;
height: 30px;
border-radius: 4px;
border: 1px solid #E42945;
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E42945;
text-align: center;
line-height: 30px;
}
}
.searchBox {
@@ -87,5 +108,16 @@
.scrollview {
height: 500px;
.kongBox {
height: 181px;
width: 100%;
}
}
.posBox {
width: 100%;
position: fixed;
bottom: 0;
}
}
src/components/shoppingCart/index.tsx
+56 -23
View File
@@ -5,13 +5,29 @@ import styles from "./index.module.scss"
import classnames from "classnames";
import Popup from '@/components/popup'
import Goods from "@/components/goodsItem"
import BottomCustomer from "@/components/BottomCustomer"
interface prosObj {
showPopup?: false | true,
closePopup?: () => void,
goodList?: any[],
typeList?: any[],
handCheck?: (any) => void
handCheck?: (any) => void,
addNums?: (any) => void
reduceNums?: (any) => void
oninputEvent?: (e: string, res: object) => void,
getSearchData: (any) => void,
handPlus: (any) => void,
handSure: () => void,
obj?: {
code?: string,
name?: string,
},
modeFont: Number | string,
clientName: string,
clientId: Number
}
export default memo(forwardRef((props: prosObj, ref) => {
const {
@@ -19,7 +35,17 @@ export default memo(forwardRef((props: prosObj, ref) => {
closePopup,
goodList = [],
typeList = [],
handCheck
handCheck,
addNums,
reduceNums,
oninputEvent,
getSearchData,
handPlus,
obj = {},
modeFont = 0,
clientName = '',
clientId = -1,
handSure
} = props
useImperativeHandle(ref, () => ({
@@ -41,31 +67,34 @@ export default memo(forwardRef((props: prosObj, ref) => {
}
}, [typeList])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
//已选的颜色
const selectTotal = useMemo(() => {
const totalArr = goodList.filter(item => {
return item.showInput
})
return totalArr.length
}, [goodList])
}, [])
//选择的条数或者米数
const selectNums = useMemo(() => {
var s = 0;
goodList.forEach(function (val, idx, arr) {
if (val.showInput) {
s += val.nums;
}
}, 0);
//商品数据
// const [goodList, setGoodlist] = useState<any[]>(['a'])
return s;
}, [goodList])
//点击加
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.topTitle}>{obj?.code}# {obj?.name}</View>
<View className={styles.selectFont}>已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}</View>
<View className={styles.line}></View>
<View className={styles.typeFont}>布料类型</View>
<View className={styles.flexType}>
@@ -78,26 +107,30 @@ export default memo(forwardRef((props: prosObj, ref) => {
}
</View>
<View className={styles.line}></View>
<View className={styles.kingFont}>颜色分类(33)</View>
<View className={styles.flexFonts}>
<View className={styles.kingFont}>颜色分类({goodList?.length})</View>
<View className={styles.danwei}>{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}</View>
</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>
<Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
)
})
}
<View className={styles.kongBox}></View>
</ScrollView>
<View className={styles.posBox}>
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
</View>
</View>
</Popup>