🌈 style(首页): 修正加入购物车部分的样式
This commit is contained in:
xuan
parent
a2697b14af
commit
7500d060d2
@ -1,157 +1,141 @@
|
||||
.shopcartBox {
|
||||
padding-left: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
.topTitle {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
.topTitle {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-top: 24px;
|
||||
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 {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin-bottom: 24px;
|
||||
.modeFont {
|
||||
margin-right: 16px;
|
||||
width: 160px;
|
||||
height: 68px;
|
||||
background: #e9e9e9;
|
||||
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 {
|
||||
margin-bottom: 24px;
|
||||
// width: 686px;
|
||||
margin-right: 32px;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
.danwei {
|
||||
margin-left: 16px;
|
||||
width: 148px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e42945;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #e42945;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.typeFont {
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.searchBox {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.flexType {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
.scrollviewBig {
|
||||
.scrollview {
|
||||
// height: 300px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.kongBox {
|
||||
height: 181px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.posBox {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
|
||||
}
|
||||
.kongOne {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.noBottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.loading_more {
|
||||
height: 300px;
|
||||
padding-bottom: 200px;
|
||||
display: flex;
|
||||
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 {
|
||||
height: 900px;
|
||||
}
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@ import Goods from "@/components/goodsItem"
|
||||
import BottomCustomer from "@/components/BottomCustomer"
|
||||
import VirtualList from '@tarojs/components/virtual-list'
|
||||
import DotLoading from "@/components/dotLoading"
|
||||
import Divider from '../divider';
|
||||
interface prosObj {
|
||||
showPopup?: false | true,
|
||||
closePopup?: () => void,
|
||||
@ -119,64 +120,87 @@ export default memo(forwardRef((props: prosObj, ref) => {
|
||||
})
|
||||
|
||||
return (
|
||||
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
|
||||
<ScrollView className={styles.scrllStyle} scrollY>
|
||||
<View className={styles.shopcartBox}>
|
||||
<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}>
|
||||
{
|
||||
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.flexFonts}>
|
||||
<View className={styles.kingFont}>颜色分类({goodList?.length})</View>
|
||||
<View className={styles.danwei}>{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}</View>
|
||||
</View>
|
||||
<View className={styles.searchBox}>
|
||||
<Search cursorSpacing={100} placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} adjustPosition={true} />
|
||||
</View>
|
||||
{
|
||||
goodList.length > 0 && <>
|
||||
<View className={styles.scrollviewBig}>
|
||||
<VirtualList
|
||||
className={styles.scrollview}
|
||||
height={300} /* 列表的高度 */
|
||||
width='100%' /* 列表的宽度 */
|
||||
itemData={goodList} /* 渲染列表的数据 */
|
||||
itemCount={goodList.length + 0} /* 渲染列表的长度 */
|
||||
itemSize={100} /* 列表单项的高度 */
|
||||
overscanCount={1}>
|
||||
{rows}
|
||||
</VirtualList>
|
||||
|
||||
</View>
|
||||
|
||||
<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>
|
||||
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
|
||||
<ScrollView className={styles.scrllStyle} scrollY>
|
||||
<View className={styles.shopcartBox}>
|
||||
<View className={styles.topTitle}>
|
||||
{obj?.code}# {obj?.name}
|
||||
</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.flexType}>
|
||||
{typeList.map((item, index) => {
|
||||
return (
|
||||
<View
|
||||
onClick={() => {
|
||||
handCheck?.(item)
|
||||
}}
|
||||
key={index}
|
||||
className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<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
|
||||
cursorSpacing={100}
|
||||
placeholder='请输入搜索布料'
|
||||
showBtn={false}
|
||||
changeOnSearch={getSearchData}
|
||||
debounceTime={300}
|
||||
adjustPosition={true}
|
||||
/>
|
||||
</View>
|
||||
{goodList.length > 0 && (
|
||||
<>
|
||||
<View className={styles.scrollviewBig}>
|
||||
<VirtualList
|
||||
className={styles.scrollview}
|
||||
height={300} /* 列表的高度 */
|
||||
width='100%' /* 列表的宽度 */
|
||||
itemData={goodList} /* 渲染列表的数据 */
|
||||
itemCount={goodList.length + 0} /* 渲染列表的长度 */
|
||||
itemSize={100} /* 列表单项的高度 */
|
||||
overscanCount={1}>
|
||||
{rows}
|
||||
</VirtualList>
|
||||
</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>
|
||||
)
|
||||
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 30px 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
@ -36,4 +36,4 @@
|
||||
|
||||
}
|
||||
|
||||
//246
|
||||
//246
|
||||
|
||||
@ -2,7 +2,6 @@ import { View } from '@tarojs/components'
|
||||
import Search from '@/components/search'
|
||||
import SideBar from '@/components/sideBar'
|
||||
import Product from '@/components/product'
|
||||
import MoveBtn from '@/components/moveBtn'
|
||||
import ShopCart from '@/components/shoppingCart'
|
||||
import { goLink } from '@/common/common'
|
||||
import styles from './index.module.scss'
|
||||
@ -13,7 +12,6 @@ import { mpproductcolorlist, mpshoppingCartproductColorlist } from "@/api/order"
|
||||
import { dataLoadingStatus } from '@/common/util'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { getFilterData } from '@/common/util'
|
||||
import userInfo from '@/reducers/userInfo'
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
categoryList()
|
||||
@ -318,7 +316,7 @@ export default () => {
|
||||
<Product productList={productData.list} popupShow={(item) => showCart(item)} />
|
||||
</SideBar>
|
||||
</View>
|
||||
<View className='common_safe_area_y'></View>
|
||||
{/* <View className='common_safe_area_y'></View> */}
|
||||
<ShopCart handSure={() => handSure()}
|
||||
clientName={clientObj?.clientName}
|
||||
clientId={clientObj?.clientId}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user