ecshop/ECShopX_mobile-frontend
1
0
Fork 0
mirror of https://gitee.com/ShopeX/ECShopX_mobile-frontend synced 2026-08-11 22:15:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(custom): 优化收银台样式

Browse Source
This commit is contained in:
lukaijie
2025-10-30 15:26:48 +08:00
parent cedee5d217
commit 912b0245f4
8 changed files with 148 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/sp-page/index.js
View File

@@ -442,7 +442,8 @@ const SpPage = memo(
<View
className='sp-page__body'
style={styleNames({
'height': state.lock ? `${state.bodyHeight}px` : '100%',
// 'height': state.lock ? `${state.bodyHeight}px` : '100%',
'height': `${state.bodyHeight}px`,
'padding-top': `${state.customNavigation && !props.immersive ? state.gNavbarH : 0}px`,
'padding-bottom': props.renderFooter
? Taro.pxTransform(

131
src/subpages/dianwu/cashier.js
View File

@@ -353,7 +353,75 @@ function DianWuCashier() {
}
return (
<SpPage className='page-dianwu-cashier' ref={pageRef} renderFooter={<CompTabbar />}>
<SpPage
className='page-dianwu-cashier'
footerHeight={cartList.length > 0 ? 202 + 66 : 202}
ref={pageRef}
renderFooter={
<View>
{cartList.length > 0 && (
<View className='total-bar'>
<View className='lf'>
<View className='total-mount'>
合计 <SpPrice size={28} value={cartList[0]?.totalPrice} />
</View>
<View className='discount-mount'>
已优惠 <SpPrice size={28} value={cartList[0]?.discountFee} />
</View>
</View>
<View
className='rg'
onClick={() => {
setState((draft) => {
draft.discountDetailLayout = true
})
}}
>
优惠详情<Text className='iconfont icon-qianwang-01'></Text>
</View>
</View>
)}
<View className='footer-wrap'>
<View className='total-info'>
<View className='real-mount'>
<Text className='label'>应收 </Text>
<SpPrice value={cartList[0]?.totalFee || 0} />
</View>
<View className='txt'>已选择{cartList[0]?.totalNum || 0}件商品</View>
</View>
<View className='g-button'>
<View className='g-button__first' onClick={handleOrderPendding}>
{cartList.length == 0 ? '取单' : '挂单'}
</View>
<View
className='g-button__second'
onClick={() => {
if (cartList.length == 0) {
showToast('请添加商品')
return
}
setState((draft) => {
draft.isCameraOpend = false
})
Taro.navigateTo({
url: `/subpages/dianwu/checkout?distributor_id=${distributor_id}`,
events: {
onEventFetchOrder: () => {
getCashierList()
}
}
})
}}
>
结算收银
</View>
</View>
</View>
<CompTabbar />
</View>
}
>
<View className='block-tools'>
<SpSearchInput
placeholder='商品名称/货号/条码'
@@ -578,29 +646,6 @@ function DianWuCashier() {
)} */}
</ScrollView>
{cartList.length > 0 && (
<View className='total-bar'>
<View className='lf'>
<View className='total-mount'>
合计 <SpPrice size={28} value={cartList[0]?.totalPrice} />
</View>
<View className='discount-mount'>
已优惠 <SpPrice size={28} value={cartList[0]?.discountFee} />
</View>
</View>
<View
className='rg'
onClick={() => {
setState((draft) => {
draft.discountDetailLayout = true
})
}}
>
优惠详情<Text className='iconfont icon-qianwang-01'></Text>
</View>
</View>
)}
<SpFloatLayout
title='优惠详情'
open={discountDetailLayout}
@@ -623,44 +668,6 @@ function DianWuCashier() {
</View>
</SpFloatLayout>
<View className='footer-wrap'>
<View className='total-info'>
<View className='real-mount'>
<Text className='label'>应收 </Text>
<SpPrice value={cartList[0]?.totalFee || 0} />
</View>
<View className='txt'>已选择{cartList[0]?.totalNum || 0}件商品</View>
</View>
<View className='g-button'>
<View className='g-button__first' onClick={handleOrderPendding}>
{cartList.length == 0 ? '取单' : '挂单'}
</View>
<View
className='g-button__second'
onClick={() => {
if (cartList.length == 0) {
showToast('请添加商品')
return
}
setState((draft) => {
draft.isCameraOpend = false
})
Taro.navigateTo({
url: `/subpages/dianwu/checkout?distributor_id=${distributor_id}`,
events: {
onEventFetchOrder: () => {
getCashierList()
}
}
})
}}
>
结算收银
</View>
</View>
</View>
<SpFloatLayout
className='layout-search-result'
title={

49
src/subpages/dianwu/cashier.scss
View File

@@ -12,16 +12,11 @@
$footer-height + $page-footer-height + 66px
);
}
&.ipx {
.item-list-scroll {
@include page-scroll(
$header-height + $camera-height + 168px,
$footer-height + $page-ipx-footer-height + 66px
);
}
}
.item-list {
margin-top: 24px;
height: calc(100% - $header-height);
overflow-y: scroll;
box-sizing: border-box;
}
.block-tools {
display: flex;
@@ -238,8 +233,7 @@
}
}
.block-goods {
// margin-top: 24px;
padding: 0 20px;
padding: 20px;
.item-wrap {
background-color: #fff;
&:not(:last-child) {
@@ -342,18 +336,18 @@
display: flex;
flex-direction: column;
width: 123px;
border-left: 1px solid #dadada;
border-left: 1px solid #e4e4e4;
&-count {
display: flex;
height: 60px;
border-bottom: 1px solid #dadada;
border-bottom: 1px solid #e4e4e4;
.count-option {
flex: 1;
line-height: 60px;
text-align: center;
font-size: 32px;
&:first-child {
border-right: 1px solid #dadada;
border-right: 1px solid #e4e4e4;
}
}
}
@@ -368,7 +362,8 @@
text-align: center;
font-size: 28px;
input {
padding-right: 0;
padding: 0 20px;
text-align: center;
}
&:after {
border-color: transparent;
@@ -380,21 +375,13 @@
line-height: 50px;
text-align: center;
font-size: 30px;
border-top: 1px solid #dadada;
border-top: 1px solid #e4e4e4;
}
}
}
&.ipx {
.footer-wrap {
bottom: $tabbar-ipx-height;
}
}
.footer-wrap {
position: fixed;
left: 0;
right: 0;
bottom: $tabbar-height;
height: $footer-height;
height: 106px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -450,11 +437,7 @@
font-size: 26px;
}
}
&.ipx {
.total-bar {
bottom: $footer-height + $tabbar-ipx-height;
}
}
.total-bar {
height: 66px;
background: #e2ebfd;
@@ -462,10 +445,6 @@
align-items: center;
padding: 0 30px;
justify-content: space-between;
position: fixed;
bottom: $footer-height + $tabbar-height;
left: 0;
right: 0;
z-index: 1000;
.lf {
color: #4980ff;

20
src/subpages/dianwu/comps/comp-tabbar.js
View File

@@ -62,17 +62,15 @@ function CompTabbar(props) {
}
return (
<AtTabBar
fixed
classNames={classNames({
'comp-tabbar': true
})}
iconSize='20'
selectedColor='#4d84fc'
tabList={tabList}
onClick={handleTabbarClick}
current={currentIndex}
/>
<View className='comp-tabbar'>
<AtTabBar
iconSize='20'
selectedColor='#4d84fc'
tabList={tabList}
onClick={handleTabbarClick}
current={currentIndex}
/>
</View>
)
}

8
src/subpages/dianwu/comps/comp-tabbar.scss
View File

@@ -0,0 +1,8 @@
.comp-tabbar {
height: 96px;
.at-tab-bar {
position: initial;
box-shadow: none;
}
}

43
src/subpages/dianwu/list.js
View File

@@ -91,7 +91,32 @@ function DianWuList() {
}
return (
<SpPage className='page-dianwu-list' scrollToTopBtn renderFooter={<CompTabbar />}>
<SpPage
className='page-dianwu-list'
footerHeight={202}
scrollToTopBtn
renderFooter={
<View>
<View className='footer-wrap'>
<View className='total-info'>
<SpPrice value={cartList[0]?.totalPrice || 0} size={38} />
<View className='txt'>已选择 {cartList[0]?.totalNum || 0} 件商品</View>
</View>
<View
className='btn-confirm'
onClick={() => {
Taro.navigateTo({
url: `/subpages/dianwu/cashier?distributor_id=${distributor_id}`
})
}}
>
进入收银台
</View>
</View>
<CompTabbar />
</View>
}
>
<View className='search-block'>
<SpSearchInput
placeholder='商品名称/商品货号/商品条形码'
@@ -135,22 +160,6 @@ function DianWuList() {
))
})}
</SpScrollView>
<View className='footer-wrap'>
<View className='total-info'>
<SpPrice value={cartList[0]?.totalPrice || 0} size={38} />
<View className='txt'>已选择 {cartList[0]?.totalNum || 0} 件商品</View>
</View>
<View
className='btn-confirm'
onClick={() => {
Taro.navigateTo({
url: `/subpages/dianwu/cashier?distributor_id=${distributor_id}`
})
}}
>
进入收银台
</View>
</View>
</SpPage>
)
}

35
src/subpages/dianwu/list.scss
View File

@@ -5,14 +5,9 @@
$tabbar-ipx-height: 140px !default;
// font-family: Helvetica;
// padding-top: 170px;
&.ipx {
.sp-page__body {
height: calc(100vh - 140px);
}
}
.sp-page__body {
position: relative;
height: calc(100vh - 120px);
}
.search-block {
display: flex;
@@ -20,21 +15,18 @@
padding: 0 20px;
height: $header-height;
background-color: #fff;
}
&.ipx {
.footer-wrap {
bottom: $tabbar-ipx-height;
.sp-search-input {
width: 100%;
}
}
.footer-wrap {
position: fixed;
left: 0;
right: 0;
bottom: $tabbar-height;
height: $footer-height;
height: 106px;
display: flex;
justify-content: space-between;
padding: 10px 40px;
align-items: center;
padding: 0 40px;
background: #ffffff;
z-index: 1000;
box-sizing: border-box;
@@ -43,7 +35,7 @@
flex-direction: column;
justify-content: center;
flex: 1;
height: 100px;
height: 90px;
background: #111a34;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.14);
border-radius: 50px 0 0 50px;
@@ -67,9 +59,9 @@
}
.btn-confirm {
width: 245px;
height: 100px;
height: 90px;
text-align: center;
line-height: 100px;
line-height: 90px;
background: var(--color-dianwu-primary);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.14);
border-radius: 0px 50px 50px 0px;
@@ -89,7 +81,10 @@
}
.item-list-scroll {
padding: 20px 0;
@include page-scroll($header-height, $footer-height);
// @include page-scroll($header-height, $footer-height);
height: calc(100% - $header-height);
overflow-y: scroll;
box-sizing: border-box;
}
.item-wrap {
padding: 25px 20px;

6
src/subpages/dianwu/pending-checkout.js
View File

@@ -114,7 +114,11 @@ function DianwuPendingCheckout(props) {
}
return (
<SpPage className='page-dianwu-pending-checkout' renderFooter={<CompTabbar />}>
<SpPage
className='page-dianwu-pending-checkout'
footerHeight={96}
renderFooter={<CompTabbar />}
>
<SpScrollView className='pending-checkout-list' ref={listRef} fetch={fetch}>
{list.map((items, index) => {
return items.map((item, sidx) => (