页面调整优化

zxl

昨天 b7ce92d35fde3704297163010c320e336a5dd681

 pages/kitchen/KitchenCustomize.vue

@@ -1,6 +1,7 @@
<template>
    <view class="page">
        <top-bar selectedTitleIndex="kitchenCustomize" textColor="black" bgColor="#ffffff" @changeTab="topBarChange"></top-bar>
        <top-bar selectedTitleIndex="kitchenCustomize" textColor="black" bgColor="#ffffff"
            @changeTab="topBarChange"></top-bar>
        <view class="banner">
            <image class="banner-img" :src="banner" mode="aspectFill"></image>
        </view>
@@ -8,7 +9,7 @@
            <scroll-view class="tags-scroll" scroll-x="true" :show-scrollbar="false">
                <view class="tags">
                    <view v-for="tag in tags" :key="tag.value" class="tag" :class="{ active: tag.selected }"
                        @click="toggleTag(tag)">
                        :style="{ width: tags.length <= 4 ? (100 / tags.length) + '%' : '25%' }" @click="toggleTag(tag)">
                        <text>{{ tag.label }}</text>
                    </view>
                </view>
@@ -100,8 +101,10 @@
        async initData() {
            await getKitchenBanner().then(res => {
                if (res.statusCode === 200) {
                    this.banner = res.data.data[0].coverUrl;
                    console.log(res)
                    if (res.data.data.length > 0) {
                        this.banner = res.data.data[0].coverUrl;
                    }

                }
            });
            await getKitchenTag().then(res => {
@@ -117,8 +120,13 @@
                    }
                }
            });
            this.queryParams.tagId = this.tags[0].value;
            this.getProductList();
            if (this.tags.length > 0) {
                this.queryParams.tagId = this.tags[0].value;
                this.getProductList();
            } else {
                console.warn('标签数据为空，不请求商品列表');
                this.products = []; // 清空商品列表，避免旧数据残留
            }

        },
        getProductList() {
@@ -132,7 +140,7 @@
                    } else {
                        this.products = this.products.concat(newList);
                    }
                    

                    // 判断是否还有更多数据
                    if (newList.length < this.queryParams.pageSize) {
                        this.loadStatus = 'noMore';
@@ -154,13 +162,13 @@
            this.tags.forEach(t => {
                t.selected = (t.value === tag.value);
            });
            

            // 重置分页参数
            this.queryParams.tagId = tag.value;
            this.queryParams.pageNumber = 1;
            this.products = [];
            this.loadStatus = 'more';
            

            // 重新获得商品
            this.getProductList();
        },
@@ -210,7 +218,7 @@
}

.content {
    padding: 24rpx;
    padding: 0 24rpx 0 24rpx;
}

.tags-scroll {
@@ -222,20 +230,22 @@
    display: flex;
    flex-wrap: nowrap;
    padding: 10rpx 0;
    width: 100%;
}

.tag {
    height: 80rpx;
    display: inline-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: black;
    border: 1rpx solid #e5e5e5;
    border-radius: 25rpx 25rpx 0 0; 
    border-radius: 25rpx 25rpx 0 0;
    background-color: #f7f7f7;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.tag.active {
@@ -267,11 +277,11 @@

.product-info {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    align-items: flex-end;
    justify-content: space-between;
    overflow: hidden; // 确保子元素溢出隐藏
    margin-top: 10rpx;
}

.product-top {
@@ -318,21 +328,26 @@
}

.product-orign-price {
    font-size:24rpx;
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

.product-price {
    color: #ff573e;
    display: flex;
    align-items: flex-end;

    .symbol {
        font-size: 24rpx;
        line-height: 1.2; // 稍微调整行高以对齐
        margin-bottom: 6rpx; // 符号通常较小，手动微调使其看起来更贴合底部
    }

    .value {
        font-size: 50rpx;
        font-weight: bold;
        line-height: 1;
    }
}

@@ -357,10 +372,11 @@
    color: #999;
    font-size: 24rpx;
}

.topBar {
   position: fixed;
   top: 20rpx;
   left: 20rpx;
   z-index: 1000
    position: fixed;
    top: 20rpx;
    left: 20rpx;
    z-index: 1000
}
</style>