maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改易购页面的页面样式和点击选中逻辑

Browse Source
This commit is contained in:
赵毅 2025-09-02 11:01:27 +08:00
parent 6d0a011836
commit fe34a9e81f
2 changed files with 115 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/shop/index/index.css
View File

@ -106,7 +106,7 @@ page {
white-space: nowrap;
}
.slide_item_active{
.slide_item_active text{
color: #ff5f3c;
}
@ -315,11 +315,14 @@ page {
}
.CateList_Box {
width: 71.5%;
display: flex;
overflow: hidden;
position: relative;
z-index: 9;
/* position: relative; */
position: fixed;
z-index: 999;
padding: 20rpx 10rpx;
background-color: #ffffff;
}
.CateList {
@ -337,7 +340,7 @@ page {
height: 40rpx;
background: #F6F7FB;
border-radius: 10rpx 10rpx 10rpx 10rpx;
padding: 5rpx 30rpx;
padding: 5rpx 20rpx;
font-size: 26rpx;
color: #222222;
display: flex;
@ -364,6 +367,10 @@ page {
margin-left: 10rpx;
}
.CateIte{
margin-top: 80rpx;
}
.CateInfo {
margin: 0 10rpx;
padding: 10rpx 10rpx;
@ -435,13 +442,14 @@ page {
padding: 20rpx 12rpx;
padding-right: 0;
position: absolute;
top: 85rpx;
z-index: 9;
width: 100%;
}
.activeCateList .CateList_Item {
margin-bottom: 16rpx;
margin-right: 28rpx;
margin-right: 20rpx;
}
.activeCateList .CateList_Item:nth-child(4n) {

28
packages/shop/index/index.vue
View File

@ -16,7 +16,7 @@
<view class="slide">
<view class="slide_con">
<view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
<view class="slide_item">
<view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.category_name }}</text>
</view>
@ -47,7 +47,7 @@
<view class="slide">
<view class="slide_con">
<view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
<view class="slide_item">
<view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
<image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.category_name }}</text>
</view>
@ -97,7 +97,10 @@
<!-- 右下阴影 -->
<view class="boxshadow2" v-if="cateListShow"></view>
<view class="CateInfo" v-for="item in tagList" :key="item.id">
<view class="CateIte">
<view class="CateInfo"
v-for="item in (selectedTagId === 'all' ? tagList.slice(1) : [tagList.find(t => t.id === selectedTagId) || {}])"
:key="item.id">
<view class="CateInfo_tit">
{{ item.tag_name }}
</view>
@ -203,6 +206,7 @@
</view>
</view>
</view>
</view>
<!-- <nav-footer :current="3" /> -->
@ -275,8 +279,11 @@ export default {
rightTopActive: 0,
currentLeftCateId: null,
topShow: false,
currentCategoryId: null,
GGshow: false,
originalTagList: [], // 存储原始的tagList数据
selectedTagId: null, // 当前选中的标签ID
CateList: [], //分类列表
currentFirstId: "",
leftCateList: [], //底部左侧分类
@ -321,6 +328,8 @@ export default {
},
changeCate(id) {
// 更新当前选中的顶级分类ID
this.currentCategoryId = id;
// 根据id查找对应的分类
const category = this.CateList.find((item) => item.id === id);
if (category) {
@ -344,6 +353,8 @@ export default {
//选择右下角分类
checkItem(index) {
this.rightTopActive = index;
// 获取选中的标签ID
this.selectedTagId = this.tagList[index].id;
},
//右下角点击更多
topOpen() {
@ -374,6 +385,8 @@ export default {
console.log(res);
this.CateList = res.commodity_category_list;
this.firstId = res.commodity_category_list[0].id;
// 设置默认选中第一个分类
this.currentCategoryId = this.firstId;
this.leftCateList =
res.commodity_category_list[0].level_two_category || [];
if (this.leftCateList.length > 0) {
@ -390,6 +403,7 @@ export default {
getGoodsList() {
if (!this.secondId) {
this.tagList = [];
this.originalTagList = [];
return;
}
request(apiArr.getGoodsList, "POST", {
@ -410,7 +424,13 @@ export default {
item.isShow = false;
});
});
this.tagList = res.commodity_list;
// 保存原始数据
this.originalTagList = res.commodity_list;
// 添加"全部"选项并设置为默认选中
this.tagList = [{ id: 'all', tag_name: '全部' }, ...res.commodity_list];
// 默认选中"全部"选项
this.rightTopActive = 0;
this.selectedTagId = 'all';
});
},