panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

购物车界面布局修改

master
dy-hu 11 months ago
parent
3111fd4147
commit
51c35c78cf
1 changed files with 94 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      pages/tabbar/cart/index.vue

162
pages/tabbar/cart/index.vue
View File

@ -52,14 +52,14 @@
<image
mode="aspectFill u-skeleton-fillet"
v-if="item.selected === 1"
src="https://ceres.zkthink.com/static/images/selectActive.png"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_active.png"
class="cart-select-img"
@click.stop="handleSelectShop(index,0)"
></image>
<image
mode="aspectFill u-skeleton-fillet"
v-else
src="https://ceres.zkthink.com/static/images/selectEmpty.png"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_normal.png"
class="cart-select-img"
@click.stop="handleSelectShop(index,1)"
></image>
@ -101,14 +101,14 @@
<image
mode="aspectFill u-skeleton-fillet"
v-if="skuItem.selected == 1"
src="https://ceres.zkthink.com/static/images/selectActive.png"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_active.png"
@click.stop="handleSelectSku(index,cIndex,0)"
class="cart-select-img"
></image>
<image
mode="aspectFill u-skeleton-fillet"
v-else
src="https://ceres.zkthink.com/static/images/selectEmpty.png"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_normal.png"
@click.stop="handleSelectSku(index,cIndex,1)"
class="cart-select-img"
></image>
@ -130,18 +130,12 @@
<text class="fuhao">￥</text>
<text>{{ skuItem.price }}</text>
</view>
<view class="pro-num-box">
<text
class="num-btn r"
@click.stop="handleSubSkuNumber(index,cIndex)"
>-
</text>
<view class="cart-operate-num-box">
<image class="operate-img" @click.stop="handleSubSkuNumber(index,cIndex)"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_sub.png"/>
<text class="num">{{ skuItem.number }}</text>
<text
class="num-btn l"
@click.stop="handleAddSkuNumber(index,cIndex)"
>+
</text>
<image class="operate-img" @click.stop="handleAddSkuNumber(index,cIndex)"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_add.png"/>
</view>
</view>
</view>
@ -159,46 +153,40 @@
<view class="cart-bottom-box-app">
<!-- #endif -->
<view class="cart-bottom">
<view class="left">
<image
<view style="display: flex;flex-direction: column">
<view class="left">
<image
mode="aspectFill"
v-if="settleAccountsObj.isAllCheck"
src="https://ceres.zkthink.com/static/images/selectActive.png"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_active.png"
class="cart-select-img"
@click="handleSelectAll(0)"
></image>
<image
></image>
<image
mode="aspectFill"
v-else
src="https://ceres.zkthink.com/static/images/selectEmpty.png"
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_normal.png"
class="cart-select-img"
@click="handleSelectAll(1)"
></image>
<text>全选</text>
></image>
<text>全选（{{ settleAccountsObj.checkNum }}）</text>
</view>
<view class="total-title">合计：<text class="total-content">¥{{ settleAccountsObj.checkMoney }}</text></view>
</view>
<view
class="right"
<view class="right">
<view
v-if="!showManage"
>
<view class="price-box">
<text>合计：</text>
<text class="price">¥{{ settleAccountsObj.checkMoney }}</text>
</view>
class="btn-confirm"
@click="settlementTap"
>结算</view>
<view
class="btn-confirm"
@click="settlementTap"
>结算（{{ settleAccountsObj.checkNum }}）
</view>
</view>
<view
class="right"
v-if="showManage"
>
<view
class="btn-delete"
@click="handleOpenDelete"
>删除
</view>
class="btn-delete"
@click="handleOpenDelete"
>删除</view>
</view>
</view>
</view>
@ -741,6 +729,7 @@ export default {
scoped
>
.content {
//overflow: hidden;
//opacity: 0;
@ -782,7 +771,7 @@ export default {
.itemBox {
.item {
background: #fff;
background: #FAFAFA;
border-bottom: 16rpx solid #F8F9FA;
.shop-box {
@ -882,10 +871,12 @@ export default {
justify-content: space-between;
.pro-name {
height: 66rpx;
height: 50rpx;
line-height: 33rpx;
display: -webkit-box;
overflow: hidden;
font-size: 26rpx;
color: #252744;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
@ -896,16 +887,14 @@ export default {
width: auto;
display: inline;
height: 40rpx;
border-radius: 4rpx;
padding: 0 0 0 10rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #999;
color: #252744;
text {
/*text {
border: 2rpx solid #E4E5E6;
padding: 2rpx 10rpx;
}
}*/
}
.pro-price-num-box {
@ -915,8 +904,8 @@ export default {
justify-content: space-between;
.pro-price-box {
font-size: 36rpx;
color: #333333;
font-size: 26rpx;
color: #90919C;
font-weight: 400;
.fuhao {
@ -1017,13 +1006,15 @@ export default {
}
.cart-bottom {
height: 120rpx;
height: 190rpx;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid #eee;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
//border-top: 1rpx solid #eee;
}
.left {
@ -1031,16 +1022,30 @@ export default {
flex-direction: row;
align-items: center;
font-size: 28rpx;
color: #666;
color: #252744;
.cart-select-img {
width: 40rpx;
height: 40rpx;
margin: 30rpx;
margin-left: 50rpx;
margin-right: 15rpx;
box-sizing: border-box;
}
}
.total-title{
color: #252744;
font-size: 28rpx;
margin-left: 50rpx;
margin-top: 15rpx;
}
.total-content{
color: #252744;
font-size: 32rpx;
font-weight: bold;
}
.right {
display: flex;
flex-direction: row;
@ -1059,25 +1064,46 @@ export default {
}
.btn-confirm {
width: 232rpx;
height: 120rpx;
background: #333333;
margin-left: 18rpx;
width: 280rpx;
height: 98rpx;
background: #252744;
text-align: center;
line-height: 120rpx;
font-size: 28rpx;
color: #FFEBC4;
line-height: 98rpx;
font-size: 32rpx;
color: #FFFFFF;
margin-right: 50rpx;
border-radius: 50rpx;
}
.btn-delete {
width: 232rpx;
height: 120rpx;
line-height: 120rpx;
width: 280rpx;
height: 98rpx;
background: #F54639;
text-align: center;
font-size: 28rpx;
line-height: 98rpx;
font-size: 32rpx;
color: #FFFFFF;
background: #C83732;
margin-right: 50rpx;
border-radius: 50rpx;
}
}
}
.cart-operate-num-box {
width: 140rpx;
height: 40rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
.operate-img{
width: 40rpx;
height: 40rpx;
}
.num {
font-size: 26rpx;
color: #252744;
}
}
</style>
Write Preview
Loading…
Cancel
Save