charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：优化分类

Browse Source
This commit is contained in:
charles
2026-07-24 09:48:31 +08:00
parent 1a493b4faf
commit 22a8f279f7
4 changed files with 129 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/choiceness/choiceness.vue
+5
View File
@@ -7,8 +7,10 @@
</view>
<view class="choiceness_product" :class="platformType ? '' : 'iosplatformType'">
<view v-for="item in productList" :key="item.id" class="choiceness_product_item" @click="jumpInfo(item)">
<view>
<up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
<view class="product_item_name">{{ item.title }}</view>
</view>
<view class="product_item_price">
<view class="price_">
<text>￥</text>
@@ -101,6 +103,9 @@ export default {
width: 43%;
margin-bottom: 20rpx;
padding: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product_item_name {
pages/home/home.vue
+16 -8
View File
@@ -4,9 +4,8 @@
<view class="home_content_z_warp">
<view class="home_header_warp" :style="mpHeaderWarpStyle">
<view class="header_title_warp" :style="mpHeaderStyle">
<view class="language_warp" :style="mpLanguageStyle" style="flex: 1; justify-content: flex-start;"
@click="jumpSearch">
<view :style="isMP ? 'display: flex; align-items: center;' : 'margin-top: 10rpx;'">
<view class="language_warp" style="flex: 1; justify-content: flex-start;" @click="jumpSearch">
<view :style="isMP ? 'display: flex; align-items: center;margin-top: 10rpx;' : 'margin-top: 10rpx;'">
<up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20"
bgColor="#f1f6ff00"></up-image>
</view>
@@ -202,8 +201,8 @@
<view class="uni-banner-news">
<view class="close_btn" @click="newsShow = false"></view>
<view class="banner_box">
<view class="banner_box-title">{{ newsList[0].title }}</view>
<view class="banner_box-subTitle">{{ newsList[0].subTitle }}</view>
<view class="banner_box-title">{{ newsList[0]?.title }}</view>
<view class="banner_box-subTitle">{{ newsList[0]?.subTitle }}</view>
<view class="banner_box-btn" @click="jumpNewSearch">查看</view>
</view>
</view>
@@ -765,8 +764,17 @@ export default {
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
padding: calc(var(--status-bar-height) + 20rpx) 30rpx 20rpx;
box-sizing: border-box;
/* 消除 fixed 定位与下方重叠层之间的 1px GPU 子像素渲染缝隙（白线） */
box-shadow: 0 2rpx 0 #9336df;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
pointer-events: none;
}
}
.header_right_warp {
@@ -783,7 +791,7 @@ export default {
padding: 10rpx 20rpx;
background: #ffffff30;
border-radius: 24rpx;
background: linear-gradient(270deg, #ae39c5, #7932fe) 2 2;
// background: linear-gradient(270deg, #ae39c5, #7932fe);
}
.chart_img {
pages/rwa_package/dongjian/search.vue
+5
View File
@@ -227,6 +227,11 @@ export default {
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
/* #ifdef MP-WEIXIN */
padding-top: 80rpx !important;
height: auto !important;
min-height: calc(118rpx + 80rpx) !important;
/* #endif */
.search-box {
width: 100%;
pages/sort/sort.vue
+93 -43
View File
@@ -32,9 +32,9 @@
</view>
</scroll-view>
<!-- 商品类别数据 -->
<scroll-view scroll-y class="right-box">
<scroll-view scroll-y class="right-box" :scroll-top="rightScrollTop">
<!-- banner图 -->
<view style="padding: 0rpx 20rpx">
<view style="padding: 0rpx 20rpx" v-if="bannerList && bannerList.length > 0">
<up-swiper :list="bannerList" height="80px"></up-swiper>
</view>
<view class="page-view">
@@ -46,7 +46,8 @@
</view>
<view class="item-container" v-if="item.foods && item.foods.length !== 0">
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="jumpInfo(item1)">
<image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'" mode="">
<image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'"
mode="aspectFill">
</image>
<view class="item-menu-name">{{ item1.name }}</view>
</view>
@@ -78,6 +79,7 @@ export default {
return {
selCategory: 1,
scrollTop: 0, //tab标题的滚动条位置
rightScrollTop: 0, // 右侧内容的滚动条位置
current: null, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
@@ -86,6 +88,7 @@ export default {
tabbarContentList: [], // 右侧内容的分类
tabbarContentLoading: false,
platformType: true,
isFromSortShop: false,
};
},
@@ -97,28 +100,38 @@ export default {
const appUpdate = uni.getStorageSync("platform");
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
/*#endif*/
const then = this;
const isBackFromSortShop = this.isFromSortShop;
this.isFromSortShop = false;
this.getSort(0).then((resp) => {
if (resp && resp.length !== 0) {
this.tabbarList = resp;
let targetIndex = 0;
let fData = resp[0];
if (isBackFromSortShop) {
const sortId = uni.getStorageSync("sortId");
// 如果有默认的参数就默认选中参数
if (sortId && sortId !== 0) {
let fData = {};
let currentIndex = 0;
resp.map((item, index) => {
resp.forEach((item, index) => {
if (item.id === sortId) {
fData = item;
currentIndex = index;
return;
targetIndex = index;
}
});
this.swichMenu(fData, currentIndex);
} else {
const fData = resp[0];
// 否则就选中第一个
this.swichMenu(fData, 0);
} else if (this.current !== null && this.current >= 0 && this.current < resp.length) {
targetIndex = this.current;
fData = resp[targetIndex];
}
} else {
uni.removeStorageSync("sortId");
this.current = 0;
this.scrollTop = 0;
targetIndex = 0;
fData = resp[0];
}
this.swichMenu(fData, targetIndex, true);
}
});
this.getCarouselImage();
@@ -146,6 +159,7 @@ export default {
},
jumpInfo(item) {
console.log(item, "item");
this.isFromSortShop = true;
// uni.navigateTo({
// url: `/pages/other_package/productInfo/productInfo?id=${item.id}`,
// })
@@ -170,9 +184,13 @@ export default {
return Math.floor(Math.random() * 35);
},
// 点击左边的栏目切换
async swichMenu(item, index) {
async swichMenu(item, index, force = false) {
console.log('点击左边的栏目切换', item, index, "item, index");
if (index == this.current) return;
if (!force && index == this.current && this.tabbarContentList.length > 0) return;
if (item && item.id) {
uni.setStorageSync("sortId", item.id);
}
this.rightScrollTop = 0;
this.tabbarContentLoading = true;
const firstData = await this.getSort(item.id);
for (let fItem of firstData) {
@@ -186,7 +204,7 @@ export default {
await this.getElRect("menu-scroll-view", "menuHeight");
await this.getElRect("u-tab-item", "menuItemHeight");
}
// 将菜单菜单活动item垂直居中
// 将菜单活动item垂直居中
this.scrollTop =
index * this.menuItemHeight +
this.menuItemHeight / 2 -
@@ -196,19 +214,19 @@ export default {
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
return new Promise((resolve) => {
const query = uni.createSelectorQuery().in(this);
query
.select("." + elClass)
.fields({ size: true }, (res) => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
this.getElRect(elClass, dataVal).then(resolve);
}, 10);
return;
}
this[dataVal] = res.height;
resolve(res);
})
.exec();
});
@@ -232,26 +250,35 @@ export default {
</script>
<style lang="scss" scoped>
page {
height: 100%;
overflow: hidden;
}
.sort_warp {
padding-top: env(safe-area-inset-top);
height: calc(100vh - env(safe-area-inset-bottom) - 50rpx);
height: 100vh;
/* #ifdef H5 */
height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
/* #endif */
display: flex;
flex-direction: column;
overflow-y: auto;
&.iosplatformType {
.right-box {
padding-bottom: 100rpx !important;
}
}
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
.sort_header {
display: flex;
justify-content: space-between;
padding: 0 30rpx;
align-items: center;
padding: 20rpx 30rpx 10rpx;
flex-shrink: 0;
background-color: #fff;
z-index: 10;
/* #ifdef MP-WEIXIN */
margin-top: 80rpx;
/* #endif */
.sort_category_header {
display: flex;
@@ -263,7 +290,6 @@ export default {
}
.category_item {
width: 140rpx;
font-weight: bold;
font-size: 36rpx;
@@ -289,11 +315,12 @@ export default {
.u-menu-wrap {
flex: 1;
min-height: 0;
width: 100%;
display: flex;
// overflow: hidden;
// margin-top: 20rpx;
// height: calc(100vh - 216rpx - env(safe-area-inset-bottom));
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
flex-direction: row;
overflow: hidden;
margin-top: 10rpx;
}
.u-search-inner {
@@ -313,12 +340,22 @@ export default {
.u-tab-view {
width: 200rpx;
height: 100%;
flex-shrink: 0;
background: #f6f6f6;
overflow-y: auto;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
/* #ifdef APP-PLUS */
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
/* #endif */
/* #ifndef APP-PLUS */
padding-bottom: 0rpx;
/* #endif */
}
.u-tab-item {
height: 110rpx;
// background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
@@ -327,6 +364,8 @@ export default {
color: #444;
font-weight: 400;
line-height: 1;
padding: 0 10rpx;
text-align: center;
}
.u-tab-item-active {
@@ -346,13 +385,21 @@ export default {
top: 39rpx;
}
.u-tab-view {
height: 100%;
}
.right-box {
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
flex: 1;
min-width: 0;
height: 100%;
overflow-y: auto;
background-color: rgb(250, 250, 250);
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
/* #ifdef APP-PLUS */
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
/* #endif */
/* #ifndef APP-PLUS */
padding-bottom: 0rpx;
/* #endif */
}
.page-view {
@@ -381,6 +428,8 @@ export default {
font-size: 24rpx;
color: $u-main-color;
margin-top: 10rpx;
text-align: center;
word-break: break-all;
}
.item-container {
@@ -400,5 +449,6 @@ export default {
.item-menu-image {
width: 110rpx;
height: 110rpx;
border-radius: 8rpx;
}
</style>