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

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

@ -16,7 +16,7 @@
<view class="slide"> <view class="slide">
<view class="slide_con"> <view class="slide_con">
<view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)"> <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> <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.category_name }}</text> <text>{{ item.category_name }}</text>
</view> </view>
@ -46,8 +46,8 @@
<view class="slide"> <view class="slide">
<view class="slide_con"> <view class="slide_con">
<view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)"> <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> <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
<text>{{ item.category_name }}</text> <text>{{ item.category_name }}</text>
</view> </view>
@ -97,109 +97,113 @@
<!-- 右下阴影 --> <!-- 右下阴影 -->
<view class="boxshadow2" v-if="cateListShow"></view> <view class="boxshadow2" v-if="cateListShow"></view>
<view class="CateInfo" v-for="item in tagList" :key="item.id"> <view class="CateIte">
<view class="CateInfo_tit"> <view class="CateInfo"
{{ item.tag_name }} v-for="item in (selectedTagId === 'all' ? tagList.slice(1) : [tagList.find(t => t.id === selectedTagId) || {}])"
</view> :key="item.id">
<view class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id"> <view class="CateInfo_tit">
<view class="CateInfo_Item_Box"> {{ item.tag_name }}
<view class="CateInfo_Item_left" @click="goods(items)"> </view>
<view class="tag tag-img" v-if=" <view class="CateInfo_Item" v-for="items in item.commodity_info_list" :key="items.id">
!items.commodity_goods_info_list[1] && <view class="CateInfo_Item_Box">
items.commodity_goods_info_list[0].is_same_day <view class="CateInfo_Item_left" @click="goods(items)">
">当日达</view> <view class="tag tag-img" v-if="
<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="
!items.commodity_goods_info_list[1] && !items.commodity_goods_info_list[1] &&
items.commodity_goods_info_list[0].is_same_day items.commodity_goods_info_list[0].is_same_day
">当日达</view> ">当日达</view>
{{ items.commodity_name }} <image :src="picUrl + items.commodity_pic" mode="aspectFill"></image>
</view> </view>
<view class="CateInfo_Item_right_subtit" @click="goods(items)"> <view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
{{ items.commodity_intro }} <view class="CateInfo_Item_right_Tit" @click="goods(items)">
</view> <view class="tag tag-text" v-if="
<view class="CateInfo_Item_Money"> !items.commodity_goods_info_list[1] &&
<view class="CateInfo_Item_Money_left"> items.commodity_goods_info_list[0].is_same_day
{{ getPriceRange(items.commodity_goods_info_list) }} ">当日达</view>
{{ items.commodity_name }}
</view> </view>
<view class="CateInfo_Item_Money_right" v-if="!(items.commodity_goods_info_list.length > 1)"> <view class="CateInfo_Item_right_subtit" @click="goods(items)">
<u-number-box :min="0" v-model="items.commodity_goods_info_list[0].quantity" {{ items.commodity_intro }}
@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> </view>
</view> <view class="CateInfo_Item_Money">
<view class="CateInfo_Item_Money_left">
<view class="gg" @click="chooseGG(items)" v-if=" {{ getPriceRange(items.commodity_goods_info_list) }}
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>
<view class="GGItem_Con_Msg_right"> <view class="CateInfo_Item_Money_right" v-if="!(items.commodity_goods_info_list.length > 1)">
<u-number-box v-model="ite.quantity" :min="0" <u-number-box :min="0" v-model="items.commodity_goods_info_list[0].quantity"
@change="(value) => handleQuantityChange(value, ite)"> @change="(value) => handleQuantityChange(value, items)">
<view slot="minus" class="minus"> <view slot="minus" class="minus">
<u-icon name="minus" size="20"></u-icon> <u-icon name="minus" size="20"></u-icon>
</view> </view>
<text slot="input" style="width: 50px; text-align: center" class="input">{{ ite.quantity ? <text slot="input" style="width: 50px; text-align: center" class="input">{{
ite.quantity : 0 }}</text> items.commodity_goods_info_list[0].quantity
? items.commodity_goods_info_list[0].quantity
: 0
}}</text>
<view slot="plus" class="plus"> <view slot="plus" class="plus">
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon> <u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
</view> </view>
</u-number-box> </u-number-box>
</view> </view>
</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> </view>
</view>
<!-- 按钮 --> <!-- 按钮 -->
<!-- <view class="btn"> <!-- <view class="btn">
查看全部商品 查看全部商品
<view class="cir"> <view class="cir">
<u-icon name="arrow-right" color="#fff" size="12px"></u-icon> <u-icon name="arrow-right" color="#fff" size="12px"></u-icon>
</view> </view>
</view> --> </view> -->
</view>
</view> </view>
</view> </view>
</view> </view>
@ -275,8 +279,11 @@ export default {
rightTopActive: 0, rightTopActive: 0,
currentLeftCateId: null, currentLeftCateId: null,
topShow: false, topShow: false,
currentCategoryId: null,
GGshow: false, GGshow: false,
originalTagList: [], // 存储原始的tagList数据
selectedTagId: null, // 当前选中的标签ID
CateList: [], //分类列表 CateList: [], //分类列表
currentFirstId: "", currentFirstId: "",
leftCateList: [], //底部左侧分类 leftCateList: [], //底部左侧分类
@ -321,6 +328,8 @@ export default {
}, },
changeCate(id) { changeCate(id) {
// 更新当前选中的顶级分类ID
this.currentCategoryId = id;
// 根据id查找对应的分类 // 根据id查找对应的分类
const category = this.CateList.find((item) => item.id === id); const category = this.CateList.find((item) => item.id === id);
if (category) { if (category) {
@ -344,6 +353,8 @@ export default {
//选择右下角分类 //选择右下角分类
checkItem(index) { checkItem(index) {
this.rightTopActive = index; this.rightTopActive = index;
// 获取选中的标签ID
this.selectedTagId = this.tagList[index].id;
}, },
//右下角点击更多 //右下角点击更多
topOpen() { topOpen() {
@ -374,6 +385,8 @@ export default {
console.log(res); console.log(res);
this.CateList = res.commodity_category_list; this.CateList = res.commodity_category_list;
this.firstId = res.commodity_category_list[0].id; this.firstId = res.commodity_category_list[0].id;
// 设置默认选中第一个分类
this.currentCategoryId = this.firstId;
this.leftCateList = this.leftCateList =
res.commodity_category_list[0].level_two_category || []; res.commodity_category_list[0].level_two_category || [];
if (this.leftCateList.length > 0) { if (this.leftCateList.length > 0) {
@ -390,6 +403,7 @@ export default {
getGoodsList() { getGoodsList() {
if (!this.secondId) { if (!this.secondId) {
this.tagList = []; this.tagList = [];
this.originalTagList = [];
return; return;
} }
request(apiArr.getGoodsList, "POST", { request(apiArr.getGoodsList, "POST", {
@ -410,7 +424,13 @@ export default {
item.isShow = false; 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';
}); });
}, },