【优化】优化模板库内点餐模块样式效果。

This commit is contained in:
大灰灰
2022-09-27 22:52:23 +08:00
parent ea7603facf
commit 8936876c8f
2 changed files with 32 additions and 20 deletions

View File

@@ -73,7 +73,7 @@
}
.cart-box { position: absolute; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
.cart-img { width: 96rpx; height: 96rpx; position: relative; margin-top: -48rpx; }
.pay-btn { height: 100%; padding: 0 30rpx; color: #FFFFFF; border-radius: 0 50rpx 50rpx 0; display: flex; align-items: center; font-size: 28rpx; }
.mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;

View File

@@ -41,7 +41,7 @@
</view>
</view>
<view class="content">
<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
<scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
<view class="wrapper">
<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus"
:key="index" @tap="handleMenuTap(item.id)">
@@ -50,14 +50,11 @@
</view>
</view>
</scroll-view>
<!-- goods list begin -->
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll">
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
<view class="wrapper">
<view class="list">
<!-- category begin -->
<view class="category" v-for="(good, key) in goodsList" :key="key" :id="`cate-${item.id}`">
<view class="items">
<!-- 商品 begin -->
<view class="good">
<image :src="good.images" class="image" @tap="goGoodsDetail(item.id)"></image>
<view class="right">
@@ -74,10 +71,8 @@
</view>
</view>
</view>
<!-- 商品 end -->
</view>
</view>
<!-- category end -->
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
</view>
</view>
@@ -85,16 +80,7 @@
</scroll-view>
<!-- goods list end -->
</view>
<!-- 购物车栏 begin -->
<view class="cart-box">
<view class="mark">
<image src="https://files.cdn.coreshop.cn/static/template/diancan/images/cart.png" class="cart-img"></image>
<view class="tag">{{cartNums}}</view>
</view>
<view class="price">{{cartMoney}}</view>
<button type="primary" class="pay-btn" @tap="redirectCart" :disabled="cartNums<=0">去结算</button>
</view>
<!-- 购物车栏 end -->
</view>
<vk-data-goods-sku-popup ref="skuPopup"
@@ -107,6 +93,17 @@
@close="onCloseSkuPopup"
@add-cart="addCart"
@buy-now="buyNow"></vk-data-goods-sku-popup>
<!-- 购物车栏 begin -->
<view class="cart-box">
<view class="mark">
<image src="https://files.cdn.coreshop.cn/static/template/diancan/images/cart.png" class="cart-img"></image>
<view class="tag">{{cartNums}}</view>
</view>
<view class="price">{{cartMoney}}</view>
<button type="primary" class="pay-btn" @tap="redirectCart" :disabled="cartNums<=0">去结算</button>
</view>
<!-- 购物车栏 end -->
<!-- 登录提示 -->
<coreshop-login-modal></coreshop-login-modal>
</view>
@@ -123,7 +120,6 @@
menuScrollIntoView: '',
good: {},
currentCateId: 0,//默认分类
scrollTop: 0,
loadStatus: 'loadmore',
loadIconType: 'flower',
loadText: {
@@ -141,6 +137,9 @@
skuMode: 1,
// 后端返回的商品信息
goodsSkuInfo: {},
headerH: 0,
scorllH: 0, //滚动区域全屏
}
},
computed: {
@@ -166,6 +165,20 @@
},
},
onShow() {
uni.getSystemInfo({
success: (e) => {
// #ifndef MP
this.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
this.headerH = e.statusBarHeight + 50;
} else {
this.headerH = e.statusBarHeight + 45;
};
// #endif
this.scorllH = e.windowHeight - e.statusBarHeight - 180;
}
})
this.categories();
// 获取购物车数量
this.getCartNums();
@@ -315,7 +328,6 @@
this.page = 1;
this.goodsList = [];
this.getGoods();
//this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
},
categories() {
this.$u.api.categories().then(res => {