From b7ce92d35fde3704297163010c320e336a5dd681 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 13 一月 2026 10:17:16 +0800
Subject: [PATCH] 页面调整优化
---
pages/kitchen/KitchenCustomize.vue | 54 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 35 insertions(+), 19 deletions(-)
diff --git a/pages/kitchen/KitchenCustomize.vue b/pages/kitchen/KitchenCustomize.vue
index 6aceca8..42f2fbf 100644
--- a/pages/kitchen/KitchenCustomize.vue
+++ b/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>
--
Gitblit v1.8.0