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

🌈 style(首页): 修正加入购物车部分的样式

Browse Source
This commit is contained in:
xuan 2022-10-25 17:13:24 +08:00
parent a2697b14af
commit 7500d060d2
4 changed files with 205 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
src/components/shoppingCart/index.module.scss
View File

@ -1,157 +1,141 @@
.shopcartBox { .shopcartBox {
padding-left: 32px; padding: 0 32px;
.topTitle { .topTitle {
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 500;
font-weight: 500; color: #000000;
color: #000000; margin-top: 24px;
margin-top: 24px; margin-bottom: 8px;
margin-bottom: 8px; }
.selectFont {
font-size: 24px;
font-weight: 400;
color: #000000;
margin-bottom: 24px;
}
.line {
margin-bottom: 24px;
height: 1px;
background: #000000;
opacity: 0.1;
}
.typeFont {
font-size: 28px;
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-weight: 400;
color: #337fff;
text-align: center;
line-height: 68px;
} }
.selectFont { .modeFont {
font-size: 24px; margin-right: 16px;
font-family: PingFangSC-Regular, PingFang SC; width: 160px;
font-weight: 400; height: 68px;
color: #000000; background: #e9e9e9;
margin-bottom: 24px; border-radius: 8px;
opacity: 0.4;
font-size: 28px;
font-weight: 400;
color: #000000;
box-sizing: border-box;
text-align: center;
line-height: 68px;
}
}
.flexFonts {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
align-items: center;
padding-bottom: 10px;
.kingFont {
font-size: 28px;
font-weight: 500;
color: #000000;
} }
.line { .danwei {
margin-bottom: 24px; margin-left: 16px;
// width: 686px; width: 148px;
margin-right: 32px; height: 30px;
height: 1px; border-radius: 4px;
background: #000000; border: 1px solid #e42945;
opacity: 0.1; font-size: 22px;
font-weight: 500;
color: #e42945;
text-align: center;
line-height: 30px;
} }
}
.typeFont { .searchBox {
font-size: 28px; margin-bottom: 32px;
font-family: PingFangSC-Medium, PingFang SC; }
font-weight: 500;
color: #000000;
margin-bottom: 24px;
}
.flexType { .scrollviewBig {
display: flex; .scrollview {
align-items: center; // height: 300px;
margin-bottom: 32px;
.activemodeFont { .kongBox {
margin-right: 16px; height: 181px;
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;
}
}
.flexFonts {
display: flex;
margin-bottom: 24px;
align-items: center;
padding-bottom: 10px;
.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 {
// margin-left: 32px;
margin-right: 32px;
// width: 686px;
margin-bottom: 32px;
}
.scrollviewBig {
.scrollview {
// height: 300px;
.kongBox {
height: 181px;
width: 100%;
}
}
}
.kongOne {
height: 200px;
}
.loading_more {
height: 300px;
padding-bottom: 200px;
display: flex;
align-items: center;
width: 100%; width: 100%;
justify-content: center; }
} }
}
.posBox { .kongOne {
width: 100%; height: 200px;
position: fixed; }
z-index: 999;
bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
}
.noBottom { .loading_more {
width: 100%; height: 300px;
position: fixed; padding-bottom: 200px;
z-index: 999; display: flex;
bottom: env(safe-area-inset-bottom); align-items: center;
} width: 100%;
justify-content: center;
}
.posBox {
width: 100%;
position: fixed;
z-index: 999;
bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
}
.noBottom {
width: 100%;
position: fixed;
z-index: 999;
bottom: env(safe-area-inset-bottom);
}
} }
.scrllStyle { .scrllStyle {
height: 900px; height: 75vh;
} }

136
src/components/shoppingCart/index.tsx
View File

@ -8,6 +8,7 @@ import Goods from "@/components/goodsItem"
import BottomCustomer from "@/components/BottomCustomer" import BottomCustomer from "@/components/BottomCustomer"
import VirtualList from '@tarojs/components/virtual-list' import VirtualList from '@tarojs/components/virtual-list'
import DotLoading from "@/components/dotLoading" import DotLoading from "@/components/dotLoading"
import Divider from '../divider';
interface prosObj { interface prosObj {
showPopup?: false | true, showPopup?: false | true,
closePopup?: () => void, closePopup?: () => void,
@ -119,64 +120,87 @@ export default memo(forwardRef((props: prosObj, ref) => {
}) })
return ( return (
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}> <Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
<ScrollView className={styles.scrllStyle} scrollY> <ScrollView className={styles.scrllStyle} scrollY>
<View className={styles.shopcartBox}> <View className={styles.shopcartBox}>
<View className={styles.topTitle}>{obj?.code}# {obj?.name}</View> <View className={styles.topTitle}>
<View className={styles.selectFont}>已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}</View> {obj?.code}# {obj?.name}
<View className={styles.line}></View> </View>
<View className={styles.typeFont}>布料类型</View> <View className={styles.selectFont}>
<View className={styles.flexType}> 已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}
{ </View>
typeList.map((item, index) => { <Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
return ( <View className={styles.typeFont}>布料类型</View>
<View onClick={() => { handCheck?.(item) }} key={index} className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>{item.name}</View> <View className={styles.flexType}>
) {typeList.map((item, index) => {
}) return (
} <View
</View> onClick={() => {
<View className={styles.line}></View> handCheck?.(item)
<View className={styles.flexFonts}> }}
<View className={styles.kingFont}>颜色分类({goodList?.length})</View> key={index}
<View className={styles.danwei}>{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}</View> className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>
</View> {item.name}
<View className={styles.searchBox}> </View>
<Search cursorSpacing={100} placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} adjustPosition={true} /> )
</View> })}
{ </View>
goodList.length > 0 && <> <Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.scrollviewBig}> <View className={styles.flexFonts}>
<VirtualList <View className={styles.kingFont}>颜色分类({goodList?.length})</View>
className={styles.scrollview} <View className={styles.danwei}>
height={300} /* 列表的高度 */ {modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}
width='100%' /* 列表的宽度 */ </View>
itemData={goodList} /* 渲染列表的数据 */ </View>
itemCount={goodList.length + 0} /* 渲染列表的长度 */ <View className={styles.searchBox}>
itemSize={100} /* 列表单项的高度 */ <Search
overscanCount={1}> cursorSpacing={100}
{rows} placeholder='请输入搜索布料'
</VirtualList> showBtn={false}
changeOnSearch={getSearchData}
</View> debounceTime={300}
adjustPosition={true}
<View className={styles.kongOne}></View> />
</> </View>
} {goodList.length > 0 && (
{ <>
goodList.length === 0 && <> <View className={styles.scrollviewBig}>
<View className={styles.loading_more}>加载中<DotLoading /></View> <VirtualList
</> className={styles.scrollview}
} height={300} /* 列表的高度 */
{ width='100%' /* 列表的宽度 */
!hasBottom && <View style={{ height: '100rpx' }}></View> itemData={goodList} /* 渲染列表的数据 */
} itemCount={goodList.length + 0} /* 渲染列表的长度 */
<View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}> itemSize={100} /* 列表单项的高度 */
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer> overscanCount={1}>
</View> {rows}
</VirtualList>
</View> </View>
</ScrollView>
</Popup>
<View className={styles.kongOne}></View>
</>
)}
{goodList.length === 0 && (
<>
<View className={styles.loading_more}>
加载中
<DotLoading />
</View>
</>
)}
{!hasBottom && <View style={{ height: '100rpx' }}></View>}
<View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}>
<BottomCustomer
clientName={clientName}
clientId={clientId}
isDisabled={selectTotal > 0 && clientName !== '' ? false : true}
handSure={() => {
handSure()
}}></BottomCustomer>
</View>
</View>
</ScrollView>
</Popup>
) )

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

@ -8,7 +8,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20px 20px 30px 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
@ -36,4 +36,4 @@
} }
//246 //246

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

@ -2,7 +2,6 @@ import { View } from '@tarojs/components'
import Search from '@/components/search' import Search from '@/components/search'
import SideBar from '@/components/sideBar' import SideBar from '@/components/sideBar'
import Product from '@/components/product' import Product from '@/components/product'
import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shoppingCart' import ShopCart from '@/components/shoppingCart'
import { goLink } from '@/common/common' import { goLink } from '@/common/common'
import styles from './index.module.scss' import styles from './index.module.scss'
@ -13,7 +12,6 @@ import { mpproductcolorlist, mpshoppingCartproductColorlist } from "@/api/order"
import { dataLoadingStatus } from '@/common/util' import { dataLoadingStatus } from '@/common/util'
import Taro, { useDidShow } from '@tarojs/taro' import Taro, { useDidShow } from '@tarojs/taro'
import { getFilterData } from '@/common/util' import { getFilterData } from '@/common/util'
import userInfo from '@/reducers/userInfo'
export default () => { export default () => {
useEffect(() => { useEffect(() => {
categoryList() categoryList()
@ -318,7 +316,7 @@ export default () => {
<Product productList={productData.list} popupShow={(item) => showCart(item)} /> <Product productList={productData.list} popupShow={(item) => showCart(item)} />
</SideBar> </SideBar>
</View> </View>
<View className='common_safe_area_y'></View> {/* <View className='common_safe_area_y'></View> */}
<ShopCart handSure={() => handSure()} <ShopCart handSure={() => handSure()}
clientName={clientObj?.clientName} clientName={clientObj?.clientName}
clientId={clientObj?.clientId} clientId={clientObj?.clientId}