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

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

@ -1,9 +1,8 @@
.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;
@ -12,7 +11,6 @@
.selectFont { .selectFont {
font-size: 24px; font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
margin-bottom: 24px; margin-bottom: 24px;
@ -20,8 +18,6 @@
.line { .line {
margin-bottom: 24px; margin-bottom: 24px;
// width: 686px;
margin-right: 32px;
height: 1px; height: 1px;
background: #000000; background: #000000;
opacity: 0.1; opacity: 0.1;
@ -29,7 +25,6 @@
.typeFont { .typeFont {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
margin-bottom: 24px; margin-bottom: 24px;
@ -46,12 +41,11 @@
height: 68px; height: 68px;
background: rgba(51, 127, 255, 0.1); background: rgba(51, 127, 255, 0.1);
border-radius: 8px; border-radius: 8px;
border: 1px solid #337FFF; border: 1px solid #337fff;
box-sizing: border-box; box-sizing: border-box;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #337FFF; color: #337fff;
text-align: center; text-align: center;
line-height: 68px; line-height: 68px;
} }
@ -60,11 +54,10 @@
margin-right: 16px; margin-right: 16px;
width: 160px; width: 160px;
height: 68px; height: 68px;
background: #E9E9E9; background: #e9e9e9;
border-radius: 8px; border-radius: 8px;
opacity: 0.4; opacity: 0.4;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
box-sizing: border-box; box-sizing: border-box;
@ -75,16 +68,15 @@
.flexFonts { .flexFonts {
display: flex; display: flex;
justify-content: space-between;
margin-bottom: 24px; margin-bottom: 24px;
align-items: center; align-items: center;
padding-bottom: 10px; padding-bottom: 10px;
.kingFont { .kingFont {
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
} }
.danwei { .danwei {
@ -92,20 +84,16 @@
width: 148px; width: 148px;
height: 30px; height: 30px;
border-radius: 4px; border-radius: 4px;
border: 1PX solid #E42945; border: 1px solid #e42945;
font-size: 22px; font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #E42945; color: #e42945;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
} }
} }
.searchBox { .searchBox {
// margin-left: 32px;
margin-right: 32px;
// width: 686px;
margin-bottom: 32px; margin-bottom: 32px;
} }
@ -118,8 +106,6 @@
width: 100%; width: 100%;
} }
} }
} }
.kongOne { .kongOne {
@ -148,10 +134,8 @@
z-index: 999; z-index: 999;
bottom: env(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom);
} }
} }
.scrllStyle { .scrllStyle {
height: 900px; height: 75vh;
} }

76
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,
@ -122,61 +123,84 @@ export default memo(forwardRef((props: prosObj, ref) => {
<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.selectFont}>
已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}
</View>
<Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.typeFont}>布料类型</View> <View className={styles.typeFont}>布料类型</View>
<View className={styles.flexType}> <View className={styles.flexType}>
{ {typeList.map((item, index) => {
typeList.map((item, index) => {
return ( return (
<View onClick={() => { handCheck?.(item) }} key={index} className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>{item.name}</View> <View
) onClick={() => {
}) handCheck?.(item)
} }}
key={index}
className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>
{item.name}
</View> </View>
<View className={styles.line}></View> )
})}
</View>
<Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
<View className={styles.flexFonts}> <View className={styles.flexFonts}>
<View className={styles.kingFont}>颜色分类({goodList?.length})</View> <View className={styles.kingFont}>颜色分类({goodList?.length})</View>
<View className={styles.danwei}>{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}</View> <View className={styles.danwei}>
{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}
</View>
</View> </View>
<View className={styles.searchBox}> <View className={styles.searchBox}>
<Search cursorSpacing={100} placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} adjustPosition={true} /> <Search
cursorSpacing={100}
placeholder='请输入搜索布料'
showBtn={false}
changeOnSearch={getSearchData}
debounceTime={300}
adjustPosition={true}
/>
</View> </View>
{ {goodList.length > 0 && (
goodList.length > 0 && <> <>
<View className={styles.scrollviewBig}> <View className={styles.scrollviewBig}>
<VirtualList <VirtualList
className={styles.scrollview} className={styles.scrollview}
height={300} /* 列表的高度 */ height={300} /* 列表的高度 */
width='100%' /* 列表的宽度 */ width='100%' /* 列表的宽度 */
itemData={goodList} /* 渲染列表的数据 */ itemData={goodList} /* 渲染列表的数据 */
itemCount={goodList.length + 0} /* 渲染列表的长度 */ itemCount={goodList.length + 0} /* 渲染列表的长度 */
itemSize={100} /* 列表单项的高度 */ itemSize={100} /* 列表单项的高度 */
overscanCount={1}> overscanCount={1}>
{rows} {rows}
</VirtualList> </VirtualList>
</View> </View>
<View className={styles.kongOne}></View> <View className={styles.kongOne}></View>
</> </>
} )}
{ {goodList.length === 0 && (
goodList.length === 0 && <> <>
<View className={styles.loading_more}>加载中<DotLoading /></View> <View className={styles.loading_more}>
加载中
<DotLoading />
</View>
</> </>
} )}
{ {!hasBottom && <View style={{ height: '100rpx' }}></View>}
!hasBottom && <View style={{ height: '100rpx' }}></View>
}
<View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}> <View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}>
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer> <BottomCustomer
clientName={clientName}
clientId={clientId}
isDisabled={selectTotal > 0 && clientName !== '' ? false : true}
handSure={() => {
handSure()
}}></BottomCustomer>
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
</Popup> </Popup>
) )

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

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}