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) {

184
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>
@ -46,8 +46,8 @@
<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 v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
<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,109 +97,113 @@
<!-- 右下阴影 -->
<view class="boxshadow2" v-if="cateListShow"></view>
<view class="CateInfo" v-for="item in tagList" :key="item.id">
<view class="CateInfo_tit">
{{ item.tag_name }}
</view>
<view class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
<view class="CateInfo_Item_Box">
<view class="CateInfo_Item_left" @click="goods(items)">
<view class="tag tag-img" v-if="
!items.commodity_goods_info_list[1] &&
items.commodity_goods_info_list[0].is_same_day
">当日达</view>
<image :src="picUrl + items.commodity_pic" mode="aspectFill"></image>
</view>
<view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
<view class="CateInfo_Item_right_Tit" @click="goods(items)">
<view class="tag tag-text" v-if="
<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>
<view class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
<view class="CateInfo_Item_Box">
<view class="CateInfo_Item_left" @click="goods(items)">
<view class="tag tag-img" v-if="
!items.commodity_goods_info_list[1] &&
items.commodity_goods_info_list[0].is_same_day
">当日达</view>
{{ items.commodity_name }}
<image :src="picUrl + items.commodity_pic" mode="aspectFill"></image>
</view>
<view class="CateInfo_Item_right_subtit" @click="goods(items)">
{{ items.commodity_intro }}
</view>
<view class="CateInfo_Item_Money">
<view class="CateInfo_Item_Money_left">
{{ getPriceRange(items.commodity_goods_info_list) }}
<view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
<view class="CateInfo_Item_right_Tit" @click="goods(items)">
<view class="tag tag-text" v-if="
!items.commodity_goods_info_list[1] &&
items.commodity_goods_info_list[0].is_same_day
">当日达</view>
{{ items.commodity_name }}
</view>
<view class="CateInfo_Item_Money_right" v-if="!(items.commodity_goods_info_list.length > 1)">
<u-number-box :min="0" v-model="items.commodity_goods_info_list[0].quantity"
@change="(value) => handleQuantityChange(value, items)">
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px; text-align: center" class="input">{{
items.commodity_goods_info_list[0].quantity
? items.commodity_goods_info_list[0].quantity
: 0
}}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view>
</u-number-box>
<view class="CateInfo_Item_right_subtit" @click="goods(items)">
{{ items.commodity_intro }}
</view>
</view>
<view class="gg" @click="chooseGG(items)" v-if="
items.commodity_goods_info_list.length > 1 && !items.isShow
">
选择规格
<u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
</view>
<view class="gg" @click="chooseGG(items)" v-if="
items.commodity_goods_info_list.length > 1 && items.isShow
">
收起
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
</view>
</view>
</view>
<view class="GGList" v-if="items.isShow">
<view class="GGItem" v-for="ite in items.commodity_goods_info_list" :key="ite.id" @click="goods(items)">
<view class="GGItem_Image">
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
<image :src="picUrl + ite.commodity_pic" mode="aspectFill"></image>
</view>
<view class="GGItem_Con">
<view class="GGItem_Con_Tit">
<view class="tag tag-text" v-if="ite.is_same_day">当日达</view>
{{ ite.goods_name }}
</view>
<view class="GGItem_Con_Msg">
<view class="GGItem_Con_Msg_left">
<span>￥</span>{{ ite.sales_price }}
<view class="CateInfo_Item_Money">
<view class="CateInfo_Item_Money_left">
{{ getPriceRange(items.commodity_goods_info_list) }}
</view>
<view class="GGItem_Con_Msg_right">
<u-number-box v-model="ite.quantity" :min="0"
@change="(value) => handleQuantityChange(value, ite)">
<view class="CateInfo_Item_Money_right" v-if="!(items.commodity_goods_info_list.length > 1)">
<u-number-box :min="0" v-model="items.commodity_goods_info_list[0].quantity"
@change="(value) => handleQuantityChange(value, items)">
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px; text-align: center" class="input">{{ ite.quantity ?
ite.quantity : 0 }}</text>
<text slot="input" style="width: 50px; text-align: center" class="input">{{
items.commodity_goods_info_list[0].quantity
? items.commodity_goods_info_list[0].quantity
: 0
}}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view>
</u-number-box>
</view>
</view>
<view class="gg" @click="chooseGG(items)" v-if="
items.commodity_goods_info_list.length > 1 && !items.isShow
">
选择规格
<u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
</view>
<view class="gg" @click="chooseGG(items)" v-if="
items.commodity_goods_info_list.length > 1 && items.isShow
">
收起
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
</view>
</view>
</view>
<view class="GGList" v-if="items.isShow">
<view class="GGItem" v-for="ite in items.commodity_goods_info_list" :key="ite.id" @click="goods(items)">
<view class="GGItem_Image">
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
<image :src="picUrl + ite.commodity_pic" mode="aspectFill"></image>
</view>
<view class="GGItem_Con">
<view class="GGItem_Con_Tit">
<view class="tag tag-text" v-if="ite.is_same_day">当日达</view>
{{ ite.goods_name }}
</view>
<view class="GGItem_Con_Msg">
<view class="GGItem_Con_Msg_left">
<span>￥</span>{{ ite.sales_price }}
</view>
<view class="GGItem_Con_Msg_right">
<u-number-box v-model="ite.quantity" :min="0"
@change="(value) => handleQuantityChange(value, ite)">
<view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon>
</view>
<text slot="input" style="width: 50px; text-align: center" class="input">{{ ite.quantity ?
ite.quantity : 0 }}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view>
</u-number-box>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 按钮 -->
<!-- <view class="btn">
<!-- 按钮 -->
<!-- <view class="btn">
查看全部商品
<view class="cir">
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
</view>
</view> -->
</view>
</view>
</view>
</view>
@ -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';
});
},