修改易购页面的页面样式和点击选中逻辑
This commit is contained in:
赵毅
parent
6d0a011836
commit
fe34a9e81f
@ -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) {
|
||||
|
||||
@ -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';
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user