xiaoxin пре 3 недеља
родитељ
комит
4e9a8faa6a
3 измењених фајлова са 54 додато и 10 уклоњено
  1. 15 0
      .workbuddy/memory/2026-06-02.md
  2. 23 10
      pages/index/index.vue
  3. 16 0
      pages/index/shopList/index.vue

+ 15 - 0
.workbuddy/memory/2026-06-02.md

@@ -0,0 +1,15 @@
+# 2026-06-02
+
+## 修复首页商品分类金刚区在个别手机上排3行的问题
+
+**问题**:`pages/index/index.vue` 中使用 `u-grid :col="5"` 布局商品分类,在某些手机上本应显示2行却变成了3行。
+
+**根因**:
+1. `.grid-text` 没有 `white-space: nowrap`,文字在小屏手机上换行导致格子高度不一致
+2. `u-grid-item` 默认 padding `30rpx 0` 偏大,叠加图片+文字后总高度较高
+3. 小屏手机上5列宽度被 `padding-lr` 占去后,每列实际宽度紧张
+
+**修复方案**:
+- 给 `.grid-text` 增加 `white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;` 强制单行显示
+- 通过 `:custom-style="{padding:'20rpx 0'}"` 将 grid-item 的内部 padding 从 30rpx 减小到 20rpx
+- 给图片添加 `flex-shrink:0` 防止图片被压缩

+ 23 - 10
pages/index/index.vue

@@ -28,15 +28,15 @@
 					</swiper>
 				</view>
 
-				<view class="padding-lr radius" v-if="XCXIsSelect == '是'">
-					<u-grid :col="5" :border="false">
-						<u-grid-item v-for="(item,index) in gridData" :key='index' @tap="goDetail(item)">
-							<image :src="item.imageUrl" style="width: 92rpx;height: 92rpx;border-radius: 92rpx;">
-							</image>
-							<view class="grid-text margin-top-sm">{{item.name}}</view>
-						</u-grid-item>
-					</u-grid>
-				</view>
+			<view class="padding-lr radius" v-if="XCXIsSelect == '是'">
+				<u-grid :col="5" :border="false">
+					<u-grid-item v-for="(item,index) in gridData" :key='index' @tap="goDetail(item)" :custom-style="{padding:'20rpx 0'}">
+						<image :src="item.imageUrl" style="width: 92rpx;height: 92rpx;border-radius: 92rpx;flex-shrink:0;">
+						</image>
+						<view class="grid-text margin-top-sm">{{item.name}}</view>
+					</u-grid-item>
+				</u-grid>
+			</view>
 			</view>
 			<view class="padding-lr" @click="natiVip">
 				<image class="radius" style="width: 100%;height: 280rpx;" src="https://mxys.chuanghai-tech.com/wmfile/20251128/aa2e9bf9a4e04b758090007ac04cea44.jpg"></image>
@@ -225,7 +225,7 @@
 										<text style="margin-left: 3px;">|</text>
 										<text style="margin-left: 3px;">满{{it.minMoney}}减{{it.money}}</text>
 									</view>
-									<view class="lable flex justify-center align-center cook" @click.stop="goCook(item)">
+									<view v-if="item.isMclz == 1" class="lable flex justify-center align-center cook" @click.stop="goCook(item)">
 										明厨亮灶>
 									</view>
 								</view>
@@ -1828,6 +1828,19 @@
 
 
 
+	.grid-text {
+		font-size: 22rpx;
+		color: #333333;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		width: 100%;
+		padding: 0 4rpx;
+		box-sizing: border-box;
+		line-height: 1.4;
+	}
+
 	.lable {
 		border: 1rpx solid #FFE6D9;
 		height: 40rpx;

+ 16 - 0
pages/index/shopList/index.vue

@@ -99,6 +99,9 @@
 											<text style="margin-left: 3px;">|</text>
 											<text style="margin-left: 3px;">满{{it.minMoney}}减{{it.money}}</text>
 										</view>
+										<view v-if="item.isMclz == 1" class="lable flex justify-center align-center cook" @click.stop="goCook(item)">
+											明厨亮灶>
+										</view>
 										<!-- <view class="lable flex justify-center align-center" v-if="item.couponList" style="border-radius: 4rpx;border: 1rpx solid red;background-color: #ffffff;color: red;box-sizing: border-box;" v-for="(it,ide) in item.couponList" :key="ide">满{{it.minMoney}}减{{it.money}}</view> -->
 									</view>
 								</view>
@@ -467,6 +470,13 @@
 					})
 				}
 			},
+			// 跳转厨房监控页面
+			goCook(item){
+				// console.log(item.shopName);
+				uni.navigateTo({
+					url:`/running/cook/cook?shopName=${item.shopName}`
+				})
+			}
 		},
 		onReachBottom: function() {
 			if (this.shopList.length < this.totalCount) {
@@ -639,4 +649,10 @@
 		margin-right: 10rpx;
 		margin-bottom: 10rpx;
 	}
+	
+	.cook{
+		color: #2B7924;
+		border: none;
+		background-color: #F0FCE6;
+	}
 </style>